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 && {"pic"}/} {images && images.length === 1 && {"pic"}} {images && images.length > 1 &&
{ images.map((item, i) => {"picture"}/) }
} ) }; // console.log(post) return ( <> {postData && toggleModalWindow()}> post { postData.images?.length > 1 && } {isModal && Title:{postData.title} {postData.text} {postData.likes && } } } ) }; export default Post;