hipstagram/src/components/PostFeed.js

import {useEffect, useState} from "react";
import {gqlOnePost} from "../shared/services&utilits/gqlRequest";
import ImgBlock from "./ImgBlock";
import AvaLoginBlock from "./AvaLoginBlock";
import styled from "styled-components";
import LikeBlock from "./LikeBlock";
import TimeOfCreation from "./TimeOfCreation";
import ModalWindow from "./ModalWindow";
import Post from "./Post";
import {SpaceBetweenWrapper, StyledButton} from "../shared/styledComponents";

const Title = styled.p`
    margin-left: 20px;
  font-weight: 700;
`
const Text = styled.p`
  margin-left: 20px;
`
const ImgWrapper = styled.div`
  width: 100%;
  max-height: 350px;
  display: flex;
  align-items: center;
`

const InnerModalWrapper = styled.div`
  width: 60vw;
  height: 80vh;
  display: flex;
`

function PostFeed({post}) {
    const [postFeedData, setPostFeedData] = useState(null);
    const [isModal, setModal] = useState(false);
    useEffect(() => {
        if (!postFeedData) {
            gqlOnePost(post._id).then(res => res.json())
                .then(data => setPostFeedData(data["data"].PostFindOne))
        }
    }, [])

    function updPostData() {
        gqlOnePost(post._id).then(res => res.json())
            .then(data => setPostFeedData(data["data"].PostFindOne))
    }

    function toggleModalWindow() {
        setModal(!isModal)
    }

    return (<>
            {post && postFeedData && <>
                <AvaLoginBlock user={postFeedData.owner}
                               closeModal={toggleModalWindow}/>
                <ImgWrapper>
                    <ImgBlock images={post.images}/>
                </ImgWrapper>
                <SpaceBetweenWrapper>
                    <LikeBlock likes={postFeedData.likes} postId={postFeedData._id} updatePostData={updPostData}/>
                    <TimeOfCreation createdTime={postFeedData.createdAt}/>
                </SpaceBetweenWrapper>

                <Title>Title: {postFeedData.title}</Title>
                <Text>Text: {postFeedData.text}</Text>

                <StyledButton onClick={toggleModalWindow}>Show all comments
                    ({postFeedData.comments && postFeedData.comments.length || 0})
                </StyledButton>
                {isModal &&
                <ModalWindow closeModal={toggleModalWindow}>
                    <InnerModalWrapper>
                    <Post closeModal={toggleModalWindow} postData={postFeedData} updatePostData={updPostData}/>
                    </InnerModalWrapper>
                </ModalWindow>
                }
            </>
            }
        </>
    )
}


export default PostFeed;