Add addCommentFeedWatcher

src/App.scss

@@ -139,9 +139,9 @@ main {
   width: 90%;
   padding: 5px;
   // margin: 5px;
-  border-radius: 10px;
+  border-radius: 20px;
   font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
-  font-size: 20px;
+  font-size: 30px;
 }
 .container {
   padding: 10px;
@@ -384,3 +384,10 @@ main {
   padding: 15px 0;
   overflow: auto;
 }
+.InputOnePost{
+display: flex;
+width: 40%;
+// margin: 10px 0;
+margin-left: 10px;
+margin-right: 10px;
+}

src/actions/index.js

@@ -3,13 +3,13 @@ import {
   actionFullProfilePageUser,
   actionFullProfilePage,
 } from '../redux/saga'
-import { actionFeedTypeCount } from '../redux/reducers/feed/feedReducer'
-import { actionFeedType } from '../redux/reducers/feed/feedReducer'
-import { actionExploreTypeCount } from '../redux/reducers/explore/exploreReducer'
-import { actionClearExplorePosts } from '../redux/reducers/explore/exploreReducer'
-import { actionExploreType } from '../redux/reducers/explore/exploreReducer'
-import { actionClearFeedPostsType } from '../redux/reducers/feed/feedReducer'
-import {actionProfilePageDataType} from '../redux/reducers/myData/myProfileReducer'
+import { actionFeedTypeCount } from '../redux/reducers/feedReducer'
+import { actionFeedType } from '../redux/reducers/feedReducer'
+import { actionExploreTypeCount } from '../redux/reducers/exploreReducer'
+import { actionClearExplorePosts } from '../redux/reducers/exploreReducer'
+import { actionExploreType } from '../redux/reducers/exploreReducer'
+import { actionClearFeedPostsType } from '../redux/reducers/feedReducer'
+import {actionProfilePageDataType} from '../redux/reducers/myProfileReducer'
 import { history } from '../helpers'
 import{promiseWorker} from '../redux/saga'
 import { all, put, takeEvery, takeLatest, takeLeading, select,call } from 'redux-saga/effects'; //
@@ -273,39 +273,42 @@ mutation PostUpsert($post:PostInput){
         },
       ),
     )
-export const actionAllPosts = (userId) =>
-  actionPromise(
-    'allPostsMe',
-    gql(
-      `query allPosts($userId:String!){
-  PostFind(query:$userId){
-           owner{_id} _id title text images{_id url}
-    }
-}`,
-      {
-        userId: JSON.stringify([
-          { ___owner: userId },
+// export const actionAllPosts = (userId) =>
+//   actionPromise(
+//     'allPostsMe',
+//     gql(
+//       `query allPosts($userId:String!){
+//   PostFind(query:$userId){
+//            owner{_id} _id title text images{_id url}
+//     }
+// }`,
+//       {
+//         userId: JSON.stringify([
+//           { ___owner: userId },
 
-          {
-            sort: [{ _id: -1 }],
-            skip: [0],
-            limit: [300],
-          },
-        ]),
-      },
-    ),
-  )
+//           {
+//             sort: [{ _id: -1 }],
+//             skip: [0],
+//             limit: [300],
+//           },
+//         ]),
+//       },
+//     ),
+//   )
 
 export const actionPostsCount = (_id) =>
   actionPromise(
-    'countAllPostsUser',
+    'countPosts',
     gql(
       ` query CountAllPostsUser($_id:String!){
                 PostCount(query:$_id)
 
                 }`,
 
-      { _id: JSON.stringify([{ ___owner: { $in: [_id] } }]) },
+      {
+        _id:
+          JSON.stringify([{ ___owner: { $in: [_id] } }])
+      },
     ),
   )
 
@@ -868,7 +871,7 @@ PostFind(query:$userId){
           {
             sort: [{ _id: -1 }],
             skip: [skip || 0],
-            limit: [10],
+            limit: [12],
           },
         ]),
       },

src/components/Comment.js

@@ -1,239 +0,0 @@
-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'
-
-export const AddComment = ({ addComment, postId }) => {
-  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={{
-            color: '#108ee9',
-            position: 'absolute',
-            bottom: '160px',
-            right: '30px',
-          }}
-          theme="light"
-          native={true}
-          showPreview={false}
-          showSkinTones={false}
-          onSelect={(native) =>
-            addEmoji(native)}
-          />
-      )}
-      <Input
-        style={{
-          display: 'flex',
-          width: '40%',
-          marginLeft: '10px',
-          marginRight: '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: '30px' }}
-      
-        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
-        style={{
-          display: 'flex',
-          flexDirection: 'row',
-          width: '100%',
-          padding: '15px',
-          marginLeft: '40px',
-        }}
-      >
-        <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>
-    </>
-  )
-}
-
-const CommentData = ({ createdAt }) => {
-  return (
-    <Tooltip
-      color={'#108ee9'}
-      style={{ paddingLeft: '10px' }}
-      title={moment(new Date(+createdAt)).format('lll')}
-    >
-      {moment(new Date(+createdAt))
-        .startOf()
-        .fromNow()}
-    </Tooltip>
-  )
-}
-
-export const Comments =  ({
-  comments,
-  postId,
-  commentsFind,
-  addCommentReply,
-  children,
-  close,
-  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'}
-                />
-                </Link>
-            ) : (
-              <Link
-              to={`/profile/${comment?.owner?._id}`}
-            >
-                <Avatar size={30}
-                  src={user}
-                  style={{ marginLeft: '15px' }}
-                  alt={comment.owner?.login || 'Anon'}
-                  />
-              </Link>
-              )}
-  
-            content=
-            {
-              <p>
-                {comment?.text}
-                </p>
-            }
-           
-            datetime={
-              <CommentData createdAt={comment?.createdAt} />
-            }
-          />
-
-            
-     )) : <h3> No comments </h3>}
-    </>)
-}
-
-export const CComments = connect(
-  (state) => ({
-    postId: state.promise.onePost?.payload?._id,
-    addComment: state.promise?.addComment?.payload,
-    addSubComment: state.promise?.addSubComment,
-  }),
-  {
-    addCommentReply: actionAddSubFullComment,
-    findSubComment: actionFindSubComment,
-  },
-)(Comments)

src/components/Input.js

@@ -1,8 +0,0 @@
-export const Input = ({ state, onChangeText }) => (
-    <input
-      className="Input"
-      value={state}
-      placeholder={state || ''}
-      onChange={onChangeText}
-    />
-  )

