added subscrie/unsubscribe

src/App.scss

@@ -309,7 +309,7 @@ select {
     }
     button {
         color: #000;
-        padding: 0;
-        border: none;
+        // padding: 0;
+        // border: none;
     }
 }

src/actions/index.js

@@ -17,7 +17,9 @@ export const actionAddLikePostAC = (postId, newResult) => ({ type: 'ADD-POST-LIK
 export const actionRemoveLikePostAC = (postId, newResult) => ({ type: 'REMOVE-POST-LIKE', postId, newResult })
 export const actionAddCommentAC = (postId, newResult) => ({ type: 'ADD-COMMENT', postId, newResult })
 
-export const actionAddProfileDataAC = (userData, userPosts) => ({ type: 'ADD-PROFILE-DATA', userData, userPosts })
+export const actionProfilePageDataAC = (userData, userPosts) => ({ type: 'PROFILE-PAGE-DATA', userData, userPosts })
+
+export const actionUpdateFollowingAC = (newResult) => ({ type: 'UPDATE-FOLLOWING', newResult })
 
 //****************---Action Authirization ---*************************//
 
@@ -36,7 +38,7 @@ export const actionRegister = (login, password) =>
 export const actionAboutMe = () =>
     async (dispatch, getState) => {
         const { auth: { payload: { sub: { id } } } } = getState()
-        await dispatch(actionPromise('dataProfileAuth', gql(`query userOned($myID:String!){
+        await dispatch(actionPromise('aboutMe', gql(`query userOned($myID:String!){
                         UserFindOne(query: $myID){
                             _id  login nick
                             avatar { _id url }
@@ -105,7 +107,7 @@ export const actionFindComment = (postId) =>
 
 //****************---Action ProfileData ---*************************//
 
-export const actionUserData = (_id) =>
+export const actionProfilePageData = (_id) =>
     actionPromise('userOneData', gql(` query userOned($id:String!){
                         UserFindOne(query: $id){
                             _id  login nick
@@ -116,7 +118,7 @@ export const actionUserData = (_id) =>
                 }
             } `, { id: JSON.stringify([{ _id }]) }))
 
-export const actionUserPost = (_id) =>
+export const actionProfilePagePost = (_id) =>
     actionPromise('userOneData', gql(` query userOned($id:String!){
                 PostFind(query:$id){
                     _id   images{url _id}
@@ -141,12 +143,12 @@ export const actionSubscribe = (myID, myFollowing, userId) =>
         }
       }`, { user: { _id: myID, following: [...myFollowing || [], { _id: userId }] } }))
 
-export const actionUnSubscribe = (myID, myFollowing, userId) =>
+export const actionUnSubscribe = (myID, myFollowing ) =>
     actionPromise('unSubscribe', gql(`mutation followingUn($user:UserInput){
         UserUpsert( user:$user){
             following{_id}
         }
-      }`, { user: { _id: myID, following: [...myFollowing || [], { _id: userId }] } }))
+      }`, { user: { _id: myID, following: [...myFollowing] } }))
 
 
 

src/components/header/Header.jsx

@@ -10,13 +10,13 @@ import Layout, { Header } from 'antd/lib/layout/layout';
 import { Avatar, Col, Menu, Popover, Row } from 'antd';
 import { UserOutlined, CompassOutlined, SettingOutlined, HomeOutlined, ImportOutlined, MessageOutlined, PlusCircleOutlined } from '@ant-design/icons/lib/icons';
 
-const UserNav = ({ id}) => {
+const UserNav = ({ id }) => {
     return <div className='UserNav'>
         <CUserNavIcon />
     </div>
 }
 
-export const UserAvatar = ({ avatarSize, avatar}) => {
+export const UserAvatar = ({ avatarSize, avatar }) => {
     return (
         <>
             <Avatar style={{
@@ -32,10 +32,10 @@ export const UserAvatar = ({ avatarSize, avatar}) => {
     )
 }
 
-const ProfileDropMenu = ({ onLogOut }) =>
+const ProfileDropMenu = ( {myID, onLogOut }) =>
     <Menu className='dropMenu'>
         <Menu.Item key={'0'}>
-            <Link to={'/'}><UserOutlined /> My Profile</Link>
+            <Link to={`${myID}`}><UserOutlined /> My Profile</Link>
         </Menu.Item>
         <Menu.Item key={'1'}>
             <Link to={'/'}><SettingOutlined /> Settings</Link>
@@ -70,9 +70,9 @@ const UserNavIcon = ({ userData: { _id, avatar, login } }) =>
         </Col>
     </Row >
 
-const CUserNav = connect(state => ({ id: state.auth?.payload.sub.id || {} }) )(UserNav)
+const CUserNav = connect(state => ({ id: state.auth?.payload.sub.id || {} }))(UserNav)
 
-const CUserNavIcon = connect(state => ({ userData: state.promise?.dataProfileAuth.payload || {} }))(UserNavIcon)
+const CUserNavIcon = connect(state => ({ userData: state.promise?.aboutMe?.payload || {} }))(UserNavIcon)
 
 const Logo = () =>
     <Link className='Logo' to='/'>

src/components/header/Search.jsx

@@ -27,7 +27,9 @@ const FindUsersResult = ({ usersRes }) => {
 export const FieldSearch = ({ usersRes, findUsers }) => {
     return (
         <>
-            <Popover placement="bottom" content={<FindUsersResult usersRes={usersRes} />}
+            <Popover placement="bottom"
+                content={<FindUsersResult usersRes={usersRes} />}
+                destroyTooltipOnHide={true}
                 trigger="focus">
                 <></>
                 <Search className='Header__search'

src/components/main/Add.js

@@ -43,4 +43,4 @@ const Add = ({ imageUrl, onUploadFile }) => {
     )
 }
 
-export const CAdd = connect(state => ({ imageUrl: state.promise?.dataProfileAuth?.payload?.avatar.url }), { onUploadFile: actionSetAvatar })(Add)
+export const CAdd = connect(state => ({ imageUrl: state.promise?.Z?.payload?.avatar.url }), { onUploadFile: actionSetAvatar })(Add)

src/components/main/Profile.js

@@ -3,7 +3,7 @@ import Modal from 'antd/lib/modal/Modal'
 import React, { useEffect, useState } from 'react'
 import { connect } from 'react-redux'
 import { Link } from 'react-router-dom'
-import { actionFullSubscribe, actionProfilePageData } from '../../redux/redux-thunk'
+import { actionFullProfilePageData, actionFullSubscribe, actionFullUnSubscribe, actionProfilePageData } from '../../redux/redux-thunk'
 import { UserAvatar } from '../header/Header'
 
 const ModalFolower = ({ statusModal, data, title }) => {
@@ -42,22 +42,21 @@ const CModalFollowers = connect(state => ({ data: state?.profileData?.userData?.
 const CModalFollowing = connect(state => ({ data: state?.profileData?.userData?.following || [] }))(ModalFolower)
 
 
-const ProfileSetting = ({ userId, onSubsuscribe }) => {
-    useEffect(() => {
-
-        return () => {
-
-        }
-    }, [])
-    console.log(userId);
+const ProfileSetting = ({ myID, userId, followers, onSubsuscribe, onUnSubsuscribe }) => {
+    const followCheck = followers.find(f => f._id === myID && true)
     return (
         <Col className='Profile__seting' offset={4}>
-            <Button onClick={() => onSubsuscribe(userId)} type="primary">Primary Button</Button>
+            {!!followCheck ?
+                <Button onClick={() => onUnSubsuscribe(userId)}>Primary Button</Button> :
+                <Button onClick={() => onSubsuscribe(userId)} type="primary">Primary Button</Button>}
         </Col>
     )
 }
 
-const CProfileSetting = connect(null, { onSubsuscribe: actionFullSubscribe })(ProfileSetting)
+const CProfileSetting = connect(state => ({
+    myID: state?.auth?.payload?.sub.id,
+    followers: state?.profileData?.userData?.followers || []
+}), { onSubsuscribe: actionFullSubscribe, onUnSubsuscribe: actionFullUnSubscribe })(ProfileSetting)
 
 const ProfilePageData = ({ data: { _id, avatar, login, nick, followers, following }, posts, setFollowing, setFollowers }) => {
 
@@ -117,4 +116,4 @@ const ProfilePage = ({ match: { params: { _id, id } }, getProfileUser }) => {
     )
 }
 
-export const CProfilePage = connect(null, { getProfileUser: actionProfilePageData })(ProfilePage)
+export const CProfilePage = connect(null, { getProfileUser: actionFullProfilePageData })(ProfilePage)

src/redux/profile-reducer.js

@@ -1,16 +1,16 @@
 import React from 'react'
 
-export const profileReducer = (state = {}, { type, userData, userPosts }) => {
+export const profileReducer = (state = {}, { type, userData, userPosts, newResult }) => {
     const types = {
-        'ADD-PROFILE-DATA': () => {
+        'PROFILE-PAGE-DATA': () => {
             return {
                 ...state, userData, userPosts
             }
         },
-        'UPDATE-FOLLOWING':()=>{
+        'UPDATE-FOLLOWING': () => {
             return {
                 ...state,
-                
+                userData: { ...state.userData, followers: [...newResult] }
             }
         }
     }

src/redux/redux-thunk.js

@@ -1,4 +1,4 @@
-import { actionAddComment, actionAddCommentAC, actionAddLikePost, actionAddLikePostAC, actionAddPostsFeedAC, actionAuthLogin, actionFindComment, actionLogin, actionMyLikePost, actionPending, actionRegister, actionRejected, actionRemoveLikePost, actionRemoveLikePostAC, actionResolved, actionUserData, actionUserPost, actionAddProfileDataAC, actionSubscribe, actionUpdateFollowers, actionAboutMe } from "../actions"
+import { actionAddComment, actionAddCommentAC, actionAddLikePost, actionAddLikePostAC, actionAddPostsFeedAC, actionAuthLogin, actionFindComment, actionLogin, actionMyLikePost, actionPending, actionRegister, actionRejected, actionRemoveLikePost, actionRemoveLikePostAC, actionResolved, actionSubscribe, actionUpdateFollowers, actionAboutMe, actionProfilePagePost, actionProfilePageDataAC, actionProfilePageData, actionUnSubscribe, actionUpdateFollowingAC } from "../actions"
 import { actionMyFolowisgPosts } from "./post-reducer"
 
 export const actionPromise = (name, promise) =>
@@ -25,7 +25,7 @@ export const actionFullLogin = (login, password, remember) =>
 
 export const actionFullRegister = (login, password, remember) =>
     async dispatch => {
-        await actionRegister(login, password)
+        await dispatch(actionRegister(login, password))
         let token = await dispatch(actionLogin(login, password))
         if (token) {
             await dispatch(actionAuthLogin(token, remember))
@@ -34,9 +34,8 @@ export const actionFullRegister = (login, password, remember) =>
 
 export const actionFullRemoveLikePost = (likeId, postId) =>
     async dispatch => {
-        await actionRemoveLikePost(likeId)
+        await dispatch(actionRemoveLikePost(likeId))
         const { likes } = await dispatch(actionMyLikePost(postId))
-        console.log(likes);
         if (likes) {
             await dispatch(actionRemoveLikePostAC(postId, likes))
         }
@@ -44,7 +43,7 @@ export const actionFullRemoveLikePost = (likeId, postId) =>
 
 export const actionFullAddLikePost = (postId) =>
     async dispatch => {
-        await actionAddLikePost(postId)
+        await dispatch(actionAddLikePost(postId))
         const { likes } = await dispatch(actionMyLikePost(postId))
         if (likes) {
             await dispatch(actionAddLikePostAC(postId, likes))
@@ -68,26 +67,36 @@ export const actionFullAddComment = (postId, text) =>
         }
     }
 
-export const actionProfilePageData = (id) =>
+export const actionFullProfilePageData = (id) =>
     async dispatch => {
-        const userData = await dispatch(actionUserData(id))
-        const userPosts = await dispatch(actionUserPost(id))
-        if (userData, userPosts) {
-            await dispatch(actionAddProfileDataAC(userData, userPosts))
+        const userData = await dispatch(actionProfilePageData(id))
+        const userPosts = await dispatch(actionProfilePagePost(id))
+        if (userData && userPosts) {
+            await dispatch(actionProfilePageDataAC(userData))
+            await dispatch(actionAddPostsFeedAC (userPosts))
         }
     }
 
 export const actionFullSubscribe = (userId) =>
     async (dispatch, getState) => {
         const { auth: { payload: { sub: { id } } },
-            promise: { dataProfileAuth: { payload: { following } } } } = getState()
-        console.log(id, following, userId)
-        // actionSubscribe(id, following, userId)
-        const followers = await dispatch(actionUpdateFollowers(userId))
-        console.log(followers);
-        // const userData = await dispatch(actionUserData(id))
-        // const userPosts = await dispatch(actionUserPost(id))
-        // if (userData, userPosts) {
-        //     dispatch(actionAddProfileDataAC(userData, userPosts))
-        // }
-    }
+            promise: { aboutMe: { payload: { following } } } } = getState()
+        await dispatch(actionSubscribe(id, following, userId))
+        const { followers } = await dispatch(actionUpdateFollowers(userId))
+        if (followers) {
+            await dispatch(actionUpdateFollowingAC(followers))
+        }
+    }
+
+export const actionFullUnSubscribe = (userId) =>
+    async (dispatch, getState) => {
+        const { auth: { payload: { sub: { id } } },
+            promise: { aboutMe: { payload: { following } } } } = getState()
+        const newArrFollowing = [...following].filter(f => f._id !== userId)
+        await dispatch(actionUnSubscribe(id, newArrFollowing))
+        const { followers } = await dispatch(actionUpdateFollowers(userId))
+        if (followers) {
+            await dispatch(actionUpdateFollowingAC(followers))
+        }
+    }
+