Cleaned up the comments and straightened out the code

src/App.js

@@ -1,6 +1,6 @@
 import './App.scss'
-import { Provider, connect } from 'react-redux'
-import { Router, Route, Redirect, Switch } from 'react-router-dom'
+import { Provider } from 'react-redux'
+import { Router} from 'react-router-dom'
 import React from 'react'
 import { store } from './redux/store'
 import 'antd/dist/antd.css'
@@ -12,9 +12,9 @@ import history from './helpers/history'
 store.subscribe(() => console.log(store.getState()))
 
 function App() {
-  if (store.getState().auth?.token) 
+  if (store.getState().auth?.token)
     store.dispatch(actionFullProfilePageTypeSaga())
-    
+
   return (
     <Router history={history}>
       <Provider store={store}>

src/App.scss

@@ -17,9 +17,7 @@ body {
   padding: 10px;
   border-width: 2px;
   border-radius: 2px;
-  // background-color: #74d2e7;
   color: #1d5b78;
-  // outline: none;
   transition: border 0.24s ease-in-out;
   font-size: medium;
   font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
@@ -38,14 +36,13 @@ body {
 
   opacity: 0.7;
 }
-.Link{
+.Link {
   color: white;
-   margin-left: 5px;
-
+  margin-left: 5px;
 }
-.Link:hover{
+.Link:hover {
   text-decoration: underline;
-  color:rgb(241, 69, 155);
+  color: rgb(241, 69, 155);
 }
 
 .Links:active {
@@ -57,12 +54,11 @@ body {
   padding: 10px;
   z-index: 4;
   width: 100%;
-  background-color:  rgb(206, 227, 255);
+  background-color: rgb(206, 227, 255);
   top: 0;
   transition: 0.3s;
   box-shadow: 0 5px 10px rgba(73, 80, 83, 0.25),
-  0 10px 5px rgba(191, 194, 196, 0.22);
-
+    0 10px 5px rgba(191, 194, 196, 0.22);
 }
 
 .Recomendations {
@@ -122,7 +118,7 @@ main {
 .Input {
   display: flex;
   padding: 5px;
-  margin:10px;
+  margin: 10px;
   width: 80%;
   border-radius: 5px;
   font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
@@ -133,6 +129,9 @@ main {
   background-color: rgb(84, 132, 222);
   margin-top: 20px;
 }
+.ButtonComment:hover {
+  cursor: pointer;
+}
 .AboutMe {
   margin-top: 100px;
   display: flex;
@@ -144,13 +143,49 @@ main {
   flex-direction: column;
 }
 .Card {
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25), 
-  0 10px 10px rgba(0, 0, 0, 0.22);
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+  width: 250px;
+  height: 250px;
+  object-fit: cover;
+  position: relative;
+}
+.EditAvatar {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}
+.Preview {
+  object-fit: cover;
+  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+  height: 100px;
+  width: 100px;
+  margin-bottom: 5px;
+}
+.Explore {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 20px;
+  margin: 20px;
+  margin-top: 50px;
+}
+.Preloader {
+  display: block;
+  margin: 0 auto;
+  margin-bottom: 200px;
+  padding: 10px;
+}
+.Gallery {
+  position: fixed;
+  right: 0;
+  z-index: 2;
+  top: 0;
+  width: 50px;
+  height: 50px;
+  margin: 10px;
 }
-
 .Wrapper {
   margin: 40px;
- 
+
   transition: filter 0.5s;
 }
 .Wrapper:hover {
@@ -164,7 +199,7 @@ main {
   color: red;
 }
 .Like:active {
-  transform: scale(1.1); 
+  transform: scale(1.1);
 }
 .UnLike {
   cursor: pointer;
@@ -194,7 +229,6 @@ main {
   margin-bottom: 20px;
 }
 .PostFeed {
-
   border-width: 20;
   border-color: #ffffff;
   background: #edf8f89e;
@@ -202,8 +236,7 @@ main {
   border-style: solid;
   margin-bottom: 40px;
   transition: 0.3s;
-  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25),
-   0 10px 10px rgba(0, 0, 0, 0.22);
+  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
 }
 .InputForm {
   position: fixed;
@@ -212,27 +245,26 @@ main {
   width: 100%;
   height: 100%;
   float: right;
-  background: rgb(58,100,180);
-  background: linear-gradient(90deg,
-   rgba(58,100,180,1) 0%, rgba(92,168,221,1) 51%, 
-   rgba(29,253,182,1) 100%);
+  background: rgb(58, 100, 180);
+  background: linear-gradient(
+    90deg,
+    rgba(58, 100, 180, 1) 0%,
+    rgba(92, 168, 221, 1) 51%,
+    rgba(29, 253, 182, 1) 100%
+  );
   transition: 0.3s;
-  right:0;
-  
+  right: 0;
 }
-.LoginPage{
-  margin:150px;
-
+.LoginPage {
+  margin: 150px;
 }
-.LoginForm{
-  margin:100px;
+.LoginForm {
+  margin: 100px;
   padding: 20px 0px;
-  background:  rgba(58,100,180,1);
+  background: rgba(58, 100, 180, 1);
   border-radius: 15px;
   text-align: center;
   box-shadow: 0 10px 10px rgba(0, 0, 0, 0.22);
-
-  
 }
 .NextArrow {
   font-size: 50px;
@@ -244,15 +276,27 @@ main {
   padding-left: 20px;
   text-shadow: black 1px 0 10px;
   transition: opacity 0.3s;
-
 }
-.NextArrow:hover{
+.NextArrow:hover {
   opacity: 0.6;
 }
-.NextArrow:active{
-  transform: scale(1.1); 
-  
-
+.NextArrow:active {
+  transform: scale(1.1);
+}
+.PreviousArrow {
+  color: #41607d;
+  font-size: 50px;
+  position: absolute;
+  margin: auto;
+  right: 100%;
+  top: 50%;
+  padding-right: 20px;
+}
+.PreviousArrow:hover {
+  opacity: 0.6;
+}
+.PreviousArrow:active {
+  transform: scale(1.1);
 }
 .PostImage {
   display: flex;
@@ -268,7 +312,19 @@ main {
   box-shadow: 0 10px 10px rgba(0, 0, 0, 0.22);
   background: rgb(142, 199, 239);
   border-radius: 10px;
-  
+}
+.LikeStyle {
+  cursor: pointer;
+  padding: 3px;
+}
+.SmileBtn {
+  font-size: xx-large;
+  margin-right: 15px;
+}
+.Filled {
+  font-size: xx-large;
+  margin-right: 15px;
+  color: #108ee9;
 }
 .Comments {
   position: fixed;
@@ -314,17 +370,15 @@ main {
 .PostsFeed {
   margin: 20px;
   padding: 40px;
-  // overflow-y: scroll;
 }
 .SpoilerButton {
   right: 30px;
   margin: 20px;
 }
 
-.NumberPosts{
-float: right;
-margin-bottom: 10px;
-
+.NumberPosts {
+  float: right;
+  margin-bottom: 10px;
 }
 .Avatar {
   margin-left: 20px;
@@ -332,9 +386,8 @@ margin-bottom: 10px;
   border: 3px solid #fffff7;
   height: 55px;
   transition: 0.3s;
-  // box-shadow: 0 5px 10px rgba(77, 141, 168, 0.25),
-  //   0 10px 10px rgba(22, 93, 129, 0.22);
 }
+
 .Avatar:hover {
   box-shadow: 0 5px 10px rgba(21, 46, 57, 0.25),
     0 10px 10px rgba(12, 43, 58, 0.22);
@@ -347,9 +400,9 @@ margin-bottom: 10px;
   padding: 15px 0;
   overflow: auto;
 }
-.InputOnePost{
-display: flex;
-width: 40%;
-margin-left: 10px;
-margin-right: 10px;
-}
+.InputOnePost {
+  display: flex;
+  width: 40%;
+  margin-left: 10px;
+  margin-right: 10px;
+}

src/actions/query/aboutUserQuery.js

@@ -1,11 +1,11 @@
-import { gql } from "../../helpers/getGQL";
-import { actionPromise } from "../types/promiseTypes";
+import { gql } from '../../helpers/getGQL'
+import { actionPromise } from '../types/promiseTypes'
 
 export const actionAboutUser = (_id) =>
-actionPromise(
-  'aboutUser',
-  gql(
-    `query AboutMe($userId:String){
+  actionPromise(
+    'aboutUser',
+    gql(
+      `query AboutMe($userId:String){
     UserFindOne(query:$userId)
     {
       _id createdAt login nick avatar{_id url} 
@@ -13,12 +13,11 @@ actionPromise(
       following{_id login nick avatar{_id url}}
     }
   }`,
-    {
-      userId: JSON.stringify([{ _id }]),
-    },
-  ),
-)
-
+      {
+        userId: JSON.stringify([{ _id }]),
+      },
+    ),
+  )
 
 export const actionAllPostsUser = (userId, skip) =>
   actionPromise(
@@ -43,7 +42,7 @@ PostFind(query:$userId){
     ),
   )
 
-  export const actionPostsCount = (_id) =>
+export const actionPostsCount = (_id) =>
   actionPromise(
     'countPosts',
     gql(
@@ -53,8 +52,7 @@ PostFind(query:$userId){
                 }`,
 
       {
-        _id:
-          JSON.stringify([{ ___owner: { $in: [_id] } }])
+        _id: JSON.stringify([{ ___owner: { $in: [_id] } }]),
       },
     ),
   )

src/actions/query/exploreQuery.js

@@ -1,11 +1,11 @@
-import { gql } from "../../helpers/getGQL";
-import { actionPromise } from "../types/promiseTypes";
+import { gql } from '../../helpers/getGQL'
+import { actionPromise } from '../types/promiseTypes'
 
 export const actionExplorePosts = (skip) =>
-actionPromise(
-  'explorePosts',
-  gql(
-    ` query PostsFeed($_id:String){
+  actionPromise(
+    'explorePosts',
+    gql(
+      ` query PostsFeed($_id:String){
       PostFind(query:$_id){
       owner{_id login avatar{url}}
       images{_id url} title text
@@ -26,29 +26,29 @@ actionPromise(
   }
 }
           }`,
-    {
-      _id: JSON.stringify([
-        {},
-        {
-          sort: [{ _id: -1 }],
-          skip: [skip || 0],
-          limit: [12],
-        },
-      ]),
-    },
-  ),
-)
+      {
+        _id: JSON.stringify([
+          {},
+          {
+            sort: [{ _id: -1 }],
+            skip: [skip || 0],
+            limit: [12],
+          },
+        ]),
+      },
+    ),
+  )
 export const actionExplorePostsCount = () =>
-actionPromise(
-  'explorePostsCount',
-  gql(
-    ` query CountAllPosts($_id:String!){
+  actionPromise(
+    'explorePostsCount',
+    gql(
+      ` query CountAllPosts($_id:String!){
               PostCount(query:$_id)
 
               }`,
 
-    {
-      _id: JSON.stringify([{}]),
-    },
-  ),
-)
+      {
+        _id: JSON.stringify([{}]),
+      },
+    ),
+  )

src/actions/query/postFeedQuery.js

@@ -1,11 +1,11 @@
-import { gql } from "../../helpers/getGQL";
-import { actionPromise } from "../types/promiseTypes";
+import { gql } from '../../helpers/getGQL'
+import { actionPromise } from '../types/promiseTypes'
 
 export const actionPostsFeed = (myFollowing, skip) =>
-actionPromise(
-  'postsFeed',
-  gql(
-    `query PostsFeed($ownerId:String){
+  actionPromise(
+    'postsFeed',
+    gql(
+      `query PostsFeed($ownerId:String){
         PostFind(query:$ownerId){
         owner{_id login avatar{url}}
         images{_id url} title text
@@ -25,40 +25,40 @@ actionPromise(
     }
 }
 }`,
-    {
-      ownerId: JSON.stringify([
-        {
-          ___owner: {
-            $in: myFollowing,
+      {
+        ownerId: JSON.stringify([
+          {
+            ___owner: {
+              $in: myFollowing,
+            },
+          },
+          {
+            sort: [{ _id: -1 }],
+            skip: [skip || 0],
+            limit: [10],
           },
-        },
-        {
-          sort: [{ _id: -1 }],
-          skip: [skip || 0],
-          limit: [10],
-        },
-      ]),
-    },
-  ),
-    )
+        ]),
+      },
+    ),
+  )
 
-    export const actionPostsFeedCount = (myFollowing) =>
-    actionPromise(
-      'postsFeedCount',
-      gql(
-        ` query CountAllPostsFeed($_id:String!){
+export const actionPostsFeedCount = (myFollowing) =>
+  actionPromise(
+    'postsFeedCount',
+    gql(
+      ` query CountAllPostsFeed($_id:String!){
                   PostCount(query:$_id)
   
                   }`,
-  
-        {
-          _id: JSON.stringify([
-            {
-              ___owner: {
-                $in: myFollowing,
-              },
+
+      {
+        _id: JSON.stringify([
+          {
+            ___owner: {
+              $in: myFollowing,
             },
-          ]),
-        },
-      ),
-    )
+          },
+        ]),
+      },
+    ),
+  )

src/actions/query/postQuery.js

@@ -1,11 +1,11 @@
-import { gql } from "../../helpers/getGQL";
-import { actionPromise } from "../types/promiseTypes";
+import { gql } from '../../helpers/getGQL'
+import { actionPromise } from '../types/promiseTypes'
 
 export const actionOnePost = (_id) =>
-actionPromise(
-  'onePost',
-  gql(
-    `query OneFind($post:String){
+  actionPromise(
+    'onePost',
+    gql(
+      `query OneFind($post:String){
       PostFindOne(query:$post){
         _id createdAt title text 
         images{_id url originalFileName}
@@ -32,28 +32,27 @@ actionPromise(
         }
     }
     `,
-    {
-      post: JSON.stringify([{ _id }]),
-    },
-  ),
-    )
-    export const actionPostUpsert = (post, postId) => 
-    actionPromise(
-      'postUpsert',
-      gql(
-        `
+      {
+        post: JSON.stringify([{ _id }]),
+      },
+    ),
+  )
+export const actionPostUpsert = (post, postId) =>
+  actionPromise(
+    'postUpsert',
+    gql(
+      `
 mutation PostUpsert($post:PostInput){
   PostUpsert(post:$post){
     _id title text images{_id url}
   }
 }`,
-        {
-          post: {
-            ...post,
-            _id:postId,
-            images: post.images.map(({ _id }) => ({ _id })),
-          },
+      {
+        post: {
+          ...post,
+          _id: postId,
+          images: post.images.map(({ _id }) => ({ _id })),
         },
-      ),
-    )
-
+      },
+    ),
+  )

src/actions/query/registerQuery.js

@@ -1,5 +1,5 @@
-import { gql } from '../../helpers/getGQL';
-import { actionPromise } from "../types/promiseTypes";
+import { gql } from '../../helpers/getGQL'
+import { actionPromise } from '../types/promiseTypes'
 
 const actionRegister = (login, password) =>
   actionPromise(
@@ -12,5 +12,5 @@ const actionRegister = (login, password) =>
               }`,
       { login, password },
     ),
-    )
-  export default actionRegister
+  )
+export default actionRegister

src/actions/query/searchUserQuery.js

@@ -1,28 +1,25 @@
-import { gql } from "../../helpers/getGQL";
-import { actionPromise } from "../types/promiseTypes";
+import { gql } from '../../helpers/getGQL'
+import { actionPromise } from '../types/promiseTypes'
 
 export const actionSearchUser = (userName) =>
-actionPromise(
-  'searchUser',
-  gql(
-    `
+  actionPromise(
+    'searchUser',
+    gql(
+      `
 query gf($query: String){
     UserFind(query: $query){
         _id, login avatar{url}
     }
 }`,
-    {
-      query: JSON.stringify([
-        {
-          $or: [{ login: `/${userName}/` }],
-        },
-        {
-          sort: [{ login: 1 }],
-        }, 
-      ]),
-    },
-  ),
-)
-
-
-
+      {
+        query: JSON.stringify([
+          {
+            $or: [{ login: `/${userName}/` }],
+          },
+          {
+            sort: [{ login: 1 }],
+          },
+        ]),
+      },
+    ),
+  )

src/actions/query/subscribeQuery.js

@@ -1,7 +1,7 @@
-import { gql } from "../../helpers/getGQL";
-import { actionPromise } from "../types/promiseTypes";
+import { gql } from '../../helpers/getGQL'
+import { actionPromise } from '../types/promiseTypes'
 
-  export const actionChangeSubscribe = (oldFollowing) =>
+export const actionChangeSubscribe = (oldFollowing) =>
   actionPromise(
     'changeSubscribe',
     gql(
@@ -12,12 +12,10 @@ import { actionPromise } from "../types/promiseTypes";
       }
       `,
       {
-        user: 
-         oldFollowing 
-        ,
+        user: oldFollowing,
       },
     ),
-    )
+  )
 export const actionGetFollowing = (_id) =>
   actionPromise(
     'getFollowing',
@@ -34,8 +32,7 @@ export const actionGetFollowing = (_id) =>
     ),
   )
 
-
-  export const actionGetFollowers = (userId) =>
+export const actionGetFollowers = (userId) =>
   actionPromise(
     'getFollowers',
     gql(
@@ -47,7 +44,7 @@ export const actionGetFollowing = (_id) =>
       }
     }`,
       {
-        userId: JSON.stringify([{ _id:userId }]),
+        userId: JSON.stringify([{ _id: userId }]),
       },
     ),
   )

src/actions/query/uploadFilesQuery.js

@@ -1,4 +1,3 @@
-
 import { actionPromise } from '../types/promiseTypes'
 
 export const uploadFile = (file) => {

src/actions/typeSaga/commentTypesSaga.js

@@ -1,9 +1,11 @@
-
 export const actionAddCommentFeedTypeSaga = (postId, text) => ({
-    type:"FEED_POST_COMMENT", postId, text
-    
-  })
-  
-  export const actionAddFullCommentFeed = (postId, newResult) => ({
-    type:"ADD_COMMENT_FEED", postId, newResult
-  })
+  type: 'FEED_POST_COMMENT',
+  postId,
+  text,
+})
+
+export const actionAddFullCommentFeed = (postId, newResult) => ({
+  type: 'ADD_COMMENT_FEED',
+  postId,
+  newResult,
+})

src/actions/typeSaga/exploreTypesSaga.js

@@ -1,5 +1,3 @@
 export const actionFullExplorePostsTypeSaga = () => ({
-    type:"EXPLORE_POSTS"
-  })
-  
-  
+  type: 'EXPLORE_POSTS',
+})

src/actions/typeSaga/feedTypesSaga.js

@@ -1,3 +1,3 @@
 export const actionFullAllGetPostsSaga = () => ({
-    type:"FEED_POSTS"
-  })
+  type: 'FEED_POSTS',
+})

src/actions/typeSaga/likeTypesSaga.js

@@ -1,8 +1,10 @@
-export const actionChangeLikeTypeSaga = (likeId, postId) =>
-({
-    type:"CHANGE_LIKE_POST", likeId,postId
+export const actionChangeLikeTypeSaga = (likeId, postId) => ({
+  type: 'CHANGE_LIKE_POST',
+  likeId,
+  postId,
 })
-export const actionChangeFeedLikeTypeSaga = (likeId, postId) =>
-({
-    type:"CHANGE_LIKE_POST_FEED", likeId,postId
+export const actionChangeFeedLikeTypeSaga = (likeId, postId) => ({
+  type: 'CHANGE_LIKE_POST_FEED',
+  likeId,
+  postId,
 })

src/actions/typeSaga/logOutTypesSaga.js

@@ -1,3 +1,3 @@
 export const actionClearDataLogoutTypeSaga = () => ({
-    type:"CLEAR_ALL_DATA"
-  })
+  type: 'CLEAR_ALL_DATA',
+})

src/actions/typeSaga/myDataTypesSaga.js

@@ -1,11 +1,11 @@
-
 export const actionUserUpdateTypeSaga = (user) => ({
-    type:"USER_UPDATE", user
+  type: 'USER_UPDATE',
+  user,
 })
 export const actionSetAvatarTypeSaga = (file) => ({
-    type:"SET_AVATAR", file
-  })
-  export const actionFullProfilePageTypeSaga = () =>
-({
-    type:"FULLPROFILE_PAGE",
+  type: 'SET_AVATAR',
+  file,
+})
+export const actionFullProfilePageTypeSaga = () => ({
+  type: 'FULLPROFILE_PAGE',
 })

src/actions/typeSaga/postTypesSaga.js

@@ -1,20 +1,22 @@
 export const actionFullOnePostSaga = (_id) => ({
-    type:"ONE_POST", _id
-  })
+  type: 'ONE_POST',
+  _id,
+})
 export const actionAddFullCommentSaga = (postId, text) => ({
-    type:"ONE_POST_COMMENT", postId, text
-    
-  })
-export const actionAddSubCommentTypeSaga = ( commentId,
-  newResult) => ({
-  type:"POST_SUB_COMMENT",  commentId, newResult
-    
+  type: 'ONE_POST_COMMENT',
+  postId,
+  text,
+})
+export const actionAddSubCommentTypeSaga = (commentId, newResult) => ({
+  type: 'POST_SUB_COMMENT',
+  commentId,
+  newResult,
 })
 export const actionFindSubCommentTypeSaga = (commentId) => ({
-  type:"GET_SUB_COMMENT",commentId
-    
+  type: 'GET_SUB_COMMENT',
+  commentId,
 })
-export const actionCreateEditPostTypeSaga= (state) =>
-({
-    type:"CREATE_EDIT_POST", state
+export const actionCreateEditPostTypeSaga = (state) => ({
+  type: 'CREATE_EDIT_POST',
+  state,
 })

src/actions/typeSaga/registerTypesSaga.js

@@ -1,2 +1,5 @@
-export const actionRegisterTypeSaga = (login, password) => 
-({type: 'REGISTER', login, password})
+export const actionRegisterTypeSaga = (login, password) => ({
+  type: 'REGISTER',
+  login,
+  password,
+})

src/actions/typeSaga/subscribeTypesSaga.js

@@ -1,12 +1,5 @@
-
-export const actionChangeSubscribeSaga = (followId,checkFollowId) =>
-({
-    type:"CHANGE_SUBSCRIBE", followId,checkFollowId
+export const actionChangeSubscribeSaga = (followId, checkFollowId) => ({
+  type: 'CHANGE_SUBSCRIBE',
+  followId,
+  checkFollowId,
 })
-export const actionChangeFollowingType = (newResult) => ({
-    type:"UPDATE_FOLLOWING", newResult
-  })
-  
-  export const actionChangeFollowersType = (newResult) => ({
-    type:"UPDATE_FOLLOWERS", newResult
-  })

src/actions/typeSaga/userTypesSaga.js

@@ -1,6 +1,9 @@
-export const actionFullProfilePageUserTypeSaga = (_id) =>
-  ({ type: "USER_PAGE", _id })
-  
-  
-  export const actionPostsPortionTypeSaga = (_id) => 
-  ({ type: 'USER_POSTS_PORTION', _id})
+export const actionFullProfilePageUserTypeSaga = (_id) => ({
+  type: 'USER_PAGE',
+  _id,
+})
+
+export const actionPostsPortionTypeSaga = (_id) => ({
+  type: 'USER_POSTS_PORTION',
+  _id,
+})

src/actions/types/commentTypes.js

@@ -1,12 +1,28 @@
 export const actionAddCommentPostFeedType = (postId, newResult) => ({
-    type: 'ADD_COMMENT_POSTS',
-    postId,
-    newResult,
-  })
-  export const actionAddCommentType = (newResult) => ({
-    type:"ADD_COMMENT", newResult
+  type: 'ADD_COMMENT_POSTS',
+  postId,
+  newResult,
+})
+export const actionAddCommentType = (newResult) => ({
+  type: 'ADD_COMMENT',
+  newResult,
+})
+export const actionAddSubCommentType = (commentId, newResult) => ({
+  type: 'ANSWERS-COMMENT',
+  commentId,
+  newResult,
 })
-export const actionAddSubCommentType = (commentId,newResult) => ({
-    type:"ANSWERS-COMMENT",commentId, newResult
+
+export const addAnswers = (comments, commentId, newResult) =>
+  comments.map((comment) => {
+    if (comment._id === commentId) {
+      return { ...comment, answers: newResult }
+    } else if (comment?.answers?.length) {
+      return {
+        ...comment,
+        answers: addAnswers(comment.answers, commentId, newResult),
+      }
+    } else {
+      return { ...comment }
+    }
   })
-  

src/actions/types/exploreTypes.js

@@ -1,8 +1,14 @@
-export const actionClearExplorePostsType = () =>
-  ({ type: 'CLEAR_EXPLORE_POSTS' })
+export const actionClearExplorePostsType = () => ({
+  type: 'CLEAR_EXPLORE_POSTS',
+})
 
-export const actionExploreType = (newPosts,newPostsExploreCount) => 
-  ({ type: 'ADD-EXPLORE-POSTS', newPosts, newPostsExploreCount })
-  
-  export const actionExploreTypeCount = (explorePostsCount) => 
-  ({ type: 'EXPLORE-COUNT', explorePostsCount })
+export const actionExploreType = (newPosts, newPostsExploreCount) => ({
+  type: 'ADD-EXPLORE-POSTS',
+  newPosts,
+  newPostsExploreCount,
+})
+
+export const actionExploreTypeCount = (explorePostsCount) => ({
+  type: 'EXPLORE-COUNT',
+  explorePostsCount,
+})

src/actions/types/feedTypes.js

@@ -1,6 +1,5 @@
 export const actionClearFeedPostsType = () => ({ type: 'CLEAR_POSTS' })
 
-
 export const actionFeedType = (newPosts, newPostsFeedCount) => ({
   type: 'ADD-POSTS',
   newPosts,

src/actions/types/likeTypes.js

@@ -1,7 +1,8 @@
 export const actionChangeLikeType = (newResult) => ({
-    type:"CHANGE_LIKE", newResult
-  })
-  export const actionAddLikePostFeedType = (newResult) => ({
-    type: 'LIKE_POST_FEED',
-    newResult,
-  })
+  type: 'CHANGE_LIKE',
+  newResult,
+})
+export const actionAddLikePostFeedType = (newResult) => ({
+  type: 'LIKE_POST_FEED',
+  newResult,
+})

src/actions/types/myDataTypes.js

@@ -1,15 +1,11 @@
 export const actionProfilePageDataType = (aboutMe) => ({
-    type: 'PROFILE-PAGE',
-    aboutMe,
-  })
+  type: 'PROFILE-PAGE',
+  aboutMe,
+})
 
-export const actionClearAboutMeType = () => 
-({ type: 'REMOVE-DATA' })
+export const actionClearAboutMeType = () => ({ type: 'REMOVE-DATA' })
 
-export const actionChangeFollowingType = (newResult) => ({
-  type:"UPDATE_FOLLOWING", newResult
+export const actionUpdateAvatarType = (newResult) => ({
+  type: 'UPDATE_AVATAR',
+  newResult,
 })
-
-export const actionUpdateAvatarType= (newResult) => ({
-type:"UPDATE_AVATAR", newResult
-})

src/actions/types/postTypes.js

@@ -1,17 +1,16 @@
-
-export const actionOnePostType = (onePost) =>
-  ({ type: 'POST', onePost })
-export const actionClearOnePostType = () =>
-  ({ type: 'CLEAR_ONE_POST' })
-export const actionChangeLikeType = (newResult) => ({
-    type:"CHANGE_LIKE", newResult
-  })
-
-export const actionPostsType = (newPosts, newPostsCount) => 
-  ({ type: 'ADD-USER-POSTS', newPosts, newPostsCount })
-  export const actionUserAllPostsType = (allPosts) => 
-  ({ type: 'USER-POSTS', allPosts })
-  export const actionClearAllPostsType= () =>
-  ({ type: 'CLEAR_ALL_POSTS' })
-  export const actionCountPostsType = (countPosts) =>
-  ({ type: "COUNT_ALL_POSTS", countPosts })
+export const actionOnePostType = (onePost) => ({ type: 'POST', onePost })
+export const actionClearOnePostType = () => ({ type: 'CLEAR_ONE_POST' })
+export const actionPostsType = (newPosts, newPostsCount) => ({
+  type: 'ADD-USER-POSTS',
+  newPosts,
+  newPostsCount,
+})
+export const actionUserAllPostsType = (allPosts) => ({
+  type: 'USER-POSTS',
+  allPosts,
+})
+export const actionClearAllPostsType = () => ({ type: 'CLEAR_ALL_POSTS' })
+export const actionCountPostsType = (countPosts) => ({
+  type: 'COUNT_ALL_POSTS',
+  countPosts,
+})

src/actions/types/promiseTypes.js

@@ -1,28 +1,30 @@
 export const actionPending = (name) => ({
-    type: 'PROMISE',
-    name,
-    status: 'PENDING',
-  })
-  export const actionFulfilled = (name, payload) => ({
-    type: 'PROMISE',
-    name,
-    status: 'FULFILLED',
-    payload,
-  })
-  export const actionRejected = (name, error) => ({
-    type: 'PROMISE',
-    name,
-    status: 'REJECTED',
-    error,
-  })
- export const actionPromise = (name, promise) =>
-    ({ type: 'PROMISE_START', name, promise })
+  type: 'PROMISE',
+  name,
+  status: 'PENDING',
+})
+export const actionFulfilled = (name, payload) => ({
+  type: 'PROMISE',
+  name,
+  status: 'FULFILLED',
+  payload,
+})
+export const actionRejected = (name, error) => ({
+  type: 'PROMISE',
+  name,
+  status: 'REJECTED',
+  error,
+})
+export const actionPromise = (name, promise) => ({
+  type: 'PROMISE_START',
+  name,
+  promise,
+})
 
-    export const actionClearPromiseForName = (name) => ({
-      type: 'PROMISE_CLEAR',
-      name,
-    })
-    export const actionAllClearPromiseType = () => ({
-        type: 'PROMISE_All_CLEAR',
-      })
-      
+export const actionClearPromiseForName = (name) => ({
+  type: 'PROMISE_CLEAR',
+  name,
+})
+export const actionAllClearPromiseType = () => ({
+  type: 'PROMISE_All_CLEAR',
+})

src/actions/types/subscribeTypes.js

@@ -1,7 +1,9 @@
 export const actionChangeFollowingType = (newResult) => ({
-    type:"UPDATE_FOLLOWING", newResult
-  })
-  
-  export const actionChangeFollowersType = (newResult) => ({
-    type:"UPDATE_FOLLOWERS", newResult
-  })
+  type: 'UPDATE_FOLLOWING',
+  newResult,
+})
+
+export const actionChangeFollowersType = (newResult) => ({
+  type: 'UPDATE_FOLLOWERS',
+  newResult,
+})

src/actions/types/userTypes.js

@@ -1,17 +1,12 @@
 export const actionAvatarUpdateType = (aboutUser) => ({
-    type: 'CHANGE-AVATAR-USER',
-    aboutUser,
+  type: 'CHANGE-AVATAR-USER',
+  aboutUser,
 })
 export const actionProfilePageDataUserType = (aboutUser) => ({
   type: 'PROFILE-PAGE-USER',
-  aboutUser})
-  
-export const actionProfilePageData = (id) => 
-({ type: 'DATA_PROFILE', id })
+  aboutUser,
+})
+
+export const actionProfilePageData = (id) => ({ type: 'DATA_PROFILE', id })
 
-export const actionClearDataUserType = () =>
-  ({ type: 'CLEAR-DATA' })
-  
-  export const actionChangeFollowersType = (newResult) => ({
-    type:"UPDATE_FOLLOWERS", newResult
-  })
+export const actionClearDataUserType = () => ({ type: 'CLEAR-DATA' })

src/components/EditAvatar.jsx

@@ -1,12 +1,9 @@
 import { connect } from 'react-redux'
 import { message, Image, Button } from 'antd'
-import {
-  actionUploadFile,
-} from '../actions/query/uploadFilesQuery'
+import { actionUploadFile } from '../actions/query/uploadFilesQuery'
 import React, { useState, useEffect } from 'react'
 import { Dropzone, ConstructorModal } from '../helpers'
-import { Input } from './Input'
-import {actionSetAvatarTypeSaga} from '../actions/typeSaga/myDataTypesSaga'
+import { actionSetAvatarTypeSaga } from '../actions/typeSaga/myDataTypesSaga'
 const EditAvatar = ({
   info,
   onSaveAvatar,
@@ -17,7 +14,6 @@ const EditAvatar = ({
 }) => {
   const [state, setState] = useState({})
 
-  console.log('state my ', state)
   useEffect(() => {
     fileStatus?.status == 'FULFILLED' &&
       setState({
@@ -33,36 +29,30 @@ const EditAvatar = ({
   }
 
   return (
-      <div
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          flexDirection: 'column',
-        }}
-      >
-        <Dropzone onLoad={onFileDrop} />
+    <div className="EditAvatar">
+      <Dropzone onLoad={onFileDrop} />
 
-        {fileStatus?.payload?.url && (
-          <Image
-            style={{
-              width: '200px',
-              objectFit: 'cover',
-              height: '150px',
-            }}
-            src={'/' + fileStatus?.payload?.url}
-          />
-        )}
-        <br />
-        <Button
-          style={{ width: '200px' }}
-          disabled={fileStatus ? false : true}
-          onClick={saveAvatar}
-          size="large"
-          type="primary"
-        >
-          Save avatar
-        </Button>
-      </div>
+      {fileStatus?.payload?.url && (
+        <Image
+          style={{
+            width: '200px',
+            objectFit: 'cover',
+            height: '150px',
+          }}
+          src={'/' + fileStatus?.payload?.url}
+        />
+      )}
+      <br />
+      <Button
+        style={{ width: '200px' }}
+        disabled={fileStatus ? false : true}
+        onClick={saveAvatar}
+        size="large"
+        type="primary"
+      >
+        Save avatar
+      </Button>
+    </div>
   )
 }
 export const CEditAvatar = connect(

src/components/HeaderButtons.jsx

@@ -1,69 +0,0 @@
-import user from '../materials/user.png'
-import { actionFullProfilePageUserTypeSaga } from '../actions/typeSaga/userTypesSaga'
-import { Avatar, Button } from 'antd'
-import { CSearch } from './Search_Users'
-import { Link} from 'react-router-dom'
-import { connect } from 'react-redux'
-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={`${link}`}
-      className="Links">
-      {tag}
-      </Link>
-  )
-}
-export const Feed = () =>
-  <DefaultLink link={"/feed"} tag={<HomeOutlined />} />
-export const Explore = () =>
-  <DefaultLink link={"/explore"} tag={<CompassOutlined />} />
-
-
-export const AddPost = ({ children }) => {
-  const [state, setState] = useState(false)
-
-  return (
-    <>
-      <Link to={`/edit/post/new`}
-      className="Links">
-      <PlusSquareOutlined onClick={() => setState(!state)}/>
-        {!state && children}
-      </Link>
-    </>
-  )
-}
-export const LogOut = ({onClick}) => 
-  <ImportOutlined className="Links" onClick={onClick} />
-
-
-const User = ({ my_Id, aboutMe: { _id, avatar } = {}, onMyPage }) => {
-  
-  useEffect(() => {
-    if (my_Id)
-      onMyPage(my_Id)
-  }, [my_Id])
-  return (
-    <Link to={`/profile/${my_Id}`}>
-      {avatar?.url ? (
-        <Avatar src={'/' + avatar?.url} size={50} className="Avatar" />
-      ) : (
-        <Avatar src={user} size={50} className="Avatar" />
-      )}
-    </Link>
-  )
-}
-
-export const CUser = connect(
-  (state) => ({
-    my_Id: state.auth?.payload?.sub?.id,
-    aboutMe: state.myData.aboutMe,
-  }),
-  { onMyPage: actionFullProfilePageUserTypeSaga },
-)(User)

src/components/Input.jsx

@@ -1,4 +1,4 @@
-import { Button, Input, Checkbox, Form, Row, Col } from 'antd'
+import { Input } from 'antd'
 
 export const CustomInput = ({ state, onChangeText, checked }) => (
     <Input

src/components/LinkToUser.jsx

@@ -1,20 +1,19 @@
 import user from '../materials/user.png'
 import { Link } from 'react-router-dom'
 import { Avatar, Col, Row } from 'antd'
-import { CSubscribeLinkUser } from '../components/Subscribe' 
+import { CSubscribeLinkUser } from '../components/Subscribe'
 export const LinkToUser = ({
-    _id,
-    avatar,
-    login,
+  _id,
+  avatar,
+  login,
   size,
   font = '15px',
   padding = '10px',
-    onClick, key
+  onClick,
+  key,
 }) => {
   return (
-    // <Row style={{ margin:'10px', marginBottom:'20px' }}>
- 
-    <Row style={{ margin:'10px', marginBottom:'20px' }}>
+    <Row style={{ margin: '10px', marginBottom: '20px' }}>
       <Link
         to={`/profile/${_id}`}
         style={{
@@ -22,11 +21,11 @@ export const LinkToUser = ({
           padding: padding,
           flexDirection: 'row',
           fontSize: font,
-              }}
-              onClick={onClick}
-              key={key}
+        }}
+        onClick={onClick}
+        key={key}
       >
-        <Col offset={1} className="gutter-row" >
+        <Col offset={1} className="gutter-row">
           {avatar ? (
             <Avatar
               size={size}
@@ -37,29 +36,27 @@ export const LinkToUser = ({
             <Avatar size={size} src={user} style={{ marginRight: '3px' }} />
           )}
         </Col>
-        <Col offset={2} style={{marginTop:'5px'}}>
+        <Col offset={2} style={{ marginTop: '5px' }}>
           <h3> {login || 'Anon'}</h3>
         </Col>
-      {/* <Subscribe  */}
       </Link>
-      
     </Row>
   )
 }
 
-
-export const LinkWithSubscribe =  ({
+export const LinkWithSubscribe = ({
   _id,
   avatar,
   login,
   size,
   font = '15px',
   padding = '10px',
-  onClick, key,
-  myId
+  onClick,
+  key,
+  myId,
 }) => {
   return (
-    <Row style={{ margin:'10px', marginBottom:'20px' }}>
+    <Row style={{ margin: '10px', marginBottom: '20px' }}>
       <Link
         to={`/profile/${_id}`}
         style={{
@@ -67,11 +64,11 @@ export const LinkWithSubscribe =  ({
           padding: padding,
           flexDirection: 'row',
           fontSize: font,
-              }}
-              onClick={onClick}
-              key={key}
+        }}
+        onClick={onClick}
+        key={key}
       >
-        <Col offset={1} className="gutter-row" >
+        <Col offset={1} className="gutter-row">
           {avatar ? (
             <Avatar
               size={size}
@@ -82,23 +79,22 @@ export const LinkWithSubscribe =  ({
             <Avatar size={size} src={user} style={{ marginRight: '3px' }} />
           )}
         </Col>
-        <Col offset={2} style={{marginTop:'5px'}}>
+        <Col offset={2} style={{ marginTop: '5px' }}>
           <h3> {login || 'Anon'}</h3>
         </Col>
       </Link>
-      {
-        console.log('my_id', myId)}
-      
-       { myId == _id ?
-          null :
-        <div style={{
+
+      {myId == _id ? null : (
+        <div
+          style={{
             right: '0',
-    position: 'absolute', marginRight:'20px'}}>
-      
-        <CSubscribeLinkUser followId={_id} />
+            position: 'absolute',
+            marginRight: '20px',
+          }}
+        >
+          <CSubscribeLinkUser followId={_id} />
         </div>
-      }
-     
+      )}
     </Row>
   )
 }

src/components/ListOfUsers.jsx

@@ -1,13 +1,7 @@
 import { ConstructorModal } from '../helpers'
-import { ResultUserFind } from './Search_Users'
 import React, { useState } from 'react'
-import LinkToUser, {LinkWithSubscribe} from '../components/LinkToUser'
-export const ListOfUsers = ({
-  listResult,
-  listUsers,
-  onPageData,
-  text
-}) => {
+import LinkToUser from '../components/LinkToUser'
+export const ListOfUsers = ({ listUsers, text }) => {
   const [isModalVisible, setIsModalVisible] = useState(false)
 
   const showModal = () => {
@@ -23,33 +17,29 @@ export const ListOfUsers = ({
           style={{ cursor: 'pointer', marginLeft: '20px' }}
           onClick={showModal}
         >
-          {listUsers.length} {text} {' '}
+          {listUsers.length} {text}{' '}
         </h3>
       ) : (
         <h3 style={{ marginLeft: '20px' }}> 0 {text} </h3>
       )}
 
       <ConstructorModal
-        title={text[0].toUpperCase()+ text.slice(1)}
+        title={text[0].toUpperCase() + text.slice(1)}
         isModalVisible={isModalVisible}
         setIsModalVisible={setIsModalVisible}
       >
-         
-     <div className="">
-      {listUsers?.map(({ _id, login, avatar }) => (
-       
-        <LinkToUser _id={_id} login={login}
-        
-          avatar={avatar} size={40} padding={'0px'}
-          onClick={handleCancel} />
-      ))}
-      </div>
-        {/* <ResultUserFind
-          size={'40px'}
-          onPageData={onPageData}
-          handleCancel={handleCancel}
-          userFind={listResult}
-        /> */}
+        <div className="">
+          {listUsers?.map(({ _id, login, avatar }) => (
+            <LinkToUser
+              _id={_id}
+              login={login}
+              avatar={avatar}
+              size={40}
+              padding={'0px'}
+              onClick={handleCancel}
+            />
+          ))}
+        </div>
       </ConstructorModal>
     </>
   )

src/components/Routing.jsx

@@ -1,11 +1,10 @@
-// import { InputForm, CRegisterForm, CLoginForm } from './LoginRegisterLogout'
-import { Router, Route, Redirect, Switch } from 'react-router-dom'
+import { Route, Redirect, Switch } from 'react-router-dom'
 import { CExplorePosts } from '../pages/explorePosts'
 import { CPostForFeed, Feed } from '../pages/feedPosts'
 import { CPostEditor,CPostCreator } from '../pages/createAndEditPost'
 import { CPageAboutUser } from '../pages/profilePage'
 import { CPost } from '../pages/onePost'
-import { Provider, connect } from 'react-redux'
+import { connect } from 'react-redux'
 import { LoginPageForm } from '../pages/login'
 import { RegisterPageForm } from '../pages/login'
 
@@ -26,7 +25,6 @@ const Routing = ({ token }) => {
         <Switch>
           <Route path="/login" exact component={LoginPageForm} />
           <Route path="/register" component={RegisterPageForm} />
-          {/* <Route path="/input" component={InputForm} /> */}
           <Redirect from="/*" to="/login" />
           <CProtectedRoute
             roles={['anon']}

src/components/Search_Users.jsx

@@ -1,28 +1,25 @@
-import { Link } from 'react-router-dom'
 import { connect } from 'react-redux'
-import { Row, Col,Avatar, Input,  Popover } from 'antd'
-import user from '../materials/user.png'
+import { Input, Popover } from 'antd'
 import { actionSearchUser } from '../actions/query/searchUserQuery'
-import {UserOutlined,SearchOutlined } from '@ant-design/icons'
+import { UserOutlined } from '@ant-design/icons'
 
 import { actionFullProfilePageUserTypeSaga } from '../actions/typeSaga/userTypesSaga'
 import LinkToUser from './LinkToUser'
-export const ResultUserFind = ({
-  userFind = [],
-  handleCancel, 
- 
-}) => { 
-    console.log('user find', userFind) 
+export const ResultUserFind = ({ userFind = [], handleCancel }) => {
   return (
     <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>
+    </div>
   )
 }
 const SearchUser = ({ my_Id, onSearch, searchUser, onPageData }) => {
@@ -43,15 +40,13 @@ const SearchUser = ({ my_Id, onSearch, searchUser, onPageData }) => {
           />
         }
       >
-        
         <Search
-          // style={{ width: '25%' }}
           placeholder="Enter search user"
           allowClear
           prefix={<UserOutlined />}
           enterButton="Search"
           size="large"
-          onSearch={onSearchUser} 
+          onSearch={onSearchUser}
         />
       </Popover>
     </>

src/components/Sortable.jsx

@@ -1,51 +1,40 @@
-import { sortableContainer, SortableElement, sortableElement, SortableHandle } from 'react-sortable-hoc'
-import { Button,Image,Row,Col } from 'antd'
+import {
+  sortableContainer,
+  SortableElement,
+} from 'react-sortable-hoc'
+import { Button} from 'antd'
 
 export const SortableItem = SortableElement(({ url, onRemoveImage, _id }) => {
-    return (
-      <>
-      <img
+  return (
+    <>
+      <img className="Preview" src={'/' + url} />
+      <Button
+        type="primary"
+        danger
+        size="small"
         style={{
-            objectFit: 'cover',
-          boxShadow: '0 5px 10px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)',
-          height: '100px',
-            width: '100px',
-          marginBottom:'5px'
+          margin: '5px',
         }}
-        src={'/' + url}
-      />
-          <Button
-      type="primary"
-      danger
-      size="small"
-          style={{
-            // float: 'right',
-            margin: '5px'
-          }}
-      onClick={() => onRemoveImage(_id)}
-    >
-      {' '}
-      x{' '}
-          </Button>
-          
-      </>
-    )
-  })
-  export const SortableContainer = sortableContainer(({ children ,checkLength}) => {
-  
+        onClick={() => onRemoveImage(_id)}
+      >
+        {' '}
+        x{' '}
+      </Button>
+    </>
+  )
+})
+export const SortableContainer = sortableContainer(
+  ({ children }) => {
     return (
       <>
-        {/* <Row> */}
-        {/* <Col span={2}> */}
         <ul
           style={{
-          // maxWidth:'100px',
-              margin: '5px'
+            margin: '5px',
           }}
-          >{children}</ul>
-          {/* </Col> */}
-        {/* </Row> */}
+        >
+          {children}
+        </ul>
       </>
     )
-  })
-  
+  },
+)

src/components/Subscribe.jsx

@@ -1,59 +1,52 @@
-
-import {actionChangeSubscribeSaga} from '../actions/typeSaga/subscribeTypesSaga'
-import { Button} from 'antd'
+import { actionChangeSubscribeSaga } from '../actions/typeSaga/subscribeTypesSaga'
+import { Button } from 'antd'
 import { connect } from 'react-redux'
-  
-const Subscribe = ({
-    myId,
-    deleteSubscribe,
-    aboutMeFollowing = [],
-    changeSubscribe,
-    followId,
-  }) => {
-    const checkFollowId = aboutMeFollowing?.find(
-      (follower) => follower?._id === followId,
+
+const Subscribe = ({ aboutMeFollowing = [], changeSubscribe, followId }) => {
+  const checkFollowId = aboutMeFollowing?.find(
+    (follower) => follower?._id === followId,
   )?._id
-    return (
-      <>
-        <div style={{ display: 'flex' }} onClick={()=>changeSubscribe(followId,checkFollowId)}>
-          {checkFollowId ?
-          
-            (
-            <Button style={{width:'120px'}}
-              size="large" type="primary"
-               danger
-            >
-              Unsubscribe
-            </Button>
-          ) : (
-              <Button
-              style={{width:'120px'}}
-              size="large"
-                type="primary"
-                primary
-            >
-              Subscribe
-            </Button>
-          )}
-        </div>
-      </>
-    )
+  return (
+    <>
+      <div
+        style={{ display: 'flex' }}
+        onClick={() => changeSubscribe(followId, checkFollowId)}
+      >
+        {checkFollowId ? (
+          <Button style={{ width: '120px' }} size="large" type="primary" danger>
+            Unsubscribe
+          </Button>
+        ) : (
+          <Button
+            style={{ width: '120px' }}
+            size="large"
+            type="primary"
+            primary
+          >
+            Subscribe
+          </Button>
+        )}
+      </div>
+    </>
+  )
 }
-export const CSubscribe = connect((state) => ({
+export const CSubscribe = connect(
+  (state) => ({
     myId: state.auth?.payload?.sub?.id,
     aboutMeFollowing: state.myData?.aboutMe?.following,
     followId: state.userData?.aboutUser?._id,
-}),
-    {
-      changeSubscribe:actionChangeSubscribeSaga
-  }
+  }),
+  {
+    changeSubscribe: actionChangeSubscribeSaga,
+  },
 )(Subscribe)
 
-export const CSubscribeLinkUser = connect((state) => ({
-  myId: state.auth?.payload?.sub?.id,
-  aboutMeFollowing: state.myData?.aboutMe?.following,
-}),
+export const CSubscribeLinkUser = connect(
+  (state) => ({
+    myId: state.auth?.payload?.sub?.id,
+    aboutMeFollowing: state.myData?.aboutMe?.following,
+  }),
   {
-    changeSubscribe:actionChangeSubscribeSaga
-  }
-)(Subscribe)
+    changeSubscribe: actionChangeSubscribeSaga,
+  },
+)(Subscribe)

src/components/authorization/InitialForm.jsx

@@ -1,10 +1,5 @@
 import React, { useState } from 'react'
-import { connect } from 'react-redux'
-import { Button, Input, Checkbox, Form, Row, Col } from 'antd'
-import { Link } from 'react-router-dom'
-import { message } from 'antd'
-import { useEffect } from 'react'
-import { ImportOutlined } from '@ant-design/icons'
+import { Button, Input, Checkbox, Form } from 'antd'
 import { Typography } from 'antd'
 
 const { Text } = Typography
@@ -25,7 +20,6 @@ const InitialForm = ({ onLogin, children }) => {
           margin: '0 auto',
           margin: '50px',
           padding: '20px',
-          // textAlign: 'center',
         }}
         labelCol={{ span: 6 }}
         wrapperCol={{ span: 13 }}
@@ -43,25 +37,20 @@ const InitialForm = ({ onLogin, children }) => {
               message: 'Please input login!',
             },
           ]}
-          style={{
-            // margin: '0 auto',
-
-            // textAlign: 'center',
-          }}
-              >
-            
+        >
           <Input
             value={login}
             size="medium"
             onChange={(e) => setLogin(e.target.value)}
-          
           />
-
-           <Text type="secondary" style={{color:'rgb(35, 60, 107)', margin:'20px 5px'}} >
+        </Form.Item>
+        <Text
+          type="secondary"
+          style={{ color: 'rgb(35, 60, 107)', margin: '20px 5px' }}
+        >
           {' '}
           Login must be at least 5 characters{' '}
         </Text>
-              </Form.Item>
         <Form.Item
           label="Password"
           name="password"
@@ -72,23 +61,20 @@ const InitialForm = ({ onLogin, children }) => {
               message: 'Please input your password!',
             },
           ]}
-          // style={{
-          //   margin: '0 auto',
-
-          //   // textAlign: 'center',
-          // }}
         >
           <Input
             size="medium"
             type={checked ? 'text' : 'password'}
             value={password}
             onChange={(e) => setPassword(e.target.value)}
-          /> <Text type="secondary"  style={{color:'rgb(35, 60, 107)', margin:'20px 0px'}}>
-          Password must contain at least eight characters, include letters,
-          numbers and special symbols{' '}
-        </Text>
-              </Form.Item>
-            
+          />
+        </Form.Item>
+        <div style={{ width: '250px', marginLeft: '90px' }}>
+          <Text type="secondary" style={{ color: 'rgb(35, 60, 107)' }}>
+            Password must contain at least eight characters, include letters,
+            numbers and special symbols{' '}
+          </Text>
+        </div>
         <Form.Item
           name="checked"
           valuePropName="checked"
@@ -112,7 +98,6 @@ const InitialForm = ({ onLogin, children }) => {
             htmlType="submit"
             primary
             style={{ width: '100%' }}
-            className="Btn"
             disabled={
               login.length < 5 ||
               !/(?=.*[0-9])(?=.*[!@#$%^&*])(?=.*[a-z])(?=.*[A-Z])[0-9!@#$%^&*a-zA-Z]{8,}/g.test(
@@ -124,12 +109,6 @@ const InitialForm = ({ onLogin, children }) => {
             {children}
           </Button>
         </Form.Item>
-        {/* <div style={{textAlign:'left'}}>
-                Rules:
-                <h4> Login must be at least 5 characters </h4>
-
-          <h4>Password must contain at least eight characters, include letters, numbers and special symbols </h4>
-             </div>    */}
       </Form>
     </>
   )

src/components/authorization/LogOut.jsx

@@ -1,7 +1,7 @@
 import {
     actionClearDataLogoutTypeSaga,
 } from '../../actions/typeSaga/logOutTypesSaga'
-import { LogOut } from '../HeaderButtons'
+import { LogOut } from '../buttons/HeaderButtons'
 import { connect } from 'react-redux'
 
 export const CLogout = connect(null, {

src/components/authorization/LoginForm.jsx

@@ -1,19 +1,10 @@
-import React, { useState } from 'react'
 import { connect } from 'react-redux'
-import { Button, Input, Checkbox, Form, Row, Col } from 'antd'
-import { Link } from 'react-router-dom'
 import { message } from 'antd'
 import { useEffect } from 'react'
-import { ImportOutlined } from '@ant-design/icons'
-// import {
-//   actionClearDataLogoutTypeSaga,
-//   actionRegisterTypeSaga,
-// } from '../../redux/saga'
 import InitialForm from './InitialForm'
 import { actionClearPromiseForName } from '../../actions/types/promiseTypes'
 import { actionLoginTypeSaga } from '../../actions/typeSaga/loginTypesSaga'
 const LoginForm = ({ onLogin, children, auth, onClearPromise }) => {
- 
   useEffect(() => {
     if (auth?.status === 'FULFILLED' && auth?.payload === null) {
       message.error({
@@ -21,26 +12,19 @@ const LoginForm = ({ onLogin, children, auth, onClearPromise }) => {
         style: {
           marginTop: '80px',
         },
-      })
- && onClearPromise('auth')
+      }) && onClearPromise('auth')
     }
-   
   }, [auth])
 
- 
-  return (
-    <InitialForm onLogin={onLogin}>
-      {"Sign In"}
-    </InitialForm>
-  )
+  return <InitialForm onLogin={onLogin}>{'Sign In'}</InitialForm>
 }
+
 export const CLoginForm = connect(
-    (state) => ({
-      auth: state.promise?.auth,
-    }),
-    {
-      onLogin: actionLoginTypeSaga,
-      onClearPromise:actionClearPromiseForName
-  
-    },
-  )(LoginForm)
+  (state) => ({
+    auth: state.promise?.auth,
+  }),
+  {
+    onLogin: actionLoginTypeSaga,
+    onClearPromise: actionClearPromiseForName,
+  },
+)(LoginForm)

src/components/authorization/RegisterForm.jsx

@@ -1,44 +1,29 @@
-import React, { useState } from 'react'
 import { connect } from 'react-redux'
-import { Button, Input, Checkbox, Form, Row, Col } from 'antd'
-import { Link } from 'react-router-dom'
 import { message } from 'antd'
 import { useEffect } from 'react'
-import { ImportOutlined } from '@ant-design/icons'
-import {
-  actionRegisterTypeSaga,
-} from '../../actions/typeSaga/registerTypesSaga'
+import { actionRegisterTypeSaga } from '../../actions/typeSaga/registerTypesSaga'
 import InitialForm from './InitialForm'
 import { actionClearPromiseForName } from '../../actions/types/promiseTypes'
-const RegisterForm = ({ onLogin, children, register,onClearPromise }) => {
- 
-    useEffect(() => {
-        if (register?.status === 'FULFILLED' && register?.payload === null) {
-          message.error({
-            content: 'This login is already in the database',
-            style: {
-              marginTop: '80px',
-            },
-          })
-          &&onClearPromise("register")
-        }
-      }, [register])
+const RegisterForm = ({ onLogin, children, register, onClearPromise }) => {
+  useEffect(() => {
+    if (register?.status === 'FULFILLED' && register?.payload === null) {
+      message.error({
+        content: 'This login is already in the database',
+        style: {
+          marginTop: '80px',
+        },
+      }) && onClearPromise('register')
+    }
+  }, [register])
 
- 
-  return (
-    <InitialForm onLogin={onLogin}>
-      {"Register"}
-    </InitialForm>
-  )
+  return <InitialForm onLogin={onLogin}>{'Register'}</InitialForm>
 }
 export const CRegisterForm = connect(
-    (state) => ({
-      children: `Register`,
-      register: state.promise?.register,
-    }),
-    {
-      onLogin: actionRegisterTypeSaga,
-      onClearPromise:actionClearPromiseForName
-
-    },
-  )(RegisterForm)
+  (state) => ({
+    register: state.promise?.register,
+  }),
+  {
+    onLogin: actionRegisterTypeSaga,
+    onClearPromise: actionClearPromiseForName,
+  },
+)(RegisterForm)

src/components/EditPostButton.jsx

@@ -1,17 +1,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'
+            marginTop: '10px',
+            width: '100px',
           }}
-
           size="large"
           type="primary"
         >

src/components/buttons/HeaderButtons.jsx

@@ -0,0 +1,62 @@
+import user from '../../materials/user.png'
+import { actionFullProfilePageUserTypeSaga } from '../../actions/typeSaga/userTypesSaga'
+import { Avatar } from 'antd'
+import { Link } from 'react-router-dom'
+import { connect } from 'react-redux'
+import {
+  HomeOutlined,
+  CompassOutlined,
+  PlusSquareOutlined,
+  ImportOutlined,
+} from '@ant-design/icons'
+import React, { useEffect, useState } from 'react'
+const DefaultLink = ({ link, tag }) => {
+  return (
+    <Link to={`${link}`} className="Links">
+      {tag}
+    </Link>
+  )
+}
+export const Feed = () => <DefaultLink link={'/feed'} tag={<HomeOutlined />} />
+export const Explore = () => (
+  <DefaultLink link={'/explore'} tag={<CompassOutlined />} />
+)
+
+export const AddPost = ({ children }) => {
+  const [state, setState] = useState(false)
+
+  return (
+    <>
+      <Link to={`/edit/post/new`} className="Links">
+        <PlusSquareOutlined onClick={() => setState(!state)} />
+        {!state && children}
+      </Link>
+    </>
+  )
+}
+export const LogOut = ({ onClick }) => (
+  <ImportOutlined className="Links" onClick={onClick} />
+)
+
+const User = ({ my_Id, aboutMe: { _id, avatar } = {}, onMyPage }) => {
+  useEffect(() => {
+    if (my_Id) onMyPage(my_Id)
+  }, [my_Id])
+  return (
+    <Link to={`/profile/${my_Id}`}>
+      {avatar?.url ? (
+        <Avatar src={'/' + avatar?.url} size={50} className="Avatar" />
+      ) : (
+        <Avatar src={user} size={50} className="Avatar" />
+      )}
+    </Link>
+  )
+}
+
+export const CUser = connect(
+  (state) => ({
+    my_Id: state.auth?.payload?.sub?.id,
+    aboutMe: state.myData.aboutMe,
+  }),
+  { onMyPage: actionFullProfilePageUserTypeSaga },
+)(User)

src/components/comment/AddComment.jsx

@@ -25,7 +25,7 @@ import { SmileOutlined, SmileFilled } from '@ant-design/icons'
       )}
       <Input
         style={{
-          display: 'block',
+          display: 'flex',
           width,
           margin: '0 10px',
         }}
@@ -35,24 +35,18 @@ import { SmileOutlined, SmileFilled } from '@ant-design/icons'
         onChange={(e) => {
           setComment(e.target.value)
         }}
-        onPressEnter={(e) => {
+        onPressEnter={(e) => 
           setComment(e.target.value)
-        }}
+       }
       />
       {!showEmojiPicker ? (
         <SmileOutlined
-          className="smile-btn"
-          style={{ fontSize: 'xx-large', marginRight: '15px' }}
+          className="SmileBtn"
           onClick={handleOK}
         />
       ) : (
         <SmileFilled
-          className="smile-btn"
-          style={{
-            color: '#108ee9',
-            fontSize: 'xx-large',
-            marginRight: '30px',
-          }}
+          className="SmileBtnFilled"
           onClick={handleOK}
         />
       )}

src/components/comment/Comment.jsx

@@ -45,7 +45,7 @@ export const Comments = ({
             )
           })
         : comments?.length && (
-            <Text
+            <Text className='ButtonComment'
               type="secondary"
               strong
               style={{ margin: '0 auto' }}

src/components/comment/CommentAvatar.jsx

@@ -1,10 +1,9 @@
 import user from '../../materials/user.png'
 import { Link } from 'react-router-dom'
-
 import { Avatar } from 'antd'
 
 const CommentAvatar = ({ owner }) =>
-    owner?.avatar ? (
+  owner?.avatar ? (
     <Link to={`/profile/${owner?._id}`}>
       <Avatar
         size={30}
@@ -22,6 +21,6 @@ const CommentAvatar = ({ owner }) =>
         alt={owner?.login || 'Anon'}
       />
     </Link>
-)
-  
-export default CommentAvatar
+  )
+
+export default CommentAvatar

src/components/comment/SpoilerButton.jsx

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

src/components/like/Like.jsx

@@ -1,52 +1,36 @@
 import { HeartOutlined, HeartFilled } from '@ant-design/icons'
 import {
-  actionChangeLikeTypeSaga, actionChangeFeedLikeTypeSaga
+  actionChangeLikeTypeSaga,
+  actionChangeFeedLikeTypeSaga,
 } from '../../actions/typeSaga/likeTypesSaga'
 import { connect } from 'react-redux'
 import ModalLikes from './ModalLikes'
-export const Like = ({
-  my_Id,
-  postId,
-  likes = [],
-  changeLike,
-}) => {
+export const Like = ({ my_Id, postId, likes = [], changeLike }) => {
   const likeId = likes.find((like) => like?.owner?._id === my_Id)?._id
-console.log('like id in component', likeId)
-
   return (
     <>
       <div style={{ display: 'flex' }}>
         <h3 onClick={() => changeLike(likeId, postId)}>
-       
           {likeId ? (
-            <HeartFilled
-              style={{color:'red'}}
-              className='Like'
-            />
+            <HeartFilled style={{ color: 'red' }} className="Like" />
           ) : (
-            <HeartOutlined className='UnLike' />
+            <HeartOutlined className="UnLike" />
           )}
         </h3>
-        <ModalLikes likes={likes} myId={ my_Id} />
+        <ModalLikes likes={likes} myId={my_Id} />
       </div>
     </>
   )
 }
-const AllLikes= ({ my_Id, likes,changeLike, postId }) => (
-  <Like
-    my_Id={my_Id}
-    likes={likes}
-    postId={postId}
-    changeLike={changeLike}
-  />
- 
+const AllLikes = ({ my_Id, likes, changeLike, postId }) => (
+  <Like my_Id={my_Id} likes={likes} postId={postId} changeLike={changeLike} />
 )
 export const CLike = connect(
   (state) => ({
     my_Id: state.auth?.payload?.sub?.id || '',
   }),
   {
-    changeLike: actionChangeLikeTypeSaga
+    changeLike: actionChangeLikeTypeSaga,
   },
 )(AllLikes)
 
@@ -55,20 +39,6 @@ export const CLikeFeed = connect(
     my_Id: state.auth?.payload?.sub?.id || '',
   }),
   {
-    changeLike: actionChangeFeedLikeTypeSaga
+    changeLike: actionChangeFeedLikeTypeSaga,
   },
 )(AllLikes)
-
-
-
-// export const CLikeForFeed = connect(
-//   (state) => ({
-//     my_Id: state.auth?.payload?.sub?.id || '',
-//     addLike: state.promise?.addLike?.payload,
-//     deleteLike: state.promise?.deleteLike?.payload,
-//   }),
-//   {
-//     // addLike: actionAddFullLikeFeed,
-//     // deleteLike: actionDeleteFullLikeFeed,
-//   },
-// )(AllLikeComp)

src/components/like/LikeList.jsx

@@ -1,8 +1,6 @@
-import { LinkToUser, LinkWithSubscribe } from '../LinkToUser'
-import { CSubscribe } from '../Subscribe'
-
+import { LinkWithSubscribe } from '../LinkToUser'
 const LikeList = ({ likes, myId }) => {
-    console.log('likes ', likes)
+  console.log('likes ', likes)
   return (
     <>
       <div className="Modal">
@@ -13,12 +11,10 @@ const LikeList = ({ likes, myId }) => {
               login={login}
               avatar={avatar}
               size={50}
-                  padding={'0px'}
-                  myId={myId}
-              />
-              
+              padding={'0px'}
+              myId={myId}
+            />
           ))}
-            
       </div>
     </>
   )

src/components/like/ModalLikes.jsx

@@ -2,30 +2,30 @@ import React, { useState } from 'react'
 import { ConstructorModal } from '../../helpers'
 import LikeList from './LikeList'
 const ModalLikes = ({ likes, myId }) => {
-    const [isModalVisible, setIsModalVisible] = useState(false)
-    const showModal = () => {
-      setIsModalVisible(true)
-    }
-    return (
-      <>
-        {likes.length ? (
-          <h3 style={{ cursor: 'pointer', padding: '3px' }} onClick={showModal}>
-            {' '}
-            {likes.length} likes
-          </h3>
-        ) : (
-          <h3 style={{ cursor: 'pointer', padding: '3px' }}> 0 likes</h3>
-        )}
-  
-        <ConstructorModal
-          title={'Likes'}
-          isModalVisible={isModalVisible}
-          setIsModalVisible={setIsModalVisible}
-        >
-                <LikeList likes={likes} myId={myId} />
-        </ConstructorModal>
-      </>
-    )
+  const [isModalVisible, setIsModalVisible] = useState(false)
+  const showModal = () => {
+    setIsModalVisible(true)
   }
-  
-export default ModalLikes
+  return (
+    <>
+      {likes.length ? (
+        <h3 className='LikeStyle' onClick={showModal}>
+          {' '}
+          {likes.length} likes
+        </h3>
+      ) : (
+        <h3 className='LikeStyle'> 0 likes</h3>
+      )}
+
+      <ConstructorModal
+        title={'Likes'}
+        isModalVisible={isModalVisible}
+        setIsModalVisible={setIsModalVisible}
+      >
+        <LikeList likes={likes} myId={myId} />
+      </ConstructorModal>
+    </>
+  )
+}
+
+export default ModalLikes

src/components/post/Carousel.jsx

@@ -3,62 +3,49 @@ import { LeftCircleFilled, RightCircleFilled } from '@ant-design/icons'
 import defaultPhoto from '../../materials/default-photo.png'
 
 const SampleNextArrow = (props) => {
-    const { onClick } = props
-    return (
-      <div className='NextArrow'
-        onClick={onClick}
-      >
-        <RightCircleFilled />
-      </div>
-    )
-  }
-  
-  const SamplePrevArrow = (props) => {
-    const {  onClick } = props
-    return (
-      <div
-        style={{
-          color: '#41607d',
-          fontSize: '50px',
-          position: 'absolute',
-          margin: 'auto',
-          right: '100%',
-          top: '50%',
-          paddingRight: '20px',
-        }}
-        onClick={onClick}
-      >
-        <LeftCircleFilled />
+  const { onClick } = props
+  return (
+    <div className="NextArrow" onClick={onClick}>
+      <RightCircleFilled />
+    </div>
+  )
+}
+
+const SamplePrevArrow = (props) => {
+  const { onClick } = props
+  return (
+    <div className="PreviousArrow" onClick={onClick}>
+      <LeftCircleFilled />
+    </div>
+  )
+}
+
+export const MyCarousel = ({ images = [] }) => {
+  return (
+    <>
+      <div className="MyCarousel">
+        <Carousel
+          effect="fade"
+          arrows
+          nextArrow={<SampleNextArrow />}
+          prevArrow={<SamplePrevArrow />}
+        >
+          {images ? (
+            images?.map(
+              (i, index) =>
+                i?.url && (
+                  <div key={index}>
+                    <img key={index} className="PostImage" src={'/' + i?.url} />
+                  </div>
+                ),
+            )
+          ) : (
+            <div>
+              <img className="PostImage" src={defaultPhoto} />
+            </div>
+          )}
+        </Carousel>
       </div>
-    )
-  }
-  
-  export const MyCarousel = ({ images = [] }) => {
-    return (
-      <>
-        <div className="MyCarousel">
-          <Carousel 
-            effect="fade"
-            arrows
-            nextArrow={<SampleNextArrow />}
-            prevArrow={<SamplePrevArrow />}
-          >
-            {images ? (
-              images?.map(
-                (i, index) =>
-                  i?.url && (
-                    <div key={index}>
-                      <img key={index} className="PostImage" src={'/' + i?.url} />
-                    </div>
-                  ),
-              )
-            ) : (
-              <div >
-                <img className="PostImage" src={defaultPhoto} />
-              </div>
-            )}
-          </Carousel>
-        </div>
-      </>
-    )
-  }
+    </>
+  )
+}

src/components/post/PostCard.jsx

@@ -2,62 +2,22 @@ import defaultPhoto from '../../materials/default-photo.png'
 import { Link } from 'react-router-dom'
 import galery from '../../materials/gallery-icon.png'
 export const Card = ({ post }) => (
-    <>
+  <>
     <Link key={post?._id} to={`/post/${post?._id}`}>
-      {
-        post?.images && post?.images.length > 1 ?
-        ( 
-        <div className='Wrapper'>
-        <img src={galery} style={{
-              
-              position: 'fixed',
-            right: '0',
-  zIndex:'2',
-                top: '0',
-                width: '50px', height: '50px',
-                margin:'10px'
-          }} />
-              <img
-            className="Card"
-            src={'/' + post.images[0].url}
-            style={{
-              width: '250px',
-              height: '250px',
-              objectFit: 'cover',
-              position:'relative'
-            }}
-          />
-   
-        </div>)
-:
-
-      post?.images && post?.images[0] && post.images[0]?.url ? (
-        <div className='Wrapper'>
-          <img
-            className="Card"
-            src={'/' + post.images[0].url}
-            style={{
-              width: '250px',
-              height: '250px',
-              objectFit: 'cover',
-            }}
-          />
-          </div>
+      {post?.images && post?.images.length > 1 ? (
+        <div className="Wrapper">
+          <img src={galery} className="Gallery" />
+          <img className="Card" src={'/' + post.images[0].url} />
+        </div>
+      ) : post?.images && post?.images[0] && post.images[0]?.url ? (
+        <div className="Wrapper">
+          <img className="Card" src={'/' + post.images[0].url} />
+        </div>
       ) : (
-          <div className='Wrapper'>
-          <img
-            className="Card"
-            src={defaultPhoto}
-            style={{
-              width: '250px',
-              height: '250px',
-              objectFit: 'cover',
-            }}
-            />
-          </div>
-          )
-      
-        }
-      </Link>
-    </>
-  )
+        <div className="Wrapper">
+          <img className="Card" src={defaultPhoto} />
+        </div>
+      )}
+    </Link>
+  </>
+)

src/pages/createAndEditPost/index.js

@@ -1,30 +1,16 @@
 import React, { useState, useEffect } from 'react'
-import { Link } from 'react-router-dom'
 import { connect } from 'react-redux'
-import {
-  actionUploadFiles,
-
-} from '../../actions/query/uploadFilesQuery'
+import { actionUploadFiles } from '../../actions/query/uploadFilesQuery'
 import { actionClearOnePostType } from '../../actions/types/postTypes'
 import { Button, message } from 'antd'
-import {
-  Dropzone
-} from '../../components/UploadFiles'
-import {
-  SortableContainer,
-  SortableItem
-} from '../../components/Sortable'
+import { Dropzone } from '../../components/UploadFiles'
+import { SortableContainer, SortableItem } from '../../components/Sortable'
 import { arrayMoveImmutable } from 'array-move'
-import { Row, Col } from 'antd'
-import history  from '../../helpers/history'
+import { Col } from 'antd'
+import history from '../../helpers/history'
 import { CustomInput } from '../../components/Input'
-import {actionCreateEditPostTypeSaga} from '../../actions/typeSaga/postTypesSaga'
-
-  import {actionClearPromiseForName} from '../../actions/types/promiseTypes'
-const checkRoute = ({ match }) => {
-  console.log('match route', match)
-}
-
+import { actionCreateEditPostTypeSaga } from '../../actions/typeSaga/postTypesSaga'
+import { actionClearPromiseForName } from '../../actions/types/promiseTypes'
 const PostEditor = ({
   match: {
     params: { _id },
@@ -34,9 +20,6 @@ const PostEditor = ({
   onFileDrop,
   post,
   fileStatus,
-  clearPostOne,
-  clearPromise,
-  newPost
 }) => {
   post = {
     _id: post?._id || '',
@@ -44,11 +27,7 @@ const PostEditor = ({
     text: post?.text || '',
     images: post?.images || [],
   }
-  console.log('post after', post)
-  console.log('post _id', _id)
   const [state, setState] = useState(post)
-  console.log('state after change', state)
-  console.log('post', post)
   useEffect(() => {
     if (fileStatus?.status === 'FULFILLED' && fileStatus?.payload != [])
       setState({
@@ -58,8 +37,6 @@ const PostEditor = ({
     else if (fileStatus?.status === 'REJECTED') message.error('Error')
   }, [fileStatus])
 
-  console.log('images ', state?.images)
-
   const onSortEnd = ({ oldIndex, newIndex }) => {
     setState({
       ...state,
@@ -94,35 +71,30 @@ const PostEditor = ({
       state['images'] = []
       return false
     } else {
-      return <h2 className='NumberPosts'> {state?.images.length} / 8</h2>
+      return <h2 className="NumberPosts"> {state?.images.length} / 8</h2>
     }
   }
 
   return (
     <section className="Post">
-      {/* <Row> */}
-        {/* <Col span={12} offset={6}> */}
-          <Dropzone onLoad={onFileDrop} />
-          {/* <Col offset={1}> */}
+      <Dropzone onLoad={onFileDrop} />
       <div style={{}}>
-              <SortableContainer
-                onSortEnd={onSortEnd}
-                >
-                {state?.images?.length <= 8 &&
-                  (state?.images || []).map(({ _id, url }, index) => (
-                    <SortableItem
-                      key={`item-${_id}`}
-                      url={url}
-                      index={index}
-                      onRemoveImage={onRemoveImage}
-                      _id={_id}
-                    />
-                  ))}
-              </SortableContainer>
+        <SortableContainer onSortEnd={onSortEnd}>
+          {state?.images?.length <= 8 &&
+            (state?.images || []).map(({ _id, url }, index) => (
+              <SortableItem
+                key={`item-${_id}`}
+                url={url}
+                index={index}
+                onRemoveImage={onRemoveImage}
+                _id={_id}
+              />
+            ))}
+        </SortableContainer>
       </div>
-      
-        {checkLength()}
-    
+
+      {checkLength()}
+
       <h2 className="Title"> Title </h2>
       <CustomInput
         state={state?.title || ''}
@@ -158,27 +130,10 @@ const PostEditor = ({
     </section>
   )
 }
-
-// export const CPostEditor = connect(
-//   (state) => ({
-//     fileStatus: state.promise?.uploadFiles,
-//     post: state?.post?.onePost,
-//     myId: state?.myData?.aboutMe?._id,
-//   }),
-//   {
-//     onSave: actionCreateEditPost,
-//     onFileDrop: actionUploadFiles,
-//     clearPostOne: actionClearOnePostType,
-//     // clearPromise: actionClearPromise,
-//   },
-// )(PostEditor)
-
 export const CPostCreator = connect(
   (state) => ({
     fileStatus: state.promise?.uploadFiles,
-    // post: state?.post?.onePost,
     myId: state?.myData?.aboutMe?._id,
-    newPost:true
   }),
   {
     onSave: actionCreateEditPostTypeSaga,
@@ -198,6 +153,5 @@ export const CPostEditor = connect(
     onSave: actionCreateEditPostTypeSaga,
     onFileDrop: actionUploadFiles,
     clearPostOne: actionClearOnePostType,
-    // clearPromise: actionClearPromise,
   },
-)(PostEditor)
+)(PostEditor)

src/pages/explorePosts/index.js

@@ -1,93 +1,77 @@
-
-import {actionOnePost} from '../../actions/query/postQuery'
-  import {actionFullExplorePostsTypeSaga} from '../../actions/typeSaga/exploreTypesSaga'
-  import { Row, Col } from 'antd'
-  import { Card } from '../../components/post/PostCard'
-  import React, { useEffect, useState } from 'react'
-  import { connect } from 'react-redux'
-
+import { actionOnePost } from '../../actions/query/postQuery'
+import { actionFullExplorePostsTypeSaga } from '../../actions/typeSaga/exploreTypesSaga'
+import { Row, Col } from 'antd'
+import { Card } from '../../components/post/PostCard'
+import React, { useEffect, useState } from 'react'
+import { connect } from 'react-redux'
 import { actionClearExplorePostsType } from '../../actions/types/exploreTypes'
 import load from '../../materials/load.gif'
-  
-  const ExplorePosts = ({
-    explorePosts = [],
-    onPost,
-    onClearExplore,
-    onExlorePosts,
-    explorePostsCount,
-    explorePostsPromise
-  }) => {
-    const [checkScroll, setScroll] = useState(true)
-    console.log('scroll ', checkScroll)
-    useEffect(() => {
-      if (checkScroll) {
-        onExlorePosts()
-      }
-      setScroll(false)
-    }, [checkScroll])
-  
-    useEffect(() => {
-      document.addEventListener('scroll', scrollHandler)
-  
-      return () => {
-        document.removeEventListener('scroll', scrollHandler)
-        onClearExplore()
-      }
-    }, [])
-    useEffect(() => {
-      document.addEventListener('scroll', scrollHandler)
-    }, [explorePosts.length])
 
-  
-    const scrollHandler = (e) => {
-      if (
-        e.target.documentElement.scrollHeight -
-          (e.target.documentElement.scrollTop + window.innerHeight) <
-        200
-      ) {
-        setScroll(true)
-        document.removeEventListener('scroll', scrollHandler)
-      }
+const ExplorePosts = ({
+  explorePosts = [],
+  onPost,
+  onClearExplore,
+  onExlorePosts,
+  explorePostsPromise,
+}) => {
+  const [checkScroll, setScroll] = useState(true)
+  useEffect(() => {
+    if (checkScroll) {
+      onExlorePosts()
+    }
+    setScroll(false)
+  }, [checkScroll])
+
+  useEffect(() => {
+    document.addEventListener('scroll', scrollHandler)
+
+    return () => {
+      document.removeEventListener('scroll', scrollHandler)
+      onClearExplore()
+    }
+  }, [])
+  useEffect(() => {
+    document.addEventListener('scroll', scrollHandler)
+  }, [explorePosts.length])
+
+  const scrollHandler = (e) => {
+    if (
+      e.target.documentElement.scrollHeight -
+        (e.target.documentElement.scrollTop + window.innerHeight) <
+      200
+    ) {
+      setScroll(true)
+      document.removeEventListener('scroll', scrollHandler)
     }
-    return (
-      <> 
-        <Row>   
-          <Col span={18} offset={4}>
-            <div
-              style={{
-                display: 'flex',
-                flexWrap: 'wrap',
-                padding: '20px',
-                margin: '20px',
-                marginTop: '50px',
-              }}
-            >
-              {(explorePosts || [])?.map((item) => (
-                <Card post={item} onPost={onPost} />
-              ))}
-                        
-            </div>
-          </Col>
-        </Row>
-      {(explorePostsPromise?.status == "PENDING") &&  
-          <img style={{ display: 'block', margin: '0 auto', marginBottom:'200px', padding: '10px' }}
-            src={load} width="100" height="100" />
-        }
-      </>
-    )
   }
-  export const CExplorePosts = connect(
-    (state) => ({
-      my_Id: state.auth?.payload?.sub?.id || '',
-      countAllPostsUser: state.promise?.countAllPostsUser?.payload,
-      explorePosts: state.explore?.explorePosts,
-      explorePostsPromise: state.promise?.explorePosts,
-      explorePostsCount: state.explore?.explorePostsCount,
-    }),
-    {
-      onExlorePosts: actionFullExplorePostsTypeSaga,
-      onPost: actionOnePost,
-      onClearExplore: actionClearExplorePostsType,
-    },
-  )(ExplorePosts)
-  
+  return (
+    <>
+      <Row>
+        <Col span={18} offset={4}>
+          <div className="Explore">
+            {(explorePosts || [])?.map((item) => (
+              <Card post={item} onPost={onPost} />
+            ))}
+          </div>
+        </Col>
+      </Row>
+      {explorePostsPromise?.status == 'PENDING' && (
+        <img className="Preloader" src={load} width="100" height="100" />
+      )}
+    </>
+  )
+}
+export const CExplorePosts = connect(
+  (state) => ({
+    my_Id: state.auth?.payload?.sub?.id || '',
+    countAllPostsUser: state.promise?.countAllPostsUser?.payload,
+    explorePosts: state.explore?.explorePosts,
+    explorePostsPromise: state.promise?.explorePosts,
+    explorePostsCount: state.explore?.explorePostsCount,
+  }),
+  {
+    onExlorePosts: actionFullExplorePostsTypeSaga,
+    onPost: actionOnePost,
+    onClearExplore: actionClearExplorePostsType,
+  },
+)(ExplorePosts)

src/pages/feedPosts/index.js

@@ -1,45 +1,34 @@
-import React, { useMemo, useState, useEffect } from 'react'
-
+import React, { useState, useEffect } from 'react'
 import { actionFullAllGetPostsSaga } from '../../actions/typeSaga/feedTypesSaga'
-import {
-  actionAddCommentFeedTypeSaga
-} from
-  '../../actions/typeSaga/commentTypesSaga'
-import {actionClearFeedPostsType} from '../../actions/types/feedTypes'
-import { Link } from 'react-router-dom'
+import { actionAddCommentFeedTypeSaga } from '../../actions/typeSaga/commentTypesSaga'
+import { actionClearFeedPostsType } from '../../actions/types/feedTypes'
 import { Provider, connect } from 'react-redux'
-import { Upload, Button, DatePicker, Space } from 'antd'
-import { Avatar, Image, Divider, Radio } from 'antd'
+import { Divider } from 'antd'
 import { CPost } from '../onePost'
 import { Row, Col } from 'antd'
 import LinkToUser from '../../components/LinkToUser'
 import { Comments } from '../../components/comment/Comment'
-import  AddComment from '../../components/comment/AddComment'
-// import { Like, Likes } from '../../components/like/Like'
+import AddComment from '../../components/comment/AddComment'
 import { MyCarousel } from '../../components/post/Carousel'
 import load from '../../materials/load.gif'
-import {
-  actionAddSubCommentTypeSaga,
-  actionFindSubCommentTypeSaga,
-} from '../../actions/typeSaga/postTypesSaga'
+import { actionFindSubCommentTypeSaga } from '../../actions/typeSaga/postTypesSaga'
 import { CLikeFeed } from '../../components/like/Like'
 const MyPostFeed = ({
-  // myData,
   postsFeed = [],
   onPostsFeed,
   addComment,
   onClearFeed,
-  postsFeedPromise
+  postsFeedPromise,
 }) => {
   const [checkScroll, setScroll] = useState(true)
 
   useEffect(() => {
     if (checkScroll) {
-       console.log('попало в новую порцию постов')
-       onPostsFeed()
+      onPostsFeed()
     }
     setScroll(false)
   }, [checkScroll])
+
   useEffect(() => {
     document.addEventListener('scroll', scrollHandler)
     return () => {
@@ -48,83 +37,87 @@ const MyPostFeed = ({
     }
   }, [])
 
-  console.log('check scroll ', checkScroll)
   useEffect(() => {
-     document.addEventListener('scroll', scrollHandler)
-     }, [postsFeed.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)
-         }
-       }
-
-  return (
+    document.addEventListener('scroll', scrollHandler)
+  }, [postsFeed.length])
 
-    <div style={{  marginTop: '50px'}}>
-      <div className="PostsFeed" >
+  const scrollHandler = (e) => {
+    if (
+      e.target.documentElement.scrollHeight -
+        (e.target.documentElement.scrollTop + window.innerHeight) <
+      200
+    ) {
+      setScroll(true)
+      document.removeEventListener('scroll', scrollHandler)
+    }
+  }
 
+  return (
+    <div style={{ marginTop: '50px' }}>
+      <div className="PostsFeed">
         <Row>
           <Col span={12} offset={6}>
             <div>
               {postsFeed?.length == 0 && (
-                <div style={{textAlign:'center'}}>
+                <div style={{ textAlign: 'center' }}>
                   <h1> You have no posts to feed! </h1>
-                  <h1>
-                    {' '}
-                    Post and follow other users!{' '}
-                    </h1>
+                  <h1> Post and follow other users! </h1>
                 </div>
               )}
               {(postsFeed || []).map(
                 ({ _id, images, title, text, owner, comments, likes }) => (
-                  <div className='PostFeed'>
-                    <LinkToUser _id={owner?._id} key={_id} style={{marginLeft:"50px"}}
-                      login={owner?.login} avatar={owner?.avatar}
-                      size={50} />
+                  <div className="PostFeed">
+                    <LinkToUser
+                      _id={owner?._id}
+                      key={_id}
+                      style={{ marginLeft: '50px' }}
+                      login={owner?.login}
+                      avatar={owner?.avatar}
+                      size={50}
+                    />
                     <MyCarousel images={images} />
-                    <div style={{margin:"0 10%"}}>
-                    <h2 className='Title'> Title: {title || ''}</h2>
-                    <h2  className='Title'> Text: {text || ''}</h2>
-                    <Divider>Comments</Divider>
-                    <div style={{ margin: '10px',position: 'relative' }}>
-                    <div className="ScrollForFeed">
-                      <CCommentsForFeed
-                        postId={_id}
-                        comments={comments}
-                      />
-                      </div>
-                      <div style={{ display: 'flex', margin: '20px 0px' }}>
-                      <CLikeFeed likes={likes} postId={_id}/>
-                  
-                          <AddComment addComment={addComment}
-                            postId={_id} style={{
-                              position: 'absolute', bottom: '70px',
-                              zIndex: '100'
+                    <div style={{ margin: '0 10%' }}>
+                      <h2 className="Title"> Title: {title || ''}</h2>
+                      <h2 className="Title"> Text: {text || ''}</h2>
+                      <Divider>Comments</Divider>
+                      <div style={{ margin: '10px', position: 'relative' }}>
+                        <div className="ScrollForFeed">
+                          <CCommentsForFeed postId={_id} comments={comments} />
+                        </div>
+                        <div style={{ display: 'flex', margin: '20px 0px' }}>
+                          <CLikeFeed likes={likes} postId={_id} />
+
+                          <AddComment
+                            addComment={addComment}
+                            postId={_id}
+                            style={{
+                              position: 'absolute',
+                              bottom: '70px',
+                              zIndex: '100',
                             }}
-                          width={'300px'}
+                            width={'300px'}
                           />
-                    
-                        </div>
                         </div>
+                      </div>
                     </div>
                   </div>
                 ),
               )}
-             
             </div>
           </Col>
         </Row>
-        {(postsFeedPromise?.status == "PENDING") &&
-                
-          <img style={{
-            display: 'block',
-            margin: '0 auto', padding: '10px'
-          }} src={load} width="100" height="100" />
-             }
+        {postsFeedPromise?.status == 'PENDING' && (
+          <img
+            style={{
+              display: 'block',
+              margin: '0 auto',
+              padding: '10px',
+            }}
+            src={load}
+            width="100"
+            height="100"
+          />
+        )}
       </div>
     </div>
   )
@@ -132,59 +125,23 @@ const MyPostFeed = ({
 
 const CCommentsForFeed = connect(
   (state) => ({
-    // postId: state.promise.onePost?.payload?._id,
     addSubComment: state.promise?.addSubComment,
     addComment: state.promise?.addComment?.payload,
-
-    // addComment: state.promise?.addComment?.payload,
-    // addSubComment: state.promise?.addSubComment,
   }),
   {
     findSubComment: actionFindSubCommentTypeSaga,
-
-    // addComment: actionAddFullCommentFeed,
-    // addCommentReply: actionAddSubFullComment,
-    // findSubComment: actionFindSubComment,
   },
 )(Comments)
 
 export const CPostForFeed = connect(
   (state) => ({
-    // myData:  state?.myData.aboutMe || '',
     postsFeed: state.feed?.postsFeed || [],
     addComment: state.promise?.addComment?.payload,
-    postsFeedPromise :state.promise?.postsFeed
+    postsFeedPromise: state.promise?.postsFeed,
   }),
   {
-
     onPostsFeed: actionFullAllGetPostsSaga,
     onClearFeed: actionClearFeedPostsType,
     addComment: actionAddCommentFeedTypeSaga,
-    // 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,
-//     // deleteLike: actionDeleteFullLikeFeed,
-//   },
-// )(AllLikeComp)

src/pages/header/index.js

@@ -1,6 +1,6 @@
 import { CLogout } from '../../components/authorization/LogOut'
 import { CSearch } from '../../components/Search_Users'
-import { Feed, AddPost, Explore, CUser } from '../../components/HeaderButtons'
+import { Feed, AddPost, Explore, CUser } from '../../components/buttons/HeaderButtons'
 import { connect } from 'react-redux'
 import { Row, Col } from 'antd'
 

src/pages/login/index.js

@@ -1,52 +1,50 @@
-import { CRegisterForm } from "../../components/authorization/RegisterForm"
-import { CLoginForm } from "../../components/authorization/LoginForm"
-import  logo from '../../materials/logo3.png'
-import { Button, Input, Checkbox, Form, Row, Col } from 'antd'
-import { connect } from 'react-redux'
+import { CRegisterForm } from '../../components/authorization/RegisterForm'
+import { CLoginForm } from '../../components/authorization/LoginForm'
+import logo from '../../materials/login.png'
+import { Row, Col } from 'antd'
 import { Link } from 'react-router-dom'
 
-export const LoginPageForm = () => 
+export const LoginPageForm = () => (
+  <div className="InputForm">
+    <Row>
+      <Col span={12}>
+        <img className="LoginPage" src={logo} />
+      </Col>
 
-        <div className="InputForm">
-          <Row>
-            <Col span={12}>
-              <img className="LoginPage" src={logo} />
-            </Col>
-    
-            <Col span={12}>
-              <div className="LoginForm">
-                        <CLoginForm />
-     
-                        <h2>
-                    Don't have an account yet?
-            <Link to="/register" className="Link"
-             >Register</Link>
-                  </h2>
-            
-              </div>
-            </Col>
-          </Row>
-    </div>
-        
+      <Col span={12}>
+        <div className="LoginForm">
+          <CLoginForm />
 
-export const RegisterPageForm = () => 
+          <h2>
+            Don't have an account yet?
+            <Link to="/register" className="Link">
+              Register
+            </Link>
+          </h2>
+        </div>
+      </Col>
+    </Row>
+  </div>
+)
+
+export const RegisterPageForm = () => (
+  <div className="InputForm">
+    <Row>
+      <Col span={12}>
+        <img className="LoginPage" src={logo} />
+      </Col>
 
-        <div className="InputForm">
-          <Row>
-            <Col span={12}>
-              <img className="LoginPage" src={logo} />
-            </Col>
-    
-            <Col span={12}>
-              <div className="LoginForm">
-                        <CRegisterForm />
-                        <h2>
-                   Have an account?
-                    <Link to="/login"
-                   className="Link">Login</Link>
-                  </h2>
-               
-          </div>
-            </Col>
-          </Row>
+      <Col span={12}>
+        <div className="LoginForm">
+          <CRegisterForm />
+          <h2>
+            Have an account?
+            <Link to="/login" className="Link">
+              Login
+            </Link>
+          </h2>
         </div>
+      </Col>
+    </Row>
+  </div>
+)

src/pages/onePost/index.js

@@ -4,18 +4,20 @@ 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, CCommentsOnePost } from '../../components/comment/Comment'
+import { CCommentsOnePost } from '../../components/comment/Comment'
 import { CPostEditor } from '../createAndEditPost'
-import  AddComment from '../../components/comment/AddComment'
-import { actionFullOnePostSaga,actionAddFullCommentSaga } from '../../actions/typeSaga/postTypesSaga'
-import { CLike} from '../../components/like/Like'
+import AddComment from '../../components/comment/AddComment'
+import {
+  actionFullOnePostSaga,
+  actionAddFullCommentSaga,
+} from '../../actions/typeSaga/postTypesSaga'
+import { CLike } from '../../components/like/Like'
 import { ConstructorModal } from '../../helpers'
 import React, { useState, useEffect } from 'react'
 
 import { LinkToUser } from '../../components/LinkToUser'
 import { MyCarousel } from '../../components/post/Carousel'
-import {EditMyPostButton} from '../../components/EditPostButton'
-
+import { EditMyPostButton } from '../../components/buttons/EditPostButton'
 
 export const PagePost = ({
   my_Id,
@@ -24,19 +26,17 @@ export const PagePost = ({
   match: {
     params: { _id },
   },
-  aboutUser = {},
   onPost,
 }) => {
   const [isModalVisible, setIsModalVisible] = useState(false)
   useEffect(() => {
     onPost(_id)
-    console.log('ONE POST _ID', onePost?._id)
   }, [_id])
 
   return (
     <>
       <Row>
-        <Col span={14} style={{marginTop:'100px'}}>
+        <Col span={14} style={{ marginTop: '100px' }}>
           <ConstructorModal
             title={'Edit post'}
             isModalVisible={isModalVisible}
@@ -45,7 +45,8 @@ export const PagePost = ({
             <CPostEditor />
           </ConstructorModal>
 
-          <MyCarousel key={onePost?._id}
+          <MyCarousel
+            key={onePost?._id}
             style={{ position: 'absolute' }}
             images={onePost?.images}
           />
@@ -55,13 +56,21 @@ export const PagePost = ({
           </h3>
         </Col>
         <Col span={8}>
-          <div style={{ display: 'flex', flexDirection: 'row', marginTop:'100px' }}>
+          <div
+            style={{
+              display: 'flex',
+              flexDirection: 'row',
+              marginTop: '100px',
+            }}
+          >
             <LinkToUser
               _id={onePost?.owner?._id}
               login={onePost?.owner?.login}
               avatar={onePost?.owner?.avatar}
               key={_id}
-            size={50} padding={'0px'} />
+              size={50}
+              padding={'0px'}
+            />
             <Row span={1}>
               {my_Id === onePost?.owner?._id && <EditMyPostButton _id={_id} />}
             </Row>
@@ -73,18 +82,20 @@ export const PagePost = ({
           <h2> Text: {onePost?.text || ''} </h2>
           <Divider>Comments</Divider>
           <div className="Scroll">
-
-            <CCommentsOnePost/>
+            <CCommentsOnePost />
           </div>
           <div style={{ display: 'flex', margin: '20px 0px' }}>
             <CLike likes={onePost?.likes} postId={onePost?._id} />
-            <AddComment addComment={addComment}
+            <AddComment
+              addComment={addComment}
               style={{
                 position: 'absolute',
-                bottom: "120px", right: "30px"
+                bottom: '120px',
+                right: '30px',
               }}
               width={'40%'}
-              postId={onePost?._id} />
+              postId={onePost?._id}
+            />
           </div>
         </Col>
       </Row>
@@ -100,8 +111,6 @@ export const CPost = connect(
   }),
   {
     addComment: actionAddFullCommentSaga,
-    // addCommentReply: actionAddSubFullComment,
     onPost: actionFullOnePostSaga,
   },
 )(PagePost)
-

src/pages/profilePage/index.js

@@ -1,18 +1,19 @@
-import {actionOnePost} from '../../actions/query/postQuery'
+import { actionOnePost } from '../../actions/query/postQuery'
 import user from '../../materials/user.png'
 import React, { useState, useEffect } from 'react'
 import { Card } from '../../components/post/PostCard'
 import ListOfUsers from '../../components/ListOfUsers'
 import { connect } from 'react-redux'
-import { Avatar, Button } from 'antd'
-import { actionFullProfilePageUserTypeSaga } from '../../actions/typeSaga/userTypesSaga'
+import { Avatar } from 'antd'
+import {
+  actionFullProfilePageUserTypeSaga,
+  actionPostsPortionTypeSaga,
+} from '../../actions/typeSaga/userTypesSaga'
+import { actionClearAllPostsType } from '../../actions/types/postTypes'
 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: {
     params: { _id },
@@ -25,16 +26,15 @@ export const PageAboutUser = ({
   countPosts,
   onClearPosts,
   onUserPosts,
-  userPostPromise
+  userPostPromise,
 }) => {
   const [checkScroll, setScroll] = useState(true)
   useEffect(() => {
     onAboutUser(_id)
-    }, [_id])
+  }, [_id])
 
   useEffect(() => {
     if (checkScroll) {
-      console.log('попало в новую порцию постов')
       onUserPosts(_id)
     }
     setScroll(false)
@@ -47,19 +47,20 @@ export const PageAboutUser = ({
     }
   }, [])
 
-  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)
-         }
-       }
+    document.addEventListener('scroll', scrollHandler)
+  }, [allPosts?.length])
+
+  const scrollHandler = (e) => {
+    if (
+      e.target.documentElement.scrollHeight -
+        (e.target.documentElement.scrollTop + window.innerHeight) <
+      200
+    ) {
+      setScroll(true)
+      document.removeEventListener('scroll', scrollHandler)
+    }
+  }
 
   const checkMyId = _id === my_Id
   return (
@@ -116,19 +117,15 @@ export const PageAboutUser = ({
                   />
 
                   <ListOfUsers
-                   listResult={following}
-                   listUsers={following}
-                  onPageData={onAboutUser}
+                    listResult={following}
+                    listUsers={following}
+                    onPageData={onAboutUser}
                     text={'following'}
                   />
                 </div>
-                <h3> nick: {nick == null ? login : nick}</h3>  
-              
-                {checkMyId ? 
-                   <CEditSetting />
-                  : 
-                  <CSubscribe />
-                  }
+                <h3> nick: {nick == null ? login : nick}</h3>
+
+                {checkMyId ? <CEditSetting /> : <CSubscribe />}
               </div>
             </Row>
           </section>
@@ -140,7 +137,6 @@ export const PageAboutUser = ({
             style={{
               display: 'flex',
               flexWrap: 'wrap',
-              // padding: '20px',
               margin: '20px',
             }}
           >
@@ -150,13 +146,9 @@ 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" />
-        }
+      {userPostPromise?.status == 'PENDING' && (
+        <img className="Preloader" src={load} width="100" height="100" />
+      )}
     </>
   )
 }
@@ -167,13 +159,12 @@ export const CPageAboutUser = connect(
     aboutUser: state.userData?.aboutUser,
     countPosts: state?.promise?.countPosts?.payload,
     allPosts: state.userData?.allPosts,
-    userPostPromise:state.promise?.allPosts
+    userPostPromise: state.promise?.allPosts,
   }),
   {
     onAboutUser: actionFullProfilePageUserTypeSaga,
     onPost: actionOnePost,
     onClearPosts: actionClearAllPostsType,
-    onUserPosts:actionPostsPortionTypeSaga
-    // onPageData: actionFullProfilePageUser,
+    onUserPosts: actionPostsPortionTypeSaga,
   },
 )(PageAboutUser)

src/pages/setting/index.js

@@ -1,12 +1,10 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState } from 'react'
 import { CEditAvatar } from '../../components/EditAvatar'
 import { CustomInput } from '../../components/Input'
-import { message, Image, Button } from 'antd'
+import { message, Button } from 'antd'
 import { connect } from 'react-redux'
-import {
-  actionChangePassword,
-} from '../../actions/query/aboutMeQuery'
-import {actionClearPromiseForName} from '../../actions/types/promiseTypes'
+import { actionChangePassword } from '../../actions/query/aboutMeQuery'
+import { actionClearPromiseForName } from '../../actions/types/promiseTypes'
 import { Basic, ConstructorModal } from '../../helpers'
 import { SpoilerButton } from '../../components/comment/SpoilerButton'
 import { actionUserUpdateTypeSaga } from '../../actions/typeSaga/myDataTypesSaga'
@@ -31,7 +29,6 @@ const EditSetting = ({
   info,
   myId,
   onSaveUserUpsert,
-  onClearPromise,
   onSaveNewPassword,
   changePassword,
 }) => {
@@ -41,8 +38,6 @@ const EditSetting = ({
   const [checked1, setChecked1] = useState(true)
   const [checked2, setChecked2] = useState(true)
 
-  console.log('checked ', checked2)
-
   const showModalEdit = () => {
     setIsModalVisibleEdit(true)
   }
@@ -78,7 +73,6 @@ const EditSetting = ({
     onSaveUserUpsert(state, myId) &&
       message.success(`Successfully saved changed new login!`) &&
       setIsModalVisibleEdit(false)
-    // &&onClearPromise('userUpsert')
   }
   const saveNewPassword = () => {
     onSaveNewPassword(
@@ -88,11 +82,9 @@ const EditSetting = ({
     )
     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)
@@ -126,7 +118,7 @@ const EditSetting = ({
               size="large"
               style={{ margin: '10px' }}
               onClick={saveChange}
-              disabled={state?.login ? false : true}
+              disabled={state?.login && state?.login.length >= 5 ? false : true}
               type="primary"
             >
               {' '}
@@ -150,7 +142,7 @@ const EditSetting = ({
             />
             <Button
               style={{ margin: '10px' }}
-              disabled={state?.nick ? false : true}
+              disabled={state?.nick && state?.nick.length >= 5 ? false : true}
               onClick={saveChange}
               size="large"
               type="primary"
@@ -201,7 +193,6 @@ const EditSetting = ({
               />
             )}
           </div>
-          {console.log('ckeck тутааа', checked1)}
           <h3> New password</h3>
           <div
             style={{
@@ -212,12 +203,10 @@ const EditSetting = ({
           >
             <CustomInput
               state={changePass?.newPassword || ''}
-              // type={checkEye1 ? 'password' : 'text'}
               checked={checked2}
-
               onChangeText={onChangePassNew}
             />
-               {checked2 ? (
+            {checked2 ? (
               <EyeInvisibleOutlined
                 onClick={() => setChecked2(!checked2)}
                 style={{ marginLeft: '5px', fontSize: 'xx-large' }}
@@ -241,7 +230,9 @@ const EditSetting = ({
               disabled={
                 changePass?.login &&
                 changePass?.password &&
-                changePass?.newPassword
+                /(?=.*[0-9])(?=.*[!@#$%^&*])(?=.*[a-z])(?=.*[A-Z])[0-9!@#$%^&*a-zA-Z]{8,}/g.test(
+                  changePass?.newPassword,
+                )
                   ? false
                   : true
               }

src/redux/reducers/authReducer.js

@@ -1,26 +1,25 @@
 export function authReducer(state, { type, token }) {
-    if (state === undefined && localStorage.authToken) {
-      token = localStorage.authToken
-      type = 'AUTH_LOGIN'
-    }
-    if (type === 'AUTH_LOGIN') {
-      if (jwtDecode(token)) {
-        localStorage.authToken = token
-        return { token, payload: jwtDecode(token) }
-      }
-    }
-    if (type === 'AUTH_LOGOUT') {
-      localStorage.authToken = ''
-      return {}
+  if (state === undefined && localStorage.authToken) {
+    token = localStorage.authToken
+    type = 'AUTH_LOGIN'
+  }
+  if (type === 'AUTH_LOGIN') {
+    if (jwtDecode(token)) {
+      localStorage.authToken = token
+      return { token, payload: jwtDecode(token) }
     }
-    return state || {}
+  }
+  if (type === 'AUTH_LOGOUT') {
+    localStorage.authToken = ''
+    return {}
+  }
+  return state || {}
 }
-  
-  const jwtDecode = (token) => {
-    try {
-      return JSON.parse(atob(token.split('.')[1]))
-    } catch (e) {
-      return null
-    }
+
+const jwtDecode = (token) => {
+  try {
+    return JSON.parse(atob(token.split('.')[1]))
+  } catch (e) {
+    return null
   }
-  
+}

src/redux/reducers/exploreReducer.js

@@ -1,36 +1,47 @@
-
 export const exploreReducer = (
-    state = {},
-    { skip, type, newPosts = [],explorePostsCount, postId, explorePosts, postsFeedCount,newPostsExploreCount, newResult },
-  ) => {
-    const types = {
-      'ADD-EXPLORE-POSTS': () => {
-        return {
-          ...state,
-          explorePosts: state?.explorePosts ? [...state.explorePosts, ...newPosts] : [...newPosts],
-          explorePostsCount: explorePostsCount ? explorePostsCount : newPostsExploreCount
-        }
-      },
-      'EXPLORE-COUNT': () => {
-        return {
-          ...state,
-          explorePostsCount: explorePostsCount ? explorePostsCount : newPostsExploreCount,
-        }
-      },
-      'EXPLORE-POSTS': () => {
-        return {
-          ...state,
-          explorePosts: explorePosts ,
-        }
-      },
-      'CLEAR_EXPLORE_POSTS': () => ({
+  state = {},
+  {
+    type,
+    newPosts = [],
+    explorePostsCount,
+    explorePosts,
+    newPostsExploreCount,
+  },
+) => {
+  const types = {
+    'ADD-EXPLORE-POSTS': () => {
+      return {
         ...state,
-        explorePosts: [],
-        explorePostsCount: 0,
+        explorePosts: state?.explorePosts
+          ? [...state.explorePosts, ...newPosts]
+          : [...newPosts],
+        explorePostsCount: explorePostsCount
+          ? explorePostsCount
+          : newPostsExploreCount,
+      }
+    },
+    'EXPLORE-COUNT': () => {
+      return {
+        ...state,
+        explorePostsCount: explorePostsCount
+          ? explorePostsCount
+          : newPostsExploreCount,
+      }
+    },
+    'EXPLORE-POSTS': () => {
+      return {
+        ...state,
+        explorePosts: explorePosts,
+      }
+    },
+    'CLEAR_EXPLORE_POSTS': () => ({
+      ...state,
+      explorePosts: [],
+      explorePostsCount: 0,
     }),
-    }
-    if (type in types) {
-      return types[type]()
-    }
-    return state
+  }
+  if (type in types) {
+    return types[type]()
+  }
+  return state
 }

src/redux/reducers/feedReducer.js

@@ -1,51 +1,58 @@
-
 export const feedReducer = (
-    state = {},
-    { skip, type, newPosts = [], postId, postsFeed, postsFeedCount,newPostsFeedCount, newResult },
-  ) => {
-    const types = {
-      'ADD-POSTS': () => {
-        return {
-          ...state,
-          postsFeed: state?.postsFeed ? [...state.postsFeed, ...newPosts] : [...newPosts],
-          postsFeedCount: postsFeedCount ? postsFeedCount : newPostsFeedCount
-        }
-      },
-      'COUNT': () => {
-        return {
-          ...state,
-          postsFeedCount: postsFeedCount,
-        }
-      },
-      'POSTS': () => {
-        return {
-          ...state,
-          postsFeed: postsFeed ,
-        }
-      },
-      'CLEAR_POSTS': () => ({
-
-        postsFeed: [],
-        postsFeedCount: 0,
-    }),
-  
-      'LIKE_POST_FEED': () => ({
+  state = {},
+  {
+    type,
+    newPosts = [],
+    postId,
+    postsFeed,
+    postsFeedCount,
+    newPostsFeedCount,
+    newResult,
+  },
+) => {
+  const types = {
+    'ADD-POSTS': () => {
+      return {
         ...state,
-        postsFeed: postsFeed?.map((p) =>
-          p._id === postId ? (p = { ...p, likes: [...newResult] }) : p,
-        ),
-      }),
-      'ADD_COMMENT_POSTS': () => ({
+        postsFeed: state?.postsFeed
+          ? [...state.postsFeed, ...newPosts]
+          : [...newPosts],
+        postsFeedCount: postsFeedCount ? postsFeedCount : newPostsFeedCount,
+      }
+    },
+    'COUNT': () => {
+      return {
         ...state,
-        
-        postsFeed: postsFeed?.map((p) =>
-          p._id === postId ? (p = { ...p, comments: [...newResult] }) : p,
-        ),
-      }),
-    }
-    if (type in types) {
-      return types[type]()
-    }
-    return state
-}
+        postsFeedCount: postsFeedCount,
+      }
+    },
+    'POSTS': () => {
+      return {
+        ...state,
+        postsFeed: postsFeed,
+      }
+    },
+    'CLEAR_POSTS': () => ({
+      postsFeed: [],
+      postsFeedCount: 0,
+    }),
+
+    'LIKE_POST_FEED': () => ({
+      ...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) {
+    return types[type]()
+  }
+  return state
+}

src/redux/reducers/postReducer.js

@@ -1,22 +1,4 @@
-
-const addAnswers = (comments, commentId, newResult) =>
-comments.map(comment => {
-  if (comment._id === commentId)
-  {
-        return { ...comment, 'answers': newResult }
-  }
-  else if (comment?.answers?.length) {
-        return {
-            ...comment,
-            answers: addAnswers(comment.answers, commentId, newResult)
-        }
-  }
-  else {
-        return { ...comment }
-  }
-  
-})
-
+import { addAnswers } from "../../actions/types/commentTypes"
 export const postReducer = (
     state = {},
     { type, onePost,newResult, commentId},

src/redux/reducers/promiseReducer.js

@@ -1,23 +1,23 @@
-export function promiseReducer(state = {}, { type, name, status, payload, error }) {
- 
-    if (type === 'PROMISE') {
-      return {
-        ...state,
-        [name]: { status, payload, error },
-      }
+export function promiseReducer(
+  state = {},
+  { type, name, status, payload, error },
+) {
+  if (type === 'PROMISE') {
+    return {
+      ...state,
+      [name]: { status, payload, error },
     }
-    if (type === 'PROMISE_CLEAR') {
-      return {
-        ...state,
-        [name]: null,
-      }
   }
-  if (type === 'PROMISE_All_CLEAR') {
+  if (type === 'PROMISE_CLEAR') {
     return {
-      state:null
-     
+      ...state,
+      [name]: null,
     }
   }
-    return state
+  if (type === 'PROMISE_All_CLEAR') {
+    return {
+      state: null,
+    }
   }
-  
+  return state
+}

src/redux/reducers/userProfileReducer.js

@@ -1,100 +1,68 @@
-
 export const userProfileReducer = (
-    state = {},
-    { type, aboutUser, allPosts, newPosts,newResult, newPostsCount, countPosts },
-  ) => {
-    const types = {
-      'PROFILE-PAGE-USER': () => {
-        return {
-          ...state,
-          aboutUser,
-        }
-      },
+  state = {},
+  { type, aboutUser, allPosts, newPosts, newResult, newPostsCount, countPosts },
+) => {
+  const types = {
+    'PROFILE-PAGE-USER': () => {
+      return {
+        ...state,
+        aboutUser,
+      }
+    },
 
-      'USER-POSTS': () => {
-        return {
-          ...state,
-          allPosts,
-        }
-      },
-      'ADD-USER-POSTS': () => {
-        return {
-          ...state,
-          allPosts: state?.allPosts ? [...state.allPosts, ...newPosts] : [...newPosts],
-          countPosts: countPosts ? countPosts : newPostsCount
-        }
-      },
-      
-      'CLEAR-DATA': () => {
-        return {
-          aboutUser: {},
-          allPosts: [],
-        }
-      },
-      'CHANGE-AVATAR-USER': () => {
-        return {
-          ...state,
-          aboutUser,
-        }
-      },
-      'CLEAR_ALL_POSTS': () => {
-        
-        return {
-          ...state,
-          allPosts:[]
-        }
-      },
-      'COUNT_ALL_POSTS': () => {
-        
-        return {
-          ...state,
-          countPosts: countPosts ? countPosts : state.countPosts
+    'USER-POSTS': () => {
+      return {
+        ...state,
+        allPosts,
+      }
+    },
+    'ADD-USER-POSTS': () => {
+      return {
+        ...state,
+        allPosts: state?.allPosts
+          ? [...state.allPosts, ...newPosts]
+          : [...newPosts],
+        countPosts: countPosts ? countPosts : newPostsCount,
+      }
+    },
 
-        }
-      },
-      'UPDATE_FOLLOWERS': () => {
-        return {
-          ...state,
-          aboutUser: ({
-            ...state.aboutUser,
-            followers: [...newResult]
-          })
-        }
+    'CLEAR-DATA': () => {
+      return {
+        aboutUser: {},
+        allPosts: [],
       }
-}
-  
-    if (type in types) {
-      return types[type]()
-    }
-    return state
+    },
+    'CHANGE-AVATAR-USER': () => {
+      return {
+        ...state,
+        aboutUser,
+      }
+    },
+    'CLEAR_ALL_POSTS': () => {
+      return {
+        ...state,
+        allPosts: [],
+      }
+    },
+    'COUNT_ALL_POSTS': () => {
+      return {
+        ...state,
+        countPosts: countPosts ? countPosts : state.countPosts,
+      }
+    },
+    'UPDATE_FOLLOWERS': () => {
+      return {
+        ...state,
+        aboutUser: {
+          ...state.aboutUser,
+          followers: [...newResult],
+        },
+      }
+    },
   }
-  
-  export const actionAvatarUpdate = (aboutUser) => ({
-    type: 'CHANGE-AVATAR-USER',
-    aboutUser,
-})
-export const actionProfilePageDataTypeUser = (aboutUser) => ({
-  type: 'PROFILE-PAGE-USER',
-  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 actionClearAllPostsType= () =>
-  ({ type: 'CLEAR_ALL_POSTS' })
-
-export const actionClearDataUserType = () =>
-  ({ type: 'CLEAR-DATA' })
-  
-  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})
+  if (type in types) {
+    return types[type]()
+  }
+  return state
+}

src/redux/saga/comment/index.js

@@ -1,73 +1,79 @@
-import { all, put,take, fork, takeEvery, takeLatest, takeLeading, select,call, join } from 'redux-saga/effects'; //
-import { promiseWorker } from '../promise';
+import { put, takeEvery, takeLeading, select, call } from 'redux-saga/effects' //
+import { promiseWorker } from '../promise'
 import {
-    actionAddComment, actionGetCommentsOnePost,
-    actionAddSubComment, actionFindSubComment
+  actionAddComment,
+  actionGetCommentsOnePost,
+  actionAddSubComment,
+  actionFindSubComment,
 } from '../../../actions/query/commentQuery'
 import { actionOnePost } from '../../../actions/query/postQuery'
-import {actionAddCommentPostFeedType, actionAddCommentType, actionAddSubCommentType} from '../../../actions/types/commentTypes'
+import {
+  actionAddCommentPostFeedType,
+  actionAddCommentType,
+  actionAddSubCommentType,
+} from '../../../actions/types/commentTypes'
 
-// actionAddCommentFeedTypeSaga
 function* addCommentOnePostWorker({ 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 (actionAddCommentType(comments))
-    }
-  }
-  export function* addCommentOnePostWatcher(){
-    yield takeLeading("ONE_POST_COMMENT",addCommentOnePostWorker)
+  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(actionAddCommentType(comments))
   }
+}
+export function* addCommentOnePostWatcher() {
+  yield takeLeading('ONE_POST_COMMENT', addCommentOnePostWorker)
+}
 
-  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 (actionAddCommentPostFeedType(postId,comments))
-    }
+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(actionAddCommentPostFeedType(postId, comments))
   }
-  export function* addCommentFeedWatcher(){
-    yield takeLeading("FEED_POST_COMMENT",addCommentFeedWorker)
+}
+export function* addCommentFeedWatcher() {
+  yield takeLeading('FEED_POST_COMMENT', addCommentFeedWorker)
 }
 function* addSubCommentWorker({ commentId, newResult }) {
-    yield call(promiseWorker, actionAddSubComment(commentId, newResult))
-    console.log('newResult ', newResult)
-    const {
-      promise: {
-        addSubComment: { status },
-      },
-    } = yield select()
-    if (status === 'FULFILLED') {
-      yield call(getSubCommentWorker, {commentId})
-      }
-    }
-  
-  export function* addSubCommentWatcher() {
-    yield takeEvery("POST_SUB_COMMENT", addSubCommentWorker)
+  yield call(promiseWorker, actionAddSubComment(commentId, newResult))
+  const {
+    promise: {
+      addSubComment: { status },
+    },
+  } = yield select()
+  if (status === 'FULFILLED') {
+    yield call(getSubCommentWorker, { commentId })
   }
-  function* getSubCommentWorker({ commentId }) {
-    const { answers } = yield call(promiseWorker,
-      actionFindSubComment(commentId))
-    if (answers) {
-        yield put(actionAddSubCommentType(commentId, answers))
-    }
+}
+
+export function* addSubCommentWatcher() {
+  yield takeEvery('POST_SUB_COMMENT', addSubCommentWorker)
+}
+function* getSubCommentWorker({ commentId }) {
+  const { answers } = yield call(promiseWorker, actionFindSubComment(commentId))
+  if (answers) {
+    yield put(actionAddSubCommentType(commentId, answers))
   }
-  
-  export function* getSubCommentWatcher() {
-    yield takeEvery("GET_SUB_COMMENT", getSubCommentWorker)
-  }
+}
+
+export function* getSubCommentWatcher() {
+  yield takeEvery('GET_SUB_COMMENT', getSubCommentWorker)
+}

src/redux/saga/explore/index.js

@@ -1,27 +1,29 @@
-
- import { all, put,take, fork, takeEvery, takeLatest, takeLeading, select,call, join } from 'redux-saga/effects'; //
- import { promiseWorker } from '../promise';
-import {actionExplorePostsCount,actionExplorePosts } from '../../../actions/query/exploreQuery'
+import { put, takeLeading, select, call } from 'redux-saga/effects' //
+import { promiseWorker } from '../promise'
+import {
+  actionExplorePostsCount,
+  actionExplorePosts,
+} from '../../../actions/query/exploreQuery'
 import { actionExploreType } from '../../../actions/types/exploreTypes'
 function* exploreWorker() {
-    const {
-      explore: { explorePosts, explorePostsCount },
-    } = yield select()
-    console.log('explorePosts', explorePosts)
-  
-    if (explorePosts?.length !== (explorePostsCount ? explorePostsCount : 1)) {
-      console.log('explorePosts', explorePosts)
-  
-      const newPosts = yield call(promiseWorker,
-        actionExplorePosts(explorePosts?.length))
-  
-      console.log('newPosts', newPosts)
-  
-      const newPostsExploreCount = yield call(promiseWorker, (actionExplorePostsCount()))
-      if (newPosts && newPostsExploreCount)
-        yield put(actionExploreType(newPosts, newPostsExploreCount))
-    }
+  const {
+    explore: { explorePosts, explorePostsCount },
+  } = yield select()
+
+  if (explorePosts?.length !== (explorePostsCount ? explorePostsCount : 1)) {
+    const newPosts = yield call(
+      promiseWorker,
+      actionExplorePosts(explorePosts?.length),
+    )
+    
+    const newPostsExploreCount = yield call(
+      promiseWorker,
+      actionExplorePostsCount(),
+    )
+    if (newPosts && newPostsExploreCount)
+      yield put(actionExploreType(newPosts, newPostsExploreCount))
   }
-  export function* exploreWatcher() {
-    yield takeLeading("EXPLORE_POSTS", exploreWorker)
-  }
+}
+export function* exploreWatcher() {
+  yield takeLeading('EXPLORE_POSTS', exploreWorker)
+}

src/redux/saga/like/index.js

@@ -1,7 +1,14 @@
-import { put, call, takeLeading} from 'redux-saga/effects'; 
-import { actionAddLike,actionDeleteLike,actionFindLikes } from '../../../actions/query/likeQuery';
-import {actionChangeLikeType,actionAddLikePostFeedType} from '../../../actions/types/likeTypes'
-import { promiseWorker } from "../promise";
+import { put, call, takeLeading } from 'redux-saga/effects'
+import {
+  actionAddLike,
+  actionDeleteLike,
+  actionFindLikes,
+} from '../../../actions/query/likeQuery'
+import {
+  actionChangeLikeType,
+  actionAddLikePostFeedType,
+} from '../../../actions/types/likeTypes'
+import { promiseWorker } from '../promise'
 
 function* changeLikeWorker({ likeId, postId }) {
   const changeOneLike = () =>

src/redux/saga/logOut/index.js

@@ -1,25 +1,22 @@
-
-import { put, takeEvery,all } from 'redux-saga/effects'; 
+import { put, takeEvery, all } from 'redux-saga/effects'
 import { actionClearDataUserType } from '../../../actions/types/userTypes'
 import { actionClearFeedPostsType } from '../../../actions/types/feedTypes'
 import { actionAllClearPromiseType } from '../../../actions/types/promiseTypes'
 import { actionClearAboutMeType } from '../../../actions/types/myDataTypes'
 import { actionAuthLogout } from '../../../actions/types/loginTypes'
-import history from '../../../helpers/history';
-  function* clearAllDataWorker() {
-    const logOut = yield put (actionAuthLogout())
-    if (logOut) {
-      history.push('/input')
-      yield all([
-  
-         put(actionClearDataUserType()),
-         put(actionClearFeedPostsType()),
-         put(actionClearAboutMeType()),
-         put(actionAllClearPromiseType())
-      ])
-        
-    }
+import history from '../../../helpers/history'
+function* clearAllDataWorker() {
+  const logOut = yield put(actionAuthLogout())
+  if (logOut) {
+    history.push('/input')
+    yield all([
+      put(actionClearDataUserType()),
+      put(actionClearFeedPostsType()),
+      put(actionClearAboutMeType()),
+      put(actionAllClearPromiseType()),
+    ])
   }
-  export function* clearAllDataWatcher() {
-    yield takeEvery("CLEAR_ALL_DATA", clearAllDataWorker)
-  }
+}
+export function* clearAllDataWatcher() {
+  yield takeEvery('CLEAR_ALL_DATA', clearAllDataWorker)
+}

src/redux/saga/login/index.js

@@ -1,13 +1,13 @@
-import { promiseWorker } from "../promise";
-import { put, takeEvery,call } from 'redux-saga/effects'; 
-import { actionAuthLogin } from '../../../actions/types/loginTypes';
-import { actionLogin } from "../../../actions/query/loginQuery";
-export function* loginWorker({ login, password }) { 
-    let token = yield call(promiseWorker,actionLogin(login, password)) 
-    if (token) {
-        yield put(actionAuthLogin(token));
-    }
+import { promiseWorker } from '../promise'
+import { put, takeEvery, call } from 'redux-saga/effects'
+import { actionAuthLogin } from '../../../actions/types/loginTypes'
+import { actionLogin } from '../../../actions/query/loginQuery'
+export function* loginWorker({ login, password }) {
+  let token = yield call(promiseWorker, actionLogin(login, password))
+  if (token) {
+    yield put(actionAuthLogin(token))
   }
-  export function* loginWatcher() {
-  yield takeEvery("FULL_LOGIN", loginWorker)
-  }
+}
+export function* loginWatcher() {
+  yield takeEvery('FULL_LOGIN', loginWorker)
+}

src/redux/saga/myProfile/index.js

@@ -1,50 +1,65 @@
-import { promiseWorker } from "../promise";
-import { put, takeEvery, call, select } from 'redux-saga/effects'; 
-import { actionProfilePageDataType,actionUpdateAvatarType } from '../../../actions/types/myDataTypes'
-import { actionAboutMe, actionUserUpsert, actionAvatar, actionGetAvatar } from "../../../actions/query/aboutMeQuery";
-import {fullPageAboutUserWorker} from '../userProfile'
+import { promiseWorker } from '../promise'
+import { put, takeEvery, call, select } from 'redux-saga/effects'
+import {
+  actionProfilePageDataType,
+  actionUpdateAvatarType,
+} from '../../../actions/types/myDataTypes'
+import {
+  actionAboutMe,
+  actionUserUpsert,
+  actionAvatar,
+  actionGetAvatar,
+} from '../../../actions/query/aboutMeQuery'
+import { fullPageAboutUserWorker } from '../userProfile'
 export function* fullProfilePageWorker() {
-    const { auth } = yield select()
-    if (auth?.payload?.sub?.id) {
-      const aboutMe = yield call(promiseWorker, actionAboutMe(auth?.payload?.sub.id))
-      if (aboutMe) {
-        yield put(actionProfilePageDataType(aboutMe))
-      
-      }
+  const { auth } = yield select()
+  if (auth?.payload?.sub?.id) {
+    const aboutMe = yield call(
+      promiseWorker,
+      actionAboutMe(auth?.payload?.sub.id),
+    )
+    if (aboutMe) {
+      yield put(actionProfilePageDataType(aboutMe))
     }
+  }
 }
 export function* fullProfilePageWatcher() {
-    yield takeEvery("FULLPROFILE_PAGE", fullProfilePageWorker)
-  }
-  
+  yield takeEvery('FULLPROFILE_PAGE', fullProfilePageWorker)
+}
+
 function* userUpdateWorker({ user }) {
-    const {myData:{aboutMe:{_id}}}= yield select()
-    const userUpsert = yield call(promiseWorker, actionUserUpsert(user, _id))
-    if (userUpsert) {
-      yield call(fullPageAboutUserWorker, { _id })
-     yield call(fullProfilePageWorker)
-    }
+  const {
+    myData: {
+      aboutMe: { _id },
+    },
+  } = yield select()
+  const userUpsert = yield call(promiseWorker, actionUserUpsert(user, _id))
+  if (userUpsert) {
+    yield call(fullPageAboutUserWorker, { _id })
+    yield call(fullProfilePageWorker)
+  }
 }
 export function* userUpdateWatcher() {
-  yield takeEvery("USER_UPDATE", userUpdateWorker)
+  yield takeEvery('USER_UPDATE', userUpdateWorker)
 }
 
-
-
 function* setAvatarWorker({ file }) {
-  const {myData:{aboutMe:{_id}}}= yield select()
+  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))
+  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"))
-
   }
 }
 
 export function* setAvatarWatcher() {
-  yield takeEvery("SET_AVATAR", setAvatarWorker)
-}
+  yield takeEvery('SET_AVATAR', setAvatarWorker)
+}

src/redux/saga/post/index.js

@@ -1,53 +1,58 @@
-import { promiseWorker } from "../promise";
-import { put, takeLeading, takeEvery,call, select } from 'redux-saga/effects'; 
-import {actionAboutUser, actionAllPostsUser, actionPostsCount} from '../../../actions/query/aboutUserQuery'
-import { actionOnePost,actionPostUpsert } from '../../../actions/query/postQuery'
-import {actionPostsType,actionOnePostType} from '../../../actions/types/postTypes'
-import {actionClearPromiseForName} from '../../../actions/types/promiseTypes'
+import { promiseWorker } from '../promise'
+import { put, takeLeading, takeEvery, call, select } from 'redux-saga/effects'
+import {
+  actionAllPostsUser,
+  actionPostsCount,
+} from '../../../actions/query/aboutUserQuery'
+import {
+  actionOnePost,
+  actionPostUpsert,
+} from '../../../actions/query/postQuery'
+import {
+  actionPostsType,
+  actionOnePostType,
+} from '../../../actions/types/postTypes'
+import { actionClearPromiseForName } from '../../../actions/types/promiseTypes'
 function* postsWorker({ _id }) {
-    const {
-      userData: { allPosts,countPosts },
-    } = 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))
-      }
+  const {
+    userData: { allPosts, countPosts },
+  } = 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)
-  }
-  
+}
+
+export function* postsWatcher() {
+  yield takeLeading('USER_POSTS_PORTION', postsWorker)
+}
 
 function* onePostWorker({ _id }) {
-  
-    const onePost = yield call(promiseWorker,actionOnePost(_id))
-    if (onePost)
-    yield put(actionOnePostType(onePost))
-  }
-  export function* onePostWatcher(){
-  yield takeLeading("ONE_POST",onePostWorker)
-  }
-  
-  
-function* editPostWorker({state }) {
+  const onePost = yield call(promiseWorker, actionOnePost(_id))
+  if (onePost) yield put(actionOnePostType(onePost))
+}
+export function* onePostWatcher() {
+  yield takeLeading('ONE_POST', onePostWorker)
+}
 
-const postUpsert = yield call(promiseWorker, actionPostUpsert(state,state?._id))
+function* editPostWorker({ state }) {
+  const postUpsert = yield call(
+    promiseWorker,
+    actionPostUpsert(state, state?._id),
+  )
 
-   
-    if (postUpsert) {
-      yield put(actionClearPromiseForName('postUpsert'))
-      yield put(actionClearPromiseForName('uploadFiles'))
-    }
-    
+  if (postUpsert) {
+    yield put(actionClearPromiseForName('postUpsert'))
+    yield put(actionClearPromiseForName('uploadFiles'))
   }
-  export function* editPostWatcher() {
-    yield takeEvery("CREATE_EDIT_POST", editPostWorker)
-  }
+}
+export function* editPostWatcher() {
+  yield takeEvery('CREATE_EDIT_POST', editPostWorker)
+}

src/redux/saga/promise/index.js

@@ -1,18 +1,21 @@
-import { put, takeEvery} from 'redux-saga/effects'; 
-import {actionPending,actionFulfilled,actionRejected} from '../../../actions/types/promiseTypes'
+import { put, takeEvery } from 'redux-saga/effects'
+import {
+  actionPending,
+  actionFulfilled,
+  actionRejected,
+} from '../../../actions/types/promiseTypes'
 
-export function* promiseWorker(action) { 
-    const {name, promise} = action
-    yield put(actionPending(name))
-    try {
-        let data = yield promise
-        yield put(actionFulfilled(name, data))
-        return data 
-    }
-    catch (error) {
-        yield put(actionRejected(name, error))
-    }
+export function* promiseWorker(action) {
+  const { name, promise } = action
+  yield put(actionPending(name))
+  try {
+    let data = yield promise
+    yield put(actionFulfilled(name, data))
+    return data
+  } catch (error) {
+    yield put(actionRejected(name, error))
   }
-  export function* promiseWatcher(){
-    yield takeEvery('PROMISE_START', promiseWorker)
+}
+export function* promiseWatcher() {
+  yield takeEvery('PROMISE_START', promiseWorker)
 }

src/redux/saga/register/index.js

@@ -1,17 +1,16 @@
-import { promiseWorker } from "../promise";
-import { put, takeEvery, call } from 'redux-saga/effects'; 
+import { promiseWorker } from '../promise'
+import { put, takeEvery, call } from 'redux-saga/effects'
 import { actionLoginTypeSaga } from '../../../actions/typeSaga/loginTypesSaga'
-import actionRegister from "../../../actions/query/registerQuery";
-import  history  from '../../../helpers/history'
+import actionRegister from '../../../actions/query/registerQuery'
+import history from '../../../helpers/history'
 
 function* registerWorker({ login, password }) {
-    let token = yield call(promiseWorker,actionRegister(login, password)) 
-    if (token) {
-      yield put(actionLoginTypeSaga(login, password ))
-      history.push('/feed')
-    }
+  let token = yield call(promiseWorker, actionRegister(login, password))
+  if (token) {
+    yield put(actionLoginTypeSaga(login, password))
+    history.push('/feed')
   }
-  export function* registerWatcher() {
-  yield takeEvery("REGISTER", registerWorker)
-  
-  }
+}
+export function* registerWatcher() {
+  yield takeEvery('REGISTER', registerWorker)
+}

src/redux/saga/subscribe/index.js

@@ -1,39 +1,55 @@
-
-import {actionChangeSubscribe,actionGetFollowers,actionGetFollowing} from '../../../actions/query/subscribeQuery'
-import { promiseWorker } from "../promise";
-import { put, takeEvery,call,select } from 'redux-saga/effects'; 
-import {actionChangeFollowingType, actionChangeFollowersType} from '../../../actions/types/subscribeTypes'
+import {
+  actionChangeSubscribe,
+  actionGetFollowers,
+  actionGetFollowing,
+} from '../../../actions/query/subscribeQuery'
+import { promiseWorker } from '../promise'
+import { put, takeEvery, call, select } from 'redux-saga/effects'
+import {
+  actionChangeFollowingType,
+  actionChangeFollowersType,
+} from '../../../actions/types/subscribeTypes'
 function* changeSubscribeWorker({ followId, checkFollowId }) {
-    const { myData: { aboutMe: { _id, following } } } = yield select()
-    console.log('my following', following)
-    console.log('check follow id', checkFollowId)
-    console.log('my id', _id)
-   
-    const oldFollowing = checkFollowId ?
-      {
+  const {
+    myData: {
+      aboutMe: { _id, following },
+    },
+  } = yield select()
+  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 }))]
-      } 
+        following: [
+          ...(following || [])
+            .filter((item) => item._id !== followId)
+            .map(({ _id }) => ({ _id })),
+        ],
+      }
     : {
-        
-      _id,
-        following: [...(following||[]).map(({ _id }) =>
-          ({ _id })), { _id: followId }]
+        _id,
+        following: [
+          ...(following || []).map(({ _id }) => ({ _id })),
+          { _id: followId },
+        ],
       }
 
-    yield call(promiseWorker, actionChangeSubscribe(oldFollowing))
+  yield call(promiseWorker, actionChangeSubscribe(oldFollowing))
 
-    const updateUserFollowers = yield call(promiseWorker, actionGetFollowers(followId))
+  const updateUserFollowers = yield call(
+    promiseWorker,
+    actionGetFollowers(followId),
+  )
 
-    const updateMyFollowing = yield call(promiseWorker, actionGetFollowing(_id))
+  const updateMyFollowing = yield call(promiseWorker, actionGetFollowing(_id))
 
-    if (updateMyFollowing)
-     yield put(actionChangeFollowingType(updateMyFollowing?.following))
-   if (updateUserFollowers)
-      yield put(actionChangeFollowersType(updateUserFollowers?.followers))
-  }
-  export function* changeSubscribeWatcher() {
-    yield takeEvery("CHANGE_SUBSCRIBE", changeSubscribeWorker)
-  }
-  
+  if (updateMyFollowing)
+    yield put(actionChangeFollowingType(updateMyFollowing?.following))
+  if (updateUserFollowers)
+    yield put(actionChangeFollowersType(updateUserFollowers?.followers))
+}
+export function* changeSubscribeWatcher() {
+  yield takeEvery('CHANGE_SUBSCRIBE', changeSubscribeWorker)
+}

src/redux/saga/userProfile/index.js

@@ -1,8 +1,15 @@
-import { put, takeLeading, call } from 'redux-saga/effects'; 
-import { actionProfilePageDataUserType } from '../../../actions/types/userTypes';
+import { put, takeLeading, call } from 'redux-saga/effects'
+import { actionProfilePageDataUserType } from '../../../actions/types/userTypes'
 import { promiseWorker } from '../promise'
-import {actionUserAllPostsType,actionCountPostsType} from '../../../actions/types/postTypes'
-import {actionAboutUser, actionAllPostsUser, actionPostsCount} from '../../../actions/query/aboutUserQuery'
+import {
+  actionUserAllPostsType,
+  actionCountPostsType,
+} from '../../../actions/types/postTypes'
+import {
+  actionAboutUser,
+  actionAllPostsUser,
+  actionPostsCount,
+} from '../../../actions/query/aboutUserQuery'
 export function* fullPageAboutUserWorker({ _id }) {
   const aboutUser = yield call(promiseWorker, actionAboutUser(_id))
   const allPosts = yield call(promiseWorker, actionAllPostsUser(_id))