src/components/Input.jsx

@@ -0,0 +1,12 @@
+import { Button, Input, Checkbox, Form, Row, Col } from 'antd'
+
+export const CustomInput = ({ state, onChangeText, checked }) => (
+    <Input
+      className="Input"
+      value={state}
+      placeholder={state || ''}
+    onChange={onChangeText}
+    type={checked ? 'password':'text'}
+    size="large"
+  />
+  )

src/components/Like.js

@@ -55,12 +55,12 @@ console.log('like id in component', likeId)
           )}
         </h3>
         {likes.length ? (
-          <h3 style={{ cursor: 'pointer', paddingLeft: 8 }} onClick={showModal}>
+          <h3 style={{ cursor: 'pointer', padding: '3px'}} onClick={showModal}>
             {' '}
             {likes.length} likes
           </h3>
         ) : (
-          <h3 style={{ cursor: 'pointer', paddingLeft: 8 }}> 0 likes</h3>
+          <h3 style={{ cursor: 'pointer', padding: '3px' }}> 0 likes</h3>
         )}
       </div>
       <ConstructorModal

src/components/Search_Users.js

@@ -17,7 +17,10 @@ export const ResultUserFind = ({
     <div className="ResultUserFind">
       {userFind?.map(({ _id, login, avatar }) => (
        
-        <LinkToUser _id={_id} login={login} avatar={avatar} size={40} padding={'0px'} onClick={handleCancel} key={_id} />
+        <LinkToUser _id={_id} login={login}
+        
+          avatar={avatar} size={40} padding={'0px'}
+          onClick={handleCancel} key={_id} />
       ))}
       </div>
   )

src/components/comment/AddComment.jsx

@@ -0,0 +1,128 @@
+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'
+
+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)
+          }}
+        />
+        {
+          !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
+          style={{
+            display: 'flex',
+            flexDirection: 'row',
+            width: '100%',
+            padding: '15px',
+            marginLeft: '40px',
+          }}
+        >
+          <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>
+      </>
+    )
+  }
+  

src/components/comment/Comment.jsx

@@ -0,0 +1,109 @@
+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 { CommentDate } from './CommentDate'
+export const Comments =  ({
+  comments,
+  postId,
+  commentsFind,
+  addCommentReply,
+  children,
+  close,
+  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'}
+                />
+                </Link>
+            ) : (
+              <Link
+              to={`/profile/${comment?.owner?._id}`}
+            >
+                <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>}
+    </>)
+}
+
+export const CCommentsOnePost = connect(
+  (state) => ({
+    postId: state.promise.onePost?.payload?._id,
+    addComment: state.promise?.addComment?.payload,
+    addSubComment: state.promise?.addSubComment,
+  }),
+  {
+    addCommentReply: actionAddSubFullComment,
+    findSubComment: actionFindSubComment,
+  },
+)(Comments)
+
+// export const CCommentsForFeed = connect(
+//   (state) => ({
+//     // postId: state.promise.onePost?.payload?._id,
+//     addComment: state.promise?.addComment?.payload,
+//     addSubComment: state.promise?.addSubComment,
+//   }),
+//   {
+//     addCommentReply: actionAddSubFullComment,
+//     findSubComment: actionFindSubComment,
+//   },
+// )(Comments)

src/components/comment/CommentDate.jsx

@@ -0,0 +1,16 @@
+import { Tooltip } from 'antd'
+import moment from 'moment'
+
+export const CommentDate = ({ createdAt }) => {
+    return (
+      <Tooltip
+        color={'#108ee9'}
+        style={{ paddingLeft: '10px' }}
+        title={moment(new Date(+createdAt)).format('lll')}
+      >
+        {moment(new Date(+createdAt))
+          .startOf()
+          .fromNow()}
+      </Tooltip>
+    )
+  }

src/components/comment/Reply.jsx

@@ -0,0 +1,35 @@
+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',
+          }}
+        >
+          <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>
+      </>
+    )
+  }
+  

src/components/comment/SpoilerButton.jsx

@@ -0,0 +1,18 @@
+import React, { useState } from 'react'
+import { Input, Button } from 'antd'
+export const SpoilerButton = ({ text, close, children, style }) => {
+    const [opened, setOpened] = useState(close)
+    return (
+      <>
+        <Button
+          onClick={() => {
+            setOpened(!opened)
+          }}
+          style={style}
+        >
+          {text}
+        </Button>
+        {opened && children}
+      </>
+    )
+  }

src/pages/createAndEditPost/index.js

