25.03.2023 03:15

js/Project/project/src/components/post/card_post.js

@@ -1,5 +1,6 @@
 import { url } from "../../App";
-import { useHistory } from "react-router-dom";
+import { useHistory, useParams } from "react-router-dom";
+import { createContext, useState } from "react";
 
 import './style.scss'
 
@@ -27,11 +28,25 @@ import CCommentsFeed from "./comments_feed";
 import CommentField from "./comment_field";
 
 
+// контекст для управления состоянием данных для отправки комментов
+export const CommentContext = createContext()
+
+
+
 export function CardPost({ postData }) {
     // console.log('postData: ', postData)
 
     const history = useHistory()
 
+    const { postId } = useParams()
+
+    // отслеживаем состояние поля ввода комментария для поста
+    const [comment, setComment] = useState({ text: '', post: { _id: postId } })
+
+    console.log('params from main: ', comment)
+
+
+
     // дата поста
     const dateofPost = new Date(+postData.createdAt)
     const months = ['января', 'февраля', 'марта', 'апреля', 'мая', 'июня', 'июля', 'августа', 'сентября', 'октября', 'ноября', 'декабря']
@@ -51,179 +66,181 @@ export function CardPost({ postData }) {
 
 
     return (
-        <Card
-            sx={{
-                display: 'flex',
-                flexDirection: 'column',
-                minHeight: '80vh',
-                borderRadius: 0
-            }}
-        >
-            <CardHeader
-                avatar={
-                    <Avatar
-                        alt={postData?.owner?.login}
-                        src={(url + postData?.owner?.avatar?.url)}
-                        sx={{
-                            width: 50,
-                            height: 50
-                        }}
-                    />
-                }
-
-                title={
-                    <Typography
-                        sx={{
-                            cursor: 'pointer'
-                        }}
-                        onClick={toAccount}
-                    >
-                        {postData?.owner?.login}
-                    </Typography>
-                }
-
-                subheader={dateofPostParse}
-            />
-
-            <Divider />
-
-            <CardContent
-                className='post-comments'
-
+        <CommentContext.Provider value={[comment, setComment]}>
+            <Card
                 sx={{
-                    flex: '0 0 450px',
-                    overflowY: 'auto',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    minHeight: '80vh',
+                    borderRadius: 0
                 }}
             >
-                <Grid
-                    container
-                    spacing={2}
-                    sx={{
-                        marginBottom: 3
-                    }}
-                >
-                    <Grid
-                        xs={2}
-                        sx={{
-                            flex: '0 0 45px'
-                        }}
-                    >
+                <CardHeader
+                    avatar={
                         <Avatar
                             alt={postData?.owner?.login}
                             src={(url + postData?.owner?.avatar?.url)}
                             sx={{
-                                width: 40,
-                                height: 40
+                                width: 50,
+                                height: 50
                             }}
                         />
-                    </Grid>
+                    }
 
-                    <Grid
-                        xs={10}
-                    >
+                    title={
                         <Typography
-                            variant="subtitle2"
-                            color="text.secondary"
                             sx={{
-                                cursor: 'pointer',
-                                width: 'fit-content'
+                                cursor: 'pointer'
                             }}
                             onClick={toAccount}
                         >
                             {postData?.owner?.login}
                         </Typography>
+                    }
 
-                        <Typography
-                            variant="subtitle2"
-                            color="text.primary"
-                        >
-                            {postData?.title}
-                        </Typography>
-
-                        <Typography
-                            variant="body2"
-                            color="text.secondary"
-                        >
-                            {postData?.text}
-                        </Typography>
-                    </Grid>
-                </Grid>
+                    subheader={dateofPostParse}
+                />
 
-                <Grid>
-                    {/* <CommentsFeed data={postData?.comments} /> */}
-                    <CCommentsFeed />
-                </Grid>
-            </CardContent>
+                <Divider />
 
-            <Divider />
+                <CardContent
+                    className='post-comments'
 
-            <CardActions disableSpacing>
-                <Box
                     sx={{
-                        flexGrow: 1
-                    }}>
+                        flex: '0 0 450px',
+                        overflowY: 'auto',
+                    }}
+                >
                     <Grid
-                        xs={12}
                         container
-                        justifyContent="space-between"
-                        alignItems="center"
+                        spacing={2}
                         sx={{
-                            fontSize: '12px'
+                            marginBottom: 3
                         }}
                     >
-                        <Grid container>
-                            <Grid>
-                                <IconButton
-                                    aria-label="add to favorites"
-                                    onClick={() => (console.log('click like main post'))}
-                                >
-                                    <FavoriteBorderRounded />
-                                </IconButton>
-                            </Grid>
+                        <Grid
+                            xs={2}
+                            sx={{
+                                flex: '0 0 45px'
+                            }}
+                        >
+                            <Avatar
+                                alt={postData?.owner?.login}
+                                src={(url + postData?.owner?.avatar?.url)}
+                                sx={{
+                                    width: 40,
+                                    height: 40
+                                }}
+                            />
+                        </Grid>
 
-                            <Grid>
-                                <IconButton
-                                    onClick={addCommentFocus}
-                                >
-                                    <ChatBubbleOutline />
-                                </IconButton>
+                        <Grid
+                            xs={10}
+                        >
+                            <Typography
+                                variant="subtitle2"
+                                color="text.secondary"
+                                sx={{
+                                    cursor: 'pointer',
+                                    width: 'fit-content'
+                                }}
+                                onClick={toAccount}
+                            >
+                                {postData?.owner?.login}
+                            </Typography>
+
+                            <Typography
+                                variant="subtitle2"
+                                color="text.primary"
+                            >
+                                {postData?.title}
+                            </Typography>
+
+                            <Typography
+                                variant="body2"
+                                color="text.secondary"
+                            >
+                                {postData?.text}
+                            </Typography>
+                        </Grid>
+                    </Grid>
+
+                    <Grid>
+                        {/* <CommentsFeed data={postData?.comments} /> */}
+                        <CCommentsFeed />
+                    </Grid>
+                </CardContent>
+
+                <Divider />
+
+                <CardActions disableSpacing>
+                    <Box
+                        sx={{
+                            flexGrow: 1
+                        }}>
+                        <Grid
+                            xs={12}
+                            container
+                            justifyContent="space-between"
+                            alignItems="center"
+                            sx={{
+                                fontSize: '12px'
+                            }}
+                        >
+                            <Grid container>
+                                <Grid>
+                                    <IconButton
+                                        aria-label="add to favorites"
+                                        onClick={() => (console.log('click like main post'))}
+                                    >
+                                        <FavoriteBorderRounded />
+                                    </IconButton>
+                                </Grid>
+
+                                <Grid>
+                                    <IconButton
+                                        onClick={addCommentFocus}
+                                    >
+                                        <ChatBubbleOutline />
+                                    </IconButton>
+                                </Grid>
+
+                                <Grid>
+                                    <IconButton
+                                        aria-label="share"
+                                    >
+                                        <Send />
+                                    </IconButton>
+                                </Grid>
                             </Grid>
 
                             <Grid>
-                                <IconButton
-                                    aria-label="share"
-                                >
-                                    <Send />
+                                <IconButton>
+                                    <TurnedInNot />
                                 </IconButton>
                             </Grid>
                         </Grid>
 
-                        <Grid>
-                            <IconButton>
-                                <TurnedInNot />
-                            </IconButton>
+                        <Grid container>
+                            <Typography
+                                variant="subtitle1"
+                                color="text.secondary"
+                                sx={{
+                                    padding: 1
+                                }}
+                            >
+                                Нравится: {postData.likesCount ? postData.likesCount : '0'}
+                            </Typography>
                         </Grid>
-                    </Grid>
-
-                    <Grid container>
-                        <Typography
-                            variant="subtitle1"
-                            color="text.secondary"
-                            sx={{
-                                padding: 1
-                            }}
-                        >
-                            Нравится: {postData.likesCount ? postData.likesCount : '0'}
-                        </Typography>
-                    </Grid>
-                </Box>
-            </CardActions>
+                    </Box>
+                </CardActions>
 
-            <Divider />
+                <Divider />
 
-            <CardActions>
-                <CommentField id={postData?._id} />
-            </CardActions>
-        </Card>
+                <CardActions>
+                    <CommentField />
+                </CardActions>
+            </Card>
+        </CommentContext.Provider>
     )
 }

