src/App.scss

@@ -114,7 +114,7 @@ video {
         margin-bottom: 10px;
     }
     &__form {
-        height: 96vh;
+        height: 98vh;
         padding-right: calc(10vw + 25px);
     }
     .login-form {
@@ -412,18 +412,24 @@ video {
     }
     &__image {
         grid-area: 1 / 1 / 3 / 2;
-        width: 60vw;
+        width: 55vw;
         overflow: auto;
         height: 100%;
         background-color: rgb(87, 87, 87);
+        .Post__dots.slick-dots {
+            bottom: 12px;
+        }
+    }
+    &__wrapper-img {
+        height: 550px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
         img {
             max-width: 100%;
-            max-height: 600px;
+            height: 100%;
             margin: 0 auto;
-            object-fit: cover;
-        }
-        .Post__dots.slick-dots {
-            bottom: 12px;
+            object-fit:cover;
         }
     }
     &__description {
@@ -450,7 +456,7 @@ video {
         height: 100%;
     }
     &__comments {
-        max-height: 350px;
+        max-height: 300px;
         overflow: auto;
     }
     &__comment-edit {
@@ -706,7 +712,7 @@ video {
 }
 
 @media (max-width: 560px) {
-        .Authorization {
+    .Authorization {
         background-position: center top;
         &__form {
             padding-right: 20px;

src/actions/index.js

@@ -63,8 +63,8 @@ export const actionUpsertAboutMe = (myData) =>
 //*************** Action Posts Feed ******************//
 
 
-export const actionAddPostsFeedAC = (postsData, count) => ({ type: 'ADD-POSTS-FEED', newResult: postsData, count })
-export const actionRemovePostsFeedAC = () => ({ type: 'REMOVE-POSTS-FEED' })
+export const actionAddPostAC = (postsData, count) => ({ type: 'ADD-POSTS', newResult: postsData, count })
+export const actionRemovePostAC = () => ({ type: 'REMOVE-POSTS' })
 export const actionPostsFeed = () => ({ type: 'POSTS_FEED' })
 
 export const actionPostsMyFollowing = (skip, myFollowing) =>
@@ -275,24 +275,18 @@ export const actionUpdateFollowersAC = (newResult) => ({ type: 'UPDATE-FOLLOWERS
 export const actionSubscribe = (userId) => ({ type: 'SUBSCRIBE', userId })
 export const actionUnSubscribe = (userId) => ({ type: 'UN_SUBSCRIBE', userId })
 
-export const actionLoadSubscribe = (myID, myFollowing, userId) =>
+export const actionChangeSubscribe = (newFollowing) =>
     actionPromise('subscribe', gql(`mutation following($user:UserInput){
         UserUpsert( user:$user){
             following{_id}
         }
-      }`, { user: { _id: myID, following: [...myFollowing || [], { _id: userId }] } }))
+      }`, { user: newFollowing }))
 
-export const actionloadUnSubscribe = (myID, myFollowing) =>
-    actionPromise('unSubscribe', gql(`mutation followingUn($user:UserInput){
-        UserUpsert( user:$user){
-            following{_id}
-        }
-      }`, { user: { _id: myID, following: [...myFollowing] } }))
 
 export const actionUpdateMyFollowing = (_id) =>
     actionPromise('upDateFollowing', gql(` query followers($id:String!){
         UserFindOne(query: $id){
-                            following {_id nick login}
+                            following {_id}
         }
     }`, { id: JSON.stringify([{ _id }]) }))
 

src/components/main/Posts.jsx

@@ -33,4 +33,4 @@ const Posts = ({ posts }) =>
         }
     </Row >
     
-export const CPosts = connect(state => ({ posts: state.postsFeed?.posts || [] }))(Posts)
+export const CPosts = connect(state => ({ posts: state.post?.posts || [] }))(Posts)

src/components/main/post/PostComment.js

@@ -13,6 +13,7 @@ import { actionDelLikeComment, actionLikeComment, actionSubComment } from '../..
 
 
 
+
 const PostCommentAuthor = ({ owner }) =>
     <>
         <Link className='PostCommentAuthor' to={`/profile/${owner?._id}`} >
@@ -114,6 +115,6 @@ const PostComments = ({ comments, findSubComment, parentId, }) => {
 }
 
 export const CPostComments = connect(state => ({
-    comments: state?.postsFeed?.posts?.comments || [],
+    comments: state?.post?.posts?.comments || [],
 
 }), { findSubComment: actionSubComment })(PostComments)

src/components/main/postsFeed/PostImage.jsx

@@ -52,13 +52,15 @@ class PostImage extends React.Component {
                         <button onClick={() => this.handleNext()}
                             className={`Post__next Post__btn ${this.state.moveNext ? '--active' : ''}`}><RightCircleOutlined /></button>
                     </MediaQuery>
+                    <div className="PostOne__wrapper-img">
+                        {videoRegExp.test(i.originalFileName)
+                            ? <video controls loop preload="true" height="500">
+                                <source src={backURL + '/' + i.url} />
+                            </video>
+                            : <img src={backURL + '/' + i.url} />
+                        }
+                    </div>
 
-                    {videoRegExp.test(i.originalFileName)
-                        ? <video controls loop preload="true" height="500">
-                            <source src={backURL + '/' + i.url} />
-                        </video>
-                        : <img src={backURL + '/' + i.url} />
-                    }
                 </div>
                     : <Empty key={i._id} image={nodata} description={false} />)
                     : <Empty image={nodata} description={false} />

src/components/main/profilePage/ModalFollow.js

@@ -44,13 +44,13 @@ const ModalFolower = ({ id, status, statusModal, data, title, follow }) => {
 }
 
 export const CModalFollowers = connect(state => ({
-    id: state?.postsFeed?.userData?._id,
+    id: state?.post?.userData?._id,
     data: state?.promise?.findFollow?.payload?.followers || [],
     status: state?.promise?.findFollow?.status
 }), { follow: actionFindFollowers })(ModalFolower)
 
 export const CModalFollowing = connect(state => ({
-    id: state?.postsFeed?.userData?._id,
+    id: state?.post?.userData?._id,
     data: state?.promise?.findFollow?.payload?.following || [],
     status: state?.promise?.findFollow?.status
 }), { follow: actionFindFollowing })(ModalFolower)

src/pages/AllPosts.jsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { connect } from 'react-redux';
-import { actionAllPosts, actionRemovePostsFeedAC } from '../actions';
+import { actionAllPosts, actionRemovePostAC } from '../actions';
 import { CPosts } from '../components/main/Posts';
 import { Container } from './Content';
 import { CPreloader } from './Preloader';
@@ -37,4 +37,4 @@ const AllPosts = ({ onAllPosts, postsRemove }) => {
     )
 }
 
-export const CAllPosts = connect(null, { onAllPosts: actionAllPosts, postsRemove: actionRemovePostsFeedAC, })(AllPosts)
+export const CAllPosts = connect(null, { onAllPosts: actionAllPosts, postsRemove: actionRemovePostAC, })(AllPosts)

src/pages/CollectionPage.jsx

@@ -2,7 +2,7 @@ import { Divider } from 'antd';
 import Title from 'antd/lib/typography/Title';
 import React, { useEffect } from 'react';
 import { connect } from 'react-redux';
-import { actionFullMyCollectionLoad, actionRemovePostsFeedAC } from '../actions';
+import { actionFullMyCollectionLoad, actionRemovePostAC } from '../actions';
 import { CPosts } from '../components/main/Posts';
 import { Container } from './Content';
 import { CPreloader } from './Preloader';
@@ -15,7 +15,7 @@ export const CollectionPage = ({ posts, onLoadPosts, postsRemove }) => {
             postsRemove()
         }
     }, [])
-    console.log(posts);
+
     return (
         <Container>
             <CPreloader promiseName='onLoadMyCollections' />
@@ -24,4 +24,4 @@ export const CollectionPage = ({ posts, onLoadPosts, postsRemove }) => {
         </Container>
     )
 }
-export const CCollectionPage = connect(state => ({ posts: state?.postsFeed?.posts || [] }), { onLoadPosts: actionFullMyCollectionLoad, postsRemove: actionRemovePostsFeedAC })(CollectionPage)
+export const CCollectionPage = connect(state => ({ posts: state?.post?.posts || [] }), { onLoadPosts: actionFullMyCollectionLoad, postsRemove: actionRemovePostAC })(CollectionPage)

src/pages/EntityEditorPost.jsx

@@ -2,7 +2,7 @@ import { Button, Divider, message } from "antd"
 import Title from "antd/lib/typography/Title"
 import { useEffect, useState } from "react"
 import { connect } from "react-redux"
-import { actionAddPostsFeedAC, actionFullSentPost, actionRemovePostsFeedAC, } from "../actions"
+import { actionAddPostAC, actionClearPromise, actionFullSentPost, actionRemovePostAC, } from "../actions"
 import { EditPhotos } from "../components/uploadPhoto/EditPhotos"
 import { EditDescriptionPost } from "../components/uploadPhoto/EditDescriptionPost"
 import { EditTitlePost } from "../components/uploadPhoto/EditTitlePost"
@@ -13,7 +13,7 @@ import { history } from '../App'
 const ContainEditorPost = ({ children }) =>
     <div className='ContainEditPost ContainerInner'>{children}</div>
 
-const EntityEditorPost = ({ match: { params: { _id } }, myID, entity, status, onSave, updatePost, clearState }) => {
+const EntityEditorPost = ({ match: { params: { _id } }, myID, entity, status, onSave, updatePost, clearState, clearStatus }) => {
 
     const [photos, setPhotos] = useState(entity?.images || []);
     const [titleSend, setTitleSend] = useState(entity?.title || '')
@@ -35,6 +35,7 @@ const EntityEditorPost = ({ match: { params: { _id } }, myID, entity, status, on
         }
         return () => {
             clearState()
+            clearStatus('sentPost')
         }
     }, []);
 
@@ -67,11 +68,12 @@ const EntityEditorPost = ({ match: { params: { _id } }, myID, entity, status, on
 
 export const CEntityEditorPost = connect(state => ({
     myID: state?.auth?.payload?.sub?.id,
-    entity: state?.postsFeed.posts,
+    entity: state?.post.posts,
     status: state?.promise?.sentPost?.status
 }),
     {
-        updatePost: actionAddPostsFeedAC,
+        updatePost: actionAddPostAC,
         onSave: actionFullSentPost,
-        clearState: actionRemovePostsFeedAC,
+        clearState: actionRemovePostAC,
+        clearStatus: actionClearPromise
     })(EntityEditorPost)

src/pages/MainPostsFeed.jsx

@@ -4,7 +4,7 @@ import { connect } from 'react-redux'
 import { Link } from 'react-router-dom'
 import Paragraph from 'antd/lib/typography/Paragraph'
 import Text from 'antd/lib/typography/Text'
-import { actionPostsFeed, actionRemovePostsFeedAC } from '../actions'
+import { actionPostsFeed, actionRemovePostAC } from '../actions'
 import { DateCreated } from '../components/main/DateCreated'
 import PostImage from '../components/main/postsFeed/PostImage'
 import { CPostUserPanel } from '../components/main/postsFeed/PostUserPanel'
@@ -121,9 +121,9 @@ const MainPostsFeed = ({ posts, postsFollowing, clearState, following }) => {
 }
 
 export const CMainPostsFeed = connect(state => ({
-    posts: state?.postsFeed?.posts || [],
+    posts: state?.post?.posts || [],
     following: state?.myData?.following || []
 }), {
     postsFollowing: actionPostsFeed,
-    clearState: actionRemovePostsFeedAC,
+    clearState: actionRemovePostAC,
 })(MainPostsFeed)

src/pages/PostPage.jsx

@@ -2,20 +2,20 @@ import React from 'react'
 import { Divider } from 'antd';
 import { connect } from 'react-redux'
 import PostImage from '../components/main/postsFeed/PostImage'
-import { PostDescription } from './MainPostsFeed';
 import Text from 'antd/lib/typography/Text';
 import { CFieldCommentSend } from '../components/main/postsFeed/FieldComment';
 import { CPostUserPanel } from '../components/main/postsFeed/PostUserPanel';
 import { CPostTitle } from '../components/main/post/PostTitle';
 import { CPreloader } from './Preloader';
 import { CPostComments } from '../components/main/post/PostComment';
+import { PostDescription } from './MainPostsFeed';
 
 
 
 const PostPageTitle = ({ data: { owner }, postId }) =>
     <CPostTitle owner={owner} postId={postId} />
 
-const CPostPageTitle = connect(state => ({ data: state?.postsFeed?.posts || {}, postId: state?.postsFeed?.posts?._id }))(PostPageTitle)
+const CPostPageTitle = connect(state => ({ data: state?.post?.posts || {}, postId: state?.post?.posts?._id }))(PostPageTitle)
 
 const PostPageDescrption = ({ data: { _id, likes, text, title, createdAt, } }) =>
     <div className='PostOne__description-inner'>
@@ -35,7 +35,7 @@ const PostPageDescrption = ({ data: { _id, likes, text, title, createdAt, } }) =
     </div>
 
 
-const CPostPageDescrption = connect(state => ({ data: state?.postsFeed?.posts || {} }))(PostPageDescrption)
+const CPostPageDescrption = connect(state => ({ data: state?.post?.posts || {} }))(PostPageDescrption)
 
 
 const PostPage = ({ data: { images } }) =>
@@ -54,4 +54,4 @@ const PostPage = ({ data: { images } }) =>
         </div>
     </div>
 
-export const CPostPage = connect(state => ({ data: state?.postsFeed?.posts || {} }))(PostPage)
+export const CPostPage = connect(state => ({ data: state?.post?.posts || {} }))(PostPage)

src/pages/ProfilePage.jsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react'
 import { Button, Col, Row } from 'antd'
 import { connect } from 'react-redux'
 import { Link } from 'react-router-dom'
-import { actionProfilePageData, actionRemovePostsFeedAC, actionSubscribe, actionUnSubscribe } from '../actions'
+import { actionProfilePageData, actionRemovePostAC, actionSubscribe, actionUnSubscribe } from '../actions'
 import { CModalFollowers, CModalFollowing } from '../components/main/profilePage/ModalFollow'
 import { DateCreated } from '../components/main/DateCreated'
 import Text from 'antd/lib/typography/Text'
@@ -24,7 +24,7 @@ const ProfileFollowButton = ({ myID, userId, followers, onSubsuscribe, onUnSubsu
 
 export const CProfileFollowButton = connect(state => ({
     myID: state?.auth?.payload?.sub.id,
-    followers: state?.postsFeed?.userData?.followers || []
+    followers: state?.post?.userData?.followers || []
 }), { onSubsuscribe: actionSubscribe, onUnSubsuscribe: actionUnSubscribe })(ProfileFollowButton)
 
 
@@ -77,8 +77,8 @@ const ProfilePageData = ({ myID, data: { _id, avatar, login, nick, createdAt = '
 
 const CProfilePageData = connect(state => ({
     myID: state.auth.payload.sub.id || '',
-    data: state?.postsFeed?.userData || {},
-    count: state?.postsFeed?.count || null
+    data: state?.post?.userData || {},
+    count: state?.post?.count || null
 }))(ProfilePageData)
 
 
@@ -124,5 +124,5 @@ const ProfilePage = ({ match: { params: { _id } }, getProfileUser, clearDataProf
 }
 
 export const CProfilePage = connect(state => ({
-    posts: state?.postsFeed?.posts || []
-}), { getProfileUser: actionProfilePageData, clearDataProfile: actionRemovePostsFeedAC })(ProfilePage)
+    posts: state?.post?.posts || []
+}), { getProfileUser: actionProfilePageData, clearDataProfile: actionRemovePostAC })(ProfilePage)

src/redux/reducers/postFeed-reducer.js

@@ -1,4 +1,4 @@
-export const postsFeedReducer = (state = {}, { type, findId, newResult, userData = {}, count = null }) => {
+export const postReducer = (state = {}, { type, findId, newResult, userData = {}, count = null }) => {
 
     const { posts } = state
 
@@ -19,7 +19,7 @@ export const postsFeedReducer = (state = {}, { type, findId, newResult, userData
 
     const types = {
 
-        'ADD-POSTS-FEED': () => ({
+        'ADD-POSTS': () => ({
             ...state,
             posts: Array.isArray(newResult)
                 ? [...posts, ...newResult]
@@ -34,7 +34,7 @@ export const postsFeedReducer = (state = {}, { type, findId, newResult, userData
             count
         }),
 
-        'REMOVE-POSTS-FEED': () => ({
+        'REMOVE-POSTS': () => ({
             ...state,
             posts: [],
             userData: {},

src/redux/redux-store.js

@@ -1,7 +1,7 @@
 import { createStore, combineReducers, applyMiddleware } from 'redux';
 import { authReducer } from './reducers/auth-reducer';
 import { myProfileReducer } from './reducers/myProfile-reducer';
-import { postsFeedReducer } from './reducers/postFeed-reducer';
+import { postReducer } from './reducers/post-reducer';
 import { promiseReducer } from './reducers/promise-reducer';
 import createSagaMiddleware from 'redux-saga'
 import { rootSaga } from './saga';
@@ -14,7 +14,7 @@ const store = createStore(combineReducers({
     auth: authReducer,
     promise: promiseReducer,
     myData: myProfileReducer,
-    postsFeed: postsFeedReducer,
+    post: postReducer,
     route: routeReducer,
 }),
     applyMiddleware(sagaMiddleware))