fix render edit post, and added write comment under posts in postFeed

src/App.js

@@ -35,13 +35,11 @@ const AppContent = ({ isToken }) => {
             </Switch>
             :
             <Content>
-
                 <HeaderComponent />
                 <Main>
                     <Switch>
                         <Route path='/feed' component={CMainPostsFeed} />
                         <Route path='/profile/:_id' component={CProfilePage} />
-                        {/* <Route path='/message' component={Aside} /> */}
                         <Route path='/edit/post/:_id' component={CEntityEditorPost} />
                         <Route path='/my-settings' component={CSettingsPage} />
                         <Route path='/all' component={CAllPosts} />

src/App.scss

@@ -480,11 +480,13 @@ video {
         height: auto;
     }
 }
+
 .PostCommentAuthor {
     color: $defaultColorB;
     font-size: 1.2em;
     font-weight: 500;
 }
+
 .ContainerInner {
     width: 100%;
     background-color: $defaultColorW;
@@ -492,6 +494,7 @@ video {
     box-shadow: 0 0 6px 2px rgba($defaultColorB, 0.5);
     border-radius: 5px;
 }
+
 .ContainEditPost {
     .title {
         width: 100%;
@@ -502,6 +505,7 @@ video {
         white-space: break-spaces;
     }
 }
+
 .EditPhotos {
     &__box {
         margin-bottom: 15px;
@@ -510,6 +514,7 @@ video {
         margin-bottom: 5px;
     }
 }
+
 .SortableList {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
@@ -538,6 +543,19 @@ video {
         }
     }
 }
+
+.CommentPostFeed {
+    a{
+        font-size: 1.2em;
+    }
+    span {
+        font-size: 0.8em;
+        color: #898989;
+        font-style: italic;
+        padding-left: 15px;
+    }
+}
+
 .SortableItem {
     .Handle {
         position: relative;
@@ -569,6 +587,7 @@ video {
         padding: 10px;
     }
 }
+
 .ant-image-preview-img-wrapper {
     display: flex;
     align-items: center;
@@ -577,9 +596,11 @@ video {
         max-height: 60vh;
     }
 }
+
 .ant-dropdown {
     box-shadow: 0 0 2px 0 $defaultColorB;
 }
+
 .avatar-uploader {
     display: flex;
     justify-content: center;
@@ -638,7 +659,10 @@ video {
         }
     }
 }
+
 .Exit-box__btn {
+    width: 100%;
+    justify-content: flex-end;
     button {
         display: block;
         margin-left: auto;

src/actions/index.js

@@ -75,7 +75,7 @@ export const actionPostsMyFollowing = (skip, myFollowing) =>
                 owner{_id, nick, login, avatar {url}}
                 likes { _id owner {_id}}   
                 images{ url _id originalFileName }
-                comments{_id}
+                comments{_id text  createdAt  owner {_id login nick}}
                 createdAt
         }
     }`, {
@@ -219,7 +219,7 @@ export const actionAddLikeComment = (_id) =>
     }`, { like: { comment: { _id } } }))
 
 export const actionRemoveLikeComment = (_id) =>
