hipstagram/src/components/LikeBlock.js

import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder';
import FavoriteIcon from '@mui/icons-material/Favorite';
import {useEffect, useState} from "react";
import {connect} from "react-redux";
import styled from 'styled-components';
import {gqlAddLike, gqlDeleteLike} from "../shared/services&utilits/gqlRequest";
import ModalWindow from "./ModalWindow";
import UserList from "./UserList";

const LikesWrapper = styled.div`
  display: flex;
  align-items: center;
`
const TextStyled = styled.p`
  margin-left: 10px`

const UserListWrapper = styled.div`
  width: 30vw;
  height: 50vh;
  display: flex;
`

function LikeBlock({likes, ownerId, postId, updatePostData}) {

    const [isLiked, setIsLiked] = useState(false)
    const [isModal, setModal] = useState(false);

    useEffect(() => {
        if (likes && likes.length && likes.find((item) => item.owner._id === ownerId)) {
            if (!isLiked) {
                setIsLiked(true)
            }
        }
    }, [])

    function toggleModalWindow() {
        setModal(!isModal)
    }

    const addLikeHandler = async () => {
        await gqlAddLike(postId);
        setIsLiked(true)
        updatePostData();
    }
    const deleteLike = async () => {
        const myLike = likes.find((item) => item.owner._id === ownerId);
        myLike && await gqlDeleteLike(myLike._id, postId);
        setIsLiked(false)
        updatePostData();
    }

    return (<LikesWrapper>
        {isLiked ? <FavoriteIcon onClick={deleteLike} style={{color: "red"}}/> :
            <FavoriteBorderIcon onClick={addLikeHandler}/>}
        <TextStyled onClick={toggleModalWindow}>{likes && likes.length || "0"} likes</TextStyled>
        {isModal && <ModalWindow closeModal={toggleModalWindow}>
            <UserListWrapper>
                <UserList users={likes} closeModal={toggleModalWindow}/>
            </UserListWrapper>
        </ModalWindow>}

    </LikesWrapper>)
}

const mapStateToProps = (state) => {
    return {
        ownerId: state.auth.user.sub.id,

    }
}

export default connect(mapStateToProps)(LikeBlock);