Add changeSubscribeWatcher, edit PostEditor and add css styles

src/App.js

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

src/App.scss

@@ -2,7 +2,6 @@
   @font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
   'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
   'Noto Color Emoji';
-  // margin-top: 50px;
 }
 body {
   font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
@@ -54,6 +53,22 @@ body {
   box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
   font-size: 20px;
 }
+.Links{
+  margin:10px;
+  font-size:xx-large;
+   color:black;
+  transition: 0.3s;
+
+}
+.Links:hover{
+  color:white;
+
+  opacity: 0.7;
+  }
+
+.Links:active{
+    transform: scale(1.10); /* Увеличение картинки */
+  }
 .Header {
   display: flex;
   position: fixed;
@@ -66,7 +81,9 @@ body {
   top: 0;
   transition: 0.3s;
   box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+
 }
+
 .Recomendations {
   margin-left: 20px;
 }
@@ -147,10 +164,70 @@ main {
   flex-direction: column;
 }
 .Card {
-  padding: 10px;
+
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25),
+   0 10px 10px rgba(0, 0, 0, 0.22);
+  // animation: fade .5s linear forwards;
+}
+// @keyframes fade {
+//   0% {
+//     opacity: 0;
+//   }
+//   100% {
+//     opacity: 1;
+//   }
+// }
+
+// .Card:hover {
+//   display: block;
+//   background: rgba(0, 0, 0, 0.5);
+//   cursor: pointer;
+  
+
+// }
+.Wrapper{
+  // background: rgba(0, 0, 0, 0.5);
+  // opacity: 0; 
+  //  padding: 10px;
   margin: 40px;
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+  // background: rgb(0, 0, 0);
+  
+  // opacity: 1;
+  transition: filter .5s;
+  // background: #000;  /* У блока, оборачивающего картинку при наведении будет просвечивать черный фон */
+    // overflow: hidden;  /* Ограничиваем видиую область */
+}
+.Wrapper:hover{
+  // opacity: 0.8;
+  // opacity: 0.7; /* Высветляем картинку, но она становится темнее, так как под ней черный фон */
+
+  -webkit-filter: brightness(40%);
+  filter: brightness(50%);
+  // transform: scale(1.05); /* Увеличение картинки */
+}
+
+.Like{
+    cursor: pointer;
+    font-size: xx-large;
+    color: red;
+
+    // background-color: red;
+}
+.Like:active{
+  transform: scale(1.10); /* Увеличение картинки */
+}
+.UnLike{
+  cursor: pointer;
+  font-size: xx-large;
+  // opacity: 1;
+  color:white;
+  transition: filter .3s;
+
 }
+.UnLike:hover{
+opacity: 0.6;
+}
+
 .MyCarousel {
   display: block;
   min-width: 60%;
@@ -270,34 +347,7 @@ main {
   right: 30px;
   margin: 20px;
 }
-Link {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  text-decoration: none;
-  font-family: serif;
-  background-color: rgb(174, 172, 240);
-  border: 2px solid rgb(37, 140, 184);
-  border-radius: 10px;
-  margin: 10px;
-  padding: 10px;
-  font-weight: bold;
-  color: rgb(10, 9, 58);
-}
-.Link {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  text-decoration: none;
-  font-family: serif;
-  background-color: rgb(174, 172, 240);
-  border: 2px solid rgb(37, 140, 184);
-  border-radius: 10px;
-  margin: 10px;
-  padding: 10px;
-  font-weight: bold;
-  color: rgb(10, 9, 58);
-}
+
 
 .Avatar {
   margin-left: 20px;
@@ -311,10 +361,7 @@ Link {
   box-shadow: 0 5px 10px rgba(77, 141, 168, 0.25),
     0 10px 10px rgba(22, 93, 129, 0.22);
 }
-.Link:hover {
-  text-decoration: underline;
-  background-color: rgb(123, 119, 228);
-}
+
 .ResultUserFind {
   max-width: 500px;
   min-width: 320px;

src/actions/index.js

@@ -97,6 +97,7 @@ export const actionAboutMe = (_id) =>
               _id createdAt login nick avatar{_id url} 
               followers{_id login nick avatar{_id url}} 
               following{_id login nick avatar{_id url}}
+              likesCount
             }
           }`,
       {
@@ -105,6 +106,24 @@ export const actionAboutMe = (_id) =>
     ),
   )
 
+  export const actionAboutMeLikes = (_id) =>
+  actionPromise(
+    'aboutMeLikes',
+    gql(
+      `query Likes($postId:String){
+            LikeFind(query:$postId)
+            {
+              _id
+              owner { _id nick login
+                avatar{_id url}
+                  }
+            }
+          }`,
+      {
+        postId: JSON.stringify([{ "post._id":_id }]),
+      },
+    ),
+  )
  export const actionFullLogin = (login, password) =>  //упрощенный action для саги
     ({type: 'FULL_LOGIN', login, password})
     
@@ -371,6 +390,7 @@ export const actionAllFollowers = (_id) =>
         `query AllFollowers($userId:String){
   UserFindOne(query:$userId)
         {
+          _id
           followers{_id login}
         }
       }`,
@@ -386,7 +406,7 @@ export const actionAllFollowing = (_id) =>
       gql(
         `query AllFollowing($userId:String){
   UserFindOne(query:$userId)
-    {
+    {_id
           following{_id login}
     }
 }`,
@@ -421,7 +441,8 @@ export const actionAddComment = (postId, text) =>
     )
 
 export const actionGetCommentsOnePost = (postId) =>
-    actionPromise('commentsOnePost', gql(`query commentFindPost ($id:String!){
+  actionPromise('commentsOnePost',
+    gql(`query commentFindPost ($id:String!){
         PostFindOne(query:$id){
             comments {
                 _id text createdAt 
@@ -536,10 +557,10 @@ export const actionGetFindLiked = (_id) =>
       'findLiked',
       gql(
         ` query LikeFindPost($id:String!) {
-                                        LikeFind(query:$id){
-                                          owner { _id nick login
-                                                avatar{_id url}
-                                    }
+          LikeFind(query:$id){
+             owner { _id nick login
+                avatar{_id url}
+                  }
                 }
             } `,
         {
@@ -783,6 +804,43 @@ export const actionAboutUser = (_id) =>
     ),
   )
 
+
+  export const actionGetFollowing = (_id) =>
+  actionPromise(
+    'getFollowing',
+    gql(
+      `query GetFollowing($userId:String){
+      UserFindOne(query:$userId)
+      {
+        _id
+        following{_id login nick avatar{_id url}}
+      }
+    }`,
+      {
+        userId: JSON.stringify([{ _id }]),
+      },
+    ),
+  )
+
+
+  export const actionGetFollowers = (userId) =>
+  actionPromise(
+    'getFollowers',
+    gql(
+      `query GetFollowers($userId:String){
+      UserFindOne(query:$userId)
+      {
+       _id
+        followers{_id login nick avatar{_id url}}
+      }
+    }`,
+      {
+        userId: JSON.stringify([{ _id:userId }]),
+      },
+    ),
+  )
+
+
 export const actionAllPostsUser = (userId, skip) =>
   actionPromise(
     'allPosts',
@@ -827,6 +885,7 @@ export const actionSubscribe = (my_Id, followId, oldFollowing) =>
     ),
   )
 
+
 export const actionUnSubscribe = (my_Id, oldFollowing) =>
   actionPromise(
     'unSubscribe',
@@ -849,6 +908,26 @@ export const actionUnSubscribe = (my_Id, oldFollowing) =>
     ),
   )
 
+  export const actionChangeSubscribe = (oldFollowing) =>
+  actionPromise(
+    'changeSubscribe',
+    gql(
+      `mutation changeSubscribe($user:UserInput) {
+        UserUpsert(user: $user) {
+          _id
+        
+        }
+      }
+      `,
+      {
+        user: 
+          // _id: my_Id,
+         oldFollowing 
+        ,
+      },
+    ),
+  )
+
 export const actionFullSubscribe = (my_Id, followId) => async (
   dispatch,
   getState,

src/components/Comment.js

@@ -8,7 +8,7 @@ import { connect } from 'react-redux'
 import { Link } from 'react-router-dom'
 
 import { Input, Button } from 'antd'
-import { SmileOutlined } from '@ant-design/icons'
+import { SmileOutlined,SmileFilled } from '@ant-design/icons'
 import moment from 'moment'
 import React, { useState } from 'react'
 import 'emoji-mart/css/emoji-mart.css'
@@ -71,7 +71,7 @@ export const AddComment = ({ addComment, postId }) => {
         onClick={handleOK}
           />
           :
-          <SmileOutlined
+          <SmileFilled 
           className="smile-btn"
           style={{ color:'#108ee9',fontSize: 'xx-large', marginRight: '30px' }}
         

src/components/EditPostButton.js

@@ -2,12 +2,16 @@ import { Link } from 'react-router-dom'
 import { Button } from 'antd'
 import React, { useState, useEffect } from 'react'
 
-export const EditMyPostButton = ({ _id }) => {
+export const EditMyPostButton = ({ _id}) => {
   return (
     <>
       <Link to={`/edit/post/${_id}`}>
         <Button
-          style={{ marginLeft: '200px',marginTop:'10px', width: '100px' }}
+          style={{
+            marginLeft: '200px',
+            marginTop: '10px', width: '100px'
+          }}
+
           size="large"
           type="primary"
         >
@@ -17,4 +21,3 @@ export const EditMyPostButton = ({ _id }) => {
     </>
   )
 }
-

src/components/HeaderButtons.js

@@ -2,42 +2,76 @@ import user from '../materials/user.png'
 import { actionFullProfilePageUser } from '../redux/saga'
 import { Avatar, Button } from 'antd'
 import { CSearch } from './Search_Users'
-import { Link } from 'react-router-dom'
+import { Link} from 'react-router-dom'
 import { connect } from 'react-redux'
-import React, { useEffect,useState } from 'react'
-export const AddPost = ({ children }) => {
-  const [state, setState] = useState(false)
-
+import {
+  HomeOutlined, CompassOutlined,
+  PlusSquareFilled, PlusSquareOutlined,
+  ImportOutlined,HomeFilled
+} from '@ant-design/icons';
+import React, { useEffect, useState } from 'react'
+const DefaultLink = ({link, tag}) =>
+{
+  // const [state, setState] = useState(false)
   return (
-    <>
-      <Link to={`/edit/post/new`}>
-        <a className="button" onClick={() => setState(!state)}>
-          {' '}
-          +{' '}
-        </a>
-        {!state && children}
+    <Link to={`${link}`}
+      className="Links">
+      {tag}
       </Link>
-    </>
   )
 }
-export const Feed = () => {
+export const Feed = () =>
+  <DefaultLink link={"/feed"} tag={<HomeOutlined />} />
+{/* <HomeOutlined /> */ }
+export const Explore = () =>
+  <DefaultLink link={"/explore"} tag={<CompassOutlined />} />
+
+{/* <CompassOutlined /> */}
+// export const Feed = () => {
+//   return (
+//     <>
+//       <Link to={`/feed`}  onClick={()=>console.log('щас фид')}>
+//         <a className="button"> Feed </a>
+//       </Link>
+//     </>
+//   )
+// } 
+
+export const AddPost = ({ children }) => {
+  const [state, setState] = useState(false)
+
   return (
     <>
-      <Link to={`/feed`}>
-        <a className="button"> Feed </a>
+      <Link to={`/edit/post/new`}
+      className="Links">
+      <PlusSquareOutlined onClick={() => setState(!state)}/>
+        {!state && children}
       </Link>
     </>
   )
 }
+export const LogOut = () => 
+<DefaultLink
+tag={<ImportOutlined  />}/>
+
+// export const Feed = () => {
+//   return (
+//     <>
+//       <Link to={`/feed`}  onClick={()=>console.log('щас фид')}>
+//         <a className="button"> Feed </a>
+//       </Link>
+//     </>
+//   )
+// }
 
-export const Explore = () => (
-  <Link to={`/explore`}>
-    <a size="large" className="button">
-      {' '}
-      Explore{' '}
-    </a>
-  </Link>
-)
+// export const Explore = () => (
+//   <Link to={`/explore`}>
+//     <a size="large" className="button">
+//       {' '}
+//       Explore{' '}
+//     </a>
+//   </Link>
+// )
 
 const User = ({ my_Id, aboutMe: { _id, login, avatar } = {}, onMyPage }) => {
   // console.log('_id in user', _id)
@@ -47,11 +81,11 @@ const User = ({ my_Id, aboutMe: { _id, login, avatar } = {}, onMyPage }) => {
       onMyPage(my_Id)
   }, [my_Id])
   return (
-    <Link to={`/profile/${_id}`}>
+    <Link to={`/profile/${_id}`} onClick={()=>console.log('щас юзер')}>
       {avatar?.url ? (
-        <Avatar src={'/' + avatar?.url} size={60} className="Avatar" />
+        <Avatar src={'/' + avatar?.url} size={50} className="Avatar" />
       ) : (
-        <Avatar src={user} size={60} className="Avatar" />
+        <Avatar src={user} size={50} className="Avatar" />
       )}
     </Link>
   )

src/components/Like.js

@@ -47,12 +47,11 @@ console.log('like id in component', likeId)
        
           {likeId ? (
             <HeartFilled
-              style={{ cursor: 'pointer', fontSize: 'xx-large', color: 'red' }}
+              style={{color:'red'}}
+              className='Like'
             />
           ) : (
-            <HeartOutlined
-              style={{ cursor: 'pointer', fontSize: 'xx-large' }}
-            />
+            <HeartOutlined className='UnLike' />
           )}
         </h3>
         {likes.length ? (

src/components/LoginRegisterLogout.js

@@ -7,6 +7,7 @@ import { Link } from 'react-router-dom'
 import { actionClearUserData } from '../redux/saga'
 import { message } from 'antd'
 import { useEffect } from 'react'
+import { LogOut } from './HeaderButtons'
 
 const LoginForm = ({ onLogin, children, auth,register, onClearPromise }) => {
   const [login, setLogin] = useState('')
@@ -147,11 +148,8 @@ export const CRegisterForm = connect(
 )(LoginForm)
 
 export const CLogout = connect(
-  (state) => ({
-    children: `Logout`,
-  }),
-  { onClick: actionClearUserData },
-)('a')
+  null,{ onClick: actionClearUserData },
+)(LogOut)
 
 export const InputForm = ({}) => {
   return (

src/components/PostCard.js

@@ -4,7 +4,8 @@ import { Link } from 'react-router-dom'
 export const Card = ({ post }) => (
     <>
       <Link key={post?._id} to={`/post/${post?._id}`}>
-        {post?.images && post?.images[0] && post.images[0]?.url ? (
+      {post?.images && post?.images[0] && post.images[0]?.url ? (
+        <div className='Wrapper'>
           <img
             className="Card"
             src={'/' + post.images[0].url}
@@ -14,7 +15,9 @@ export const Card = ({ post }) => (
               objectFit: 'cover',
             }}
           />
-        ) : (
+          </div>
+      ) : (
+          <div className='Wrapper'>
           <img
             className="Card"
             src={photoNotFound}
@@ -23,8 +26,11 @@ export const Card = ({ post }) => (
               height: '250px',
               objectFit: 'cover',
             }}
-          />
-        )}
+            />
+          </div>
+          )
+        
+        }
       </Link>
     </>
   )

src/components/Routing.js

@@ -14,9 +14,8 @@ const Routing = ({ token }) => {
         <Switch>
           <Route path="/profile/:_id" component={CPageAboutUser} />
           <Route path="/explore" component={CExplorePosts} />
-          <Route path="/edit/post/:_id" component={CPostEditor} />
           <Route path="/edit/post/new" component={CPostCreator} />
-
+          <Route path="/edit/post/:_id" component={CPostEditor} />
           <Route path="/post/:_id" component={CPost} />
           <Route path="/feed" component={CPostForFeed} />
           <Redirect from="/*" to="/feed" />

src/components/Search_Users.js

@@ -41,7 +41,7 @@ const SearchUser = ({ my_Id, onSearch, searchUser, onPageData }) => {
         }
       >
         <Search
-          style={{ width: '25%' }}
+          // style={{ width: '25%' }}
           placeholder="Enter search user"
           allowClear
           prefix={<UserOutlined />}

src/components/Sortable.js

@@ -1,5 +1,5 @@
 import { sortableContainer, SortableElement, sortableElement, SortableHandle } from 'react-sortable-hoc'
-import { Button,Image } from 'antd'
+import { Button,Image,Row,Col } from 'antd'
 
 export const SortableItem = SortableElement(({ url, onRemoveImage, _id }) => {
     return (
@@ -7,12 +7,13 @@ export const SortableItem = SortableElement(({ url, onRemoveImage, _id }) => {
       <img
         style={{
           // margin: '20px',
-          maxWidth: '300px',
-            minWidth: '100px',
+         
+          
             objectFit: 'cover',
           boxShadow: '0 5px 10px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)',
-          maxHeight: '300px',
-          minHeight:'100px'
+          height: '100px',
+            width: '100px',
+          marginBottom:'5px'
         }}
         src={'/' + url}
       />
@@ -21,14 +22,15 @@ export const SortableItem = SortableElement(({ url, onRemoveImage, _id }) => {
       danger
       size="small"
           style={{
-            float: 'right',
-          margin:'5px'
+            // float: 'right',
+            margin: '5px'
           }}
       onClick={() => onRemoveImage(_id)}
     >
       {' '}
       x{' '}
-        </Button>
+          </Button>
+          
       </>
     )
   })
@@ -36,7 +38,16 @@ export const SortableItem = SortableElement(({ url, onRemoveImage, _id }) => {
   
     return (
       <>
-            <ul style={{ display: 'flex', flexDirection: 'row', margin: '5px' }}>{children}</ul>
+        {/* <Row> */}
+        {/* <Col span={2}> */}
+        <ul
+          style={{
+          // maxWidth:'100px',
+              margin: '5px'
+          }}
+          >{children}</ul>
+          {/* </Col> */}
+        {/* </Row> */}
       </>
     )
   })

src/components/Subscribe.js

@@ -2,27 +2,30 @@ import {
     actionFullUnSubscribe,
     actionFullSubscribe,
 } from '../actions'
+import {actionChangeSubscribeSaga} from '../redux/saga'
 import { Button} from 'antd'
 import { connect } from 'react-redux'
   
 const Subscribe = ({
-    my_Id,
+    myId,
     deleteSubscribe,
     aboutMeFollowing = [],
-    addSubscribe,
+    changeSubscribe,
     followId,
   }) => {
     const checkFollowId = aboutMeFollowing?.find(
       (follower) => follower?._id === followId,
-    )?._id
+  )?._id
+  console.log('check following in subscribe component', checkFollowId)
     return (
       <>
-        <div style={{ display: 'flex' }}>
-          {checkFollowId ? (
+        <div style={{ display: 'flex' }} onClick={()=>changeSubscribe(followId,checkFollowId)}>
+          {checkFollowId ?
+          
+            (
             <Button
               size="large" type="primary"
                danger
-              onClick={() => deleteSubscribe(my_Id, followId)}
             >
               Unsubscribe
             </Button>
@@ -31,7 +34,6 @@ const Subscribe = ({
               size="large"
                 type="primary"
                 primary
-              onClick={() => addSubscribe(my_Id, followId)}
             >
               Subscribe
             </Button>
@@ -41,12 +43,11 @@ const Subscribe = ({
     )
 }
 export const CSubscribe = connect((state) => ({
-    my_Id: state.auth?.payload?.sub?.id,
+    myId: state.auth?.payload?.sub?.id,
     aboutMeFollowing: state.myData?.aboutMe?.following,
     followId: state.userData?.aboutUser?._id,
 }),
     {
-        addSubscribe: actionFullSubscribe,
-        deleteSubscribe: actionFullUnSubscribe,
-}
+      changeSubscribe:actionChangeSubscribeSaga
+    }
 )(Subscribe)

src/pages/createAndEditPost/index.js

@@ -21,6 +21,10 @@ import { history } from '../../helpers'
 import { Input } from '../../components/Input'
 import {actionCreateEditPost} from '../../redux/saga'
 
+const checkRoute = ({ match }) => {
+  console.log('match route', match)
+}
+
 const PostEditor = ({
   match: {
     params: { _id },
@@ -28,12 +32,12 @@ const PostEditor = ({
   myId,
   onSave,
   onFileDrop,
-  post={},
+  post,
   fileStatus,
   clearPostOne,
   clearPromise,
+  newPost
 }) => {
-  console.log('post in start component', post)
   post = {
     _id: post?._id || '',
     title: post?.title || '',
@@ -43,23 +47,6 @@ const PostEditor = ({
   console.log('post after', post)
   console.log('post _id', _id)
   const [state, setState] = useState(post)
-  useEffect(() => {
-    if (_id === 'new' && Object.keys(post)) {
-      clearPostOne()
-      // clearPromise("onePost")
-      post = {
-        _id: post?._id || '',
-    title: post?.title || '',
-    text: post?.text || '',
-    images: post?.images || [],
-      }
-      console.log('попало в иф айди нью ', _id)
-     return setState(post)
- 
-      //console.log('post after clear ', post)
-    }
-  }, [_id])
-
   console.log('state after change', state)
   console.log('post', post)
   useEffect(() => {
@@ -102,15 +89,6 @@ const PostEditor = ({
     onSave(state) &&
     message.success(`Post published success!`) &&
     history.push(`/profile/${myId}`)
-  // useEffect(() => {
-  //   return () => {
-  //     clearPromise('uploadFiles')
-  //     clearPromise('postUpsert')
-  //     clearPromise('post')
-  //     clearPostOne()
-  //     clearPromise('onePost')
-  //   }
-  // }, [])
   const checkLength = () => {
     if (state?.images?.length > 8) {
       console.log('state?.images?.length', state?.images?.length)
@@ -124,15 +102,15 @@ const PostEditor = ({
 
   return (
     <section className="Post">
-      <Row>
-        <Col span={12} offset={6}>
+      {/* <Row> */}
+        {/* <Col span={12} offset={6}> */}
           <Dropzone onLoad={onFileDrop} />
-          <Col offset={1}>
-         
+          {/* <Col offset={1}> */}
+      <div style={{}}>
               <SortableContainer
                 onSortEnd={onSortEnd}
-                style={{ with: '300px' }} >
-                {state?.images?.length < 8 &&
+                >
+                {state?.images?.length <= 8 &&
                   (state?.images || []).map(({ _id, url }, index) => (
                     <SortableItem
                       key={`item-${_id}`}
@@ -143,11 +121,11 @@ const PostEditor = ({
                     />
                   ))}
               </SortableContainer>
-           
+           </div>
             {checkLength()}
-          </Col>
-        </Col>
-      </Row>
+          {/* </Col> */}
+        {/* </Col> */}
+      {/* </Row> */}
 
       <h1 className="Title"> Title </h1>
       <Input
@@ -204,6 +182,7 @@ export const CPostCreator = connect(
     fileStatus: state.promise?.uploadFiles,
     // post: state?.post?.onePost,
     myId: state?.myData?.aboutMe?._id,
+    newPost:true
   }),
   {
     onSave: actionCreateEditPost,

src/pages/header/index.js

@@ -3,16 +3,37 @@ import { CLogout } from '../../components/LoginRegisterLogout'
 import { CSearch } from '../../components/Search_Users'
 import { Feed, AddPost, Explore, CUser } from '../../components/HeaderButtons'
 import { connect } from 'react-redux'
+import { Row, Col } from 'antd'
 
 export const Header = () => {
     return (
       <section className="Header">
         <CLogout className="button" />
-        <CSearch />
-        <Feed />
-        <AddPost />
-        <Explore />
-        <CUser />
+
+       <Row justify="end" align="middle">
+    {/* <Col span={18} push={6}> */}
+          <Col>
+            <CSearch />
+          </Col>
+          
+          {/* <Col span={6} pull={18}> */}
+          <Col>
+          
+            <Feed />
+          </Col>
+          <Col>
+          
+            <AddPost />
+          </Col>
+          <Col>
+          
+            <Explore />
+          </Col>
+          <Col>
+          
+            <CUser />
+            </Col>
+  </Row>
       </section>
     )
   }

src/pages/profilePage/index.js

@@ -9,11 +9,13 @@ import { actionFullProfilePageUser } from '../../redux/saga'
 import { Row, Col } from 'antd'
 import { CSubscribe } from '../../components/Subscribe'
 import { CEditSetting } from '../setting'
+import { Link,useParams} from 'react-router-dom'
 
 export const PageAboutUser = ({
-  match: {
-    params: { _id },
-  },
+  // match: {
+  //   params: { _id },
+  // },
+  
   my_Id,
   aboutUser: { login, nick, createdAt, avatar, followers, following } = {},
   allPosts,
@@ -21,6 +23,7 @@ export const PageAboutUser = ({
   onAboutUser,
   countAllPostsUser,
 }) => {
+  const { _id } = useParams();
   useEffect(() => {
     onAboutUser(_id)
     // console.log('USER DATA ', login, _id)

src/redux/index.js

@@ -18,7 +18,8 @@ onePostWatcher,
   addCommentFeedWatcher,
   addCommentOnePostWatcher,
   changeLikePostWatcher,
-  editPostWatcher
+  editPostWatcher,
+  changeSubscribeWatcher
 } from './saga'
 import createSagaMiddleware from 'redux-saga' //функция по созданию middleware
 import {
@@ -54,7 +55,8 @@ function* rootSaga() {
     onePostWatcher(),
     addCommentOnePostWatcher(),
     changeLikePostWatcher(),
-    editPostWatcher()
+    editPostWatcher(),
+    changeSubscribeWatcher()
     // addCommentFeedWatcher()
   ])
 }

src/redux/reducers/myData/myProfileReducer.js

@@ -12,6 +12,13 @@ export const myProfileReducer = (state = {}, { type, aboutMe, newResult }) => {
           aboutMe: {},
         }
       },
+      'UPDATE_FOLLOWING': () => {
+        return {
+          ...state,
+          aboutMe: ({ ...state.aboutMe, following: [...newResult] })
+
+        }
+      },
     }
     if (type in types) {
       return types[type]()
@@ -29,4 +36,7 @@ export const myProfileReducer = (state = {}, { type, aboutMe, newResult }) => {
   export const actionRemoveDataAboutMe = () => 
   ({ type: 'REMOVE-DATA' })
   
-  
+  export const actionChangeFollowingType = (newResult) => ({
+    type:"UPDATE_FOLLOWING", newResult
+    
+  })

src/redux/reducers/userData/userProfileReducer.js

@@ -1,14 +1,21 @@
 
 export const userProfileReducer = (
     state = {},
-    { type, aboutUser, allPosts, newPosts, countPosts },
+    { type, aboutUser, allPosts, newPosts,newResult, countPosts },
   ) => {
     const types = {
       'PROFILE-PAGE-USER': () => {
         return {
           ...state,
           aboutUser,
+          // allPosts,
+        }
+      },
+      'USER-POSTS': () => {
+        return {
+          ...state,
           allPosts,
+          // allPosts,
         }
       },
       'CLEAR-DATA': () => {
@@ -29,8 +36,17 @@ export const userProfileReducer = (
           ...state,
           countPosts
         }
+      },
+      'UPDATE_FOLLOWERS': () => {
+        return {
+          ...state,
+          aboutUser: ({
+            ...state.aboutUser,
+            followers: [...newResult]
+          })
+        }
       }
-    }
+}
   
     if (type in types) {
       return types[type]()
@@ -42,21 +58,25 @@ export const userProfileReducer = (
     type: 'CHANGE-AVATAR-USER',
     aboutUser,
 })
-export const actionProfilePageDataTypeUser = (aboutUser, allPosts) => ({
+export const actionProfilePageDataTypeUser = (aboutUser) => ({
   type: 'PROFILE-PAGE-USER',
-  aboutUser,
-  allPosts,
-})
+  aboutUser})
 export const actionCountPostsType = (countPosts) =>
   ({ type: "COUNT_ALL_POSTS", countPosts })
   
 export const actionProfilePageData = (id) => 
 ({ type: 'DATA_PROFILE', id })
 
+export const actionUserAllPostsType = (allPosts) => 
+({ type: 'USER-POSTS', allPosts })
+
 
 export const actionClearDataUserType = () =>
   ({ type: 'CLEAR-DATA' })
   
+  export const actionChangeFollowersType = (newResult) => ({
+    type:"UPDATE_FOLLOWERS", newResult
+  })
 
 
 

src/redux/saga/index.js

@@ -18,12 +18,21 @@ import {
   actionGetCommentsOnePost,
   actionFindLikes,
   actionPostUpsert,
-  actionClearPromiseForName
+  actionClearPromiseForName,
+  actionChangeSubscribe,
+  actionGetFollowing,
+  actionGetFollowers,
   // actionOnePost
-  } from '../../actions'
+} from '../../actions'
+  
 import { history } from '../../helpers'
-  import{actionClearDataUserType} from '../reducers/userData/userProfileReducer'
-import { actionProfilePageDataType } from '../reducers/myData/myProfileReducer'
+import {
+  actionClearDataUserType,
+  actionChangeFollowersType,
+  actionUserAllPostsType
+
+} from '../reducers/userData/userProfileReducer'
+import { actionProfilePageDataType,actionChangeFollowingType } from '../reducers/myData/myProfileReducer'
 import { actionFullAllGetPosts } from '../../actions'
 import {
   actionAddLikePostInTape,
@@ -106,8 +115,11 @@ function* fullPageAboutUserWorker({ _id }) {
   const allPosts = yield call(promiseWorker, actionAllPostsUser(_id))
   const countPosts = yield call(promiseWorker, actionPostsCount(_id))
 
-  if (aboutUser && allPosts) {
-    yield put(actionProfilePageDataTypeUser(aboutUser, allPosts))
+  if (aboutUser)
+  yield put(actionProfilePageDataTypeUser(aboutUser))
+  
+  if(allPosts) {
+    yield put(actionUserAllPostsType(allPosts))
   }
   if (countPosts)
   yield put(actionCountPostsType(countPosts))
@@ -271,17 +283,12 @@ function* changeLikePostWorker({ likeId, postId }) {
   yield call(promiseWorker, changeOneLike())
   const { likes } = yield call(promiseWorker, actionFindLikes(postId))
   console.log('likes in worker', likes)
-
   
   if (likes) {
   
     yield call(promiseWorker, actionOnePost(postId))
     yield put(actionChangeLikeType(likes))
   }
-  // const { likes } = yield call(promiseWorker, actionFindLikes(postId))
-  // console.log('likes', likes)
-  // if (likes)
-  // yield call(promiseWorker, actionOnePost(postId))
 }
 
 
@@ -298,7 +305,6 @@ function* editPostWorker({state }) {
   console.log('in worker post id', state?._id)
   const postUpsert = yield call(promiseWorker, actionPostUpsert(state,state?._id))
   console.log('post Upsert', postUpsert)
-
 //   postUpsert
 //   const upsertPost = yield call(promiseWorker, actionPostUpsert(post))
 // console.log('upsert POST', upsertPost)
@@ -306,18 +312,74 @@ function* editPostWorker({state }) {
   if (postUpsert) {
     yield put(actionClearPromiseForName('postUpsert'))
     yield put(actionClearPromiseForName('uploadFiles'))
-    yield put(actionClearPromiseForName('onePost'))
   }
   
 }
 export function* editPostWatcher() {
   yield takeEvery("CREATE_EDIT_POST", editPostWorker)
-  
 }
 export const actionCreateEditPost= (state) =>
 ({
     type:"CREATE_EDIT_POST", state
 })
+
+//change subscribe 
+function* changeSubscribeWorker({ followId, checkFollowId }) {
+  const { myData: { aboutMe: { _id, following } } } = yield select()
+  // const checkFollowId = following?.find(
+  //   (follower) => follower?._id === followId,
+  // )?._id
+  console.log('my following', following)
+
+  console.log('check follow id', checkFollowId)
+  console.log('my id', _id)
+ 
+  const oldFollowing = checkFollowId ?
+    {
+      
+      _id,
+      following: [...following.filter((item) => item._id !== followId).map(({ _id }) => ({ _id }))]
+    } 
+  : {
+      
+    _id,
+    following:[...following.map(({ _id }) => ({ _id })), {_id: followId}]
+
+    }
+    
+  console.log('old following', oldFollowing)
+  console.log('еще раз май фолловинг ', following)
+  
+  const change = yield call(promiseWorker, actionChangeSubscribe(oldFollowing))
+console.log('change', change)
+
+  const updateUserFollowers = yield call(promiseWorker, actionGetFollowers(followId))
+  console.log('update user followers', updateUserFollowers)
+
+  const updateMyFollowing = yield call(promiseWorker, actionGetFollowing(_id))
+  console.log('update my following', updateMyFollowing)
+
+  if (updateMyFollowing)
+   yield put(actionChangeFollowingType(updateMyFollowing?.following))
+ if (updateUserFollowers)
+  {
+   
+    yield put(actionChangeFollowersType(updateUserFollowers?.followers))
+    
+    }
+}
+
+
+export function* changeSubscribeWatcher() {
+  yield takeEvery("CHANGE_SUBSCRIBE", changeSubscribeWorker)
+}
+
+export const actionChangeSubscribeSaga= (followId,checkFollowId) =>
+({
+    type:"CHANGE_SUBSCRIBE", followId,checkFollowId
+})
+
+
 // export const actionDeleteFullLikeFeed = (likeId, postId) => async (
 //     dispatch,
 //     getState,