-    actionPromise('removelikePost', gql(`mutation LikeRemove($like:LikeInput){
+    actionPromise('removelikeComment', gql(`mutation LikeRemove($like:LikeInput){
             LikeDelete(like:$like){_id}
         }`, { like: { _id } }))
 
@@ -307,7 +307,7 @@ export const actionUpdateFollowers = (_id) =>
 //****************---Action Comments ---*************************//
 
 
-export const actionAddCommentAC = (newResult) => ({ type: 'ADD-COMMENT', newResult })
+export const actionAddCommentAC = (findId, newResult) => ({ type: 'ADD-COMMENT', findId, newResult })
 export const actionUpdateSubCommentAC = (findId, newResult) => ({ type: 'UPDATE-SUBCOMMENT', findId, newResult })
 export const actionEditCommentAC = (findId, newResult) => ({ type: 'EDIT-COMMENT', findId, newResult })
 export const actionEditComment = (commentId, text) => ({ type: 'COMMENT_EDIT', commentId, text })
@@ -451,4 +451,4 @@ export const actionUpsertPost = (upSertPostObj) =>
               PostUpsert(post: $post){
                     _id images{_id url originalFileName}
                 }
-            }`, { post: upSertPostObj }))
+            }`, { post: upSertPostObj }))

src/components/header/Header.jsx

@@ -17,7 +17,7 @@ const UserNavIcon = ({ userData: { _id, avatar, login } }) =>
             <NavLink to='/feed'><HomeOutlined /></NavLink>
         </Col>
         <Col >
-            <NavLink to='/message'><MessageOutlined /></NavLink>
+            <NavLink to='/direct'><MessageOutlined /></NavLink>
         </Col>
         <Col >
             <NavLink to='/edit/post/new'><PlusCircleOutlined /></NavLink>

src/components/main/post/PostComment.js

@@ -2,7 +2,7 @@ import React, { useState } from 'react'
 import { Divider, Dropdown, Menu } from 'antd';
 import { connect } from 'react-redux'
 import Text from 'antd/lib/typography/Text';
- import { Comment, Tooltip } from 'antd';
+import { Comment, Tooltip } from 'antd';
 import moment from 'moment';
 import { Link } from 'react-router-dom';
 import { EditOutlined, LikeFilled, LikeOutlined, MoreOutlined } from '@ant-design/icons';
@@ -49,7 +49,7 @@ const PostCommentText = ({ myID, commentId, owner, text }) => {
 const CPostCommentText = connect(state => ({ myID: state.auth.payload.sub.id || '' }))(PostCommentText)
 
 
-const PostCommentDate = ({ createdAt }) =>
+export const PostCommentDate = ({ createdAt }) =>
     <Tooltip title={moment(new Date(+createdAt)).format('DD-MM-YYYY HH:mm:ss')} >
         {moment(new Date(+createdAt)).startOf().fromNow()}
     </ Tooltip>

src/components/main/postsFeed/FieldComment.jsx

@@ -17,6 +17,7 @@ const FieldCommentSend = ({ id, sentComment, autoFocus, value = '', setOpen, row
     }
     const sendCommentValid = (value) => {
         if (value.trim() !== '') {
+            console.log(id);
             sentComment(id, value.trim())
             setCommentValue('')
         } else {

src/components/uploadPhoto/EditPhotos.js

@@ -60,10 +60,10 @@ const SortableItem = SortableElement(props => {
 });
 
 
-const SortableList = SortableContainer(({ items, ...restProps }) => {
+const SortableList = SortableContainer(({ items=[], ...restProps }) => {
     return (
         <div className='SortableList'>
-            {items.map((item, index) => (
+            {items?.map((item, index) => (
                 <SortableItem
                     key={`item-${item._id}`}
                     index={index}
@@ -76,7 +76,7 @@ const SortableList = SortableContainer(({ items, ...restProps }) => {
 });
 
 
-export function EditPhotos({ photos, setPhotos }) {
+export function EditPhotos({ photos=[], setPhotos }) {
     const [progress, setProgress] = useState(0);
     const [loading, setLoading] = useState(false);
     const handlerChange = async ({ file }) => {
@@ -85,7 +85,7 @@ export function EditPhotos({ photos, setPhotos }) {
             setProgress(file.percent)
         } else if (file.status === 'done') {
             message.success(`${file.name} file uploaded successfully`);
-            setPhotos([...photos, file.response])
+            setPhotos([...photos||[], file.response])
         } else if (file.status === 'error') {
             message.error(`${file.name} file upload failed.`);
         }
@@ -97,7 +97,7 @@ export function EditPhotos({ photos, setPhotos }) {
 
     return (
         <div className="EditPhotos" >
-            {photos.length >= 8 ? null
+            {photos?.length >= 8 ? null
                 : <Dragger {...propsUploadFile}
                     className="EditPhotos__box"
                     multiple={true}

src/pages/EntityEditorPost.jsx

@@ -48,7 +48,7 @@ const EntityEditorPost = ({ match: { params: { _id } }, myID, entity, status, on
         }
     }, [status])
 
-    const disabledBtn = photos.length && titleSend && description ? false : true
+    const disabledBtn = photos?.length && titleSend && description ? false : true
     const sentPost = () => onSave(photos, titleSend, description)
 
     return (

src/pages/MainPostsFeed.jsx

@@ -11,6 +11,8 @@ import { CPostUserPanel } from '../components/main/postsFeed/PostUserPanel'
 import { Container } from './Content'
 import { CPostTitle } from '../components/main/post/PostTitle'
 import { CPreloader } from './Preloader'
+import { CFieldCommentSend } from '../components/main/postsFeed/FieldComment'
+import { PostCommentDate } from '../components/main/post/PostComment'
 
 
 export const PostDescription = ({ title, description, date }) =>
@@ -30,12 +32,37 @@ export const PostDescription = ({ title, description, date }) =>
         </Paragraph>
     </>
 
-export const Comments = ({ comments = [], _id }) =>
-    <Link to={`/post/${_id}`}>
-        <Divider orientation="left">
-            {comments?.length ? `View ${comments.length} comments` : 'No comments'}
-        </Divider>
-    </Link>
+const CommentPostFeed = ({ comment }) =>
+    <div className='CommentPostFeed'>
+        <Link to={`/profile/${comment.owner._id}`}>
+            {comment?.owner?.login}
+        </Link>
+        <PostCommentDate createdAt={comment.createdAt} />
+        <Paragraph ellipsis={{ rows: 1, expandable: true, symbol: 'more' }}>
+            {comment?.text}
+        </Paragraph>
+    </div>
+
+export const CommentSPostFeed = ({ comments = [], _id }) =>
+    <>
+        {
+            comments && comments.length
+                ? <>
+                    {(comments.length > 2) && <Link to={`/post/${_id}`}>
+                        <Divider orientation="left">
+                            {comments?.length ? `View ${comments.length} comments` : 'No comments'}
+                        </Divider>
+                    </Link>}
+                    {comments.slice(0, 2).map(c => <CommentPostFeed key={c._id} comment={c} />)}
+                </>
+                : <Link to={`/post/${_id}`}>
+                    <Divider orientation="left">
+                        {comments?.length ? `View ${comments.length} comments` : 'No comments'}
+                    </Divider>
+                </Link>
+        }
+        <CFieldCommentSend id={_id} setOpen={() => { }} />
+    </>
 
 const Post = ({ postData: { _id, text, title, owner, images, createdAt = '', comments, likes, collections } }) =>
     <div className='Post'>
@@ -48,7 +75,7 @@ const Post = ({ postData: { _id, text, title, owner, images, createdAt = '', com
                 collections={collections}
                 styleFontSize='1.7em' />
             <PostDescription title={title} description={text} date={createdAt} />
-            <Comments comments={comments} _id={_id} />
+            <CommentSPostFeed comments={comments} _id={_id} />
         </Card>
     </div>
 

src/pages/PostPage.jsx

@@ -30,7 +30,7 @@ const PostPageDescrption = ({ data: { _id, likes, text, title, createdAt, } }) =
             <Divider />
             <CPostUserPanel likes={likes} postId={_id}
                 styleFontSize='1.3em' />
-            <CFieldCommentSend setOpen={() => { }} /> {/* setOpen - функция заглушка для пропса компонента*/}
+            <CFieldCommentSend id={_id} setOpen={() => { }} /> {/* setOpen - функция заглушка для пропса компонента*/}
         </div>
     </div>
 

src/redux/reducers/postFeed-reducer.js

@@ -42,7 +42,10 @@ export const postsFeedReducer = (state = {}, { type, findId, newResult, userData
         }),
 
         'ADD-COMMENT': () => ({
-            ...state, posts: { ...state.posts, comments: [...newResult] }
+            ...state,
+            posts: Array.isArray(posts)
+                ? posts.map(p => p._id === findId ? p = { ...p, comments: [...newResult] } : p)
+                : { ...state.posts, comments: [...newResult] }
         }),
 
         'UPDATE-SUBCOMMENT': () => {
@@ -108,7 +111,7 @@ export const postsFeedReducer = (state = {}, { type, findId, newResult, userData
                 }
             })
         },
-        
+
         'UPDATE-FOLLOWERS': () => ({
             ...state,
             userData: { ...state.userData, followers: [...newResult] }

src/redux/saga/index.js

@@ -273,13 +273,11 @@ function* subscribeWatcher() {
 //*************** COMMENTS ******************//
 
 
-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);
+function* addCommentWorker({ text, postId }) {
+    yield call(promiseWorker, actionAddComment(postId, text))
+    const { comments } = yield call(promiseWorker, actionFindComment(postId))
     if (comments) {
-        yield put(actionAddCommentAC(comments?.reverse()))
+        yield put(actionAddCommentAC(postId, comments.reverse()))
     }
 }