added fullComment and add like/unlike

src/App.scss

@@ -120,4 +120,20 @@ main{
    
     // color: #fff; 
      width: 30%; /* Ширина слоя */
+}
+.active {
+  background-color: red;
+}
+.Scroll{
+  // background-color: #e9dfdfa6;
+  // display: block;
+  display: block;
+  // align-items: center;
+  // justify-content: center;
+  flex-direction:column;
+  width: 100%;
+  height: 300px;
+  // padding: 1em;
+  overflow-y: scroll;
+  // text-align: center;
 }

src/actions/index.js

@@ -206,7 +206,7 @@ mutation PostUpsert($post:PostInput){
 
 export const actionAllPosts = () =>
     actionPromise('allPosts', 
-    gql(` query allPosts($_id:String!){
+    gql(` query allPosts($_id:String){
                 PostFind(query:$_id){
                   owner{_id} _id title text images{_id url}
                 }
@@ -224,11 +224,13 @@ export const actionOnePost = (_id) => async (dispatch) => {
         `query OneFind($post:String){
          PostFindOne(query:$post){
         _id title text images{_id url}
-        comments{_id, createdAt, text owner{login}}
-        likes{owner{login}}
+        createdAt
+        comments{_id, createdAt, text 
+        owner{_id login avatar{_id url}}}
+        likes{ _id owner{login}}
         likesCount
-    }
-}`,
+        }
+      }`,
         {
           post: JSON.stringify([{ _id }]),
         },
@@ -243,10 +245,10 @@ export const actionAllFollowers = (_id) => async (dispatch) => {
       gql(
         `query AllFollowers($userId:String){
   UserFindOne(query:$userId)
-    {
+        {
           followers{_id login}
-    }
-}`,
+        }
+      }`,
         {
           userId: JSON.stringify([{ _id }]),
         },
@@ -297,13 +299,27 @@ export const actionAddComment = (postId,comment) => async (dispatch) => {
     ),
   )
 }
-export const actionAddFullComment = (postId,comment) => async(dispatch,getState) => {
-  let addComment = await dispatch(actionAddComment(postId,comment));
-  if(addComment){
+// export const actionAddFullComment = (postId,comment) => async(dispatch) => {
+//   let addComment = await dispatch(actionAddComment(postId,comment));
+//   if(addComment){
+//     await dispatch(actionOnePost(postId));
+//   }
+// }
+
+export const actionAddFullComment = (postId,comment) => 
+async(dispatch,getState) => {
+  await dispatch(actionAddComment(postId, comment))
+  const {
+    promise: {
+      addComment: { status },
+    },
+} = getState();
+  if(status==="FULFILLED")
+  {
     await dispatch(actionOnePost(postId));
   }
+  // await dispatch(actionOnePost(postId));
 }
-
 // export const actionAddlike = _id => 
 //             actionPromise("addLike", gql(`mutation AddLike($like:LikeInput){
 //               LikeUpsert(like:$like){
@@ -325,57 +341,88 @@ export const actionAddLike = (postId) => async (dispatch) => {
         `mutation AddLike($postId:ID){
           LikeUpsert(like:{
             post:{
-            _id: $postId
-          }
+              _id:$postId
+            }
+            user:{
+              _id:"62361e6492c08631bc4b0e91"
+            }
           })
           {
-            _id
+            _id owner{_id login}
+            post{_id title text}
           }
         }`,
         {
           postId:postId
-        }
+        } 
       ),
     ),
   )
 }
