Add addSubCommentWatcher, getSubCommentWatcher and make tree-comments

src/App.js

@@ -14,9 +14,6 @@ console.log(store.getState())
 store.subscribe(() => console.log(store.getState()))
 console.log('ABOUT ME', store.getState().auth?.payload?.sub?.id)
 
-
-
-
 function App() {
   if (store.getState().auth?.token) {
     console.log('токен', store.getState().auth?.payload?.sub?.id)

src/App.scss

@@ -330,7 +330,7 @@ main {
 .ScrollForFeed {
   display: block;
   flex-direction: column;
-  height: 150px;
+  height: 20s0px;
   overflow-y: scroll;
 }
 .button {
@@ -364,6 +364,12 @@ main {
   margin: 20px;
 }
 
+.NumberPosts{
+  text-shadow: 1px 1px 1px rgb(81, 77, 77), 
+  3px 3px 5px rgb(72, 72, 76); 
+  // box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+
+}
 .Avatar {
   margin-left: 20px;
   width: 100px;

src/actions/index.js

@@ -355,22 +355,27 @@ export const actionOnePost = (_id) =>
     gql(
       `query OneFind($post:String){
         PostFindOne(query:$post){
-       _id title text images{_id url}
-       owner{_id login avatar{_id url}}
-       createdAt
-       comments{
-         _id, createdAt, text  owner{_id login avatar{_id url}}
-         answers{
-           _id, createdAt, text owner{_id login  avatar{_id url}}
-         }
-       owner{_id login avatar{_id url}}}
-       likes{
-         _id
-         owner{				
-            _id login avatar {_id url}
-           }
-     }}}
-
+          _id createdAt title text 
+          images{_id url originalFileName}
+          comments {
+              _id createdAt text 
+              likes { _id owner {_id}}   
+              owner {_id login nick
+                      avatar {url}
+                  }
+              answers{
+                  _id  
+                  }
+                 answerTo{_id} 
+              }
+          likes{ _id
+              owner{_id}
+          }
+          owner {_id login nick
+              avatar {url}
+              }
+          }
+      }
       `,
       {
         post: JSON.stringify([{ _id }]),
@@ -473,7 +478,7 @@ export const actionGetCommentsOnePost = (postId) =>
     }`, { id: JSON.stringify([{ _id: postId }]) }))
 
 
-export const actionAddSubComment = (commentId, comment) =>
+export const actionAddSubComment = (commentId, newResult) =>
     actionPromise(
       'addSubComment',
       gql(
@@ -490,7 +495,7 @@ export const actionAddSubComment = (commentId, comment) =>
             answerTo: {
               _id: commentId,
             },
-            text: comment,
+            text: newResult,
           },
         },
       ),
@@ -519,21 +524,6 @@ export const actionAddSubComment = (commentId, comment) =>
 //   // await dispatch(actionOnePost(postId));
 // }
 
-export const actionAddSubFullComment = (postId, commentId, comment) => async (
-  dispatch,
-  getState,
-) => {
-  await dispatch(actionAddSubComment(commentId, comment))
-  const {
-    promise: {
-      addSubComment: { 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){

src/actions/typeSaga/postActionSaga.js

@@ -5,4 +5,13 @@ export const actionAddFullCommentSaga = (postId, text) => ({
     type:"ONE_POST_COMMENT", postId, text
     
   })
-  
+  
+export const actionAddSubCommentTypeSaga = ( commentId,
+  newResult) => ({
+  type:"POST_SUB_COMMENT",  commentId, newResult
+    
+})
+export const actionFindSubCommentTypeSaga = (commentId) => ({
+  type:"GET_SUB_COMMENT",commentId
+    
+  })

src/actions/types/postActionTypes.js

@@ -7,4 +7,7 @@ export const actionChangeLikeType = (newResult) => ({
   })
   export const actionAddCommentType = (newResult) => ({
     type:"ADD_COMMENT", newResult
-  })
+})
+export const actionAddSubCommentType = (commentId,newResult) => ({
+  type:"ANSWERS-COMMENT",commentId, newResult
+})

src/components/EditAvatar.jsx

@@ -50,7 +50,7 @@ const EditAvatar = ({
         {fileStatus?.payload?.url && (
           <Image
             style={{
-              marginBottom: '30px',
+              // marginBottom: '30px',
               width: '200px',
               objectFit: 'cover',
               height: '150px',

src/components/comment/AddComment.jsx

@@ -2,127 +2,73 @@ import { Picker } from 'emoji-mart'
 import 'emoji-mart/css/emoji-mart.css'
 import React, { useState } from 'react'
 import { Input, Button } from 'antd'
-import { SmileOutlined,SmileFilled } from '@ant-design/icons'
+import { SmileOutlined, SmileFilled } from '@ant-design/icons'
 
-export const AddComment = ({ addComment, postId,style, width }) => {
-    const [text, setComment] = useState('')
-    const [showEmojiPicker, setShowEmojiPicker] = useState(false)
-    console.log('show stickers', showEmojiPicker)
-    const handleOK = () => 
-      setShowEmojiPicker(!showEmojiPicker)
-  
-    const addEmoji = ({ native }) => 
-    setComment((text + ' ' + native).trim())
-  
-    return (
-      <>
-        {showEmojiPicker && (
-         
-          <Picker
-           style={style}
-            theme="light"
-            native={true}
-            showPreview={false}
-            showSkinTones={false}
-            onSelect={(native) =>
-              addEmoji(native)}
-            />
-        )}
-        <Input
-          style={{
-            display: 'flex',
-            width,
-            margin:"0 10px"
-          }}
-          size="large"
-          placeholder="Add a comment..."
-          value={text}
-          onChange={(e) => {
-            setComment(e.target.value)
-          }}
-          onPressEnter={(e) => {
-            setComment(e.target.value)
-          }}
+ const AddComment = ({ addComment, postId, style, width }) => {
+  const [text, setComment] = useState('')
+  const [showEmojiPicker, setShowEmojiPicker] = useState(false)
+  const handleOK = () => setShowEmojiPicker(!showEmojiPicker)
+
+  const addEmoji = ({ native }) => setComment((text + ' ' + native).trim())
+
+  return (
+    <>
+      {showEmojiPicker && (
+        <Picker
+          style={style}
+          theme="light"
+          native={true}
+          showPreview={false}
+          showSkinTones={false}
+          onSelect={(native) => addEmoji(native)}
         />
-        {
-          !showEmojiPicker ?
-          <SmileOutlined
+      )}
+      <Input
+        style={{
+          display: 'flex',
+          width,
+          margin: '0 10px',
+        }}
+        size="large"
+        placeholder="Add a comment..."
+        value={text}
+        onChange={(e) => {
+          setComment(e.target.value)
+        }}
+        onPressEnter={(e) => {
+          setComment(e.target.value)
+        }}
+      />
+      {!showEmojiPicker ? (
+        <SmileOutlined
           className="smile-btn"
           style={{ fontSize: 'xx-large', marginRight: '15px' }}
-        
           onClick={handleOK}
-            />
-            :
-            <SmileFilled 
-            className="smile-btn"
-            style={{ color:'#108ee9',fontSize: 'xx-large', marginRight: '30px' }}
-          
-            onClick={handleOK}
-          />
-      }
-       
-        <Button
-          size="large"
-          disabled={text.length < 1}
-          type="primary"
-          onClick={(e) => { 
-            addComment(postId, text)
-              && setComment(e.target.value = '') &&
-              setShowEmojiPicker(false)
-          }}
-        >
-          {' '}
-          Publish{' '}
-        </Button>
-      </>
-    )
-  }
-  export const SpoilerButton = ({ text, close, children, style }) => {
-    const [opened, setOpened] = useState(close)
-    return (
-      <>
-        <Button
-          onClick={() => {
-            setOpened(!opened)
-          }}
-          style={style}
-        >
-          {text}
-        </Button>
-        {opened && children}
-      </>
-    )
-  }
-  const CommentForReply = ({ addCommentReply, commentId, postId }) => {
-    const [comment, setComment] = useState('')
-    return (
-      <>
-        <div
+        />
+      ) : (
+        <SmileFilled
+          className="smile-btn"
           style={{
-            display: 'flex',
-            flexDirection: 'row',
-            width: '100%',
-            padding: '15px',
-            marginLeft: '40px',
+            color: '#108ee9',
+            fontSize: 'xx-large',
+            marginRight: '30px',
           }}
-        >
-          <Input
-            placeholder="Add a comment..."
-            value={comment}
-            onChange={(e) => {
-              setComment(e.target.value)
-            }}
-          />
-          <Button
-            disabled={comment.length < 1}
-            type="primary"
-            onClick={() => addCommentReply(postId, commentId, comment)}
-          >
-            {' '}
-            Publish{' '}
-          </Button>
-        </div>
-      </>
-    )
-  }
-  
+          onClick={handleOK}
+        />
+      )}
+      <Button
+        size="large"
+        disabled={text.length < 1}
+        type="primary"
+        onClick={(e) => {
+          addComment(postId, text) && setComment((e.target.value = ''))
+        }}
+      >
+        {' '}
+        Publish{' '}
+      </Button>
+    </>
+  )
+}
+
+export default AddComment

src/components/comment/Comment.jsx

@@ -1,98 +1,71 @@
-import {
-  actionAddFullComment,
-  actionFindSubComment,
-  actionAddSubFullComment,
-} from '../../actions'
-import { Tooltip } from 'antd'
 import { connect } from 'react-redux'
-import { Link } from 'react-router-dom'
-
-import { Input, Button } from 'antd'
-import { SmileOutlined,SmileFilled } from '@ant-design/icons'
-import moment from 'moment'
 import React, { useState } from 'react'
 import 'emoji-mart/css/emoji-mart.css'
-import { Picker } from 'emoji-mart'
-import {  Comment,Avatar } from 'antd';
-import user from '../../materials/user.png'
-
+import { Comment, Avatar } from 'antd'
+import { CommentAction } from './Reply'
 import { CommentDate } from './CommentDate'
-export const Comments =  ({
+import {
+  actionAddSubCommentTypeSaga,
+  actionFindSubCommentTypeSaga,
+} from '../../actions/typeSaga/postActionSaga'
+import { Typography } from 'antd'
+import CommentAuthor from './CommentAuthor'
+import CommentAvatar from './CommentAvatar'
+const { Text } = Typography
+export const Comments = ({
   comments,
   postId,
-  commentsFind,
-  addCommentReply,
-  children,
-  close,
+  parentId,
   findSubComment,
-  onGetLikes,
-  onGetType
 }) => {
-  const [opened, setOpened] = useState(close)
   return (
     <>
-      {comments 
-        ? 
-        comments?.map((comment) => (
-          <Comment
-      
-            author={ <Link
-              to={`/profile/${comment?.owner?._id}`}
-            >
-                {comment?.owner?.login || 'Anon'}
-             
-            </Link>}
-        
-            avatar= 
-            {comment.owner?.avatar ? (
-              <Link
-              to={`/profile/${comment?.owner?._id}`}
-            >
-                <Avatar
-                  size={30}
-                  src={'/' + comment.owner?.avatar?.url}
-                style={{ marginLeft: '15px' }}
-                alt={comment.owner?.login || 'Anon'}
+      {comments?.length && Object.keys(comments[0])?.length > 1
+        ? comments?.map((comment) => {
+            return (
+              <Comment
+                key={comment?._id}
+                author={
+                 <CommentAuthor owner={comment?.owner}/>
+                }
+                actions={[<CommentAction commentId={comment?._id} />]}
+                avatar={
+                 <CommentAvatar owner={comment?.owner}/>
+                }
+                content={<p>{comment?.text}</p>}
+                datetime={<CommentDate createdAt={comment?.createdAt} />}
+              >
+                <Comments
+                  postId={postId}
+                  comments={comment?.answers}
+                  parentId={comment?._id}
+                  findSubComment={findSubComment}
                 />
-                </Link>
-            ) : (
-              <Link
-              to={`/profile/${comment?.owner?._id}`}
+              </Comment>
+            )
+          })
+        : comments?.length && (
+            <Text
+              type="secondary"
+              strong
+              style={{ margin: '0 auto' }}
+              onClick={() => findSubComment(parentId)}
             >
-                <Avatar size={30}
-                  src={user}
-                  style={{ marginLeft: '15px' }}
-                  alt={comment.owner?.login || 'Anon'}
-                  />
-              </Link>
-              )}
-  
-            content=
-            {
-              <p>
-                {comment?.text}
-                </p>
-            }
-           
-            datetime={
-              <CommentDate createdAt={comment?.createdAt} />
-            }
-          />
-
-            
-     )) : <h3> No comments </h3>}
-    </>)
+              __ View answers ({comments.length})
+            </Text>
+          )}
+    </>
+  )
 }
-
 export const CCommentsOnePost = connect(
   (state) => ({
     postId: state.promise.onePost?.payload?._id,
+    comments: state?.post.onePost?.comments,
     addComment: state.promise?.addComment?.payload,
     addSubComment: state.promise?.addSubComment,
   }),
   {
-    addCommentReply: actionAddSubFullComment,
-    findSubComment: actionFindSubComment,
+    findSubComment: actionFindSubCommentTypeSaga,
   },
 )(Comments)
 

src/components/comment/CommentAuthor.jsx

@@ -0,0 +1,7 @@
+import { Link } from 'react-router-dom'
+
+const CommentAuthor = ({ owner }) =>
+    <Link to={`/profile/${owner?._id}`}>
+{owner?.login || 'Anon'}
+    </Link>
+export default CommentAuthor

src/components/comment/CommentAvatar.jsx

@@ -0,0 +1,27 @@
+import user from '../../materials/user.png'
+import { Link } from 'react-router-dom'
+
+import { Avatar } from 'antd'
+
+const CommentAvatar = ({ owner }) =>
+    owner?.avatar ? (
+    <Link to={`/profile/${owner?._id}`}>
+      <Avatar
+        size={30}
+        src={'/' + owner?.avatar?.url}
+        style={{ marginLeft: '15px' }}
+        alt={owner?.login || 'Anon'}
+      />
+    </Link>
+  ) : (
+    <Link to={`/profile/${owner?._id}`}>
+      <Avatar
+        size={30}
+        src={user}
+        style={{ marginLeft: '15px' }}
+        alt={owner?.login || 'Anon'}
+      />
+    </Link>
+)
+  
+export default CommentAvatar

src/components/comment/Reply.jsx

@@ -1,35 +1,62 @@
 import React, { useState } from 'react'
 import { Input, Button } from 'antd'
-const CommentForReply = ({ addCommentReply, commentId, postId }) => {
-    const [comment, setComment] = useState('')
-    return (
-      <>
-        <div
-          style={{
-            display: 'flex',
-            flexDirection: 'row',
-            width: '100%',
-            padding: '15px',
-            marginLeft: '40px',
+import { connect } from 'react-redux'
+import { actionAddSubCommentTypeSaga } from '../../actions/typeSaga/postActionSaga'
+import { SpoilerButton } from './SpoilerButton'
+export const CommentAction = ({ commentId }) => {
+  return (
+    <>
+      <div style={{ flexDirection: 'column' }}>
+        <SpoilerButton text={'Reply to'}
+        
+          style={{margin:'0 auto', padding:'0 auto'}}>
+          <CCommentsForReply  commentId={commentId}  />
+        </SpoilerButton>
+      </div>
+    </>
+  )
+}
+
+const CommentForReply = ({ addCommentReply, commentId}) => {
+  const [newResult, setComment] = useState('')
+
+  console.log('comment', newResult)
+  return (
+    <>
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'row',
+          width: '100%',
+          padding: '5px',
+          marginLeft: '10px',
+        }}
+      >
+        <Input
+          placeholder="Add a comment..."
+          value={newResult}
+          onChange={(e) => {
+            setComment(e.target.value)
           }}
+        />
+        <Button
+          disabled={newResult.length < 1}
+          type="primary"
+          onClick={(e) =>
+            addCommentReply(commentId, newResult) &&
+            setComment((e.target.value = ''))
+          }
         >
-          <Input
-            placeholder="Add a comment..."
-            value={comment}
-            onChange={(e) => {
-              setComment(e.target.value)
-            }}
-          />
-          <Button
-            disabled={comment.length < 1}
-            type="primary"
-            onClick={() => addCommentReply(postId, commentId, comment)}
-          >
-            {' '}
-            Publish{' '}
-          </Button>
-        </div>
-      </>
-    )
-  }
-  
+          {' '}
+          Publish{' '}
+        </Button>
+      </div>
+    </>
+  )
+}
+
+const CCommentsForReply = connect(null,
+  {
+    addCommentReply: actionAddSubCommentTypeSaga,
+  },
+)(CommentForReply)

src/components/comment/SpoilerButton.jsx

@@ -1,17 +1,19 @@
 import React, { useState } from 'react'
-import { Input, Button } from 'antd'
-export const SpoilerButton = ({ text, close, children, style }) => {
-    const [opened, setOpened] = useState(close)
+import { Input, Button, Divider,Typography  } from 'antd'
+const { Text, Link } = Typography;
+export const SpoilerButton = ({ text, children, style }) => {
+    const [opened, setOpened] = useState(false)
     return (
       <>
-        <Button
+         <Text type="secondary" strong
           onClick={() => {
             setOpened(!opened)
           }}
           style={style}
         >
           {text}
-        </Button>
+          </Text>
+       
         {opened && children}
       </>
     )

src/pages/createAndEditPost/index.js

@@ -96,7 +96,7 @@ const PostEditor = ({
       state['images'] = []
       return false
     } else {
-      return <h3> {state?.images.length} / 8</h3>
+      return <h2 className='NumberPosts'> {state?.images.length} / 8</h2>
     }
   }
 
@@ -121,8 +121,10 @@ const PostEditor = ({
                     />
                   ))}
               </SortableContainer>
-           </div>
-            {checkLength()}
+      </div>
+      <div style={{textAlign:'center'}}>
+        {checkLength()}
+      </div>
           {/* </Col> */}
         {/* </Col> */}
       {/* </Row> */}

src/pages/feedPosts/index.js

@@ -20,7 +20,7 @@ import { CPost } from '../onePost'
 import { Row, Col } from 'antd'
 import LinkToUser from '../../components/LinkToUser'
 import { Comments } from '../../components/comment/Comment'
-import { AddComment} from '../../components/comment/AddComment'
+import  AddComment from '../../components/comment/AddComment'
 import { Like, Likes } from '../../components/Like'
 import { MyCarousel } from '../../components/Carousel'
 import load from '../../materials/load.gif'

src/pages/onePost/index.js

@@ -11,7 +11,7 @@ import { connect } from 'react-redux'
 import { Row, Col } from 'antd'
 import { CComments, CCommentsOnePost } from '../../components/comment/Comment'
 import { CPostEditor } from '../createAndEditPost'
-import {AddComment} from '../../components/comment/AddComment'
+import  AddComment from '../../components/comment/AddComment'
 import { actionFullOnePostSaga,actionAddFullCommentSaga } from '../../actions/typeSaga/postActionSaga'
 import { CLike} from '../../components/Like'
 import { ConstructorModal } from '../../helpers'
@@ -63,7 +63,6 @@ export const PagePost = ({
         </Col>
         <Col span={8}>
           <div style={{ display: 'flex', flexDirection: 'row', marginTop:'100px' }}>
-            
             <LinkToUser
               _id={onePost?.owner?._id}
               login={onePost?.owner?.login}
@@ -81,10 +80,11 @@ export const PagePost = ({
           <h2> Text: {onePost?.text || ''} </h2>
           <Divider>Comments</Divider>
           <div className="Scroll">
-            <CCommentsOnePost
+            {/* <CCommentsOnePost
               postId={onePost?._id}
               comments={onePost?.comments || []}
-            />
+            /> */}
+            <CCommentsOnePost/>
           </div>
           <div style={{ display: 'flex', margin: '20px 0px' }}>
             <CLike likes={onePost?.likes} postId={onePost?._id} />

src/redux/index.js

@@ -25,6 +25,8 @@ onePostWatcher,
   clearAllDataWatcher,
   registerWatcher,
   postsWatcher,
+  addSubCommentWatcher,
+  getSubCommentWatcher
 } from './saga'
 import createSagaMiddleware from 'redux-saga' //функция по созданию middleware
 import {
@@ -67,7 +69,9 @@ function* rootSaga() {
     setAvatarWatcher(),
     clearAllDataWatcher(),
     postsWatcher(),
-    addCommentFeedWatcher()
+    addCommentFeedWatcher(),
+    addSubCommentWatcher(),
+    getSubCommentWatcher()
     // addCommentFeedWatcher()
   ])
 }

src/redux/reducers/myProfileReducer.js

@@ -48,7 +48,6 @@ export const myProfileReducer = (state = {}, { type, aboutMe, newResult }) => {
   
   export const actionChangeFollowingType = (newResult) => ({
     type:"UPDATE_FOLLOWING", newResult
-    
 })
   
 export const actionUpdateAvatarType= (newResult) => ({

src/redux/reducers/postReducer.js

@@ -1,39 +1,67 @@
-import {actionOnePost} from '../../actions'
+import { PlusOutlined } from '@ant-design/icons'
+import { actionOnePost } from '../../actions'
+
+const addAnswers = (comments, id, newResult, field) =>
+comments.map(comment => {
+    if (comment._id === id) {
+        return { ...comment, [field]: newResult }
+    } else if (comment?.answers?.length) {
+        return {
+            ...comment,
+            answers: addAnswers(comment.answers, id, newResult, field)
+        }
+    } else {
+        return { ...comment }
+    }
+})
+
+
+
+
 export const postReducer = (
     state = {},
-    { skip, type, newPosts = [], onePost,newResult, postsFeed, postsFeedCount },
+    { skip, type, newPosts = [], onePost,newResult, commentId, answers,postsFeed, postsFeedCount },
   ) => {
-    const types = {
-      'POST': () => {
-        return {
-          ...state,
-          onePost,
-        }
-      },
-      'CLEAR_ONE_POST': () => {
-        return {
-          ...state,
-          onePost: {},
-        }
-      },
-      'CHANGE_LIKE': () => {
-        return {
-          ...state,
-        onePost: ({...state?.onePost, likes: [...newResult] })
-        
+  const types = {
+    'POST': () => {
+      return {
+        ...state,
+        onePost,
       }
-      },
-      'ADD_COMMENT': () => {
-        return {
-          ...state,
-        onePost: ({...state?.onePost, comments: [...newResult] })
+    },
+    'CLEAR_ONE_POST': () => {
+      return {
+        ...state,
+        onePost: {},
+      }
+    },
+    'CHANGE_LIKE': () => {
+      return {
+        ...state,
+        onePost: ({ ...state?.onePost, likes: [...newResult] })
         
       }
+    },
+    'ADD_COMMENT': () => {
+      return {
+        ...state,
+        onePost: ({ ...state?.onePost, comments: [...newResult] })
+        
       }
-  }
+    },
+    'ANSWERS-COMMENT': () => ({
+      ...state,
+      onePost: ({
+        ...state?.onePost,
+        comments:  addAnswers(state.onePost.comments,
+          commentId, newResult, 'answers')
+      }),
+    })
   
+  }
     if (type in types) {
       return types[type]()
     }
     return state
-  }
+}
+  

src/redux/saga/index.js

@@ -13,6 +13,7 @@ import {
   actionAuthLogout,
   actionRegister,
   actionGetAvatar,
+  actionAddSubComment,
   actionAllClearPromise,
   actionAvatar,
   actionLogin,
@@ -26,7 +27,8 @@ import {
   actionGetFollowing,
   actionGetFollowers,
   actionUserUpsert,
-  actionAllClearPromiseType
+  actionAllClearPromiseType,
+  actionFindSubComment
   // actionOnePost
 } from '../../actions'
 import { message } from 'antd'
@@ -57,8 +59,9 @@ import {actionExploreType,actionClearExplorePosts} from '../reducers/exploreRedu
 import { all, put,take, fork, takeEvery, takeLatest, takeLeading, select,call, join } from 'redux-saga/effects'; //
 import {actionPending,actionFulfilled,actionRejected,actionExplorePosts,actionExplorePostsCount} from '../../actions'
 import { actionOnePostType, actionChangeLikeType } from '../../actions/types/postActionTypes'
-import {actionAddCommentType} from '../../actions/types/postActionTypes'
-  //promise 
+import {actionAddCommentType,actionAddSubCommentType} from '../../actions/types/postActionTypes'
+import { actionAddSubCommentTypeSaga } from '../../actions/typeSaga/postActionSaga'
+//promise 
  export function* promiseWorker(action){ //это типа actionPromise который thunk
     const {name, promise} = action
     yield put(actionPending(name)) //это как dispatch
@@ -469,20 +472,6 @@ export function* setAvatarWatcher() {
   yield takeEvery("SET_AVATAR", setAvatarWorker)
 }
 
-function* changePasswordWorker({ file }) {
-  const {myData:{aboutMe:{_id}}}= yield select()
-  const setAvatar = yield call(promiseWorker, actionAvatar(file, _id))
-  console.log('setAvatar', setAvatar)
-  const {avatar} =yield call(promiseWorker,actionGetAvatar(_id))
-  if (setAvatar) {
-    yield call(fullPageAboutUserWorker, { _id })
-    yield put(actionUpdateAvatarType(avatar))
-    // yield call(promiseWorker,actionClearPromiseForName("setAvatar"))
-    // yield call(promiseWorker,actionClearPromiseForName("uploadFile"))
-
-  }
-}
-
 //clear user data after log out
 export const actionClearDataLogoutTypeSaga = () => ({
   type:"CLEAR_ALL_DATA"
@@ -498,7 +487,34 @@ function* clearAllDataWorker() {
     
   }
 }
-
 export function* clearAllDataWatcher() {
   yield takeEvery("CLEAR_ALL_DATA", clearAllDataWorker)
+}
+//subComment
+function* addSubCommentWorker({ commentId, newResult }) {
+  yield call(promiseWorker, actionAddSubComment(commentId, newResult))
+  console.log('newResult ', newResult)
+  const {
+    promise: {
+      addSubComment: { status },
+    },
+  } = yield select()
+  if (status === 'FULFILLED') {
+    yield call(getSubCommentWorker, {commentId})
+    }
+  }
+
+export function* addSubCommentWatcher() {
+  yield takeEvery("POST_SUB_COMMENT", addSubCommentWorker)
+}
+function* getSubCommentWorker({ commentId }) {
+  const { answers } = yield call(promiseWorker,
+    actionFindSubComment(commentId))
+  if (answers) {
+      yield put(actionAddSubCommentType(commentId, answers))
+  }
+}
+
+export function* getSubCommentWatcher() {
+  yield takeEvery("GET_SUB_COMMENT", getSubCommentWorker)
 }