js/Project/project/src/components/post/comment_card.js

@@ -1,6 +1,6 @@
 import { url } from "../../App";
 import { useHistory } from "react-router-dom";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 import {
     Avatar,
@@ -15,9 +15,25 @@ import { FavoriteBorderRounded } from '@mui/icons-material/'
 
 import './style.scss'
 
+import { CommentContext } from "./card_post";
+import { useContext } from "react";
+import { connect, useSelector } from "react-redux";
+
+
+
+
+
 
 function CommentCard({ data }) {
-    console.log('data: ', data)
+    // console.log('data: ', data)
+
+    const [comment, setComment] = useContext(CommentContext)
+
+
+    const addNewComment = useSelector(state => state?.promise?.CreateComment?.payload)
+    useEffect(() => { }, [addNewComment])
+
+
 
     const history = useHistory()
 
@@ -37,7 +53,7 @@ function CommentCard({ data }) {
     const [toggleAnswerToBlock, setToggleAnswerToBlock] = useState(false)
 
     // функция скрытия/открытия ответов на комменты
-    async function changeText(id) {
+    async function changeText() {
         setToggleAnswerToBlock(!toggleAnswerToBlock)
 
         return (openComments === 'Посмотреть ответы'
@@ -52,16 +68,14 @@ function CommentCard({ data }) {
 
     function addCommentFocus() {
         const inputField = document.getElementById('addCommentField')
-        console.log(inputField)
-
-        // if (inputField) {
-        //     inputField.value = `@text`
 
+        // ставим фокус на поле добавления комментариев
         inputField.focus()
-        // }
 
-        // const focused = document.hasFocus()
-        // console.log(focused)
+        // добавляем ник, кому будем отвечать, в поле комментариев с припиской "@"
+        setComment({ ...comment, text: `@${data?.owner?.login} `, answerTo: { _id: data._id } })
+
+
 
 
     }
@@ -223,4 +237,7 @@ function CommentCard({ data }) {
     )
 }
 
+// const CCommentCard = connect(state => ({ comments: state?.promise?.FindComments?.payload }))(CommentCard)
+// export default CCommentCard
+
 export default CommentCard

js/Project/project/src/components/post/comment_field.js

@@ -14,22 +14,31 @@ import {
 } from '@mui/icons-material/'
 
 import EmojiPicker from 'emoji-picker-react';
-import { SkinTones } from 'emoji-picker-react';
 
 import { useState } from "react";
-import { useDispatch } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 
-import { actionAddComment } from "../redux/action";
+import { actionFullAddComment } from "../redux/thunks";
+import { useParams } from "react-router-dom";
 
 
-function CommentField({ id }) {
+import { CommentContext } from "./card_post";
+import { useContext } from "react";
+
+
+function CommentField() {
     // console.log('id: ', id)
 
+    const [comment, setComment] = useContext(CommentContext)
+    console.log('testContext from field: ', comment,)
+
+
+    const { postId } = useParams()
     const dispatch = useDispatch()
 
     // отслеживаем состояние поля ввода комментария для поста
-    const [comment, setComment] = useState({ text: '', post: { _id: id } })
-    // console.log('comment: ', comment)
+    // const [comment, setComment] = useState({ text: '', post: { _id: postId } })
+    // console.log('params for new comment: ', comment)
 
     // открытие поповера emoji
     const [openPopover, setOpenPopover] = useState(null);
@@ -43,12 +52,47 @@ function CommentField({ id }) {
     const emojiField = open ? 'simple-popover' : undefined;
 
 
-    // вот это будет перерабатываться после того, как загружу все комментарии: после отправки коммента, нужно перезагрузить комментарии, чтобы обновить их на странице и сразу отобразить
-    function uploadComment(params) {
-        dispatch(actionAddComment(params))
-    }
 
 
+    const allComments = useSelector(state => state?.promise?.FindComments?.payload)
+
+    // запрос на создание комментария
+    function uploadComment() {
+        console.log('======================= start ========================')
+        // проверка на то, осталось ли в поле вводе комментария логин пользователя, которому нужно ответить. если нет, тогда удаляем из объекта ключ answerTo и диспатчим запрос с именем CreateComment, потому что это уже коммент к посту
+        const idToFind = comment?.answerTo?._id
+        const findLogin = allComments.find(user => user?._id === idToFind)
+
+        console.log('idToFind, findLogin: ', idToFind, findLogin)
+        console.log('второй true: ', ((comment.text).includes(findLogin?.owner?.login)))
+
+        // let isInclude = false
+        // if (findLogin && ((comment.text).includes(findLogin?.owner?.login))) {
+        //     isInclude = true
+        // }
+        let isInclude
+        (comment.text).includes(findLogin?.owner?.login) && (isInclude = true)
+
+
+        console.log('isInclude: ', isInclude)
+
+        // удаляем ключ answerTo, если нет в строке ввода комментария логина
+        if (!isInclude) {
+            delete comment.answerTo
+        }
+
+        // определяем, какое имя дать запросу
+        let nameOfPromise = (isInclude && ('answerTo' in comment)) ? 'CreateCommentTo' : 'CreateComment'
+
+        // отправляем запрос на создание комментария с нужным именем
+        dispatch(actionFullAddComment(nameOfPromise, comment, postId))
+
+        // и чистим поле ввода комментария
+        setComment({ ...comment, text: '' })
+
+        console.log('======================= finish ========================')
+    }
+
     return (
         <Box
             sx={{
@@ -99,10 +143,13 @@ function CommentField({ id }) {
                                 }}
                             >
                                 <EmojiPicker
+                                    searchPlaceHolder='Найти'
+                                    emojiStyle='apple'
                                     width={300}
-                                    height={400}
-                                    defaultSkinTone={SkinTones}
-                                    onEmojiClick={e => setComment({ ...comment, text: comment.text + e.emoji })}
+                                    height={450}
+                                    onEmojiClick={
+                                        e => setComment({ ...comment, text: comment.text + e.emoji })
+                                    }
                                 />
                             </Popover>
                         </Box>,
@@ -118,7 +165,7 @@ function CommentField({ id }) {
                                     cursor: 'pointer',
                                     margin: '0 8px'
                                 }}
-                                onClick={() => uploadComment(comment)}
+                                onClick={uploadComment}
                             >
                                 Отправить
                             </Typography>}

js/Project/project/src/components/post/comments_feed.js

@@ -1,20 +1,27 @@
 import { url } from "../../App";
 import { useParams } from "react-router-dom";
-import { useEffect } from "react";
-import { connect } from "react-redux";
+import { createContext, useEffect } from "react";
+import { connect, useSelector } from "react-redux";
 
 import { actionFullFindCommentsPostOne } from "../redux/thunks";
 
+// import CommentCard from "./comment_card";
 import CommentCard from "./comment_card";
 
 import './style.scss';
 
 
+
+
 function CommentsFeed({ comments = [], loadComments }) {
     // console.log('comments: ', comments)
 
     const { postId } = useParams()
-    useEffect(() => { loadComments(postId) }, [postId])
+    const addNewComment = useSelector(state => state?.promise?.CreateComment?.payload)
+    // console.log('test: ', addNewComment)
+
+    // перезагрузка ленты комментариев на посте, если только зашли на сраницу или отправили новый коммент
+    useEffect(() => { loadComments(postId) }, [postId, addNewComment])
 
 
     // фуyкция построения дерева комментариев

js/Project/project/src/components/post/исходники до теста с провайдером/card_post.js

@@ -0,0 +1,229 @@
+import { url } from "../../App";
+import { useHistory } from "react-router-dom";
+
+import './style.scss'
+
+import {
+    Card,
+    CardHeader,
+    CardContent,
+    CardActions,
+    Avatar,
+    IconButton,
+    Typography,
+    Box,
+    Divider,
+} from '@mui/material'
+import {
+    FavoriteBorderRounded,
+    Send,
+    ChatBubbleOutline,
+    TurnedInNot,
+} from '@mui/icons-material/'
+
+import Grid from '@mui/material/Unstable_Grid2';
+
+import CCommentsFeed from "./comments_feed";
+import CommentField from "./comment_field";
+
+
+export function CardPost({ postData }) {
+    // console.log('postData: ', postData)
+
+    const history = useHistory()
+
+    // дата поста
+    const dateofPost = new Date(+postData.createdAt)
+    const months = ['января', 'февраля', 'марта', 'апреля', 'мая', 'июня', 'июля', 'августа', 'сентября', 'октября', 'ноября', 'декабря']
+    const dateofPostParse = `${dateofPost.getDate() < 10 ? '0' + dateofPost.getDate() : dateofPost.getDate()} 
+    ${months[dateofPost.getMonth()]} 
+    ${dateofPost.getFullYear()}
+    ${dateofPost.getHours()}:${dateofPost.getMinutes() < 10 ? '0' + dateofPost.getMinutes() : dateofPost.getMinutes()}`
+
+
+    function toAccount() {
+        history.push(`/user/${postData?.owner?._id}`)
+    }
+
+    function addCommentFocus() {
+        document.getElementById('addCommentField').focus()
+    }
+
+
+    return (
+        <Card
+            sx={{
+                display: 'flex',
+                flexDirection: 'column',
+                minHeight: '80vh',
+                borderRadius: 0
+            }}
+        >
+            <CardHeader
+                avatar={
+                    <Avatar
+                        alt={postData?.owner?.login}
+                        src={(url + postData?.owner?.avatar?.url)}
+                        sx={{
+                            width: 50,
+                            height: 50
+                        }}
+                    />
+                }
+
+                title={
+                    <Typography
+                        sx={{
+                            cursor: 'pointer'
+                        }}
+                        onClick={toAccount}
+                    >
+                        {postData?.owner?.login}
+                    </Typography>
+                }
+
+                subheader={dateofPostParse}
+            />
+
+            <Divider />
+
+            <CardContent
+                className='post-comments'
+
+                sx={{
+                    flex: '0 0 450px',
+                    overflowY: 'auto',
+                }}
+            >
+                <Grid
+                    container
+                    spacing={2}
+                    sx={{
+                        marginBottom: 3
+                    }}
+                >
+                    <Grid
+                        xs={2}
+                        sx={{
+                            flex: '0 0 45px'
+                        }}
+                    >
+                        <Avatar
+                            alt={postData?.owner?.login}
+                            src={(url + postData?.owner?.avatar?.url)}
+                            sx={{
+                                width: 40,
+                                height: 40
+                            }}
+                        />
+                    </Grid>
+
+                    <Grid
+                        xs={10}
+                    >
+                        <Typography
+                            variant="subtitle2"
+                            color="text.secondary"
+                            sx={{
+                                cursor: 'pointer',
+                                width: 'fit-content'
+                            }}
+                            onClick={toAccount}
+                        >
+                            {postData?.owner?.login}
+                        </Typography>
+
+                        <Typography
+                            variant="subtitle2"
+                            color="text.primary"
+                        >
+                            {postData?.title}
+                        </Typography>
+
+                        <Typography
+                            variant="body2"
+                            color="text.secondary"
+                        >
+                            {postData?.text}
+                        </Typography>
+                    </Grid>
+                </Grid>
+
+                <Grid>
+                    {/* <CommentsFeed data={postData?.comments} /> */}
+                    <CCommentsFeed />
+                </Grid>
+            </CardContent>
+
+            <Divider />
+
+            <CardActions disableSpacing>
+                <Box
+                    sx={{
+                        flexGrow: 1
+                    }}>
+                    <Grid
+                        xs={12}
+                        container
+                        justifyContent="space-between"
+                        alignItems="center"
+                        sx={{
+                            fontSize: '12px'
+                        }}
+                    >
+                        <Grid container>
+                            <Grid>
+                                <IconButton
+                                    aria-label="add to favorites"
+                                    onClick={() => (console.log('click like main post'))}
+                                >
+                                    <FavoriteBorderRounded />
+                                </IconButton>
+                            </Grid>
+
+                            <Grid>
+                                <IconButton
+                                    onClick={addCommentFocus}
+                                >
+                                    <ChatBubbleOutline />
+                                </IconButton>
+                            </Grid>
+
+                            <Grid>
+                                <IconButton
+                                    aria-label="share"
+                                >
+                                    <Send />
+                                </IconButton>
+                            </Grid>
+                        </Grid>
+
+                        <Grid>
+                            <IconButton>
+                                <TurnedInNot />
+                            </IconButton>
+                        </Grid>
+                    </Grid>
+
+                    <Grid container>
+                        <Typography
+                            variant="subtitle1"
+                            color="text.secondary"
+                            sx={{
+                                padding: 1
+                            }}
+                        >
+                            Нравится: {postData.likesCount ? postData.likesCount : '0'}
+                        </Typography>
+                    </Grid>
+                </Box>
+            </CardActions>
+
+            <Divider />
+
+            <CardActions>
+                <CommentField />
+            </CardActions>
+        </Card>
+    )
+}

js/Project/project/src/components/post/исходники до теста с провайдером/carousel_post.js

@@ -0,0 +1,52 @@
+import Carousel from 'react-material-ui-carousel'
+import { Box } from '@mui/system';
+
+import { url } from '../../App';
+
+// карусель
+export function MyCarouselPost({ postImages }) {
+    // console.log('postImages: ', postImages)
+
+    return (postImages &&
+        <Carousel
+            autoPlay={false}
+            cycleNavigation={false}
+            animation={"slide"}
+            indicatorContainerProps={{
+                style: {
+                    marginTop: '-50px',
+                    zIndex: 999,
+                    position: 'inherit'
+                }
+            }}
+            className='karusel'
+
+            sx={{
+                width: '100%',
+            }}
+
+        >
+            {
+                postImages.map(item =>
+                    <Box
+                        sx={{
+                            paddingTop: '100%',
+                            backgroundSize: 'contain',
+                            backgroundColor: 'black',
+                            backgroundImage: `url(/images/noPhoto.png)`,
+                            backgroundRepeat: 'no-repeat',
+                            backgroundPosition: 'center',
+                        }}
+
+                        key={item?.url}
+
+                        style={item?.url &&
+                            { backgroundImage: `url(${url + item.url})` }
+                        }
+                    />
+                )
+            }
+        </Carousel >
+    )
+}
+

js/Project/project/src/components/post/comment_card(test).js

@@ -1,34 +1,36 @@
 import { url } from "../../App";
-import { useHistory, useParams } from "react-router-dom";
-import { useEffect, useState } from "react";
-
-import './style.scss'
+import { useHistory } from "react-router-dom";
+import { useState } from "react";
 
 import {
     Avatar,
     IconButton,
     Typography,
-    Box,
     Divider,
 } from '@mui/material'
-import {
-    FavoriteBorderRounded,
-} from '@mui/icons-material/'
+
 import Grid from '@mui/material/Unstable_Grid2';
 
+import { FavoriteBorderRounded } from '@mui/icons-material/'
 
-import { actionFindCommentsAnswerTo } from "../redux/action";
-import { actionFullFindCommentsPostOne } from "../redux/thunks";
-import { connect, useDispatch } from "react-redux";
+import './style.scss'
 
 
 function CommentCard({ data }) {
-    // console.log('data: ', data)
+    console.log('data: ', data)
 
     const history = useHistory()
-    const dispatch = useDispatch()
 
-    let answerToCommentData
+    // дата поста
+    const dateofPost = new Date(+data?.createdAt)
+    const months = ['января', 'февраля', 'марта', 'апреля', 'мая', 'июня', 'июля', 'августа', 'сентября', 'октября', 'ноября', 'декабря']
+    const dateofPostParse = `${dateofPost.getDate() < 10 ? '0' + dateofPost.getDate() : dateofPost.getDate()} 
+    ${months[dateofPost.getMonth()]} 
+    ${dateofPost.getFullYear()}
+    ${dateofPost.getHours() < 10 ? '0' + dateofPost.getHours() : dateofPost.getHours()}:${dateofPost.getMinutes() < 10 ? '0' + dateofPost.getMinutes() : dateofPost.getMinutes()}`
+
+
+    // let answerToCommentData
     // скрываем/открываем вложенные комментарии
     const [openComments, setOpenComments] = useState('Посмотреть ответы')
     // скрываем/открываем блок с ответами на комментарии
@@ -38,44 +40,33 @@ function CommentCard({ data }) {
     async function changeText(id) {
         setToggleAnswerToBlock(!toggleAnswerToBlock)
 
-        await dispatch(actionFindCommentsAnswerTo(id))
-
         return (openComments === 'Посмотреть ответы'
             ? setOpenComments('Скрыть ответы')
             : setOpenComments('Посмотреть ответы')
         )
     }
 
-
-
-
-
-
-    // дата поста
-    const dateofPost = new Date(+data?.createdAt)
-    const months = ['января', 'февраля', 'марта', 'апреля', 'мая', 'июня', 'июля', 'августа', 'сентября', 'октября', 'ноября', 'декабря']
-    const dateofPostParse = `${dateofPost.getDate() < 10 ? '0' + dateofPost.getDate() : dateofPost.getDate()} 
-    ${months[dateofPost.getMonth()]} 
-    ${dateofPost.getFullYear()}
-    ${dateofPost.getHours()}:${dateofPost.getMinutes() < 10 ? '0' + dateofPost.getMinutes() : dateofPost.getMinutes()}`
-
-
     function toAccount(id) {
         history.push(`/user/${id}`)
     }
 
+    function addCommentFocus() {
+        const inputField = document.getElementById('addCommentField')
+
+        inputField.focus()
+    }
+
 
     return (
         <Grid
             container
             spacing={2}
             sx={{
-                marginBottom: 1
+                marginBottom: 2
             }}
         >
             <Grid
-                item
-                xs={2}
+                xs={1.5}
                 sx={{
                     flex: '0 0 45px'
                 }}
@@ -91,12 +82,11 @@ function CommentCard({ data }) {
             </Grid>
 
             <Grid
-                item
-                xs={10}
+                xs={10.5}
                 container
             >
                 <Grid
-                    xs={11}
+                    xs={10}
                     sx={{
                         paddingBottom: 0
                     }}
@@ -112,13 +102,6 @@ function CommentCard({ data }) {
                         {data?.owner?.login}
                     </Typography>
 
-                    <Typography
-                        variant="subtitle2"
-                        color="text.secondary"
-                    >
-                        {data?.title}
-                    </Typography>
-
                     <Typography
                         variant="body2"
                         color="text.secondary"
@@ -128,7 +111,7 @@ function CommentCard({ data }) {
                 </Grid>
 
                 <Grid
-                    xs={1}
+                    xs={2}
                     sx={{
                         paddingBottom: 0
                     }}
@@ -143,7 +126,7 @@ function CommentCard({ data }) {
                 </Grid>
 
                 <Grid
-                    xs={6}
+                    xs={5.5}
                     sx={{
                         padding: 0,
                         paddingLeft: 1
@@ -175,7 +158,7 @@ function CommentCard({ data }) {
                 </Grid>
 
                 <Grid
-                    xs={2.5}
+                    xs={3}
                     sx={{
                         padding: 0,
                         paddingRight: 1
@@ -188,7 +171,7 @@ function CommentCard({ data }) {
                         sx={{
                             cursor: 'pointer'
                         }}
-                        onClick={() => (console.log('click answer on comment'))}
+                        onClick={addCommentFocus}
                     >
                         Ответить
                     </Typography>
@@ -220,8 +203,10 @@ function CommentCard({ data }) {
                         sx={{
                             padding: '0 8px'
                         }}>
-                        <div sx={{ backgroundColor: 'red' }}>тут будут новые комментарии/ а если их будет много, то они будут в одну строку или как то так</div>
-                        <CommentCard data={answerToCommentData} />
+                        {data?.answers && (data?.answers).map(item => <CommentCard
+                            data={item}
+                            key={item._id}
+                        />)}
                     </Grid>}
             </Grid>
         </Grid >

js/Project/project/src/components/post/исходники до теста с провайдером/comment_field.js

@@ -0,0 +1,138 @@
+import { url } from "../../App";
+
+import './style.scss'
+
+import {
+    IconButton,
+    Typography,
+    Box,
+    TextField,
+    Popover
+} from '@mui/material'
+import {
+    SentimentSatisfiedAlt
+} from '@mui/icons-material/'
+
+import EmojiPicker from 'emoji-picker-react';
+
+import { useState } from "react";
+import { useDispatch } from "react-redux";
+
+import { actionFullAddComment } from "../redux/thunks";
+import { useParams } from "react-router-dom";
+
+
+function CommentField() {
+    // console.log('id: ', id)
+
+    const { postId } = useParams()
+    const dispatch = useDispatch()
+
+    // отслеживаем состояние поля ввода комментария для поста
+    const [comment, setComment] = useState({ text: '', post: { _id: postId } })
+    console.log('params for new comment: ', comment)
+
+    // открытие поповера emoji
+    const [openPopover, setOpenPopover] = useState(null);
+    const openEmoji = (event) => {
+        setOpenPopover(event.currentTarget);
+    }
+    const closeEmoji = () => {
+        setOpenPopover(null);
+    }
+    const open = Boolean(openPopover);
+    const emojiField = open ? 'simple-popover' : undefined;
+
+
+    function uploadComment() {
+        // отправляем запрос на создание комментария
+        dispatch(actionFullAddComment(comment, postId))
+
+        // и чистим поле ввода комментария
+        setComment({ ...comment, text: '' })
+    }
+
+    return (
+        <Box
+            sx={{
+                display: 'flex',
+                alignItems: 'flex-end',
+                justifyContent: 'space-between',
+                width: '100%'
+            }}
+        >
+            <TextField
+                id='addCommentField'
+                variant="standard"
+                multiline
+                placeholder='Комментировать...'
+                size="small"
+                color="info"
+                sx={{
+                    margin: 1,
+                    width: '100%',
+                }}
+                value={comment.text}
+                onChange={e => setComment({ ...comment, text: e.target.value })}
+
+                InputProps={{
+                    startAdornment:
+                        <Box>
+                            <IconButton
+                                aria-describedby={emojiField}
+                                onClick={openEmoji}
+                            >
+                                <SentimentSatisfiedAlt
+                                    fontSize='small'
+                                />
+                            </IconButton>
+
+                            <Popover
+                                id={emojiField}
+                                open={open}
+                                anchorEl={openPopover}
+                                onClose={closeEmoji}
+                                anchorOrigin={{
+                                    vertical: 'top',
+                                    horizontal: 'right',
+                                }}
+                                transformOrigin={{
+                                    vertical: 'bottom',
+                                    horizontal: 'left',
+                                }}
+                            >
+                                <EmojiPicker
+                                    searchPlaceHolder='Найти'
+                                    emojiStyle='apple'
+                                    width={300}
+                                    height={450}
+                                    onEmojiClick={
+                                        e => setComment({ ...comment, text: comment.text + e.emoji })
+                                    }
+                                />
+                            </Popover>
+                        </Box>,
+
+                    endAdornment:
+                        <Box>
+                            {comment.text !== '' && <Typography
+                                variant='subtitle2'
+                                color="primary.main"
+                                align='center'
+                                sx={{
+                                    alignSelf: 'center',
+                                    cursor: 'pointer',
+                                    margin: '0 8px'
+                                }}
+                                onClick={uploadComment}
+                            >
+                                Отправить
+                            </Typography>}
+                        </Box>
+                }}
+            />
+        </Box>
+    )
+}
+
+export default CommentField

js/Project/project/src/components/post/исходники до теста с провайдером/comments_feed.js

@@ -0,0 +1,62 @@
+import { url } from "../../App";
+import { useParams } from "react-router-dom";
+import { useEffect } from "react";
+import { connect, useSelector } from "react-redux";
+
+import { actionFullFindCommentsPostOne } from "../redux/thunks";
+
+import CommentCard from "./comment_card";
+
+import './style.scss';
+
+
+function CommentsFeed({ comments = [], loadComments }) {
+    // console.log('comments: ', comments)
+
+    const { postId } = useParams()
+    const addNewComment = useSelector(state => state?.promise?.CreateComment?.payload)
+    // console.log('test: ', addNewComment)
+
+    // перезагрузка ленты комментариев на посте, если только зашли на сраницу или отправили новый коммент
+    useEffect(() => { loadComments(postId) }, [postId, addNewComment])
+
+
+    // фуyкция построения дерева комментариев
+    function commentsTreeConstructor(arr, answerToId = null) {
+        const result = []
+
+        for (const commentItem of arr) {
+            if (commentItem.answerTo && commentItem.answerTo._id === answerToId) {
+                commentItem.answers = commentsTreeConstructor(arr, commentItem._id)
+                result.push(commentItem)
+            }
+
+            if (!commentItem.answerTo && !answerToId) {
+                commentItem.answers = commentsTreeConstructor(arr, commentItem._id)
+                result.push(commentItem)
+            }
+        }
+
+        // сортируем от новых к старым
+        return result.sort((x, y) => y.createdAt - x.createdAt)
+    }
+
+    const data = commentsTreeConstructor(comments)
+
+
+    return (
+        <>
+            {data && data.map(item => <CommentCard
+                data={item}
+                key={item._id}
+            />
+            )}
+        </>
+    )
+
+}
+
+const CCommentsFeed = connect(state => ({ comments: state?.promise?.FindComments?.payload }), { loadComments: actionFullFindCommentsPostOne })(CommentsFeed)
+
+
+export default CCommentsFeed

js/Project/project/src/components/post/исходники до теста с провайдером/index.js

@@ -0,0 +1,55 @@
+import { useEffect } from 'react';
+import { useParams } from 'react-router-dom';
+import { connect } from 'react-redux';
+
+import Grid2 from '@mui/material/Unstable_Grid2/Grid2';
+import { Paper, Box } from '@mui/material';
+import { styled } from '@mui/material/styles';
+
+import { actionFindPostOne } from '../redux/action';
+import { MyCarouselPost } from './carousel_post';
+import { CardPost } from './card_post';
+
+
+const Item = styled(Paper)(() => ({
+    borderRadius: 0,
+    boxShadow: 'none',
+}))
+
+
+function Comments({ post = {}, loadPost }) {
+    // console.log('post: ', post)
+
+    const { postId } = useParams()
+    useEffect(() => { loadPost(postId) }, [postId])
+
+    return (
+        <Box>
+            <Grid2 container sx={{
+                height: '80vh',
+            }}>
+                <Grid2 xs={7.5}>
+                    <Item sx={{
+                        backgroundColor: "black",
+                        width: '100%',
+                        height: '100%',
+                        display: 'flex',
+                        alignItems: 'center'
+                    }}>
+                        <MyCarouselPost postImages={post?.images} />
+                    </Item>
+                </Grid2>
+                <Grid2 xs={4.5}>
+                    <Item >
+                        <div style={{ backgroundColor: "yellow" }}>
+                            <CardPost postData={post} />
+                        </div>
+                    </Item>
+                </Grid2>
+            </Grid2>
+        </Box>
+    )
+}
+
+export const CComments = connect(state => ({ post: state?.promise?.PostFindOne?.payload }), { loadPost: actionFindPostOne })(Comments)
+

js/Project/project/src/components/post/исходники до теста с провайдером/style.scss

@@ -0,0 +1,3 @@
+.post-comments::-webkit-scrollbar {
+    width: 0;
+}

js/Project/project/src/components/redux/action.js

@@ -300,7 +300,7 @@ export const actionCreatePost = params => actionPromise('PROMISE', 'CreatePost',
 
 
 // запрос на создание комментария с последующим добавлением его к посту
-export const actionAddComment = params => actionPromise('PROMISE', 'CreateComment', gql(`mutation AddComment($createComment: CommentInput){
+export const actionAddComment = (NameOfPromise, params) => actionPromise('PROMISE', NameOfPromise, gql(`mutation AddComment($createComment: CommentInput){
   CommentUpsert(comment: $createComment){
     _id createdAt text
   }

js/Project/project/src/components/redux/thunks.js

@@ -11,7 +11,8 @@ import {
     actionFeedFindOne,
     actionCreatePost,
     actionFindPostOne,
-    actionFindCommentsPostOne
+    actionFindCommentsPostOne,
+    actionAddComment
 } from "./action"
 
 
@@ -155,6 +156,7 @@ export const actionFullCreatePost = (params) =>
 
 
 
+
 // Загрузка всех комментариев к посту с последующей их сортировкой и построением дерева комментариве
 export const actionFullFindCommentsPostOne = id =>
     async dispatch => {
@@ -168,3 +170,15 @@ export const actionFullFindCommentsPostOne = id =>
 
         // return res
     }
+
+
+
+// создание комментария к посту с последующей загрузкой с бека списка всех постов, которые относятся к этой записи
+export const actionFullAddComment = (nameOfPromise, params, id) =>
+    async dispatch => {
+        const newComment = await dispatch(actionAddComment(nameOfPromise,params))
+
+        if (typeof newComment._id === 'string') {
+            actionFullFindCommentsPostOne(id)
+        }
+    }

js/Project/project/src/components/user/gallery.js

@@ -33,9 +33,8 @@ export default function StandardImageList({ images }) {
                 < ImageListItem
                     key={item?._id}
                 >
-
                     {/* иконка галереи на посте в ленте */}
-                    {item?.images?.length && <AutoAwesomeMotionRounded
+                    {(item?.images?.length > 1) && <AutoAwesomeMotionRounded
                         sx={{
                             color: 'white',
                             transform: 'scale(-1, 1)',