added comment like

src/App.scss

@@ -442,3 +442,8 @@ body {
     &__description-bottom {
     }
 }
+.PostCommentAuthor  {
+    color: #000;
+    font-size: 1.2em;
+    font-weight: 500;
+}

src/actions/index.js

@@ -142,11 +142,11 @@ export const actionLoadSearchUsers = (value) =>
     }))
 
 
-//****************---Action Like ---*************************//
+//****************---Action Like Post ---*************************//
 
 
-export const actionAddLikePostAC = (postId, newResult) => ({ type: 'ADD-POST-LIKE', postId, newResult })
-export const actionRemoveLikePostAC = (postId, newResult) => ({ type: 'REMOVE-POST-LIKE', postId, newResult })
+export const actionAddLikePostAC = (findId, newResult) => ({ type: 'ADD-POST-LIKE', findId, newResult })
+export const actionRemoveLikePostAC = (findId, newResult) => ({ type: 'REMOVE-POST-LIKE', findId, newResult })
 
 
 export const actionLikePost = (postId) => ({ type: 'LIKE_POST', postId })
@@ -169,14 +169,41 @@ export const actionRemoveLikePost = (_id) =>
         }`, { like: { _id } }))
 
 
-export const actionMyLikePost = (postId) =>
+export const actionMyLikePost = (findId) =>
     actionPromise('myLikes', gql(`query likeFindPost ($id:String!){
         PostFindOne(query:$id){
         likes { _id owner {_id}}
         }
-    }`, { id: JSON.stringify([{ _id: postId }]) }))
+    }`, { id: JSON.stringify([{ _id: findId }]) }))
 
 
+//****************---Action Like Comment ---*************************//
+
+export const actionAddLikeCommentAC = (findId, newResult) => ({ type: 'ADD-LIKE-COMMENT', findId, newResult })
+export const actionRemoveLikeCommentAC = (findId, newResult) => ({ type: 'REMOVE-LIKE-COMMENT', findId, newResult })
+
+export const actionLikeComment = (commentId) => ({ type: 'LIKE_COMMENT', commentId })
+export const actionDelLikeComment = (likeId, commentId) => ({ type: 'DEL_LIKE_COMMENT', likeId, commentId })
+
+export const actionAddLikeComment = (_id) =>
+    actionPromise('likePost', gql(`mutation LikePost($like:LikeInput){
+        LikeUpsert(like:$like){
+            _id
+        }
+    }`, { like: { comment: { _id } } }))
+
+export const actionRemoveLikeComment = (_id) =>
+    actionPromise('removelikePost', gql(`mutation LikeRemove($like:LikeInput){
+            LikeDelete(like:$like){_id}
+        }`, { like: { _id } }))
+
+export const actionFindLikeComment = (findId) =>
+    actionPromise('findLikeComment', gql(`query findLikeComment ($id:String!){
+        CommentFindOne(query:$id){
+        likes { _id owner {_id}}
+        }
+    }`, { id: JSON.stringify([{ _id: findId }]) }))
+
 //****************---Action Subscribe ---*************************//
 
 
@@ -216,21 +243,21 @@ export const actionUpdateFollowers = (_id) =>
 //****************---Action Comments ---*************************//
 
 
-export const actionAddCommentAC = (postId, newResult) => ({ type: 'ADD-COMMENT', postId, newResult })
-export const actionFullAddComment = (postId, text) => ({ type: 'COMMENT_POST', postId, text })
+export const actionAddCommentAC = (findId, newResult) => ({ type: 'ADD-COMMENT', findId, newResult })
+export const actionFullAddComment = (findId, text) => ({ type: 'COMMENT_POST', findId, text })
 
-export const actionAddComment = (postId, text) =>
+export const actionAddComment = (findId, text) =>
     actionPromise('addcomment', gql(`mutation addcomment($comment: CommentInput ){
         CommentUpsert(comment:$comment){
             _id text
         }
-    }`, { comment: { post: { _id: postId }, text } }))
-export const actionFindComment = (postId) =>
+    }`, { comment: { post: { _id: findId }, text } }))
+export const actionFindComment = (findId) =>
     actionPromise('findCommentPost', gql(`query commentFindPost ($id:String!){
         PostFindOne(query:$id){
             comments{_id text owner{_id nick login} likes{_id}}
         }
-    }`, { id: JSON.stringify([{ _id: postId }]) }))
+    }`, { id: JSON.stringify([{ _id: findId }]) }))
 
 
 //****************---Action Udate Avatar ---*************************//

