hipstagram/src/components/Post.js

import {useEffect, useState} from "react";
import picture from "../assets/img/brokenPicture.png";
import Carousel from "react-material-ui-carousel";
import AutoAwesomeMotionIcon from "@mui/icons-material/AutoAwesomeMotion";
import ModalWindow from "./ModalWindow";
import AvaLoginBlock from "./AvaLoginBlock";
import CommentsBlock from "./CommentsBlock";
import styled from "styled-components";
import LikeBlock from "./LikeBlock";
import {gqlOnePost} from "../shared/services&utilits/gqlRequest";


const PostWrapper = styled.div`
  position: relative;
  display: flex;
  min-width: 300px;
  max-width: 300px;
  margin: 15px;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
`
const LogoManyImg = styled.div`
  position: absolute;
  z-index: 2;
  right: 0;
  width: 25px;
  height: 35px;
  transform: scaleX(-1);
`
const PicsInModalWrapper = styled.div`
  width: 50%;
  max-height: 100%;
  margin: 30px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
`
const AvaLoginWrap = styled.div`
  display: flex;
  margin-top: 30px;
  width: 80%;

`
const DescriptionPostWrapper = styled.div`
  height: fit-content;
  width: 100%;
  box-shadow: rgba(17, 17, 26, 0.1) 0px 1px 0px;
`
const InfoBlockInModalWrapper = styled.div`
  width: 50%;
`
const Title = styled.p`
`
const Text = styled.p`
`

function Post({postId}){
    const [isModal, setModal] = useState(false);
    const [postData, setPostData] = useState(null);
    useEffect(() => {
        if (!postData) {
            gqlOnePost(postId).then(res => res.json())
                .then(data =>setPostData(data["data"].PostFindOne))
        }
    }, [])

    function updatePostData(){
        gqlOnePost(postId).then(res => res.json())
            .then(data =>setPostData(data["data"].PostFindOne))
    }


    function toggleModalWindow() {
        setModal(!isModal)
    }

    console.log(postData)
    const ImgBlock = ({images}) => {
        return (
            <>
                {!images && <img src={picture} alt={"pic"}/>}
                {images && images.length === 1 && <img src={images[0].url} alt={"pic"} style={{width: "100%"}}/>}
                {images && images.length > 1 && <div style={{width: "100%"}}>
                    <Carousel autoPlay={false} navButtonsAlwaysVisible={true}>{
                        images.map((item, i) => <img src={item.url} key={i} style={{width: "100%"}}
                                                     alt={"picture"}/>)
                    }
                    </Carousel>
                </div>}
            </>
        )
    };

    // console.log(post)
    return (
        <>
        {postData &&
        <PostWrapper onClick={() => toggleModalWindow()}>
            <img src={postData.images ? postData.images[0].url : picture} alt="post" style={{width: "100%"}}/>
            {
                postData.images?.length > 1 && <LogoManyImg>
                    <AutoAwesomeMotionIcon/>
                </LogoManyImg>
            }
            {isModal &&
            <ModalWindow closeModal={toggleModalWindow}>
                <PicsInModalWrapper>
                    <ImgBlock images={postData.images}/>
                </PicsInModalWrapper>
                <InfoBlockInModalWrapper>

                    <AvaLoginWrap>
                        <AvaLoginBlock urlAva={postData.owner.avatar} name={postData.owner.login}/>
                    </AvaLoginWrap>
                    <DescriptionPostWrapper>
                        <Title>Title:{postData.title}</Title>
                        <Text>{postData.text}</Text>
                    </DescriptionPostWrapper>

                    <CommentsBlock post={postData}/>
                    {postData.likes &&
                    <LikeBlock likes={postData.likes} postId={postData._id} updatePostData={updatePostData}/>
                    }
                </InfoBlockInModalWrapper>
            </ModalWindow>
            }
        </PostWrapper>
        }
        </>
    )
};

export default Post;