text: import React, { useState, useEffect } from "react";
  import { Link } from "react-router-dom";
  import { useMutation } from "@apollo/react-hooks";
  import gql from "graphql-tag";
  import { Button, Label, Icon } from "semantic-ui-react";
  
  import MyPopup from "../utils/MyPopups";
  
  
  function LikeButton({ user, post: { id, likeCount, likes } }){
      const [liked, setLiked] = useState(false);
      useEffect(() => {
          if(user && likes.find(like => like.username === user.username)){
              setLiked(true);
          } else setLiked(false)
      }, [user, likes]);
  
      const [likePost] = useMutation(LIKE_POST_MUTATION, {
          variables: { postId: id }
      });
  
      const LikeButton = user ? (
          liked ? (
              <Button color="red" basic>
                  <Icon name="heart" />
              </Button>
          ) : (
              <Button color="red" basic>
                  <Icon name="heart" />
              </Button>
          )
      ) : (
          <Button as={Link} to="/login" color="red" basic>
                  <Icon name="heart" />
              </Button>
      )
  
      return (
          <Button as='div' labelPosition='right' onClick={likePost}>
              <MyPopup
                content={liked ? "Unlike": "Like"}
              >
                  {LikeButton}
              </MyPopup>
              <Label basic color='red' pointing='left'>
                {likeCount}
              </Label>
          </Button>
      )
  }
  
  const LIKE_POST_MUTATION = gql`
      mutation likePost($postId: ID!){
          likePost(postId: $postId){
              id
              body
              username
              likes{
                  id
                  username
              }
              likeCount
          }
      }
  `
  
  export default LikeButton;
  
          