Add in postsFeed comments, likes; edit modal window to editAvatar

src/App.js

@@ -19,6 +19,7 @@ import ImgCrop from 'antd-img-crop'
 import { UserOutlined } from '@ant-design/icons'
 import user from './materials/user1.png'
 import photoNotFound from './materials/photoNotFound.png'
+import {CExplorePosts} from './components/Expore'
 // import "react-responsive-carousel/lib/styles/carousel.min.css"; // requires a loader
 // import { Carousel } from 'react-responsive-carousel';
 import { CPostForFeed, Feed } from './components/PostFeed'
@@ -37,9 +38,9 @@ const Main = () => (
     <Switch>
       <Route path="/" exact component={PageMain} />
       <Route path="/profile/:_id" component={CPageAboutUser} />
+      <Route path="/explore" component={CExplorePosts} />
 
       <Route path="/edit/post/:_id" component={CPostEditor} />
-      
 
       <Route path="/post/:_id" component={CPost} />
 

src/App.scss

@@ -195,8 +195,25 @@ main{
   overflow-y: scroll;
   // text-align: center;
 }
-.Scrolling{
-  background-color: #7922CC;
+.ScrollForFeed{
+  // background-color: #e9dfdfa6;
+  // display: block;
+  display: block;
+  // align-items: center;
+  // justify-content: center;
+  flex-direction:column;
+  // width: 100%;
+  height: 150px;
+  // padding: 1em;
+  overflow-y: scroll;
+  // text-align: center;
+}
+
+.PostsFeed{
+  // background-color: #7922CC;
+  margin: 20px;
+  padding: 20px;
+
 }
 .SpoilerButton{
   right: 30px;

src/actions/index.js

@@ -1,4 +1,11 @@
-import { actionFullProfilePageUser,actionProfilePageDataTypeUser, actionFullProfilePage,actionFeedType,actionClearFeedPosts } from '../reducers'
+import {
+  actionFullProfilePageUser,
+  actionProfilePageDataTypeUser,
+  actionFullProfilePage, actionFeedType,
+  actionClearFeedPosts,
+  actionFullSetAvatar,
+  actionFullFeed
+} from '../reducers'
 
 export const actionAuthLogin = (token) => ({ type: 'AUTH_LOGIN', token })
 export const actionAuthLogout = () => ({ type: 'AUTH_LOGOUT' })
@@ -198,7 +205,7 @@ export const actionAllPosts = (userId) =>
           {
             sort: [{ _id: -1 }],
             skip: [0],
-            limit: [36],
+            limit: [300],
           },
         ]),
       },