@@ -18,7 +18,7 @@ import {
 import { arrayMoveImmutable } from 'array-move'
 import { Row, Col } from 'antd'
 import { history } from '../../helpers'
-import { Input } from '../../components/Input'
+import { CustomInput } from '../../components/Input'
 import {actionCreateEditPost} from '../../redux/saga'
 
 const checkRoute = ({ match }) => {
@@ -128,14 +128,14 @@ const PostEditor = ({
       {/* </Row> */}
 
       <h1 className="Title"> Title </h1>
-      <Input
+      <CustomInput
         state={state?.title || ''}
         className="Input"
         onChangeText={onChangeTitle}
       />
       <h1 className="Title"> Text </h1>
 
-      <Input
+      <CustomInput
         state={state?.text || ''}
         className="Input"
         onChangeText={onChangeText}

src/pages/explorePosts/index.js

@@ -10,7 +10,7 @@ import {
   import {
     actionClearExplorePosts,
     actionAllClearExplore,
-  } from '../../redux/reducers/explore/exploreReducer'
+  } from '../../redux/reducers/exploreReducer'
 import load from '../../materials/load.gif'
   
   const ExplorePosts = ({
@@ -42,16 +42,6 @@ import load from '../../materials/load.gif'
       document.addEventListener('scroll', scrollHandler)
     }, [explorePosts.length])
 
-    // useEffect(() => {
-    //   if (explorePostsPromise?.status == "PENDING") {
-    //     console.log('explorePostsPromise?.status',explorePostsPromise?.status)
-    //     return () => (
-    //       <h1> ГРУЖУУУУУ </h1>
-    //     //  <img src={load} width="500" height="600"/>
-    //     )
-    //   }
-    
-    // }, [explorePostsPromise?.status])
   
     const scrollHandler = (e) => {
       if (
@@ -76,8 +66,6 @@ import load from '../../materials/load.gif'
                 marginTop: '50px',
               }}
             >
- 
-
               {(explorePosts || [])?.map((item) => (
                 <Card post={item} onPost={onPost} />
               ))}
@@ -98,7 +86,6 @@ import load from '../../materials/load.gif'
       countAllPostsUser: state.promise?.countAllPostsUser?.payload,
       explorePosts: state.explore?.explorePosts,
       explorePostsPromise: state.promise?.explorePosts,
-
       explorePostsCount: state.explore?.explorePostsCount,
     }),
     {

src/pages/feedPosts/index.js

@@ -2,8 +2,6 @@ import React, { useMemo, useState, useEffect } from 'react'
 import {
   actionAllPostsFeed,
   actionFullAllGetPosts,
-  // actionAddFullComment,
-  // actionFindSubComment,
   actionAddSubFullComment,
   actionFindLikes,
   actionGetFindLiked,
@@ -12,15 +10,8 @@ import {
   actionDeleteFullLikeForFeed,
   actionAddFullLike,
 } from '../../actions'
-import {
-  actionFullFeed,
-
-  // actionAddFullCommentFeed,
-  // actionAddFullLikeFeed,
-  // actionDeleteFullLikeFeed,
- 
-} from '../../redux/saga'
-import {actionClearFeedPostsType} from '../../redux/reducers/feed/feedReducer'
+import { actionClearFeedPostsType,actionAddCommentFeedTypeSaga } from
+  '../../redux/reducers/feedReducer'
 import { Link } from 'react-router-dom'
 import { Provider, connect } from 'react-redux'
 import { Upload, Button, DatePicker, Space } from 'antd'
@@ -28,11 +19,11 @@ import { Avatar, Image, Divider, Radio } from 'antd'
 import { CPost } from '../onePost'
 import { Row, Col } from 'antd'
 import LinkToUser from '../../components/LinkToUser'
-import { AddComment, Comments } from '../../components/Comment'
+import { Comments } from '../../components/comment/Comment'
+import { AddComment} from '../../components/comment/AddComment'
 import { Like, Likes } from '../../components/Like'
 import { MyCarousel } from '../../components/Carousel'
 import load from '../../materials/load.gif'
-
 const MyPostFeed = ({
   // myData,
   postsFeed = [],
@@ -42,10 +33,11 @@ const MyPostFeed = ({
   postsFeedPromise
 }) => {
   const [checkScroll, setScroll] = useState(true)
+
   useEffect(() => {
     if (checkScroll) {
        console.log('попало в новую порцию постов')
-          onPostsFeed()
+       onPostsFeed()
     }
     setScroll(false)
   }, [checkScroll])
@@ -53,7 +45,7 @@ const MyPostFeed = ({
     document.addEventListener('scroll', scrollHandler)
     return () => {
       document.removeEventListener('scroll', scrollHandler)
-    onClearFeed()
+      onClearFeed()
     }
   }, [])
 
@@ -72,9 +64,10 @@ const MyPostFeed = ({
        }
 
   return (
+
     <div style={{  marginTop: '50px'}}>
       <div className="PostsFeed" >
-        
+
         <Row>
           <Col span={12} offset={6}>
             <div>
@@ -100,21 +93,29 @@ const MyPostFeed = ({
                     <h1 className='Title'> Title: {title || ''}</h1>
                     <h1  className='Title'> Text: {text || ''}</h1>
                     <Divider>Comments</Divider>
+                    <div style={{ margin: '10px',position: 'relative' }}>
                     <div className="ScrollForFeed">
-                      {/* <CCommentsForFeed
+                      <CCommentsForFeed
                         postId={_id}
                         comments={comments || []}
-                      /> */}
+                      />
                       </div>
-                      <center>
-                      <div style={{ display: 'flex', padding: '20px', marginLeft:'100px' }}>
+                      {/* <center> */}
+                      <div style={{ display: 'flex', margin: '20px 0px' }}>
                         {/* <CLikeForFeed likes={likes} postId={_id} /> */}
 
-                        {/* <AddComment addComment={addComment} postId={_id} /> */}
-                      </div>
-                       </center>
+                          <AddComment addComment={addComment}
+                            postId={_id} style={{
+                              position: 'absolute', bottom: '70px',
+                              zIndex: '100'
+                            }} />
+                    
+                        </div>
+                        </div>
+                       {/* </center> */}
                     </div>
-                 </div>
+                  </div>
+                //  </div>
                 ),
               )}
              
@@ -123,7 +124,10 @@ const MyPostFeed = ({
         </Row>
         {(postsFeedPromise?.status == "PENDING") &&
                 
-               <img style={{display:'block', margin: '0 auto', padding:'10px' }} src={load} width="100" height="100" />
+          <img style={{
+            display: 'block',
+            margin: '0 auto', padding: '10px'
+          }} src={load} width="100" height="100" />
              }
       </div>
     </div>
@@ -150,9 +154,10 @@ export const CPostForFeed = connect(
     postsFeedPromise :state.promise?.postsFeed
   }),
   {
+
     onPostsFeed: actionFullAllGetPosts,
     onClearFeed: actionClearFeedPostsType,
-    // addComment: actionAddFullCommentFeed,
+    addComment: actionAddCommentFeedTypeSaga,
     // addCommentReply: actionAddSubFullComment,
     // addLike: actionAddFullLikeForFeed,
 

src/pages/onePost/index.js

@@ -9,9 +9,9 @@ import { Avatar, Divider, Input, Button } from 'antd'
 import user from '../../materials/user.png'
 import { connect } from 'react-redux'
 import { Row, Col } from 'antd'
-import { CComments, AddComment } from '../../components/Comment'
+import { CComments, CCommentsOnePost } from '../../components/comment/Comment'
 import { CPostEditor } from '../createAndEditPost'
-
+import {AddComment} from '../../components/comment/AddComment'
 import { actionFullOnePostSaga,actionAddFullCommentSaga } from '../../actions/typeSaga/postActionSaga'
 import { CLike} from '../../components/Like'
 import { ConstructorModal } from '../../helpers'
@@ -81,14 +81,20 @@ export const PagePost = ({
           <h2> Text: {onePost?.text || ''} </h2>
           <Divider>Comments</Divider>
           <div className="Scroll">
-            <CComments
+            <CCommentsOnePost
               postId={onePost?._id}
               comments={onePost?.comments || []}
             />
           </div>
-          <div style={{ display: 'flex', margin: '40px 10px' }}>
+          <div style={{ display: 'flex', margin: '20px 0px' }}>
             <CLike likes={onePost?.likes} postId={onePost?._id} />
-            <AddComment addComment={addComment} postId={onePost?._id} />
+            <AddComment addComment={addComment}
+              style={{
+                position: 'absolute',
+                bottom: "120px", right: "30px"
+              }}
+              width={'40%'}
+              postId={onePost?._id} />
           </div>
         </Col>
       </Row>

src/pages/profilePage/index.js

@@ -7,9 +7,11 @@ import { connect } from 'react-redux'
 import { Avatar, Button } from 'antd'
 import { actionFullProfilePageUser } from '../../redux/saga'
 import { Row, Col } from 'antd'
+import {actionClearAllPostsType,actionPostsPortionTypeSaga} from '../../redux/reducers/userProfileReducer'
 import { CSubscribe } from '../../components/Subscribe'
 import { CEditSetting } from '../setting'
 import { Link} from 'react-router-dom'
+import load from '../../materials/load.gif'
 
 export const PageAboutUser = ({
   match: {
@@ -20,15 +22,46 @@ export const PageAboutUser = ({
   allPosts,
   onPost,
   onAboutUser,
-  countAllPostsUser,
+  countPosts,
+  onClearPosts,
+  onUserPosts,
+  userPostPromise
 }) => {
+  const [checkScroll, setScroll] = useState(true)
   useEffect(() => {
     onAboutUser(_id)
-    // console.log('USER DATA ', login, _id)
-  }, [_id])
-  // const { _id } = useParams();
-  const checkMyId = _id === my_Id
+    }, [_id])
+
+  useEffect(() => {
+    if (checkScroll) {
+      console.log('попало в новую порцию постов')
+      onUserPosts(_id)
+    }
+    setScroll(false)
+  }, [checkScroll])
+  useEffect(() => {
+    document.addEventListener('scroll', scrollHandler)
+    return () => {
+      document.removeEventListener('scroll', scrollHandler)
+      onClearPosts()
+    }
+  }, [])
 
+  console.log('check scroll ', checkScroll)
+  useEffect(() => {
+     document.addEventListener('scroll', scrollHandler)
+     }, [allPosts?.length])
+  
+    const scrollHandler = (e) => {
+         if (e.target.documentElement.scrollHeight -
+           (e.target.documentElement.scrollTop + window.innerHeight) < 200) {
+          console.log('SCROLL HANDLER', checkScroll)
+          setScroll(true)
+          document.removeEventListener('scroll', scrollHandler)
+         }
+       }
+
+  const checkMyId = _id === my_Id
   return (
     <>
       <Row>
@@ -62,14 +95,14 @@ export const PageAboutUser = ({
                   {new Intl.DateTimeFormat('en-GB').format(createdAt)}
                 </h3>
                 <div style={{ display: 'flex' }}>
-                  {countAllPostsUser > 0 ? (
+                  {countPosts > 0 ? (
                     <div
                       style={{
                         display: 'flex',
                         justifyContent: 'space-between',
                       }}
                     >
-                      <h3> {countAllPostsUser} posts </h3>
+                      <h3> {countPosts} posts </h3>
                     </div>
                   ) : (
                     <h3> 0 posts </h3>
@@ -78,22 +111,21 @@ export const PageAboutUser = ({
                   <ListOfUsers
                     listResult={followers}
                     listUsers={followers}
-                                      onPageData={onAboutUser}
-                                      text={'followers'}
+                    onPageData={onAboutUser}
+                    text={'followers'}
                   />
 
                   <ListOfUsers
                    listResult={following}
                    listUsers={following}
-                                     onPageData={onAboutUser}
-                                     text={'following'}
+                  onPageData={onAboutUser}
+                    text={'following'}
                   />
                 </div>
                 <h3> nick: {nick == null ? login : nick}</h3>
                 {checkMyId ? 
-                    <CEditSetting />
+                   <CEditSetting />
                   : 
-                    
                   <CSubscribe />
                 }
               </div>
@@ -117,6 +149,13 @@ export const PageAboutUser = ({
           </div>
         </Col>
       </Row>
+      {(userPostPromise?.status == "PENDING") &&  
+        <img style={{
+          display: 'block', margin: '0 auto',
+          marginBottom: '200px', padding: '10px'
+        }}
+            src={load} width="100" height="100" />
+        }
     </>
   )
 }
@@ -125,12 +164,15 @@ export const CPageAboutUser = connect(
   (state) => ({
     my_Id: state.auth?.payload?.sub?.id,
     aboutUser: state.userData?.aboutUser,
-    countAllPostsUser: state.promise?.countAllPostsUser?.payload,
+    countPosts: state?.promise?.countPosts?.payload,
     allPosts: state.userData?.allPosts,
+    userPostPromise:state.promise?.allPosts
   }),
   {
     onAboutUser: actionFullProfilePageUser,
     onPost: actionOnePost,
+    onClearPosts: actionClearAllPostsType,
+    onUserPosts:actionPostsPortionTypeSaga
     // onPageData: actionFullProfilePageUser,
   },
 )(PageAboutUser)

src/pages/setting/index.js

@@ -1,200 +1,276 @@
 import React, { useState, useEffect } from 'react'
 import { CEditAvatar } from '../../components/EditAvatar'
-import { Input } from '../../components/Input'
+import { CustomInput } from '../../components/Input'
 import { message, Image, Button } from 'antd'
 import { connect } from 'react-redux'
 import {
-  actionUploadFile, actionSetAvatar,
-  actionUserUpsert, actionUserUpdate,
-  actionChangePassword,actionClearPromise
+  actionUploadFile,
+  actionSetAvatar,
+  actionUserUpsert,
+  actionUserUpdate,
+  actionChangePassword,
+  actionClearPromiseForName,
 } from '../../actions'
+
 import { Basic, ConstructorModal } from '../../helpers'
-import { SpoilerButton } from '../../components/Comment'
-import{actionUserUpdateTypeSaga} from '../../redux/saga'
-export const EditAccount = ({showModalEdit }) => {
-    return (
-         <Button
-            type="primary" style={{
-              fontWeight: '600',
-              fontSize: '15px',
-              transition: ".3s",
-              boxShadow: "0 5px 15px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)",
-            }}
-    
-          onClick={showModalEdit}>Edit Setting</Button>
-    )
-  }
-const EditSetting = ({ info, myId, onSaveUserUpsert,
+import { SpoilerButton } from '../../components/comment/SpoilerButton'
+import { actionUserUpdateTypeSaga } from '../../redux/saga'
+import { EyeOutlined, EyeInvisibleOutlined } from '@ant-design/icons'
+export const EditAccount = ({ showModalEdit }) => {
+  return (
+    <Button
+      type="primary"
+      style={{
+        fontWeight: '600',
+        fontSize: '15px',
+        transition: '.3s',
+        boxShadow: '0 5px 15px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)',
+      }}
+      onClick={showModalEdit}
+    >
+      Edit Setting
+    </Button>
+  )
+}
+const EditSetting = ({
+  info,
+  myId,
+  onSaveUserUpsert,
   onClearPromise,
-  onSaveNewPassword, changePassword}) => {
+  onSaveNewPassword,
+  changePassword,
+}) => {
   const [state, setState] = useState(info)
   const [changePass, setChangePass] = useState(changePassword)
-    const [isModalVisibleEdit, setIsModalVisibleEdit] = useState(false);
-    // actionChangePassword
-  // console.log('all info ', info)
-  // console.log('login ', info?.login)
-  
-    const showModalEdit = () => {
-      setIsModalVisibleEdit(true);
-    };
-    const handleCancelEdit = () => {
+  const [isModalVisibleEdit, setIsModalVisibleEdit] = useState(false)
+  const [checked1, setChecked1] = useState(true)
+  const [checked2, setChecked2] = useState(true)
+
+  console.log('checked ', checked2)
+
+  const showModalEdit = () => {
+    setIsModalVisibleEdit(true)
+  }
+  const handleCancelEdit = () => {
+    setIsModalVisibleEdit(false)
+  }
+  const onChangeLogin = (event) =>
+    setState({
+      ...state,
+      login: event.target.value,
+    })
+  const onChangeNick = (event) =>
+    setState({
+      ...state,
+      nick: event.target.value,
+    })
+  const onChangePassLogin = (event) =>
+    setChangePass({
+      ...changePass,
+      login: event.target.value,
+    })
+  const onChangePassPassword = (event) =>
+    setChangePass({
+      ...changePass,
+      password: event.target.value,
+    })
+  const onChangePassNew = (event) =>
+    setChangePass({
+      ...changePass,
+      newPassword: event.target.value,
+    })
+  const saveChange = () => {
+    onSaveUserUpsert(state, myId) &&
+      message.success(`Successfully saved changed new login!`) &&
       setIsModalVisibleEdit(false)
-    }
-    const onChangeLogin = (event) =>
-      setState({
-        ...state,
-        login: event.target.value,
-      })
-    const onChangeNick = (event) =>
-      setState({
-        ...state,
-        nick: event.target.value,
-      })
-      const onChangePassLogin = (event) =>
-      setChangePass({
-        ...changePass,
-        login: event.target.value,
-      })
-      const onChangePassPassword = (event) =>
-      setChangePass({
-        ...changePass,
-        password: event.target.value,
-      })
-      const onChangePassNew = (event) =>
-      setChangePass({
-        ...changePass,
-        newPassword: event.target.value,
-      })
-    const saveChange = () => {
-      onSaveUserUpsert(state, myId)
-      && message.success(`Successfully saved changed new login!`)
-        && setIsModalVisibleEdit(false)
-      &&onClearPromise('userUpsert')
+    // &&onClearPromise('userUpsert')
   }
-  // const saveChangeNick = () => {
-  //   onSaveUserUpsert(state?.nick, myId)
-  //   && message.success(`Successfully saved changed new nick!`)
-  //   && setIsModalVisibleEdit(false)
-  // }
   const saveNewPassword = () => {
-      onSaveNewPassword(changePass.login, changePass.password, changePass.newPassword)
-      if (changePassword?.payload == null || changePass.login != info?.login) {
-        message.error(`You entered wrong login/password! Try again!`) &&
-          onClearPromise('newPassword')
-      }
-      else {
-        message.success(`Successfully saved changed new password!`)
-        && setIsModalVisibleEdit(false) && onClearPromise('newPassword')
-      }
-        }
-
-    return (
-      <div>
-        <EditAccount showModalEdit={showModalEdit}/>
-        <ConstructorModal title={'Edit setting'}
-          isModalVisible={isModalVisibleEdit}
-          setIsModalVisible={setIsModalVisibleEdit}
-          handleCancel={handleCancelEdit}
-        >
-      
-           <h2> Edit avatar </h2>
-          <SpoilerButton text={'Change avatar'} style={{width:'100%'}}>
-  
+    onSaveNewPassword(
+      changePass.login,
+      changePass.password,
+      changePass.newPassword,
+    )
+    if (changePassword?.payload == null && changePass.login != info?.login) {
+      message.error(`You entered wrong login/password! Try again!`)
+      // onClearPromise('newPassword')
+    } else {
+      message.success(`Successfully saved changed new password!`) &&
+        setIsModalVisibleEdit(false)
+      // && onClearPromise('newPassword')
+    }
+  }
+  console.log('save pass', changePass?.login != info?.login)
+  return (
+    <div>
+      <EditAccount showModalEdit={showModalEdit} />
+      <ConstructorModal
+        title={'Edit setting'}
+        isModalVisible={isModalVisibleEdit}
+        setIsModalVisible={setIsModalVisibleEdit}
+        handleCancel={handleCancelEdit}
+      >
+        <h2> Edit avatar </h2>
+        <SpoilerButton text={'Change avatar'} style={{ width: '100%' }}>
           <CEditAvatar setIsModalVisibleEdit={setIsModalVisibleEdit} />
-          </SpoilerButton>
-          <h2> Edit login </h2>
-          <SpoilerButton text={'Change login'} style={{width:'100%'}}>
-  
-          <div style={{ display: 'flex', alignItems: 'center', flexDirection: 'row' }}>
-            <Input
+        </SpoilerButton>
+        <h2> Edit login </h2>
+        <SpoilerButton text={'Change login'} style={{ width: '100%' }}>
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              flexDirection: 'row',
+            }}
+          >
+            <CustomInput
               state={state?.login || ''}
-  
               onChangeText={onChangeLogin}
             />
-            <Button size="large" style={{ margin: '10px' }}
-            onClick={saveChange}
-            disabled={state?.login ? false : true}
-  
-              type="primary"> Save login </Button> 
-            </div>
-          </SpoilerButton>
-        
-          <h2> Edit nick </h2>
-          <SpoilerButton text={'Change nick'} style={{width:'100%'}}>
-      
-          <div style={{ display: 'flex', alignItems: 'center', flexDirection: 'row' }}>
-            <Input
+            <Button
+              size="large"
+              style={{ margin: '10px' }}
+              onClick={saveChange}
+              disabled={state?.login ? false : true}
+              type="primary"
+            >
+              {' '}
+              Save login{' '}
+            </Button>
+          </div>
+        </SpoilerButton>
+
+        <h2> Edit nick </h2>
+        <SpoilerButton text={'Change nick'} style={{ width: '100%' }}>
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              flexDirection: 'row',
+            }}
+          >
+            <CustomInput
               state={state?.nick || ''}
               onChangeText={onChangeNick}
             />
-            <Button style={{ margin: '10px' }}
+            <Button
+              style={{ margin: '10px' }}
               disabled={state?.nick ? false : true}
               onClick={saveChange}
               size="large"
               type="primary"
             >
               Save nick
-              </Button>
-             
-            </div>
-            </SpoilerButton>
-          <h2> Edit password </h2>
-          <SpoilerButton text={'Change password'} style={{width:'100%'}}>
-          
-            <h3> Login</h3>
-            <div style={{ display: 'flex', alignItems: 'center', flexDirection: 'row' }}>
-              <Input
-              state={changePass?.login || ''}
+            </Button>
+          </div>
+        </SpoilerButton>
+        <h2> Edit password </h2>
+        <SpoilerButton text={'Change password'} style={{ width: '100%' }}>
+          <h3> Login</h3>
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              flexDirection: 'row',
+            }}
+          >
+            <CustomInput
+              state={changePass?.login}
               onChangeText={onChangePassLogin}
+              type={true}
             />
           </div>
           <h3> Old password</h3>
-          <div style={{ display: 'flex', alignItems: 'center', flexDirection: 'row' }}>
-            <Input
-              state={changePass?.password || ''}
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              flexDirection: 'row',
+            }}
+          >
+            <CustomInput
+              state={changePass?.password}
               onChangeText={onChangePassPassword}
+              checked={checked1}
             />
+
+            {checked1 ? (
+              <EyeInvisibleOutlined
+                onClick={() => setChecked1(!checked1)}
+                style={{ marginLeft: '5px', fontSize: 'xx-large' }}
+              />
+            ) : (
+              <EyeOutlined
+                onClick={() => setChecked1(!checked1)}
+                style={{ marginLeft: '5px', fontSize: 'xx-large' }}
+              />
+            )}
           </div>
-          
+          {console.log('ckeck тутааа', checked1)}
           <h3> New password</h3>
-          <div style={{ display: 'flex', alignItems: 'center', flexDirection: 'row' }}>
-          
-            <Input
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              flexDirection: 'row',
+            }}
+          >
+            <CustomInput
               state={changePass?.newPassword || ''}
-      
+              // type={checkEye1 ? 'password' : 'text'}
+              checked={checked2}
+
               onChangeText={onChangePassNew}
             />
+               {checked2 ? (
+              <EyeInvisibleOutlined
+                onClick={() => setChecked2(!checked2)}
+                style={{ marginLeft: '5px', fontSize: 'xx-large' }}
+              />
+            ) : (
+              <EyeOutlined
+                onClick={() => setChecked2(!checked2)}
+                style={{ marginLeft: '5px', fontSize: 'xx-large' }}
+              />
+            )}
           </div>
-          <div   style={{
-          display: 'flex',
-          alignItems: 'center',
-          flexDirection: 'column',
-        }}>
-            <Button style={{ margin: '10px' }}
-              disabled={changePass?.login&&changePass?.password && changePass?.newPassword ? false : true}
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              flexDirection: 'column',
+            }}
+          >
+            <Button
+              style={{ margin: '10px' }}
+              disabled={
+                changePass?.login &&
+                changePass?.password &&
+                changePass?.newPassword
+                  ? false
+                  : true
+              }
               onClick={saveNewPassword}
               size="large"
               type="primary"
             >
               Save new password
             </Button>
-      
-            </div>
-            </SpoilerButton>
-        </ConstructorModal>
-      </div>
-    )
-  }
-  export const CEditSetting = connect(
-    (state) => ({
-      myId: state?.auth.payload.sub?.id,
-      info: state?.myData?.aboutMe,
-      changePassword : state.promise?.newPassword
-    }),
-    {
-      onSaveUserUpsert: actionUserUpdateTypeSaga,
-      onSaveNewPassword: actionChangePassword,
-      // onClearPromise:actionClearPromise
-    },
-  )(EditSetting)
-  
+          </div>
+        </SpoilerButton>
+      </ConstructorModal>
+    </div>
+  )
+}
+export const CEditSetting = connect(
+  (state) => ({
+    myId: state?.auth.payload.sub?.id,
+    info: state?.myData?.aboutMe,
+    changePassword: state.promise?.newPassword,
+  }),
+  {
+    onSaveUserUpsert: actionUserUpdateTypeSaga,
+    onSaveNewPassword: actionChangePassword,
+    onClearPromise: actionClearPromiseForName,
+  },
+)(EditSetting)

src/redux/index.js

@@ -1,12 +1,12 @@
 import { createStore, combineReducers, applyMiddleware } from 'redux'
 import thunk from 'redux-thunk'
-import { promiseReducer } from './reducers/promise/promiseReducer'
-import { authReducer } from './reducers/auth/authReducer'
-import { myProfileReducer } from './reducers/myData/myProfileReducer'
-import { userProfileReducer } from './reducers/userData/userProfileReducer'
-import { feedReducer } from './reducers/feed/feedReducer'
-import { postReducer } from './reducers/post/postReducer'
-import { exploreReducer } from './reducers/explore/exploreReducer'
+import { promiseReducer } from './reducers/promiseReducer'
+import { authReducer } from './reducers/authReducer'
+import { myProfileReducer } from './reducers/myProfileReducer'
+import { userProfileReducer } from './reducers/userProfileReducer'
+import { feedReducer } from './reducers/feedReducer'
+import { postReducer } from './reducers/postReducer'
+import { exploreReducer } from './reducers/exploreReducer'
 import {
   promiseWatcher,
   fullProfilePageWatcher,
@@ -23,7 +23,8 @@ onePostWatcher,
   userUpdateWatcher,
   setAvatarWatcher,
   clearAllDataWatcher,
-  registerWatcher
+  registerWatcher,
+  postsWatcher,
 } from './saga'
 import createSagaMiddleware from 'redux-saga' //функция по созданию middleware
 import {
@@ -64,7 +65,9 @@ function* rootSaga() {
     changeSubscribeWatcher(),
     userUpdateWatcher(),
     setAvatarWatcher(),
-    clearAllDataWatcher()
+    clearAllDataWatcher(),
+    postsWatcher(),
+    addCommentFeedWatcher()
     // addCommentFeedWatcher()
   ])
 }

src/redux/reducers/feed/feedReducer.js

@@ -1,4 +1,4 @@
-import { actionClearPromiseForName } from '../../../actions'
+import { actionClearPromiseForName } from '../../actions'
 // import { actionClearDataUserType } from '../profileUserPage/profileUserReducer'
 // import { actionProfilePageDataTypeUser } from '../profileUserPage/profileUserReducer'
 
@@ -49,6 +49,7 @@ export const feedReducer = (
   
       'ADD-COMMENT-POSTS': () => ({
         ...state,
+        
         postsFeed: postsFeed?.map((p) =>
           p._id === postId ? (p = { ...p, comments: [...newResult] }) : p,
         ),
@@ -76,7 +77,7 @@ export const actionAddLikePostInTape = (postId) =>
     likeId,
     postId,
   })
-  export const actionAddCommentPostInTape = (postId, newResult) => ({
+  export const actionAddCommentPostFeedTape = (postId, newResult) => ({
     type: 'ADD-COMMENT-POSTS',
     postId,
     newResult,
@@ -87,4 +88,7 @@ export const actionFeedType = (newPosts, newPostsFeedCount) =>
 export const actionFeedTypeCount = (postsFeedCount) => 
 ({ type: 'COUNT', postsFeedCount })
 
-
+export const actionAddCommentFeedTypeSaga = (postId, text) => ({
+  type:"FEED_POST_COMMENT", postId, text
+  
+})

src/redux/reducers/post/postReducer.js

@@ -1,4 +1,4 @@
-import {actionOnePost} from '../../../actions'
+import {actionOnePost} from '../../actions'
 export const postReducer = (
     state = {},
     { skip, type, newPosts = [], onePost,newResult, postsFeed, postsFeedCount },

src/redux/reducers/userData/userProfileReducer.js

@@ -1,7 +1,7 @@
 
 export const userProfileReducer = (
     state = {},
-    { type, aboutUser, allPosts, newPosts,newResult, countPosts },
+    { type, aboutUser, allPosts, newPosts,newResult, newPostsCount, countPosts },
   ) => {
     const types = {
       'PROFILE-PAGE-USER': () => {
@@ -11,6 +11,7 @@ export const userProfileReducer = (
           // allPosts,
         }
       },
+
       'USER-POSTS': () => {
         return {
           ...state,
@@ -18,6 +19,17 @@ export const userProfileReducer = (
           // allPosts,
         }
       },
+      'ADD-USER-POSTS': () => {
+        return {
+          ...state,
+          allPosts: state?.allPosts ? [...state.allPosts, ...newPosts] : [...newPosts],
+          // postsFeed: [...postsFeed || [], ...newPosts],
+          countPosts: countPosts ? countPosts : newPostsCount
+      
+          // allPosts,
+        }
+      },
+      
       'CLEAR-DATA': () => {
         return {
           aboutUser: {},
@@ -30,11 +42,19 @@ export const userProfileReducer = (
           aboutUser,
         }
       },
+      'CLEAR_ALL_POSTS': () => {
+        
+        return {
+          ...state,
+          allPosts:[]
+        }
+      },
       'COUNT_ALL_POSTS': () => {
         
         return {
           ...state,
-          countPosts
+          countPosts: countPosts ? countPosts : state.countPosts
+
         }
       },
       'UPDATE_FOLLOWERS': () => {
@@ -69,7 +89,8 @@ export const actionProfilePageData = (id) =>
 
 export const actionUserAllPostsType = (allPosts) => 
 ({ type: 'USER-POSTS', allPosts })
-
+export const actionClearAllPostsType= () =>
+  ({ type: 'CLEAR_ALL_POSTS' })
 
 export const actionClearDataUserType = () =>
   ({ type: 'CLEAR-DATA' })
@@ -77,6 +98,8 @@ export const actionClearDataUserType = () =>
   export const actionChangeFollowersType = (newResult) => ({
     type:"UPDATE_FOLLOWERS", newResult
   })
-
-
-
+  export const actionPostsType = (newPosts, newPostsCount) => 
+  ({ type: 'ADD-USER-POSTS', newPosts, newPostsCount })
+  
+  export const actionPostsPortionTypeSaga = (_id) => 
+  ({ type: 'USER_POSTS_PORTION', _id})

src/redux/saga/index.js

@@ -31,15 +31,16 @@ import {
 } from '../../actions'
 import { message } from 'antd'
 
-import { actionClearAboutMeType } from '../reducers/myData/myProfileReducer'
+import { actionClearAboutMeType } from '../reducers/myProfileReducer'
 import { history } from '../../helpers'
 import {
   actionClearDataUserType,
   actionChangeFollowersType,
-  actionUserAllPostsType
+  actionUserAllPostsType,
+  actionPostsType
 
-} from '../reducers/userData/userProfileReducer'
-import { actionProfilePageDataType,actionChangeFollowingType } from '../reducers/myData/myProfileReducer'
+} from '../reducers/userProfileReducer'
+import { actionProfilePageDataType,actionChangeFollowingType } from '../reducers/myProfileReducer'
 import { actionFullAllGetPosts } from '../../actions'
 import {
   actionAddLikePostInTape,
@@ -47,11 +48,12 @@ import {
   actionAddCommentPostInTape,
   actionClearFeedPosts,
   actionFeedType,
-  actionClearFeedPostsType
-} from '../reducers/feed/feedReducer'
-import { actionProfilePageDataTypeUser,actionCountPostsType } from '../reducers/userData/userProfileReducer'
-import { actionRemoveDataAboutMe,actionUpdateAvatarType } from '../reducers/myData/myProfileReducer'
-import {actionExploreType,actionClearExplorePosts} from '../reducers/explore/exploreReducer'
+  actionClearFeedPostsType,
+  actionAddCommentPostFeedTape
+} from '../reducers/feedReducer'
+import { actionProfilePageDataTypeUser,actionCountPostsType } from '../reducers/userProfileReducer'
+import { actionRemoveDataAboutMe,actionUpdateAvatarType } from '../reducers/myProfileReducer'
+import {actionExploreType,actionClearExplorePosts} from '../reducers/exploreReducer'
 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'
@@ -140,7 +142,6 @@ export const actionFullProfilePageUser = (_id) =>
   
 function* fullPageAboutUserWorker({ _id }) {
   // console.log('_id ',  _id)
-
   const aboutUser = yield call(promiseWorker, actionAboutUser(_id))
   // console.log('about user',  aboutUser)
   const allPosts = yield call(promiseWorker, actionAllPostsUser(_id))
@@ -154,7 +155,8 @@ function* fullPageAboutUserWorker({ _id }) {
   }
   if (countPosts)
   yield put(actionCountPostsType(countPosts))
-}
+  }
+
 
 export function* fullPageAboutUserWatcher() {
   yield takeLeading("USER_PAGE", fullPageAboutUserWorker)
@@ -191,6 +193,31 @@ function* feedWorker() {
 export function* feedWatcher() {
   yield takeLeading("FEED_POSTS", feedWorker)
 }
+
+function* postsWorker({_id}) {
+  const {
+    userData: {aboutUser, allPosts,countPosts },
+    // myData: { aboutMe },
+    // promise:{countAllPostsUser:{payload}}
+    
+  } = yield select()
+  
+  if (allPosts?.length !== (countPosts ? countPosts : 1)) {
+    const newPosts = yield call(promiseWorker, 
+      actionAllPostsUser(_id, allPosts?.length),
+    )
+    const newPostsCount = yield call(promiseWorker, 
+      actionPostsCount(_id))
+    if (newPosts && newPostsCount) {
+      yield put(actionPostsType(newPosts, newPostsCount))
+    }
+  }
+}
+
+export function* postsWatcher() {
+  yield takeLeading("USER_POSTS_PORTION", postsWorker)
+}
+
 //explore 
 function* exploreWorker(){
   const {
@@ -198,37 +225,23 @@ function* exploreWorker(){
   } = yield select()
   console.log('explorePosts', explorePosts)
 
-
   if (explorePosts?.length !== (explorePostsCount ? explorePostsCount : 1)) {
     console.log('explorePosts', explorePosts)
 
-    const newPosts = yield fork(promiseWorker, actionExplorePosts(explorePosts?.length))
+    const newPosts = yield call(promiseWorker,
+      actionExplorePosts(explorePosts?.length))
 
     console.log('newPosts', newPosts)
 
-    const newPostsExploreCount = yield fork(promiseWorker, (actionExplorePostsCount()))
-    const [posts,exploreCount] = yield join([newPosts,newPostsExploreCount])
-    if (posts && exploreCount)
-      yield put(actionExploreType(posts, exploreCount))
+    const newPostsExploreCount = yield call(promiseWorker, (actionExplorePostsCount()))
+    if (newPosts && newPostsExploreCount)
+      yield put(actionExploreType(newPosts, newPostsExploreCount))
   }
 }
 export function* exploreWatcher() {
   yield takeLeading("EXPLORE_POSTS", exploreWorker)
 }
 
-//feed
-function* addCommentFeedWorker({ postId, newResult }) {
-  yield call(promiseWorker,actionAddComment(postId, newResult))
-  const { comments } = yield call(promiseWorker, actionGetCommentsOnePost(postId))
-  console.log('commentsss', comments)
-  if (comments)
-    yield put(actionAddCommentPostInTape(postId, newResult))
-  }
-
-export function* addCommentFeedWatcher() {
-  yield takeLeading("ADD_COMMENT_FEED", addCommentFeedWorker)
-  
-}
 // export const actionAddFullCommentFeed = (postId, newResult) => async (
 //   dispatch,
 //   getState,
@@ -260,10 +273,7 @@ yield takeLeading("ONE_POST",onePostWorker)
 //comment
 
 function* addCommentOnePostWorker({ postId, text }) {
-  // console.log('post id', postId)
-  // console.log('comment', text)
-  const add= yield call(promiseWorker, actionAddComment(postId, text))
-  // console.log('add', add)
+  yield call(promiseWorker, actionAddComment(postId, text))
   const {
     promise: {
       addComment: { status },
@@ -272,18 +282,33 @@ function* addCommentOnePostWorker({ postId, text }) {
   if (status === 'FULFILLED') {
     yield call(promiseWorker, actionOnePost(postId))
     const { comments } = yield call(promiseWorker, actionGetCommentsOnePost(postId))
-  //  console.log('add comments', comments)
     if (comments)
       yield put (actionAddCommentType(comments))
   }
 }
 export function* addCommentOnePostWatcher(){
   yield takeLeading("ONE_POST_COMMENT",addCommentOnePostWorker)
-  }
-  // await dispatch(actionOnePost(postId));
-// }}
-
+}
+  
 
+function* addCommentFeedWorker({ postId, text }) {
+  yield call(promiseWorker, actionAddComment(postId, text))
+  const {
+    promise: {
+      addComment: { status },
+    },
+  } = yield select()
+  if (status === 'FULFILLED') {
+    yield call(promiseWorker, actionOnePost(postId))
+    const { comments } = yield call(promiseWorker,
+      actionGetCommentsOnePost(postId))
+    if (comments)
+      yield put (actionAddCommentPostFeedTape(postId,comments))
+  }
+}
+export function* addCommentFeedWatcher(){
+  yield takeLeading("FEED_POST_COMMENT",addCommentFeedWorker)
+  }
 
 // export const actionAddFullLike = (postId) => async (dispatch, getState) => {
 //     await dispatch(actionAddLike(postId))
@@ -444,22 +469,21 @@ export function* setAvatarWatcher() {
   yield takeEvery("SET_AVATAR", setAvatarWorker)
 }
 
-// export const actionUserUpdate = (user, myId) => async (dispatch, getState) => {
-//   await dispatch(actionUserUpsert(user, myId))
-//   const {
-//     promise: {
-//       userUpsert: { status },
-//     },
-//   } = getState()
-//   if (status === 'FULFILLED') {
-//     await dispatch(actionFullProfilePage(myId))
-//     await dispatch(actionFullProfilePageUser(myId))
-//   }
-// }
+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"
 })