import React from 'react';
import { graphql } from 'react-apollo';
import gql from 'graphql-tag';
import LikeButton from '../components/LikeButton';
import onlyIfAuthenticated from '../utils/onlyIfAuthenticated';

const LikeProjectMutation = gql`
  mutation PerformLike($appId: ID!) {
    likeApp(appId: $appId) {
      id
      name
      likeCount
      isLikedByMe
    }
  }
`;

const UnlikeProjectMutation = gql`
  mutation UndoLike($appId: ID!) {
    unlikeApp(appId: $appId) {
      id
      name
      likeCount
      isLikedByMe
    }
  }
`;

@onlyIfAuthenticated
@graphql(UnlikeProjectMutation, {name: 'unlikeMutation'})
@graphql(LikeProjectMutation, {name: 'likeMutation'})
export default class LikeButtonContainer extends React.Component {
  render() {
    return (
      <LikeButton
        style={this.props.style}
        liked={this.props.liked}
        onPress={this._handlePressAsync}
      />
    );
  }

  _handlePressAsync = async () => {
    try {
      let result;

      if (this.props.liked) {
        result = await this.unlikeAsync();
      } else {
        result = await this.likeAsync();
      }

      console.log({result, appId: this.props.appId});
    } catch(e) {
      console.log({e});
    }
  }

  likeAsync = async () => {
    return this.props.likeMutation({variables: {appId: this.props.appId}});
  }

  unlikeAsync  = async () => {
    return this.props.unlikeMutation({variables: {appId: this.props.appId}});
  }
}

@@ -20,16 +20,54 @@
 react';%0A
+import %7B Alert %7D from 'react-native';%0A
 import %7B
@@ -243,16 +243,67 @@
 icated';
+%0Aimport Connectivity from '../../Api/Connectivity';
 %0A%0Aconst 
@@ -1012,278 +1012,816 @@
 %0A  _
-handlePressAsync = async () =%3E %7B%0A    try %7B%0A      let result;%0A%0A      if (this.props.liked) %7B%0A        result = await this.unlikeAsync();%0A      %7D else %7B%0A        result = await this.likeAsync();%0A      %7D%0A%0A      console.log(%7Bresult, appId: this.props.appId%7D);%0A    %7D catch(e) %7B
+alertNoInternetConnection = (message = '') =%3E %7B%0A    Alert.alert(%0A      %22No internet connection available%22,%0A      message %7C%7C %22Please try again when you're back online%22%0A    );%0A  %7D%0A%0A  _handlePressAsync = async () =%3E %7B%0A    if (!(await Connectivity.isAvailableAsync())) %7B%0A      this._alertNoInternetConnection();%0A      return;%0A    %7D%0A%0A    let %7B liked %7D = this.props;%0A    let result;%0A%0A    try %7B%0A      if (liked) %7B%0A        result = await this.unlikeAsync();%0A      %7D else %7B%0A        result = await this.likeAsync();%0A      %7D%0A%0A      console.log(%7Bresult, appId: this.props.appId%7D);%0A    %7D catch(e) %7B%0A      if (liked) %7B%0A        this._alertNoInternetConnection(%22Unable to like the project, try again later.%22);%0A      %7D else %7B%0A        this._alertNoInternetConnection(%22Unable to unlike the project, try again later.%22);%0A      %7D%0A
 %0A   

Make like button aware of connectivity, not ideal