src/pages/MainPostsFeed.jsx

@@ -12,7 +12,6 @@ import { CPostUserPanel } from '../components/main/postsFeed/PostUserPanel'
 import { CFieldCommentSend } from '../components/main/postsFeed/FieldComment'
 
 export const PostTitle = ({ owner }) =>
-
     <Row justify="start" align='middle'>
         <Link to={`/profile/${owner?._id}`} className='owner'>
             <UserAvatar avatar={owner?.avatar} avatarSize={'45px'} />
@@ -70,8 +69,8 @@ const Post = ({ postData: { _id, text, title, owner, images, createdAt = '', com
     </div>
 
 
-
 const MainPostsFeed = ({ posts, postsFollowing, postsFollowingRemove, following }) => {
+
     const [checkScroll, setCheckScroll] = useState(true)
 
     useEffect(() => {

src/pages/PostPage.jsx

@@ -1,82 +1,97 @@
-import React, { useEffect } from 'react'
+import React, { useEffect, useState } from 'react'
 import { Row, Col, Divider } from 'antd';
 import { connect } from 'react-redux'
 import PostImage from '../components/main/postsFeed/PostImage'
 import { PostTitle, PostDescription } from './MainPostsFeed';
-import { actionRemovePostsFeedAC } from '../actions';
 import Text from 'antd/lib/typography/Text';
 import { CFieldCommentSend } from '../components/main/postsFeed/FieldComment';
 import { CPostUserPanel } from '../components/main/postsFeed/PostUserPanel';
-import { createElement, useState } from 'react';
 import { Comment, Tooltip, Avatar } from 'antd';
 import moment from 'moment';
-import { DislikeOutlined, LikeOutlined, DislikeFilled, LikeFilled } from '@ant-design/icons';
 import { UserAvatar } from './Header';
 import { Link } from 'react-router-dom';
+import { LikeFilled, LikeOutlined } from '@ant-design/icons';
+import { actionLikeComment, actionAddLikeCommentAC, actionFindLikeComment, actionDelLikeComment } from '../actions';
 
 
+const PostPageTitle = ({ data: { owner } }) =>
+    <PostTitle owner={owner} />
 
+const CPostPageTitle = connect(state => ({ data: state?.postsFeed?.posts || {} }))(PostPageTitle)
+// 
 
+const PostCommentAuthor = ({ owner }) => {
+    return (
+        <Link className='PostCommentAuthor' to={`/profile/${owner?._id}`} >
+            {owner?.nick ? owner.nick : owner?.login ? owner.login : 'Null'}
+        </Link>
+    )
+}
 
 
+const PostComment = ({ myID, data: { _id, answerTo, answers, createdAt, likes = [], text, owner }, addLikeComment, removeLikeComment, children }) => {
+    const [open, setOpen] = useState(false);
 
+    let likeStatus
+    let likeId
+    likes.find(l => {
+        if (l?.owner?._id === myID) {
+            likeStatus = true
+            likeId = l._id
+        } else {
+            likeStatus = false
+        }
+    })
 
-const PostPageTitle = ({ data: { owner } }) =>
-    <PostTitle owner={owner} />
-
-const CPostPageTitle = connect(state => ({ data: state?.postsFeed?.posts || {} }))(PostPageTitle)
-
-const PostComments = ({ comments: { _id, answerTo, answers, createdAt, likes, text, owner } }) => {
-    const [likejs, setLikes] = useState(0);
-    const [dislikes, setDislikes] = useState(0);
-    const [action, setAction] = useState(null);
-console.log(owner);
-    const like = () => {
-        setLikes(1);
-        setDislikes(0);
-        setAction('liked');
-    };
-
-    const dislike = () => {
-        setLikes(0);
-        setDislikes(1);
-        setAction('disliked');
-    };
+    const changeLike = () => likeStatus ? removeLikeComment(likeId, _id) : addLikeComment(_id)
 
     const actions = [
-        <Tooltip key="comment-basic-like" title="Like">
-            <span onClick={like}>
-                {createElement(action === 'liked' ? LikeFilled : LikeOutlined)}
-                <span className="comment-action">{likes}</span>
-            </span>
-        </Tooltip>,
-        <span key="comment-basic-reply-to">Reply to</span>,
+        <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>,
+        open && <CFieldCommentSend onFocus />
     ];
-    const author = [
-        <Link to={`/profile/${owner?._id}`} >
-            <span className='nick'>{owner?.nick ? owner.nick : owner?.login ? owner.login : 'Null'}</span>
-        </Link>
-    ]
     return (
         <Comment
             actions={actions}
-            author={author}
-            avatar={<UserAvatar avatar={owner?.avatar} avatarSize={'35px'} />}
-            content={
-                <p>
-                    {text}
-                </p>
-            }
+            author={<PostCommentAuthor owner={owner} />}
+            avatar={< UserAvatar avatar={owner.avatar} avatarSize={'35px'} />}
+            content={<p>{text}</p >}
             datetime={
-                <Tooltip title={moment().format('YYYY-MM-DD HH:mm:ss')}>
-                    <span>{moment().fromNow()}</span>
-                </Tooltip>
+                < Tooltip title={moment(new Date(+createdAt)).format('DD-MM-YYYY HH:mm:ss')} >
+                    <span>
+                        {moment(new Date(+createdAt)).startOf('seconds').fromNow()}
+                    </span>
+                </ Tooltip>
+            }
+        >
+            {children}
+        </Comment>
+    )
+}
+const CPostComment = connect(state => ({
+    myID: state.auth.payload.sub.id || ''
+}), {
+    addLikeComment: actionLikeComment,
+    removeLikeComment: actionDelLikeComment,
+}
+)(PostComment)
+
+const PostComments = ({ comments }) => {
+    return (
+        <>
+            {
+                comments.map(c => <CPostComment key={c._id} data={c}></CPostComment>)
             }
-        />
+        </>
     )
 }
 
-const CPostComments = connect(state => ({ comments: state?.postsFeed?.posts?.coments || [] }))(PostComments)
+const CPostComments = connect(state => ({
+    comments: state?.postsFeed?.posts?.comments || []
+}))(PostComments)
 
 const PostPageDescrption = ({ data: { _id, likes, text, title, createdAt, } }) =>
     <div className='PostOne__description-inner'>

src/redux/reducers/postFeed-reducer.js

@@ -1,6 +1,6 @@
 import React from 'react'
 
-export const postsFeedReducer = (state = {}, { type, postId, newResult, userData = {}, count = null }) => {
+export const postsFeedReducer = (state = {}, { type, findId, newResult, userData = {}, count = null }) => {
     const { posts } = state
     const types = {
         'ADD-POSTS-FEED': () => {
@@ -34,7 +34,7 @@ export const postsFeedReducer = (state = {}, { type, postId, newResult, userData
             return {
                 ...state,
                 posts: Array.isArray(posts)
-                    ? posts.map(p => p._id === postId ? p = { ...p, likes: [...newResult] } : p)
+                    ? posts.map(p => p._id === findId ? p = { ...p, likes: [...newResult] } : p)
                     : { ...state.posts, likes: [...newResult] },
             }
         },
@@ -42,14 +42,32 @@ export const postsFeedReducer = (state = {}, { type, postId, newResult, userData
             return {
                 ...state,
                 posts: Array.isArray(posts)
-                    ? posts.map(p => p._id === postId ? p = { ...p, likes: [...newResult] } : p)
-                    : { ...state.posts, likes: [...newResult] },   
+                    ? posts.map(p => p._id === findId ? p = { ...p, likes: [...newResult] } : p)
+                    : { ...state.posts, likes: [...newResult] },
             }
         },
         'ADD-COMMENT': () => {
             return {
                 ...state,
-                posts: posts.map(p => p._id === postId ? { ...p, comments: [...newResult] } : p)
+                posts: posts.map(p => p._id === findId ? { ...p, comments: [...newResult] } : p)
+            }
+        },
+        'ADD-LIKE-COMMENT': () => {
+            return {
+                ...state,
+                posts: {
+                    ...state.posts,
+                    comments: posts.comments.map(c => c._id === findId ? c = { ...c, likes: [...newResult] } : c)
+                }
+            }
+        },
+        'REMOVE-LIKE-COMMENT': () => {
+            return {
+                ...state,
+                posts: {
+                    ...state.posts,
+                    comments: posts.comments.map(c => c._id === findId ? c = { ...c, likes: [...newResult] } : c)
+                }
             }
         },
         'UPDATE-FOLLOWERS': () => {