@@ -220,12 +227,27 @@ export const actionPostsCount = (_id) =>
 
 export const actionAllPostsFeed = () =>
   actionPromise(
-    'postsFeed',
+    'postsAllFeed',
     gql(
       ` query allPosts($_id:String){
                 PostFind(query:$_id){
-                  owner{_id login avatar{_id url}} _id title text images{_id url}
+                  owner{_id login avatar{_id url}}
+                   _id title text images{_id url}
+                   likes{
+                    _id
+                    owner{				
+                       _id login avatar {_id url}
+                      }
                 }
+                comments{
+                  _id, createdAt, text  owner{_id login avatar{_id url}}
+                  answers{
+                    _id, createdAt, text owner{_id login  avatar{_id url}}
+                   
+                  }
+
+                }
+              }
             }`,
       {
         _id: JSON.stringify([
@@ -458,18 +480,7 @@ export const actionAddLike = (postId) => async (dispatch) => {
     ),
   )
 }
-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 actionGetFindLiked = (_id) => async (dispatch) => {
   await dispatch(
@@ -538,40 +549,44 @@ export const actionDeleteLike = (likeId, postId) => async (dispatch) => {
     ),
   )
 }
-// {
-//   _id
-//   post:{
-//   _id: $postId
-// }
-// query:"[{\"_id\": \"62068eaaad55d22f3e2fb250\"}]")
+
 
 export const actionSetAvatar = (file, myId)  => async (dispatch) => {
    const avatar = await dispatch(actionAvatar(file, myId));
   console.log('AVATAR', avatar)
-  if(avatar)
-  await dispatch(actionFullProfilePage(myId))
-  
+  if (avatar) {
+    await dispatch(actionFullProfilePageUser(myId))
+
+    await dispatch(actionFullProfilePage(myId))
+  }
   
 }
 
-// let following =  getState().promise.aboutUser?.payload?.following
-// let result =  await dispatch (actionAboutMe())
 export const actionPostsFeed = (myFollowing,skip) => 
     actionPromise(
       'postsFeed',
       gql(
         `query PostsFeed($ownerId:String){
-	          PostFind(query:$ownerId){
-            owner{_id login avatar{url}}
-            images{_id url} title text
-            _id likesCount 
+          PostFind(query:$ownerId){
+          owner{_id login avatar{url}}
+          images{_id url} title text
+          _id likesCount 
+
             likes{
-                owner{				
-                    login avatar {_id url}
-                  }
-            }
-      	}
-    }`,
+                  _id
+                  owner{				
+                     _id login avatar {_id url}
+                    }
+              }
+              comments{
+                _id, createdAt, text  owner{_id login avatar{_id url}}
+                answers{
+                  _id, createdAt, text owner{_id login  avatar{_id url}}
+                 
+                }
+      }
+  }
+}`,
         {
           ownerId: JSON.stringify([
             {
@@ -583,7 +598,6 @@ export const actionPostsFeed = (myFollowing,skip) =>
               sort: [{ _id: -1 }],
               skip: [skip||0],
               limit: [10],
-              //  limit: [10],
             },
           ]),
         },
@@ -632,13 +646,30 @@ export const actionPostsFeedCount = (getState) =>
 
 
 
-export const actionGetAllPosts = (skip) =>
+export const actionExplorePosts = (skip) =>
   actionPromise(
-    'allGetPosts',
+    'explorePosts',
     gql(
       ` query allPosts($id:String!){
                 PostFind(query:$id){
-                    _id   images{url _id }
+                    _id  
+                     images{url _id }
+                     title text images{_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}
+                         }
+                   }
+
                 }
             }`,
       {
@@ -647,7 +678,7 @@ export const actionGetAllPosts = (skip) =>
           {
             sort: [{ _id: -1 }],
             skip: [skip || 0],
-            limit: [36],
+            limit: [300],
           },
         ]),
       },
@@ -716,7 +747,7 @@ export const actionAboutUser = (_id) =>
     ),
   )
 
-export const actionAllPostsUser = (userId) =>
+export const actionAllPostsUser = (userId,skip) =>
   actionPromise(
     'allPosts',
     gql(
@@ -731,8 +762,8 @@ PostFind(query:$userId){
 
           {
             sort: [{ _id: -1 }],
-            skip: [0],
-            limit: [10],
+            skip: [skip || 0],
+            limit: [300],
           },
         ]),
       },
@@ -814,7 +845,51 @@ export const actionFullUnSubscribe = (my_Id, followId) => async (dispatch,getSta
 
   }
 }
+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 actionAddFullLikeForFeed = (postId) => async (dispatch, getState) => {
+  await dispatch(actionAddLike(postId))
+  const {
+    promise: {
+      addLike: { status },
+    },
+  } = getState()
+  if (status === 'FULFILLED') {
+    await dispatch(actionOnePost(postId))
+    await dispatch(actionFullAllGetPosts())
+
+  }
+  //  await dispatch(actionOnePost(postId));
+}
+export const actionDeleteFullLikeForFeed = (likeId, postId) => async (
+  dispatch,
+  getState,
+) => {
+  await dispatch(actionDeleteLike(likeId, postId))
+  const {
+    promise: {
+      deleteLike: { status },
+    },
+  } = getState()
+  if (status === 'FULFILLED') {
+    await dispatch(actionOnePost(postId))
+    await dispatch(actionFullAllGetPosts())
+  }
+  //  await dispatch(actionOnePost(postId));
+}
 
 export const actionUserUpdate = (user = {}) => async (dispatch, getState) => {
   await dispatch(actionUserUpsert(user))

src/components/EditAvatar.js

@@ -8,6 +8,7 @@ import { Basic } from '../helpers'
 import user from '../materials/user1.png'
 import { ConstructorModal } from '../helpers'
 import { Image, Divider, Radio } from 'antd'
+import { history } from '../App'
 
 export const propsUploadFile = {
   name: 'photo',
@@ -21,26 +22,29 @@ export const propsUploadFile = {
       : {},
 }
 const EditInfo = ({ info, onSave, onFileDrop, fileStatus, myId }) => {
-  console.log('info ', info)
   const [state, setState] = useState(info)
-  console.log('БЛЯХА ТУТ ЖЕ МОЙ АЙДИ  ', myId)
 
-  // if (fileStatus?.status === 'FULFILLED') {
-  //     message.success(`${fileStatus.name} file uploaded successfully`);
-  // } else if (fileStatus?.status=== 'REJECTED') {
-  //     message.error(`${fileStatus.name} file upload failed.`);
-  // }
+  const [isModalVisibleEdit, setIsModalVisibleEdit] = useState(false);
+
+  const showModalEdit = () => {
+    setIsModalVisibleEdit(true);
+  };
+  const handleCancelEdit = () => {
+    setIsModalVisibleEdit(false)
+  }
 
   console.log('state my ', state)
   useEffect(() => {
     fileStatus?.status == 'FULFILLED' &&
-      message.success(` file uploaded successfully`) &&
+      message.success(`File success uploaded!`) &&
       setState({
         ...state,
         ...state?.avatar,
         ...fileStatus?.payload
       })
   }, [fileStatus])
+  const saveAvatar = () => onSave(state?._id, myId)
+    && message.success(`Avatar success changed!`)&&setIsModalVisibleEdit(false)
 
   // const onChangeLogin = (event) =>
   //   setState({
@@ -48,10 +52,16 @@ const EditInfo = ({ info, onSave, onFileDrop, fileStatus, myId }) => {
   //     login: event.target.value,
   //   })
 
-  if (fileStatus?.status == 'FULFILLED') console.log('fullfilled', fileStatus)
 
   return (
     <>
+      <button onClick={showModalEdit}>EDIT</button>
+      
+        <ConstructorModal title={'Edit avatar'}
+                isModalVisible={isModalVisibleEdit}
+        setIsModalVisible={setIsModalVisibleEdit}
+        handleCancel={handleCancelEdit}
+      >  
       <Basic onLoad={onFileDrop}/>
       {fileStatus?.payload?.url && (
         <Image
@@ -62,9 +72,11 @@ const EditInfo = ({ info, onSave, onFileDrop, fileStatus, myId }) => {
         <br/>
       <Button style={{}}
         disabled={state?.images?.length == 0}
-        onClick={() => onSave(state?._id,myId)}>
+        onClick={saveAvatar}>
         Save
-      </Button>
+        </Button>
+      
+      </ConstructorModal>
     </>
   )
 }

src/components/Expore.js

@@ -0,0 +1,46 @@
+// explorePosts
+import {
+    actionOnePost, actionExplorePosts
+} from '../actions'
+import { Row, Col } from 'antd'
+import { Card } from './Post'
+import React, { useMemo, useState, useEffect } from 'react'
+import { Provider, connect } from 'react-redux'
+  
+const ExplorePosts = ({explorePosts,onPost,onExlorePosts }) => {
+    useEffect(() => {
+        onExlorePosts()
+       
+      }, [])
+    return (
+    <>
+      <Row>
+            <Col span={15} offset={6}>
+            <div
+            style={{
+              display: 'flex',
+              flexWrap: 'wrap',
+              padding: '20px',
+              margin: '20px',
+            }}
+          >
+            {(explorePosts || [])?.map((item) => (
+              <Card post={item} onPost={onPost} />
+            ))}
+          </div> 
+                
+        </Col>
+            </Row>
+        </>
+    )
+}
+export const CExplorePosts = connect(
+    (state) => ({
+      my_Id: state.auth.payload.sub.id || '',
+      countAllPostsUser: state.promise?.countAllPostsUser?.payload,
+      explorePosts: state.promise?.explorePosts?.payload
+    }),
+    {onExlorePosts: actionExplorePosts,
+      onPost: actionOnePost
+    },
+  )(ExplorePosts)

src/components/Header.js

@@ -28,10 +28,13 @@ export const CFeed = connect((state) => ({
 
 
 const Recommendations = () => (
+  <Link className="Feed" to={`/explore`}>
   <Button size="large" className="Recomendations">
     {' '}
-    Recommendations{' '}
-  </Button>
+      Explore
+      {' '}
+    </Button>
+    </Link>
 )
 const User = ({ my_Id, aboutMe: { _id, login, avatar } = {}, onMyPage }) => {
   useEffect(() => onMyPage(_id), [_id])
@@ -55,7 +58,7 @@ export const Header = () => {
   return (
     <section className="Header">
         <CLogout className='Link'/>
-    <Link className='Link' to={`/login`}> Sign In </Link>
+    {/* <Link className='Link' to={`/login`}> Sign In </Link> */}
       <CSearch />
       <CFeed />
       <AddPost />

src/components/Like.js

@@ -0,0 +1,90 @@
+import { Avatar, Col, Row } from 'antd'
+import { ConstructorModal } from '../helpers'
+import { ResultUserFind } from '../components/Search_Users'
+import { Router, Route, Link, Redirect, Switch } from 'react-router-dom'
+import user from '../materials/user.png'
+import { HeartOutlined, HeartFilled } from '@ant-design/icons'
+import React, { useMemo, useState, useEffect } from 'react'
+
+export const Likes = ({ likes }) => {
+  return (
+    <>
+      <div className="Modal">
+        {likes &&
+          likes?.map(({ owner: { _id, login, avatar } }) => (
+            <Link to={`/profile/${_id}`}>
+              <Row>
+                <Col offset={1}>
+                  <Avatar
+                    style={{
+                      width: '50px',
+                      height: '50px',
+                      // marginRight: '30px',
+                      // position: 'absolute',
+                    }}
+                    src={'/' + avatar?.url || user}
+                  />
+                </Col>
+                <Col offset={2}>
+                  <h3> {login || 'Anon'}</h3>
+                </Col>
+              </Row>
+            </Link>
+          ))}
+      </div>
+    </>
+  )
+}
+export const Like = ({
+  my_Id,
+  postId,
+  addLike,
+  deleteLike,
+  likes = [],
+  children,
+}) => {
+  const likeId = likes.find((like) => like?.owner?._id === my_Id)?._id
+  const changeLike = () =>
+    likeId ? deleteLike(likeId, postId) : addLike(postId)
+  // console.log('likeId', likeId)
+  const [isModalVisible, setIsModalVisible] = useState(false)
+
+  const showModal = () => {
+    setIsModalVisible(true)
+  }
+  return (
+    <>
+      <div style={{ display: 'flex' }}>
+        <h2 onClick={changeLike}>
+          {likeId ? (
+            <HeartFilled
+              style={{ cursor: 'pointer', fontSize: 'xx-large', color: 'red' }}
+            />
+          ) : (
+            <HeartOutlined
+              style={{ cursor: 'pointer', fontSize: 'xx-large' }}
+            />
+          )}
+        </h2>
+        {likes.length ? (
+          <h3 style={{ cursor: 'pointer', paddingLeft: 8 }} onClick={showModal}>
+            {' '}
+            {likes.length} likes
+          </h3>
+        ) : (
+          <h3 style={{ cursor: 'pointer', paddingLeft: 8 }}>
+            {' '}
+             0 likes
+          </h3>
+        )}
+      </div>
+      <ConstructorModal
+        title={'Likes'}
+        isModalVisible={isModalVisible}
+        setIsModalVisible={setIsModalVisible}
+      >
+        <Likes likes={likes} />
+      </ConstructorModal>
+    </>
+  )
+}

src/components/LinkToUser.js

@@ -2,18 +2,22 @@ import user from '../materials/user.png'
 import { Link} from 'react-router-dom'
 import { Avatar, Col} from 'antd'
 
-export const LinkToUser = (owner, size) => {
-    return <Col className="gutter-row" span={6}>
-        <Link to={`/profile/${owner?._id}`} style={{ display: 'flex', flexDirection: 'row' }}>
+export const LinkToUser = ({ owner, size,sizePadding='20px' }) => {
+    return <Col className="gutter-row" style={{padding:sizePadding}}>
+        <Link to={`/profile/${owner?._id}`} style={{
+            display: 'flex',
+            padding: '10px', flexDirection: 'row'
+        }}>
         {owner?.avatar ? (
             <Avatar
                size={size}
-                src={'/' + owner?.avatar?.url}
+                    src={'/' + owner?.avatar?.url}
+                    style={{marginRight:'5px'}}
             />
         ) : (
-            <Avatar size={size} src={user} />
+            <Avatar size={size} src={user}  style={{marginRight:'5px'}} />
         )}
-        <h1> {owner?.login || 'Anon'}</h1>
+        <h2> {owner?.login || 'Anon'}</h2>
         </Link>
     </Col>
 }

src/components/ListFollowers.js

@@ -0,0 +1,47 @@
+
+import { Avatar, Col} from 'antd'
+import { ConstructorModal } from '../helpers'
+import { ResultUserFind } from '../components/Search_Users'
+
+import React, { useMemo, useState, useEffect } from 'react'
+
+export const ListFollowers = ({aboutUserFollowers,followers,onPageData }) => {
+    
+  const [isModalVisibleFollowers, setIsModalVisibleFollowers] = useState(false)
+
+  const showModalFollowers = () => {
+    setIsModalVisibleFollowers(true)
+  }
+    const handleCancelFollowers = () => {
+        setIsModalVisibleFollowers(false)
+      }
+    return (
+    <>
+    {
+        followers?.length > 0 ? (
+        <h3
+          style={{ cursor: 'pointer', marginLeft: '20px' }}
+          onClick={showModalFollowers}
+        >
+          {followers.length} followers{' '}
+        </h3>
+      ) : (
+        <h3 style={{ marginLeft: '20px' }}> 0 followers </h3>
+      )}
+    
+    <ConstructorModal
+    title={'Followers'}
+    isModalVisible={isModalVisibleFollowers}
+    setIsModalVisible={setIsModalVisibleFollowers}
+  >
+    <ResultUserFind
+      size={'40px'}
+      onPageData={onPageData}
+      handleCancel={handleCancelFollowers}
+      userFind={aboutUserFollowers}
+    />
+            </ConstructorModal>
+        </>
+    )
+}
+export default ListFollowers

src/components/ListFollowing.js

@@ -0,0 +1,48 @@
+
+import { Avatar, Col} from 'antd'
+import { ConstructorModal } from '../helpers'
+import { ResultUserFind } from '../components/Search_Users'
+
+import React, { useMemo, useState, useEffect } from 'react'
+
+export const ListFollowing = ({aboutUserFollowing,following,onPageData }) => {
+    
+    const [isModalVisibleFollowing, setIsModalVisibleFollowing] =
+        useState(false)
+
+  const showModalFollowing = () => {
+    setIsModalVisibleFollowing(true)
+  }
+    const handleCancelFollowing = () => {
+        setIsModalVisibleFollowing(false)
+      }
+    return (
+    <>
+    {
+        following?.length > 0 ? (
+        <h3
+          style={{ cursor: 'pointer', marginLeft: '20px' }}
+          onClick={showModalFollowing}
+        >
+          {following.length} following{' '}
+        </h3>
+      ) : (
+        <h3 style={{ marginLeft: '20px' }}> 0 following </h3>
+      )}
+    
+    <ConstructorModal
+    title={'Following'}
+    isModalVisible={isModalVisibleFollowing}
+    setIsModalVisible={setIsModalVisibleFollowing}
+  >
+    <ResultUserFind
+      size={'40px'}
+      onPageData={onPageData}
+      handleCancel={handleCancelFollowing}
+      userFind={aboutUserFollowing}
+    />
+            </ConstructorModal>
+        </>
+    )
+}
+export default ListFollowing

src/components/NewPost.js

@@ -111,7 +111,7 @@ const PostEditor = ({ match: { params: { _id } }, myID, post,
     })
     const disabledBtn = state.images && state.title && state.text ? false : true
   
-  const savePost = () => onSave(state) && message.success(`post published, can create a new one`)
+  const savePost = () => onSave(state) && message.success(`Post published success!`)
   &&history.push(`/profile/${myID}`)
   return (
     <section className="Post">

src/components/Post.js

@@ -15,7 +15,7 @@ import moment from 'moment';
 import { CComments, AddComment } from '../components/Post_Comment'
 import { CPostEditor } from '../components/NewPost'
 import { actionFullOnePost} from '../reducers'
-
+import { Like, Likes } from './Like'
 import { ConstructorModal} from '../helpers'
 import React, { useMemo, useState, useEffect } from 'react'
 // const postId="625afa1d069dca48a822ffb0"
@@ -41,12 +41,6 @@ return (
 
 export const Card = ({ post, onPost }) => (
   <>
-    {/* <Link to={`/post/${postId}`} onClick={() => onPost(postId)}> */}
-    {/* {console.log('post id', post?._id)}
-    
-     onClick={() => onPost(post?._id)}
-    
-    */}
     <Link  to={`/post/${post?._id}`}>
       {post?.images && post?.images[0] && post.images[0]?.url ? (
         <img
@@ -61,8 +55,6 @@ export const Card = ({ post, onPost }) => (
           style={{ maxWidth: '230px', minHeight:'150px', minWidth:'150px' ,maxHeight: '200px' }}
         />
       )}
-
-      {/* {console.log(post?._id)} */}
     </Link>
   </>
 )
@@ -162,76 +154,9 @@ export const MyCarousel = ({ images = [] }) => {
     </>
   )
 }
-const Likes = ({ likes }) =>
-{
-  return (
-    <>
-    <div className='Modal'>
-        {
-          likes &&
-          likes?.map(({ owner:{_id, login, avatar} }) => (
-            // <div style={{ display: 'flex', flexDirection:'row' }}>
-          
-                
-            <Link to={`/profile/${_id}`}>
-              <Row>
-              <Col offset={1}>
-            <Avatar
-              style={{
-                width: '50px',
-                height: '50px',
-                // marginRight: '30px',
-                // position: 'absolute',
-              }}
-              src={'/' + avatar?.url || user}
-                  />
-                </Col>
-                <Col offset={2}>
-                    <h3 > {login || 'Anon'}</h3>
-                 </Col>
-                 </Row>
-                </Link>
-          ))
-        }
-    </div>
-    </>
-  )
-  }
-const Like = ({ my_Id, postId, addLike, deleteLike, likes=[], children }) =>
-{
 
-  const likeId = likes.find(like => like?.owner?._id === my_Id)?._id
-  const changeLike = () => likeId ? deleteLike(likeId, postId) : addLike(postId)
-  // console.log('likeId', likeId)
-  const [isModalVisible, setIsModalVisible] = useState(false);
-
-  const showModal = () => {
-    setIsModalVisible(true);
-  };
-  return(
-    <>
-      <div style={{display:'flex'}}>
-         <h3 onClick={changeLike}>
-            {likeId ? 
-            <HeartFilled  style={{cursor: 'pointer', fontSize:'xx-large', color:'red'}} />:
-             <HeartOutlined  style={{cursor: 'pointer', fontSize: 'xx-large' }} /> }
-        </h3>
-       {likes.length ? 
-        <h3 style={{cursor: 'pointer', paddingLeft: 8 }} onClick={showModal}> {likes.length} likes
-           
-        </h3>
-        :
-        '0 likes'}
-      </div>
-      <ConstructorModal title={'Likes'} isModalVisible={isModalVisible}
-        setIsModalVisible={setIsModalVisible}>
-          <Likes likes={likes}/>
-      </ConstructorModal>
-    </>
-  )
-}
 
-export const PagePost = ({ my_Id, onePost, likes, addComment,
+export const PagePost = ({ my_Id, onePost, addComment,
   addCommentReply, addLike, findSubComment, deleteLike,
   match: { params: { _id } },
   aboutUser = {}, onPost }) =>
@@ -263,9 +188,7 @@ export const PagePost = ({ my_Id, onePost, likes, addComment,
           </h3>
           <div style={{ marginLeft: '100px' }}>
           {/* <Col span={3} offset={2}> */}
-          <Like my_Id={my_Id} addLike={addLike} deleteLike={deleteLike} likes={onePost?.likes} postId={onePost?._id}>
-              <Likes likes={onePost?.likes} />
-          </Like>
+          <CLike likes={onePost?.likes} postId={onePost?._id}/>
               {/* </Col> */}
            </div>
     </Col>
@@ -296,12 +219,14 @@ export const PagePost = ({ my_Id, onePost, likes, addComment,
       <Divider>Comments</Divider>
       <div className="Scroll">
 
-            <CComments comments={onePost?.comments || []} />
+            <CComments postId={onePost?._id} comments={onePost?.comments || []} />
         
      </div>
 
-       {/* <HeartTwoTone twoToneColor="#eb2f96" /> */}
-            <AddComment addComment={addComment} onePost={onePost} />
+          {/* <HeartTwoTone twoToneColor="#eb2f96" /> */}
+          <div style={{ display: 'flex',  margin: '100px 10px' }}>
+            <AddComment addComment={addComment} postId={onePost?._id} />
+            </div>
         </Col>
      
         </Row>
@@ -310,18 +235,27 @@ export const PagePost = ({ my_Id, onePost, likes, addComment,
 }
 
 export const CPost = connect((state) => ({
-  onePost: state.post.onePost,
+  onePost: state.promise?.onePost?.payload,
   my_Id: state.auth.payload.sub.id || '',
   aboutUser: state.profilePage?.aboutUser,
   addComment: state.promise?.addComment?.payload,
-  addSubComment: state.promise?.addSubComment,
   
 }), {
-  addLike: actionAddFullLike,
-  findLikes: actionGetFindLiked,
-  deleteLike: actionDeleteFullLike,
+
   addComment: actionAddFullComment, 
   addCommentReply: actionAddSubFullComment,
-  findLikes: actionFindLikes,
   onPost:actionFullOnePost
 })(PagePost)
+
+const AllLikeComp = ({ my_Id, addLike, deleteLike, likes, postId }) =>
+<Like my_Id={my_Id} addLike={addLike} deleteLike={deleteLike} likes={likes} postId={postId}>
+<Likes likes={likes} />
+</Like>
+export const CLike = connect((state) => ({
+  my_Id: state.auth.payload.sub.id || ''
+}), {
+  addLike: actionAddFullLike,
+  // findLikes: actionGetFindLiked,
+  deleteLike: actionDeleteFullLike,
+  // findLikes: actionFindLikes
+})(AllLikeComp)

src/components/PostFeed.js

@@ -1,10 +1,14 @@
 import React, { useMemo, useState, useEffect } from 'react'
 import {
   actionAllPostsFeed,
-  actionFullAllGetPosts,
+  actionFullAllGetPosts, actionAddFullComment, actionFindSubComment,
+  actionAddSubFullComment, actionFindLikes, actionGetFindLiked, actionDeleteFullLike,
+  actionAddFullLikeForFeed,actionDeleteFullLikeForFeed,actionAddFullLike
 } from '../actions'
 import {actionFullFeed
-, actionClearFeedPosts} from '../reducers'
+  , actionClearFeedPosts, actionAddFullCommentFeed,
+  actionAddFullLikeFeed,actionDeleteFullLikeFeed
+} from '../reducers'
 
 import { Link} from 'react-router-dom'
 import { Provider, connect } from 'react-redux'
@@ -14,8 +18,10 @@ import { Avatar, Image, Divider, Radio } from 'antd'
 import { CPost, MyCarousel } from './Post'
 import { Row, Col } from 'antd';
 import LinkToUser from './LinkToUser'
+import { CComments, AddComment, Comments } from './Post_Comment'
+import { Like, Likes } from './Like'
 
-const MyPostFeed = ({ postsFeed = [], onPostsFeed, clearDataProfile }) => {
+const MyPostFeed = ({my_Id, postsFeed = [],onPostsFeed,addLike,deleteLike, clearDataProfile,addComment }) => {
   const [checkScroll, setCheckScroll] = useState(true);
 
   useEffect(() => {
@@ -43,21 +49,41 @@ const MyPostFeed = ({ postsFeed = [], onPostsFeed, clearDataProfile }) => {
   
   return (
     <>
-      <div className='Scrolling'>
+      <div className='PostsFeed'>
       <h2 >Feed</h2>
       <Row>
-
         <Col span={12} offset={6}>
           <div >
-            {console.log('POSTFEED', postsFeed)}
+              {/* {console.log('POSTFEED', postsFeed?.owner)} */}
+              {
+                (postsFeed?.length == 0) &&
+                <div>
+                <h1> У вас нету постов для ленты! </h1>
+              <h1> Выставляйте посты и подписывайтесь на других пользователей! </h1>
+                </div>
+              }
             {
-              (postsFeed || []).map(({ images, title, text, owner }) => (
+                (postsFeed || []).map(({ _id, images, title, text, owner,comments,likes }) => (
                 <div className='PostFeed'>
-                <LinkToUser owner={owner} size='50px'/>
-  
+                <LinkToUser owner={owner} size='70px'/>
+                    {/* {console.log('POSTFEED OWNEEER', owner)} */}
                   <MyCarousel images={images} style={{ marginTop: '60px' }} />
                   <h1> Title: {title || ''}</h1>
-                  <h1> Text: {text || ''}</h1>
+                    <h1> Text: {text || ''}</h1>
+                    <Divider>Comments</Divider>
+      <div className="ScrollForFeed">
+
+      <CCommentsForFeed postId={_id}comments={comments || []} />
+        
+     </div>
+                    {console.log('post feed id', _id)}
+                    <div style={{ display: 'flex', margin: '50px 10px' }}>
+                      
+                    <CLikeForFeed likes={likes} postId={_id}/>
+        
+       {/* <HeartTwoTone twoToneColor="#eb2f96" /> */}
+            <AddComment addComment={addComment} postId={_id} />
+        </div>
                 </div>
               ))
             }
@@ -72,9 +98,45 @@ const MyPostFeed = ({ postsFeed = [], onPostsFeed, clearDataProfile }) => {
   )
 }
 
+const CCommentsForFeed = connect((state) => ({
+  
+  addComment: state.promise?.addComment?.payload,
+  addSubComment: state.promise?.addSubComment,
+}), {
+  addComment: actionAddFullCommentFeed, 
+  addCommentReply: actionAddSubFullComment,
+findSubComment: actionFindSubComment,
+
+})(Comments)
+  
   export const CPostForFeed = connect(
     (state) => ({
-        postsFeed: state.feed?.postsFeed,
+      my_Id: state.auth.payload.sub.id || '',
+      postsFeed: state.feed?.postsFeed,
+      addComment: state.promise?.addComment?.payload,
     }),
-    { onPostsFeed: actionFullAllGetPosts,clearDataProfile:actionClearFeedPosts },
-)(MyPostFeed)
+    {
+      onPostsFeed: actionFullAllGetPosts,
+      clearDataProfile: actionClearFeedPosts,
+      addComment: actionAddFullCommentFeed,
+      addCommentReply: actionAddSubFullComment,
+      addLike:actionAddFullLikeForFeed
+    },
+)(MyPostFeed)
+
+const AllLikeComp = ({ my_Id, addLike, deleteLike, likes, postId }) =>
+<Like my_Id={my_Id} addLike={addLike} deleteLike={deleteLike} likes={likes} postId={postId}>
+<Likes likes={likes} />
+</Like>
+export const CLikeForFeed = connect((state) => ({
+  my_Id: state.auth.payload.sub.id || '',
+  addLike: state.promise?.addLike?.payload,
+  deleteLike: state.promise?.deleteLike?.payload,
+
+
+}), {
+  addLike: actionAddFullLikeFeed,
+  // findLikes: actionGetFindLiked,
+  deleteLike: actionDeleteFullLikeFeed
+  // findLikes: actionFindLikes
+})(AllLikeComp)

src/components/Post_Comment.js

@@ -21,10 +21,11 @@ import 'emoji-mart/css/emoji-mart.css'
 import { Picker } from 'emoji-mart'
 import data from 'emoji-mart/data/google.json'
 import { NimblePicker, Emoji } from 'emoji-mart'
+import {LinkToUser} from './LinkToUser'
 // import InputEmoji from 'react-input-emoji'; 
 import reactStringReplace from 'react-string-replace'
 // const postId="625afa1d069dca48a822ffb0"
-export const AddComment = ({ addComment, onePost }) => {
+export const AddComment = ({ addComment, postId }) => {
   const [text, setComment] = useState('')
   const [showEmojiPicker, setShowEmojiPicker] = useState(false)
   const addEmoji = ({ colons }) => {
@@ -35,27 +36,21 @@ export const AddComment = ({ addComment, onePost }) => {
     <>
       {
         showEmojiPicker && <Picker autoFocus={true}
-          style={{ color: '#ae65c5', position: 'absolute', bottom: '160px', right: '30px' }}
+          style={{ color: '#ae65c5', bottom: '160px', marginRight:'440px' }}
           onSelect={emojiTag => addEmoji(emojiTag)} set="apple" />
       }
-      
-      <div className="" style={{ display: 'flex',  margin: '100px 10px' }}>
-         <Input style={{ display: 'inline-block' }} size="large" placeholder='Add a comment...' 
+      <Input style={{ display:'flex',width:'60%',marginLeft:'20px', marginRight:'20px' }} size="large" placeholder='Add a comment...' 
           value={text} onChange={e => { setComment(e.target.value) }}
         onPressEnter={e => { setComment(e.target.value) }}/> 
-        
-        <Button size="large" disabled={text.length < 1} type="primary"
-          onClick={(e) => addComment(onePost?._id, text)&&setComment(e.target.value="")}> Publish </Button>
-      {console.log('comment ', text )}
-     
-      <SmileOutlined className='smile-btn' style={{ fontSize: 'xx-large' }} 
+         <SmileOutlined className='smile-btn' style={{ fontSize: 'xx-large', marginRight:'30px' }} 
           onClick={() => {
             setShowEmojiPicker(!showEmojiPicker)
-          }}>
-        
-        </SmileOutlined>
-       
-        </div>
+          }}/>
+      <Button 
+        size="large" disabled={text.length < 1} type="primary"
+          onClick={(e) => addComment(postId, text)&&setComment(e.target.value="")}> Publish </Button>
+      {console.log('comment ', text )}
+     
         </>
     )
       
@@ -77,7 +72,9 @@ const SpoilerButton = ({text, close, children }) => {
   const CommentAuthor = ({owner}) =>
   <>
       <div style={{ display: 'flex', flexDirection: 'row', padding: '5px', margin: '5px' }}>
-          {owner?.avatar ?
+        
+        <LinkToUser owner={owner} size={'10px'} sizePadding={'0px' }/>
+        {/* {owner?.avatar ?
             <Avatar
               style={{ width: '25px', height: '25px',marginRight: '2%'}}
               src={'/' + owner?.avatar?.url}
@@ -89,12 +86,12 @@ const SpoilerButton = ({text, close, children }) => {
           ) : (
             <h3 style={{ marginRight: '2%', fontWeight: 'bold' }}> anon </h3>
           )
-      }
+      } */}
       </div>
   </>
 
 
-const CommentForReply =({addCommentReply, commentId, onePost})=>{
+const CommentForReply =({addCommentReply, commentId, postId})=>{
     const [comment, setComment]=useState('')
     return (
      <>
@@ -103,7 +100,7 @@ const CommentForReply =({addCommentReply, commentId, onePost})=>{
         <Input  placeholder='Add a comment...' 
             value={comment} onChange={e => { setComment(e.target.value) }} />
         <Button  disabled={comment.length<1} type="primary" onClick={()=>
-            addCommentReply(onePost?._id, commentId, comment)
+            addCommentReply(postId, commentId, comment)
           
           }> Publish </Button>
           </div>
@@ -112,10 +109,10 @@ const CommentForReply =({addCommentReply, commentId, onePost})=>{
   }
   
   const CommentText = ({ text,close }) => {
-    const [edit, setEdited] = useState(close)
+    // const [edit, setEdited] = useState(close)
     return (
       <div style={{width:'90%',display:'inline-block', background:'#c8c8c8'}}>
-   <EditOutlined style={{float:'right',  fontSize: 'x-large' }}/>
+   {/* <EditOutlined style={{float:'right',  fontSize: 'x-large' }}/> */}
         <h3 style={{display:'block'}}>  {reactStringReplace(text, /:(.+?):/g, (match, i) => (
           <Emoji emoji={match}  set='apple' size={20}/> ))}
         </h3>
@@ -130,7 +127,7 @@ const CommentForReply =({addCommentReply, commentId, onePost})=>{
 }
   
 
-  const Comments = ({ comments,onePost, addCommentReply, commentId,children,close,findSubComment }) => {
+ export const Comments = ({ comments,postId, addCommentReply, commentId,children,close,findSubComment }) => {
     const [opened, setOpened] = useState(close)
    
     return (
@@ -157,7 +154,7 @@ const CommentForReply =({addCommentReply, commentId, onePost})=>{
                <button> send </button> */}
                   
                      
-                  <CommentForReply addCommentReply={addCommentReply} commentId={comment._id} onePost={onePost}/>
+                  <CommentForReply addCommentReply={addCommentReply} commentId={comment._id} postId={postId}/>
                      
               </SpoilerButton>
             </div> 
@@ -174,13 +171,6 @@ const CommentForReply =({addCommentReply, commentId, onePost})=>{
                       : null
             }
           </div>
-        {/* //   <button onClick={() => {
-        //     setOpened(!opened)
-        //   }}>
-        //   More Comments
-        // </button> && opened && children */}
-        
-          {/* <h3> {answers.map(({ text }) => text)}</h3> */}
         </>
       ) : null
   }
@@ -189,10 +179,9 @@ const CommentForReply =({addCommentReply, commentId, onePost})=>{
 }
 
 export const CComments = connect((state) => ({
-    onePost: state.promise.onePost?.payload,
+    postId: state.promise.onePost?.payload?._id,
     addComment: state.promise?.addComment?.payload,
     addSubComment: state.promise?.addSubComment,
-  
 }),
     {
         addComment: actionAddFullComment, 

src/components/User.js

@@ -1,37 +1,49 @@
 import {
-  actionAllPosts, actionOnePost, actionAboutMe, actionUploadFile,actionFullUnSubscribe,
-  actionAddFullSubscribe,actionFullSubscribe,actionPostsCount,actionUserUpsert,
-  actionSetAvatar, actionAvatar} from '../actions'
+  actionAllPosts,
+  actionOnePost,
+  actionAboutMe,
+  actionUploadFile,
+  actionFullUnSubscribe,
+  actionAddFullSubscribe,
+  actionFullSubscribe,
+  actionPostsCount,
+  actionUserUpsert,
+  actionSetAvatar,
+  actionAvatar,
+} from '../actions'
 import user from '../materials/user1.png'
 import React, { useMemo, useState, useEffect } from 'react'
-import { Card } from '../components/Post'
+import { Card } from './Post'
 // import {Basic} from '../components/DropZone'
 import { Router, Route, Link, Redirect, Switch } from 'react-router-dom'
 import { ResultUserFind } from '../components/Search_Users'
-import { ConstructorModal} from '../helpers'
+import { ConstructorModal } from '../helpers'
+import ListFollowing from './ListFollowing'
+import ListFollowers from './ListFollowers'
 
 import { Provider, connect } from 'react-redux'
 import { Avatar, Image, Divider, Radio } from 'antd'
-import { actionAboutUser, store,actionAllPostsUser,actionFullProfilePageUser,actionRemoveDataUser } from '../reducers'
+import {
+  actionAboutUser,
+  store,
+  actionAllPostsUser,
+  actionFullProfilePageUser,
+  actionRemoveDataUser,
+} from '../reducers'
 import { useDropzone } from 'react-dropzone'
 import { Upload, Button, DatePicker, Space } from 'antd'
 import { UploadOutlined, SearchOutlined } from '@ant-design/icons'
-import { Row, Col } from 'antd';
+import { Row, Col } from 'antd'
 import { CEditInfo } from '../components/EditAvatar'
-import { useDispatch } from "react-redux";
-import { useParams } from "react-router-dom";
-
+import { useDispatch } from 'react-redux'
+import { useParams } from 'react-router-dom'
 
 export const EditAccount = ({ open, children }) => {
   const [opened, setOpened] = useState(open)
   return (
     <>
       {/* <Link to={`/editProfile`}> */}
-      <button style={{ width: '100px' }}
-        onClick={
-          setOpened(!opened)
-        }
-      >
+      <button style={{ width: '100px' }} onClick={setOpened(!opened)}>
         Edit account
       </button>
       {opened && children}
@@ -49,192 +61,147 @@ const Input = ({ state, onChangeText }) => (
   />
 )
 
-
-
-export const PageAboutUser = ({ match: { params: { _id } },
+export const PageAboutUser = ({
+  match: {
+    params: { _id },
+  },
   my_Id,
   aboutUser: { login, nick, createdAt, avatar, followers, following } = {},
   allPosts,
   followId,
-  onPosts,
   onPost,
-  userId,
   addSubscribe,
   deleteSubscribe,
   onePost,
   onAboutUser,
-  aboutUserFollowers=[],
+  aboutUserFollowers = [],
   onPageData,
   aboutUserFollowing = [],
-  clearDataProfile,
-  actionRemoveDataUser,
   aboutMeFollowing,
   countAllPostsUser,
-  actionPostsCount,
-  post = {},
 }) => {
-  
+  const [checkScroll, setCheckScroll] = useState(true);
 
-   useEffect(() => {
-     
-     onAboutUser(_id)
-     actionPostsCount(_id)
-         console.log('USER DATA ', login, _id)
-   }, [_id])
-  
-  
-  console.log('COUNT ', countAllPostsUser)
-  const checkMyId =(_id === my_Id)
+  useEffect(() => {
+    if (checkScroll) {
+      actionFullProfilePageUser(_id);
+      setCheckScroll(false);
+    }
+  }, [checkScroll]);
 
-  const [isModalVisibleFollowing, setIsModalVisibleFollowing] = useState(false);
+  useEffect(() => {
+    document.addEventListener('scroll', scrollHandler);
+    return () => {
+      document.removeEventListener('scroll', scrollHandler);
+      // clearDataProfile()
+    }
+  }, [allPosts]);
 
-  const showModalFollowing = () => {
-    setIsModalVisibleFollowing(true);
+  const scrollHandler = (e) => {
+    if(e.target.documentElement.scrollHeight - e.target.documentElement.scrollTop - e.target.documentElement.clientHeight <20)
+    // if (e.target.documentElement.scrollHeight -
+    //   (e.target.documentElement.scrollTop + window.innerHeight) < 20)
+    { setCheckScroll(true) }
   };
 
-  const [isModalVisibleFollowers, setIsModalVisibleFollowers] = useState(false);
 
-  const showModalFollowers = () => {
-    setIsModalVisibleFollowers(true);
-  };
-  const handleCancelFollowing = () => {
-    setIsModalVisibleFollowing(false);
-  };
-  const handleCancelFollowers = () => {
-    setIsModalVisibleFollowers(false);
-  };
-  const [isModalVisibleEdit, setIsModalVisibleEdit] = useState(false);
-
-  const showModalEdit = () => {
-    setIsModalVisibleEdit(true);
-  };
+  useEffect(() => {
+    onAboutUser(_id)
+    // actionPostsCount(_id)
+    console.log('USER DATA ', login, _id)
+  }, [_id])
 
+  // console.log('COUNT ', countAllPostsUser)
+  const checkMyId = _id === my_Id
 
   return (
-  
     <>
       <Row>
-      <Col span={12} offset={6}>
+        <Col span={10} offset={6}>
           <section className="AboutMe">
-            <Row >
-           
-            {avatar?.url ?
-              <Avatar
-                style={{ marginRight: '20px', width: '150px', height: '150px' }}
-                src={'/' + avatar?.url} />
-              :
-              <Avatar
-                style={{ marginRight: '20px', width: '150px', height: '150px' }}
-                src={user} />
-            }
-            <div className="Info">
-              {login ?
-
-                <h1> {login}</h1>
-                :
-                <h1> {'Anon'}</h1>
-              }
-
-        <h3>
-          Created Account: {new Intl.DateTimeFormat('en-GB').format(createdAt)}
-        </h3>
-        <div style={{ display: 'flex' }}>
-          {countAllPostsUser > 0 ? (
-            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
-              <h3> {countAllPostsUser} posts </h3>
-            </div>
-          ) : (
-            <h3> 0 posts </h3>
-          )}
+            <Row>
+              {avatar?.url ? (
+                <Avatar
+                  style={{
+                    marginRight: '20px',
+                    width: '150px',
+                    height: '150px',
+                  }}
+                  src={'/' + avatar?.url}
+                />
+              ) : (
+                <Avatar
+                  style={{
+                    marginRight: '20px',
+                    width: '150px',
+                    height: '150px',
+                  }}
+                  src={user}
+                />
+              )}
+              <div className="Info">
+                {login ? <h1> {login}</h1> : <h1> {'Anon'}</h1>}
 
-          {followers?.length > 0 ? (
-         
-              
-                  <h3 style={{ cursor: 'pointer', marginLeft: '20px' }}
-                    onClick={showModalFollowers}>
-                {followers.length} followers{' '}
-                  </h3>
-          
-          ) : (
-            <h3 style={{ marginLeft: '20px' }}> 0 followers </h3>
-                )}
-                
-                {following?.length > 0 ? (
-                  <h3 style={{ cursor: 'pointer', marginLeft: '20px' }}
-                    onClick={showModalFollowing}>{following?.length} {' '}
-                    following </h3>)
-                  :
-                (<h3 style={{ marginLeft: '20px' }}> 0 following </h3>
-                )
-                }
-             
-        </div>
-              <h3> nick: {nick == null ? login : nick}</h3>
-              {
-                  checkMyId ?
-                    <>
-                      <button onClick={showModalEdit}>
-                      EDIT
-                      </button>
-             </>
-                    :
-                    <Subscribe my_Id={my_Id} deleteSubscribe={deleteSubscribe}
-                      followId={followId} addSubscribe={addSubscribe} aboutMeFollowing={aboutMeFollowing} />
-                  
-              }
-              {/* <ConstructorModal>
-        <ResultUserFind my_Id={my_Id} size={'40px'} onPageData={onPageData}
-            userFind={aboutUserFollowing} />
-      </ConstructorModal> */}
+                <h3>
+                  Created Account:{' '}
+                  {new Intl.DateTimeFormat('en-GB').format(createdAt)}
+                </h3>
+                <div style={{ display: 'flex' }}>
+                  {countAllPostsUser > 0 ? (
+                    <div
+                      style={{
+                        display: 'flex',
+                        justifyContent: 'space-between',
+                      }}
+                    >
+                      <h3> {countAllPostsUser} posts </h3>
+                    </div>
+                  ) : (
+                    <h3> 0 posts </h3>
+                  )}
 
+                  <ListFollowers aboutUserFollowers={aboutUserFollowers} followers={followers} onPageData={onPageData}/>
 
-              <ConstructorModal title={'Following'}
-                isModalVisible={isModalVisibleFollowing}
-                setIsModalVisible={setIsModalVisibleFollowing}>
-                <ResultUserFind size={'40px'} handleCancel={handleCancelFollowing}
-                  onPageData={onPageData}
-                  userFind={aboutUserFollowing} />
-                
-              </ConstructorModal>
-              <ConstructorModal  title={'Followers'} isModalVisible={isModalVisibleFollowers}
-                setIsModalVisible={setIsModalVisibleFollowers}>
-         <ResultUserFind size={'40px'} onPageData={onPageData} handleCancel={handleCancelFollowers}
-                  userFind={aboutUserFollowers} />
-                
-      </ConstructorModal>
-              
-                
-      <ConstructorModal title={'Edit avatar'}
-                isModalVisible={isModalVisibleEdit}
-                setIsModalVisible={setIsModalVisibleEdit}>
-                          <CEditInfo />
-                </ConstructorModal>
-                
+                  <ListFollowing aboutUserFollowing={aboutUserFollowing} following={following} onPageData={onPageData}/>
 
-              </div>
-              </Row>
-        </section>
+                </div>
+                <h3> nick: {nick == null ? login : nick}</h3>
+                {checkMyId ? (
+                  <>
+                    <CEditInfo/>
+                  </>
+                ) : (
+                  <Subscribe
+                    my_Id={my_Id}
+                    deleteSubscribe={deleteSubscribe}
+                    followId={followId}
+                    addSubscribe={addSubscribe}
+                    aboutMeFollowing={aboutMeFollowing}
+                  />
+                )}
             
+              </div>
+            </Row>
+          </section>
         </Col>
       </Row>
       <Row>
-      <Col span={16} offset={6}>
-        <div
-          style={{
-            display: 'flex',
-            flexWrap: 'wrap',
-            padding: '20px',
-            margin: '20px',
-          }}
-        >
-          {(allPosts || [])?.map((item) => (
-            <Card post={item} onPost={onPost} />
-          ))}
+        <Col span={15} offset={6}>
+          <div
+            style={{
+              display: 'flex',
+              flexWrap: 'wrap',
+              padding: '20px',
+              margin: '20px',
+            }}
+          >
+            {(allPosts || [])?.map((item) => (
+              <Card post={item} onPost={onPost} />
+            ))}
           </div>
         </Col>
-        </Row>
+      </Row>
     </>
-     
   )
 }
 // const ProfileFollowButton = ({ myID, userId, followers, onSubsuscribe, onUnSubsuscribe }) => {
@@ -253,45 +220,56 @@ export const PageAboutUser = ({ match: { params: { _id } },
 //   followers: state?.post?.userData?.followers || []
 // }), { onSubsuscribe: actionSubscribe, onUnSubsuscribe: actionUnSubscribe })(ProfileFollowButton)
 
+const Subscribe = ({
+  my_Id,
+  postId,
+  addLike,
+  deleteLike,
+  following = [],
+  deleteSubscribe,
+  aboutMeFollowing = [],
+  aboutUserFollowing,
+  addSubscribe,
+  followId,
+  children,
+}) => {
+  const checkFollowId = aboutMeFollowing?.find(
+    (follower) => follower?._id === followId,
+  )?._id
 
-const Subscribe = ({ my_Id, postId, addLike, deleteLike, following = [], deleteSubscribe,
-  aboutMeFollowing=[], aboutUserFollowing, addSubscribe, followId, children }) =>
-{
-
- const checkFollowId = aboutMeFollowing?.find(follower => follower?._id === followId)?._id
 
- // console.log(' _id', aboutMeFollowing?.find(f => f._id === followId && true))
-  console.log('FOLLOWING ', checkFollowId) 
-  // const [isModalVisible, setIsModalVisible] = useState(false);
+  console.log('FOLLOWING ', checkFollowId)
 
-  // const showModal = () => {
-  //   setIsModalVisible(true);
-  // };
-  return(
+  return (
     <>
-      <div style={{display:'flex'}}>
-         
-            {checkFollowId ?
-            
-          <Button size="large" primary onClick={()=>deleteSubscribe(my_Id, followId)} >
-               unsubscribe
-            </Button> 
-            :
-            <Button size="large" danger onClick={()=>addSubscribe(my_Id, followId)}>
+      <div style={{ display: 'flex' }}>
+        {checkFollowId ? (
+          <Button
+            size="large"
+            primary
+            onClick={() => deleteSubscribe(my_Id, followId)}
+          >
+            unsubscribe
+          </Button>
+        ) : (
+          <Button
+            size="large"
+            danger
+            onClick={() => addSubscribe(my_Id, followId)}
+          >
             subscribe
           </Button>
-                } 
-    
+        )}
       </div>
-      
+
       {/* {console.log('follow _id', followId)} */}
-      
+
       {/* <button style={{ cursor: 'pointer', fontSize: 'xx-large', color: 'red' }}
         onClick={() => addSubscribe(my_Id,followId)}>
               subscribe
             </button> */}
-    
-       {/* {likes.length ? 
+
+      {/* {likes.length ? 
           <h3 style={{ cursor: 'pointer', paddingLeft: 8 }} onClick={showModal}>
             {likes.length} likes
            
@@ -312,22 +290,19 @@ export const CPageAboutUser = connect(
     aboutUser: state.profilePage?.aboutUser,
     aboutUserFollowers: state.profilePage?.aboutUser?.followers,
     aboutUserFollowing: state.profilePage?.aboutUser?.following,
-    followId:state.profilePage?.aboutUser?._id,
+    followId: state.profilePage?.aboutUser?._id,
     aboutMeFollowing: state.profileData?.aboutMe?.following,
-    countAllPostsUser:state.promise?.countAllPostsUser?.payload,
+    countAllPostsUser: state.promise?.countAllPostsUser?.payload,
     allPosts: state.profilePage?.allPosts,
     onePost: state.promise?.onePost?.payload,
-    // post:state.promise?.onePost?.payload,
-    // allPosts: state.promise?.allPosts?.payload,
   }),
   {
     onAboutUser: actionFullProfilePageUser,
-    actionRemoveDataUser:actionRemoveDataUser,
+    actionRemoveDataUser: actionRemoveDataUser,
     onLoad: actionUploadFile,
     onPost: actionOnePost,
     onPageData: actionFullProfilePageUser,
     addSubscribe: actionFullSubscribe,
     deleteSubscribe: actionFullUnSubscribe,
-    actionPostsCount:actionPostsCount
   },
 )(PageAboutUser)

src/reducers/index.js

@@ -2,7 +2,8 @@ import thunk from 'redux-thunk';
 import {
   actionAuthLogin, gql, actionPromise,
   actionAllPosts, actionAboutMe, actionAllPostsUser, actionAboutUser,
-  actionPostsFeed,actionPostsFeedCount,actionOnePost
+  actionPostsFeed, actionPostsFeedCount, actionOnePost, actionAddComment,
+  actionAddLike,actionDeleteLike,actionPostsCount
 } from '../actions'
 import { createStore, combineReducers, applyMiddleware } from 'redux';
 
@@ -35,29 +36,18 @@ export const actionProfilePageData = (id) => ({ type: 'DATA_PROFILE', id })
   export const actionAvatarUpdate= (aboutUser) =>
   ({ type: 'CHANGE-AVATAR-USER', aboutUser })
 
-  
-
-export const actionFullProfilePageUser = (_id) =>
+  export const actionFullProfilePageUser = (_id) =>
   async dispatch => {
     const aboutUser = await dispatch(actionAboutUser(_id))
     console.log('ABOUTUSER ', aboutUser)
     const allPosts = await dispatch(actionAllPostsUser(_id))
+    await dispatch(actionPostsCount(_id))
     console.log('ALLPOSTS ', allPosts )
     if (aboutUser && allPosts) {
       await dispatch(actionProfilePageDataTypeUser(aboutUser, allPosts))
     }
   }
 
-  export const actionFullSetAvatar = (_id) =>
-  async dispatch => {
-    const aboutUser = await dispatch(actionAboutUser(_id))
-    console.log('ABOUTUSER ', aboutUser)
-    const allPosts = await dispatch(actionAllPostsUser(_id))
-    console.log('ALLPOSTS ', allPosts )
-    if (aboutUser && allPosts) {
-      await dispatch(actionProfilePageDataTypeUser(aboutUser, allPosts))
-    }
-  }
 
   export const actionFullProfilePage = (_id) =>
   async dispatch => {
@@ -73,7 +63,7 @@ export const actionFullProfilePageUser = (_id) =>
   export const actionRemoveDataUser= () =>
   ({ type: 'REMOVE-DATA' })
 
-export const profileUserReducer = (state = {}, { type, aboutUser, allPosts }) => {
+export const profileUserReducer = (state = {}, { type, aboutUser, allPosts,newPosts }) => {
   const types = {
     'PROFILE-PAGE-USER': () => {
       return {
@@ -87,12 +77,17 @@ export const profileUserReducer = (state = {}, { type, aboutUser, allPosts }) =>
         allPosts: []
       }
     },
-      'CHANGE-AVATAR-USER': () => { return {
+    'CHANGE-AVATAR-USER': () => {
+      return {
         ...state, aboutUser
       }
-  }
-  
     }
+  
+    ,
+
+
+  }
+
     if (type in types) {
         return types[type]()
     }
@@ -101,9 +96,68 @@ export const profileUserReducer = (state = {}, { type, aboutUser, allPosts }) =>
     export const actionFeedType= (newPosts) =>
   ({ type: 'ADD-POSTS', newPosts })
 
+export const actionAddCommentPostInTape = (postId, newResult) =>
+  ({ type: 'ADD-COMMENT-POSTS', postId, newResult })
+  
+
+export const actionAddFullCommentFeed = (postId, newResult) => async (
+    dispatch,
+    getState,
+  ) => {
+    await dispatch(actionAddComment(postId, newResult))
+    const {
+      promise: {
+        addComment: { status },
+      },
+    } = getState()
+    if (status === 'FULFILLED') {
+      const onePost = await dispatch(actionOnePost(postId))
+      if (onePost)
+      await dispatch((actionAddCommentPostInTape(postId,newResult)))
+    }
+    // await dispatch(actionOnePost(postId));
+}
+const actionAddLikePostInTape = (postId,) =>
+  ({ type: 'ADD-LIKE-POSTS', postId })
+  
+
+export const actionAddFullLikeFeed = (postId) => async (
+  dispatch,
+  getState,
+) => {
+  await dispatch(actionAddLike(postId))
+  const {
+    promise: {
+      addLike: { status },
+    },
+  } = getState()
+  if (status === 'FULFILLED') {
+    const onePost = await dispatch(actionOnePost(postId))
+    if (onePost)
+      await dispatch((actionAddLikePostInTape(postId)))
+  }
+  }
+  const actionDeleteLikePostInTape = (likeId,postId) =>
+  ({ type: 'DELETE-LIKE-POSTS',likeId,postId })
+  export const actionDeleteFullLikeFeed = (likeId,postId) => async (
+    dispatch,
+    getState,
+  ) => {
+    await dispatch(actionDeleteLike(likeId,postId))
+    const {
+      promise: {
+        deleteLike: { status },
+      },
+    } = getState()
+    if (status === 'FULFILLED') {
+      const onePost = await dispatch(actionOnePost(postId))
+      if (onePost)
+        await dispatch((actionDeleteLikePostInTape(likeId,postId)))
+    }
+}
+    
   export const actionFullFeed = () =>
     async (dispatch, getState) => {
-  
     const postsFeed = await dispatch(actionPostsFeed(getState))
      const skip = postsFeed.length
     console.log('postsFeed ', postsFeed)
@@ -111,12 +165,12 @@ export const profileUserReducer = (state = {}, { type, aboutUser, allPosts }) =>
     console.log('postsFeedCount ', postsFeedCount)
       if (skip < postsFeedCount)
       {
-        console.log('SKIIIP ', skip)
+        // console.log('SKIIIP ', skip)
         const newPosts = await dispatch(actionPostsFeed(getState, skip))
         if (newPosts) {
           await dispatch(actionFeedType(newPosts));
-          const postsFeedCount = await dispatch(actionPostsFeedCount(getState))
-          console.log('postsFeedCount ', postsFeedCount)
+          // const postsFeedCount = await dispatch(actionPostsFeedCount(getState))
+          // console.log('postsFeedCount ', postsFeedCount)
         }
 
         }
@@ -150,12 +204,12 @@ export const profileUserReducer = (state = {}, { type, aboutUser, allPosts }) =>
           console.log('onePost ', onePost)
         }
       }
-export const feedReducer = (state = {}, {skip, type, newPosts=[], postsFeed,postsFeedCount }) => {
+export const feedReducer = (state = {}, {skip, type, newPosts=[], postId, postsFeed,postsFeedCount,newResult }) => {
   const types = {
     'ADD-POSTS': () => {
       return {
         ...state,
-        postsFeed: state?.postsFeed ? [...state?.postsFeed, ...newPosts] : [...newPosts]
+        postsFeed: postsFeed ? [...postsFeed, ...newPosts] : [...newPosts]
       }
     },
     'DELETE-POSTS': () => {
@@ -163,7 +217,21 @@ export const feedReducer = (state = {}, {skip, type, newPosts=[], postsFeed,post
         ...state,
         postsFeed: []
       }
-  }
+    },
+    
+    'ADD-LIKE-POSTS': () => ({
+      ...state,
+      postsFeed: postsFeed?.map(p => p._id === postId ? p = { ...p, likes: [...newResult] } : p)
+    }),
+    'DELETE-LIKE-POSTS': () => ({
+      ...state,
+      postsFeed: postsFeed?.map(p => p._id === postId ? p = { ...p, likes: [...newResult] } : p)
+    }),
+
+  'ADD-COMMENT-POSTS': () => ({
+      ...state,
+      postsFeed: postsFeed?.map(p => p._id === postId ? p = { ...p, comments: [...newResult] } : p)
+    }),
   
     }
     if (type in types) {