-export const actionAddFullLike = (postId) => async(dispatch,getState) => {
-  let like = await dispatch(actionAddLike(postId));
-  if(like)
+export const actionAddFullLike = (postId) => 
+async(dispatch,getState) => {
+  await dispatch(actionAddLike(postId))
+  const {
+    promise: {
+      addLike: { status },
+    },
+} = getState();
+  if(status==="FULFILLED")
   {
     await dispatch(actionOnePost(postId));
   }
+  //  await dispatch(actionOnePost(postId));
 }
 
-export const actionDeleteFullLike = (likeId) => async(dispatch,getState) => {
-  let unLike = await dispatch(actionDeleteLike(likeId));
-  if(unLike){
-    await dispatch(actionOnePost(unLike?.post?._id));
+
+// export const actionDeleteFullLike = (likeId) => async(dispatch,getState) => {
+//   let unLike = await dispatch(actionDeleteLike(likeId));
+//   if(unLike){
+//     await dispatch(actionOnePost(unLike?.post?._id));
+//   }
+// }
+
+export const actionDeleteFullLike = (likeId) => 
+async(dispatch,getState) => {
+ let unlike =  await dispatch(actionDeleteLike(likeId))
+  const {
+    promise: {
+      deleteLike: { status },
+    },
+} = getState();
+  if(status==="FULFILLED")
+  {
+    await dispatch(actionOnePost(unlike?.post?._id));
   }
+  //  await dispatch(actionOnePost(postId));
 }
-export const actionDeleteLike = (postId) => async (dispatch) => {
+export const actionDeleteLike = (likeId) => async (dispatch) => {
   await dispatch(
     actionPromise(
       'deleteLike',
       gql(
-        `mutation DeleteLike($postId:ID){
-          LikeDelete(like:{
-            _id
-            post:{
-            _id: $postId
-          }
-          })
+        `mutation DeleteLike($like:LikeInput){
+          LikeDelete(like: $like)
           {
-            _id
+            _id, post{
+              _id owner{_id login}
+            }
           }
         }`,
         {
-          postId:postId
+          like:{
+            _id:likeId
+          }
         }
       ),
     ),
   )
 }
+// {
+//   _id
+//   post:{
+//   _id: $postId
+// }
 // query:"[{\"_id\": \"62068eaaad55d22f3e2fb250\"}]")
 export const actionSetAvatar = (file) => async (dispatch) => {
   let result = await dispatch(actionUploadFile(file))

src/components/Post.js

@@ -131,18 +131,46 @@ export const MyCarousel = ({ images = [] }) => {
     </>
   )
 }
+const Comment =({addComment})=>{
+  const [comment, setComment]=useState('')
+  return (
+  <div class="Comments" style={{display: 'flex', flexDirection:'row'}}>
+      <Input size="large" placeholder='Add a comment...' 
+      value={comment} onChange={e=>{setComment(e.target.value)}}/>
+
+      <Button size="large" disabled={comment.length<1} type="primary" onClick={()=>
+        addComment(postId,comment)}> Publish </Button>
+  </div>
+  )
+
+}
+const Like=({addLike, deleteLike, likeId})=>{
+  const [like, setLike]=useState(false)
+  return(
+    <>
+     {
+        like === true
+        ?
+        // setLike(!like)&&
+       <HeartFilled  style={{ fontSize:'xx-large', color:'red'}} onClick={()=>{
+        deleteLike(likeId)&&setLike(!like)}}/>
+       :
+       <HeartOutlined  style={{ fontSize:'xx-large' }} 
+       onClick={()=>{addLike(postId)&&setLike(!like)}}/>
+       }
+    </>
+  )
+}
 export const PagePost = ({ onePost,addComment, addLike, deleteLike, aboutMe: { avatar, login } = {}, onPost }) => {
- const [comment, setComment]=useState('')
- const [like, setLike]=useState(false)
 
- console.log('comment', comment)
+ console.log('onePost ', onePost)
   return (
     <>
      <Row>
       <Col span={12}>
 {/* <div  style={{display: 'flex'}}> */}
     
-      <MyCarousel images={onePost?.images} />
+      <MyCarousel style={{position: 'absolute'}} images={onePost?.images} />
       <h3 style={{ textAlign: 'center', padding:'10%'}}>
             Created Post: {new Intl.DateTimeFormat('en-GB').format(onePost?.createdAt)}
         </h3>
@@ -168,49 +196,39 @@ export const PagePost = ({ onePost,addComment, addLike, deleteLike, aboutMe: { a
 
       <h2> Text: {onePost?.text || ''} </h2>
       <Divider>Comments</Divider>
-       {onePost?.comments.map(({text, createdAt, owner})=>
+      <div className="Scroll">
+      
+       {(onePost?.comments ||[]).map(({text, createdAt, owner})=>
       (
         <>
-        <div style={{display: 'flex', flexDirection:'row'}}>
-         
+        <div style={{display: 'flex', flexDirection:'row', padding:'5px', margin:'5px' }}>
          {owner?.avatar ? 
          <Avatar
-          style={{ width: '25px', height: '25px', marginLeft:'2%' }}
+          style={{ width: '25px', height: '25px', marginRight:'2%' }}
           src={ '/' + owner?.avatar?.url}
         /> : 
         <Avatar style={{ width: '25px', height: '25px', marginRight:'2%' }} src={user} />
       }
       
        {owner?.login ? (
-       <h3 style={{marginRight:'2%'}}> {owner?.login} </h3> 
+       <h3 style={{marginRight:'2%' , fontWeight: 'bold'}}> {owner?.login} </h3> 
       ) : (
         <h3 style={{marginRight:'2%', fontWeight: 'bold'}}> anon </h3>
-        
-      )
+          )
       }
         <h3 style={{marginRight:'2%'}}>  {text} </h3>
  </div>
-<p>            {new Intl.DateTimeFormat('en-GB').format(createdAt)}
+        <p style={{ paddingLeft:'10px'}}>     
+          {new Intl.DateTimeFormat('en-GB').format(createdAt)}
            </p>
         </>
 
         ))
       }
-       {
-        like=== true?
-        // setLike(!like)&&
-       <HeartFilled  style={{ fontSize:'xx-large', color:'red'}} onClick={()=>{deleteLike(postId)}}/>
-       :
-       <HeartOutlined  style={{ fontSize:'xx-large' }} onClick={()=>{addLike(postId)}}/>
-       }
+     </div>
+     <Like addLike={addLike} deleteLike={deleteLike} likeId={onePost?.likes?._id}/>
        {/* <HeartTwoTone twoToneColor="#eb2f96" /> */}
-      <div class="Comments" style={{display: 'flex', flexDirection:'row'}}>
-      <Input size="large" placeholder='Add a comment...' 
-      value={comment} onChange={e=>{setComment(e.target.value)}}/>
-
-      <Button size="large" disabled={comment.length<1} type="primary" onClick={()=>
-        addComment(postId,comment)}> Publish </Button>
-      </div>
+       <Comment addComment={addComment}/>
         </Col>
         </Row>
     </>
@@ -220,5 +238,6 @@ export const PagePost = ({ onePost,addComment, addLike, deleteLike, aboutMe: { a
 export const CPost = connect((state) => ({
   onePost: state.promise.onePost?.payload,
   aboutMe: state.promise?.aboutMe?.payload,
-}), {addComment:actionAddFullComment, addLike:actionAddFullLike,
-   deleteLike:actionDeleteFullLike})(PagePost)
+}), {addComment:actionAddFullComment, 
+    addLike:actionAddFullLike,
+    deleteLike:actionDeleteFullLike})(PagePost)