added commemt in post Page

src/App.scss

@@ -48,9 +48,12 @@ textarea,
 select {
     font: inherit;
 }
+$defaultColorW: #fff;
+$defaultColorB: #000;
 
 body {
     background-color: #f9f9f9;
+    color: $defaultColorB;
 }
 
 .Header {
@@ -76,7 +79,7 @@ body {
         transition: all 0.3s;
         strong {
             padding-left: 15px;
-            color: #000;
+            color: $defaultColorB;
         }
         &:hover {
             background-color: #0057ff1f;
@@ -178,7 +181,7 @@ body {
     height: 58px;
     line-height: 58px;
     padding: 0 20px;
-    background-color: #fff;
+    background-color: $defaultColorW;
     box-shadow: 0 0 9px 5px rgba($color: #001529, $alpha: 0.4);
 }
 
@@ -236,7 +239,7 @@ body {
         transition: 0.4s;
         cursor: pointer;
         svg {
-            fill: #fff;
+            fill: $defaultColorW;
             opacity: 0.5;
             width: 50px;
             height: 30px;
@@ -273,7 +276,7 @@ body {
     &__comments {
         a {
             font-size: 1.1em;
-            color: #000;
+            color: $defaultColorB;
             font-weight: 500;
         }
     }
@@ -292,7 +295,7 @@ body {
             background-color: inherit;
             transition: all 0.3s;
             &:hover {
-                text-shadow: 1px 1px 3px #000;
+                text-shadow: 1px 1px 3px $defaultColorB;
             }
         }
     }
@@ -339,7 +342,7 @@ body {
         }
     }
     button {
-        color: #000;
+        color: $defaultColorB;
     }
     &__link-message {
         display: inline-block;
@@ -354,7 +357,7 @@ body {
         color: rgba(0, 0, 0, 0.85);
         border: 1px solid #1890ff;
         &:hover {
-            color: #fff;
+            color: $defaultColorW;
             border-color: #40a9ff;
             background: #40a9ff;
         }
@@ -366,7 +369,8 @@ body {
         }
         img {
             width: 100%;
-            height: 160px;
+            height: 100%;
+            max-height: 175px;
             margin: 0 auto;
             object-fit: cover;
         }
@@ -392,22 +396,29 @@ body {
         grid-template-rows: 0.1fr 1fr;
         grid-column-gap: 0px;
         grid-row-gap: 0px;
-        box-shadow: 0 0 6px 2px rgba($color: #000000, $alpha: 0.5);
+        align-items: center;
+        box-shadow: 0 0 6px 2px rgba($color: $defaultColorB, $alpha: 0.5);
         border-radius: 5px;
-        max-height: 750px;
+        max-height: 650px;
     }
     &__title {
         grid-area: 1 / 2 / 2 / 3;
-        padding: 10px 10px 5px;
-        background-color: #fff;
+        padding: 10px 20px 5px;
+        background-color: $defaultColorW;
+        & .owner {
+            font-size: 1.2em;
+            font-weight: 500;
+        }
     }
     &__image {
         grid-area: 1 / 1 / 3 / 2;
         width: 60vw;
         max-width: 700px;
+        height: 100%;
         background-color: rgb(87, 87, 87);
         img {
             max-width: 100%;
+            max-height: 650px;
             margin: 0 auto;
             object-fit: cover;
         }
@@ -415,11 +426,11 @@ body {
             bottom: 12px;
         }
     }
-
     &__description {
         grid-area: 2 / 2 / 3 / 3;
-        background-color: #fff;
-        padding: 5px 10px;
+        background-color: $defaultColorW;
+        padding: 5px 20px;
+        height: 100%;
         .ant-typography {
             overflow-wrap: anywhere;
             margin-bottom: 5px;
@@ -432,18 +443,20 @@ body {
         display: flex;
         flex-direction: column;
         justify-content: space-between;
-        height: 100%;
+
         max-height: 500px;
     }
     &__description-top {
         flex-grow: 1;
         overflow: auto;
+        height: 100%;
     }
-    &__description-bottom {
+    .ant-empty-image {
+        height: auto;
     }
 }
-.PostCommentAuthor  {
-    color: #000;
+.PostCommentAuthor {
+    color: $defaultColorB;
     font-size: 1.2em;
     font-weight: 500;
 }

src/actions/index.js

@@ -245,7 +245,7 @@ export const actionUpdateFollowers = (_id) =>
 //****************---Action Comments ---*************************//
 
 
-export const actionAddCommentAC = (findId, newResult) => ({ type: 'ADD-COMMENT', findId, newResult })
+export const actionAddCommentAC = (newResult) => ({ type: 'ADD-COMMENT', newResult })
 export const actionUpdateSubCommentAC = (findId, newResult) => ({ type: 'UPDATE-SUBCOMMENT', findId, newResult })
 
 export const actionFullAddComment = (postId, text) => ({ type: 'COMMENT_POST', postId, text })
@@ -267,15 +267,13 @@ export const actionFindComment = (findId) =>
     }`, { id: JSON.stringify([{ _id: findId }]) }))
 
 export const actionFindSubComment = (findId) =>
-    actionPromise('findSubCommentPost#' + findId, gql(`query commentFindOne ($id:String!){
+    actionPromise('subComments#' + findId, gql(`query commentFindOne ($id:String!){
         CommentFindOne(query:$id){
              answers{
                 _id text createdAt
-                owner{ _id nick login } 
-                likes{_id}
-                answerTo{_id text 
-                    owner{_id nick login avatar{_id url}} 
-                    likes{_id}
+                owner{ _id nick login avatar { _id url }} 
+                likes { _id }
+                answerTo {_id text 
                 }
                 answers{ _id }
             }

src/components/main/postsFeed/FieldComment.jsx

@@ -7,8 +7,8 @@ import { Button, Col, Row } from 'antd'
 import { actionAddSubComment, actionFullAddComment } from '../../../actions'
 
 
-const FieldCommentSend = ({ id, sentComment }) => {
-    const [commentValue, setCommentValue] = useState('')
+const FieldCommentSend = ({ id, sentComment, autoFocus, value = '', setOpen }) => {
+    const [commentValue, setCommentValue] = useState(value)
     const [error, setError] = useState(false)
 
     const changeComentTextarea = (e) => {
@@ -24,21 +24,35 @@ const FieldCommentSend = ({ id, sentComment }) => {
         }
     }
 
+    const handlerClickBtn = () => {
+        sendCommentValid(commentValue)
+        setOpen(false)
+    }
+    
+    const onKeyPressHandler = e => {
+        if (e.charCode === 13) {
+            sendCommentValid(commentValue)
+            setOpen(false)
+        }
+    }
+
     return (
         <>
             {error && <Text type='danger'>Field is required</Text>}
             <Row align='middle' className='Post__send-comment'>
                 <Col flex='auto' offset={1}>
                     <TextArea value={commentValue}
+                        autoFocus={autoFocus || false}
                         placeholder="Add a comment ..."
                         autoSize={{ minRows: 1, maxRows: 2 }}
                         onChange={changeComentTextarea}
                         bordered={false}
+                        onKeyPress={onKeyPressHandler}
                     />
                 </Col>
                 <Col span={2}>
                     <Button
-                        onClick={() => sendCommentValid(commentValue)}
+                        onClick={handlerClickBtn}
                         icon={< SendOutlined
                             style={{ fontSize: '1.2em', opacity: .6 }} />}
                     />

src/pages/PostPage.jsx

@@ -1,24 +1,24 @@
-import React, { useEffect, useState } from 'react'
-import { Row, Col, Divider } from 'antd';
+import React, { useState } from 'react'
+import { Divider } from 'antd';
 import { connect } from 'react-redux'
 import PostImage from '../components/main/postsFeed/PostImage'
 import { PostTitle, PostDescription } from './MainPostsFeed';
 import Text from 'antd/lib/typography/Text';
 import { CFieldCommentSend, CFieldSubCommentSend } from '../components/main/postsFeed/FieldComment';
 import { CPostUserPanel } from '../components/main/postsFeed/PostUserPanel';
-import { Comment, Tooltip, Avatar } from 'antd';
+import { Comment, Tooltip } from 'antd';
 import moment from 'moment';
 import { UserAvatar } from './Header';
 import { Link } from 'react-router-dom';
 import { LikeFilled, LikeOutlined } from '@ant-design/icons';
-import { actionLikeComment, actionAddLikeCommentAC, actionFindLikeComment, actionDelLikeComment, actionFindSubComment, actionSubComment } from '../actions';
+import { actionLikeComment, actionDelLikeComment, actionSubComment } from '../actions';
 
 
 const PostPageTitle = ({ data: { owner } }) =>
     <PostTitle owner={owner} />
 
 const CPostPageTitle = connect(state => ({ data: state?.postsFeed?.posts || {} }))(PostPageTitle)
-// 
+
 
 const PostCommentAuthor = ({ owner }) => {
     return (
@@ -29,8 +29,9 @@ const PostCommentAuthor = ({ owner }) => {
 }
 
 
-const PostComment = ({ myID, cId, data: { _id, answerTo, answers, createdAt, likes = [], text, owner }, addLikeComment, removeLikeComment, findSubComment }) => {
+const PostComment = ({ myID, subComments, data: { _id, answers, createdAt, likes = [], text, owner }, addLikeComment, removeLikeComment, findSubComment }) => {
     const [open, setOpen] = useState(false);
+
     let likeStatus
     let likeId
     likes.find(l => {
@@ -43,16 +44,15 @@ const PostComment = ({ myID, cId, data: { _id, answerTo, answers, createdAt, lik
     })
 
     const changeLike = () => likeStatus ? removeLikeComment(likeId, _id) : addLikeComment(_id)
-    // 
-{ console.log(_id, cId); }
+
     const actions = [
         <span onClick={changeLike}>
             {likeStatus ? <LikeFilled /> : <LikeOutlined />}
             <span style={{ paddingLeft: 8, cursor: 'auto' }}>{likes.length ? likes.length : ''}</span>
         </span>,
         <span onClick={() => setOpen(true)}>Reply to</span>,
-
     ];
+
     return (
         <Comment
             actions={actions}
@@ -67,22 +67,19 @@ const PostComment = ({ myID, cId, data: { _id, answerTo, answers, createdAt, lik
                 </ Tooltip>
             }
         >
-            {answers?.length >= 0 && <Divider plain>
-                <Text type='secodary' onClick={() => findSubComment(_id)}>View answers</Text>
-            </Divider>}
-            {answers?.length >= 0 && answers.map(a => {
-                if (Object.keys(a).length > 1) {
-                    return <CPostComment key={a._id} data={a} cId={cId} />
-                }
+            {subComments && subComments['subComments#' + _id]
+                ? subComments['subComments#' + _id].map(s => < CPostSubComment key={s._id} data={s} />)
+                : answers?.length >= 0 && <Divider plain>
+                    <Text type='secodary' onClick={() => findSubComment(_id)}>View answers</Text>
+                </Divider>}
 
-            })}
-
-            {open && <CFieldSubCommentSend id={_id}/>}
+            {open && <CFieldSubCommentSend id={_id} autoFocus={true} value={`@${owner?.nick || owner?.login || ''}, `} setOpen={setOpen} />}
         </Comment>
     )
 }
 const CPostComment = connect(state => ({
-    myID: state.auth.payload.sub.id || ''
+    myID: state.auth.payload.sub.id || '',
+    subComments: state?.postsFeed?.subComments
 }), {
     addLikeComment: actionLikeComment,
     removeLikeComment: actionDelLikeComment,
@@ -90,6 +87,10 @@ const CPostComment = connect(state => ({
 }
 )(PostComment)
 
+const CPostSubComment = connect(state => ({ comments: state?.postsFeed?.SubComments }, {
+    findSubComment: actionSubComment,
+}))(PostComment)
+
 const PostComments = ({ comments }) => {
     return (
         <>
@@ -115,7 +116,7 @@ const PostPageDescrption = ({ data: { _id, likes, text, title, createdAt, } }) =
             <Divider ></Divider>
             <CPostUserPanel likes={likes} postId={_id}
                 styleFontSize='1.3em' />
-            <CFieldCommentSend postId={_id} />
+            <CFieldCommentSend postId={_id} setOpen={() => { }} />
         </div>
     </div>
 
@@ -138,6 +139,4 @@ const PostPage = ({ data: { images } }) =>
         </div>
     </div>
 
-
-export const CPostPage = connect(state => ({ data: state?.postsFeed?.posts || {} }))(PostPage)
-// xs={{ span: 24 }} sm={{ span: 20 }} md={{ span: 16 }} lg={{ span: 16 }}A
+export const CPostPage = connect(state => ({ data: state?.postsFeed?.posts || {} }))(PostPage)

src/redux/reducers/postFeed-reducer.js

@@ -27,7 +27,8 @@ export const postsFeedReducer = (state = {}, { type, findId, newResult, userData
                 ...state,
                 posts: [],
                 userData: {},
-                count: 0
+                count: 0,
+                subComments: {}
             }
         },
         'ADD-POST-LIKE': () => {
@@ -49,36 +50,16 @@ export const postsFeedReducer = (state = {}, { type, findId, newResult, userData
         'ADD-COMMENT': () => {
             return {
                 ...state,
-                posts: Array.isArray(posts)
-                    ? posts.map(p => p._id === findId ? { ...p, comments: [...newResult] } : p)
-                    : { ...state.posts, comments: [...newResult] },
+                posts: { ...state.posts, comments: [...newResult] }
             }
         },
         'UPDATE-SUBCOMMENT': () => {
             return {
                 ...state,
-                posts: {
-                    ...state.posts,
-                    comments: posts.comments.map(c => c._id === findId ? c = { ...c, answers: [...newResult] } : c)
-                }
+                subComments: { ...state?.subComments, ...{ ['subComments#' + findId]: [...newResult] } }
             }
-
         },
         'ADD-LIKE-COMMENT': () => {
-            console.log(state);
-            for (const answers of state.posts.comments) {
-                console.log(answers);
-            }
-            // const newState = [...state].posts.comments.map(c)
-            // function findNode(id, currentNode) {
-            //     if (id == currentNode.id) {
-            //         return currentNode;
-            //     } else {
-            //         currentNode.children.forEach(function (currentChild) {
-            //             findNode(id, currentChild);
-            //         });
-            //     }
-            // }
             return {
                 ...state,
                 posts: {
@@ -88,7 +69,6 @@ export const postsFeedReducer = (state = {}, { type, findId, newResult, userData
             }
         },
         'REMOVE-LIKE-COMMENT': () => {
-            // console.log(state);
             return {
                 ...state,
                 posts: {

src/redux/saga/index.js

@@ -239,27 +239,24 @@ function* subscribeWatcher() {
 //*************** COMMENTS ******************//
 
 
-function* addCommentWorker({ postId, text }) {
-    yield call(promiseWorker, actionAddComment(postId, text))
-    const { comments } = yield call(promiseWorker, actionFindComment(postId))
+function* addCommentWorker({ text }) {
+    const { postsFeed: { posts: { _id } } } = yield select()
+    yield call(promiseWorker, actionAddComment(_id, text))
+    const { comments } = yield call(promiseWorker, actionFindComment(_id))
+    console.log(comments, _id);
     if (comments) {
-        yield put(actionAddCommentAC(postId, comments))
+        yield put(actionAddCommentAC(comments))
     }
 }
 
 function* addSubCommentWorker({ commentId, text }) {
-    const { postsFeed: { posts: { _id } } } = yield select()
-    console.log(_id, text);
-    // yield call(promiseWorker, actionSubAddComment(commentId, text))
-    // const { answers } = yield call(promiseWorker, actionFindSubComment(commentId))
-    // if (answers) {
-    //     yield put(actionAddCommentAC(commentId, answers))
-    // }
+    yield call(promiseWorker, actionSubAddComment(commentId, text))
+    yield call (findSubCommentWorker, {commentId})
 }
 
-function* addFindSubCommentWorker({ commentId }) {
+function* findSubCommentWorker({ commentId }) {
+    console.log(commentId);
     const { answers } = yield call(promiseWorker, actionFindSubComment(commentId))
-    console.log(answers);
     if (answers) {
         yield put(actionUpdateSubCommentAC(commentId, answers))
     }
@@ -268,7 +265,7 @@ function* addFindSubCommentWorker({ commentId }) {
 function* addCommentWatcher() {
     yield all([
         takeEvery('COMMENT_POST', addCommentWorker),
-        takeEvery('FIND_SUBCOMMENT', addFindSubCommentWorker),
+        takeEvery('FIND_SUBCOMMENT', findSubCommentWorker),
         takeEvery('ADD_SUB_COMMENT', addSubCommentWorker)
     ])
 }