25.03.2023 12:15

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

@@ -3,6 +3,7 @@ import { Box } from '@mui/system';
 
 import { url } from '../../App';
 
+
 // карусель
 export function MyCarouselPost({ postImages }) {
     // console.log('postImages: ', postImages)

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

@@ -1,6 +1,6 @@
 import { url } from "../../App";
 import { useHistory } from "react-router-dom";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 
 import {
     Avatar,
@@ -15,28 +15,18 @@ import { FavoriteBorderRounded } from '@mui/icons-material/'
 
 import './style.scss'
 
-import { CommentContext } from "./card_post";
+import { CommentContext } from "./comments";
 import { useContext } from "react";
-import { connect, useSelector } from "react-redux";
-
-
-
-
+import { useSelector } from "react-redux";
 
 
 function CommentCard({ data }) {
     // console.log('data: ', data)
 
-    const [comment, setComment] = useContext(CommentContext)
-
-
-    const addNewComment = useSelector(state => state?.promise?.CreateComment?.payload)
-    useEffect(() => { }, [addNewComment])
-
-
-
     const history = useHistory()
 
+    const [comment, setComment] = useContext(CommentContext)
+
     // дата поста
     const dateofPost = new Date(+data?.createdAt)
     const months = ['января', 'февраля', 'марта', 'апреля', 'мая', 'июня', 'июля', 'августа', 'сентября', 'октября', 'ноября', 'декабря']
@@ -45,15 +35,13 @@ function CommentCard({ data }) {
     ${dateofPost.getFullYear()}
     ${dateofPost.getHours() < 10 ? '0' + dateofPost.getHours() : dateofPost.getHours()}:${dateofPost.getMinutes() < 10 ? '0' + dateofPost.getMinutes() : dateofPost.getMinutes()}`
 
-
-    // let answerToCommentData
     // скрываем/открываем вложенные комментарии
     const [openComments, setOpenComments] = useState('Посмотреть ответы')
     // скрываем/открываем блок с ответами на комментарии
     const [toggleAnswerToBlock, setToggleAnswerToBlock] = useState(false)
 
     // функция скрытия/открытия ответов на комменты
-    async function changeText() {
+    async function toggleBlock() {
         setToggleAnswerToBlock(!toggleAnswerToBlock)
 
         return (openComments === 'Посмотреть ответы'
@@ -62,22 +50,20 @@ function CommentCard({ data }) {
         )
     }
 
+    // функция перехода на страницу профиля
     function toAccount(id) {
         history.push(`/user/${id}`)
     }
 
+    // функция перевода фокуса в поле комментария при ответе на комментарий
     function addCommentFocus() {
         const inputField = document.getElementById('addCommentField')
 
         // ставим фокус на поле добавления комментариев
         inputField.focus()
 
-        // добавляем ник, кому будем отвечать, в поле комментариев с припиской "@"
+        // добавляем ник, кому будем отвечать, в поле комментариев с припиской "@" и добавляем параметр answerTo для запроса на бек
         setComment({ ...comment, text: `@${data?.owner?.login} `, answerTo: { _id: data._id } })
-
-
-
-
     }
 
 
@@ -215,7 +201,7 @@ function CommentCard({ data }) {
                                 sx={{
                                     cursor: 'pointer'
                                 }}
-                                onClick={() => changeText(data?._id)}
+                                onClick={() => toggleBlock(data?._id)}
                             >
                                 {openComments}
                             </Typography>
@@ -237,7 +223,4 @@ 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

@@ -22,23 +22,18 @@ import { actionFullAddComment } from "../redux/thunks";
 import { useParams } from "react-router-dom";
 
 
-import { CommentContext } from "./card_post";
+import { CommentContext } from "./comments";
 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: postId } })
-    // console.log('params for new comment: ', comment)
+    // контекст для изменения поля добавления комментария
+    const [comment, setComment] = useContext(CommentContext)
 
     // открытие поповера emoji
     const [openPopover, setOpenPopover] = useState(null);
@@ -51,31 +46,18 @@ function CommentField() {
     const open = Boolean(openPopover);
     const emojiField = open ? 'simple-popover' : undefined;
 
-
-
-
+    // отслеживаем все комментарии в реальном времени для проверки имени пользователя в поле комментария при ответе на комментарий
     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
@@ -87,12 +69,11 @@ function CommentField() {
         // отправляем запрос на создание комментария с нужным именем
         dispatch(actionFullAddComment(nameOfPromise, comment, postId))
 
-        // и чистим поле ввода комментария
+        // и чистим поле ввода комментария после отправки запроса
         setComment({ ...comment, text: '' })
-
-        console.log('======================= finish ========================')
     }
 
+
     return (
         <Box
             sx={{

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

@@ -17,7 +17,7 @@ import {
 } from '@mui/material'
 import {
     FavoriteBorderRounded,
-    Send,
+    SendRounded,
     ChatBubbleOutline,
     TurnedInNot,
 } from '@mui/icons-material/'
@@ -27,26 +27,19 @@ import Grid from '@mui/material/Unstable_Grid2';
 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 = ['января', 'февраля', 'марта', 'апреля', 'мая', 'июня', 'июля', 'августа', 'сентября', 'октября', 'ноября', 'декабря']
@@ -55,15 +48,21 @@ export function CardPost({ postData }) {
     ${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()
     }
 
+    // создание ссылки для расшаривания поста
+    function sharePost() {
+        console.log('share')
+    }
+
 
     return (
         <CommentContext.Provider value={[comment, setComment]}>
@@ -166,7 +165,6 @@ export function CardPost({ postData }) {
                     </Grid>
 
                     <Grid>
-                        {/* <CommentsFeed data={postData?.comments} /> */}
                         <CCommentsFeed />
                     </Grid>
                 </CardContent>
@@ -208,8 +206,11 @@ export function CardPost({ postData }) {
                                 <Grid>
                                     <IconButton
                                         aria-label="share"
+                                        onClick={sharePost}
                                     >
-                                        <Send />
+                                        <SendRounded
+                                            style={{ transform: 'translate(3px, -4px) rotate(-30deg)' }}
+                                        />
                                     </IconButton>
                                 </Grid>
                             </Grid>

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

@@ -1,28 +1,24 @@
 import { url } from "../../App";
 import { useParams } from "react-router-dom";
-import { createContext, useEffect } from "react";
+import { 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 CommentCard from "./comment_feed_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)
+    const addNewCommentTo = useSelector(state => state?.promise?.CreateCommentTo?.payload)
 
     // перезагрузка ленты комментариев на посте, если только зашли на сраницу или отправили новый коммент
-    useEffect(() => { loadComments(postId) }, [postId, addNewComment])
-
+    useEffect(() => { loadComments(postId) }, [postId, addNewComment, addNewCommentTo])
 
     // фуyкция построения дерева комментариев
     function commentsTreeConstructor(arr, answerToId = null) {
@@ -56,10 +52,8 @@ function CommentsFeed({ comments = [], loadComments }) {
             )}
         </>
     )
-
 }
 
 const CCommentsFeed = connect(state => ({ comments: state?.promise?.FindComments?.payload }), { loadComments: actionFullFindCommentsPostOne })(CommentsFeed)
 
-
 export default CCommentsFeed

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

@@ -7,8 +7,8 @@ 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';
+import { MyCarouselPost } from './carousel';
+import { CardPost } from './comments';
 
 
 const Item = styled(Paper)(() => ({