+Follow +UnFollow +RoutedHeader +actionDeleteLike

src/App.js

@@ -1,6 +1,6 @@
 
 import './App.scss';
-import Header from './components/Header/Header';
+import RoutedHeader from './components/Header/Header';
 import CMain from './components/MainPage/Main';
 import CLoginForm from './components/LoginPage/Login';
 import CRegister from './components/RegisterPage/Register';
@@ -17,14 +17,18 @@ function App() {
   return (
     <Router history={history}>
       <Provider store={store}>
-      <Switch>
+      
     <div className="App">
+      <Route path="/login" exact component={CLoginForm}/>
+      <Route exact path="/register" component={CRegister}/>
+      <RoutedHeader />
+      <CMain/>
       {/* localStorage.getItem("authToken") */
       /* store.getState().auth.payload?.sub?.id ? <Redirect to="/"/> : <Redirect to="/login"/> */}
-        <Route exact path="/login" component={CLoginForm}/>
-        <Route exact path="/register" component={CRegister}/>
+        {/* <Route exact path="/login" component={CLoginForm}/>
+        <Route exact path="/register" component={CRegister}/> */}
       {/* {store.auth.payload?.sub?.id ? <Redirect to="/"/> : <Redirect to="/login"/>} */}  
-        <Route exact path="/" component={Header}/>
+        {/* <Route exact path="/" component={Header}/>
         <Route exact path="/" component={CMain}/>
         <Route exact path="/collections" component={Header}/>
         <Route exact path="/collections" component={CMain}/>
@@ -34,9 +38,8 @@ function App() {
         <Route exact path="/user/:id" component={Header}/>
         <Route exact path="/user/:id" component={CMain}/>
         <Route exact path="/post/:id" component={Header}/>
-        <Route exact path="/post/:id" component={CMain}/>
+        <Route exact path="/post/:id" component={CMain}/> */}
     </div>
-    </Switch>
     </Provider>
     </Router>
   );

src/actions/index.js

@@ -234,7 +234,7 @@ export const actionAddlike = _id =>
               }
             }))
 
-export const actionSubscribe = (userId,followId) =>
+export const actionSubscribe = (userId,followId,oldFollow) =>
             actionPromise('subscribe', gql(`mutation Subscribe($user:UserInput){
               UserUpsert(user:$user){
                   following{_id, nick}
@@ -243,15 +243,53 @@ export const actionSubscribe = (userId,followId) =>
             {
               user: {
                   "_id": userId,
-                  "following": {"_id":followId}
+                  "following": [...(oldFollow || []), {"_id":followId}]
               }
             }))
 export const actionFullSubscribe = (userId,followId) => async(dispatch,getState) => {
-        
-  let followingId = await dispatch(actionSubscribe(userId,followId));
+  const oldFollowing = (getState().promise.aboutMe?.payload?.following || []).map(item => ({
+    _id: item._id
+  }))
+  let followingId = await dispatch(actionSubscribe(userId,followId, oldFollowing));
   if(followingId){
     await dispatch(actionAboutUser(followId))
     await dispatch(actionAboutMe(userId))
   }
 
-}
+}
+
+export const actionUnSubscribe = (userId,oldFollow) =>
+      actionPromise('unSubscribe', gql(`mutation UnSubscribe($user:UserInput){
+        UserUpsert(user:$user){
+          following{_id}
+        }
+      }`, {
+        user: {
+          "_id": userId,
+          "following":[...oldFollow]
+        }
+      }))
+export const actionFullUnSubscribe = (userId, followId) => async(dispatch,getState)=> {
+  const oldFollowing = (getState().promise.aboutMe?.payload?.following || []).filter(item => item._id !==followId)
+  const oldFollow = (oldFollowing || []).map(item => ({
+    _id: item._id
+  }))
+  if(oldFollow){
+    await dispatch(actionUnSubscribe(userId, oldFollow))
+    await dispatch(actionAboutUser(followId));
+    await dispatch(actionAboutMe(userId));
+  }
+}
+
+export const actionDeleteLike = (_id) =>
+        actionPromise('unLike', gql(`mutation Deletelike($like:LikeInput){
+          LikeDelete(like:$like){
+            _id
+          }
+        }`,{
+            like:{
+              _id
+            }
+        }))
+
+/* export const actionfullDeleteLike = (_id) => */        

src/components/Header/Header.js

@@ -5,6 +5,7 @@ import { useState } from "react";
 import { actionAuthLogout } from "../../actions";
 import { connect } from "react-redux";
 import CSearchInput from "./SearchInput";
+import { Route, Switch } from "react-router-dom/cjs/react-router-dom.min";
 
 
 const LogOutButton = ({onClick})=> {
@@ -100,5 +101,15 @@ const Header =  ({}) => {
     )
 }
 
+const RoutedHeader = () => {
+    let routeMap = ["/collections","/settings","/user/:id", "/post/:id","/","/createpost"];
+    const routeHeader = routeMap.map(item => <Route exact path={`${item}`} component={Header}/>)
+    return(
+        <Switch>
+            {routeHeader}
+        </Switch>
+    )
+}
+
 
-export default Header;
+export default RoutedHeader;

src/components/MainPage/Main.js

@@ -10,6 +10,7 @@ import { useEffect } from 'react';
 import { connect } from 'react-redux';
 import store from '../../reducers';
 
+
 const Main = ({auth}) => {
 /* useEffect(()=>{
     if(auth){ 

src/components/UserPage/UserItem.js

@@ -1,17 +1,26 @@
 import { connect } from "react-redux"
-import { actionFullSubscribe, actionSubscribe, backendURL } from "../../actions"
+import { actionFullSubscribe, actionFullUnSubscribe, backendURL } from "../../actions"
 import CUserPosts from "./UserPosts";
 
 
-const FollowButton = ({auth={},onSubscribe, props})=> {
+const FollowButton = ({aboutMe={},onSubscribe,onUnSubscribe,props})=> {
+       if(aboutMe._id === props){
+           return <></>
+       }
+        let followed = (aboutMe.following || []).some(item => item._id === props)
         return(
             <>
-            <button className="bg-fuchsia-600 px-2 py-1 text-white font-semibold text-sm rounded block text-center sm:inline-block" onClick={()=>onSubscribe(auth,props)}>Follow</button>
+            {followed !== true ? (
+                <button className="bg-fuchsia-600 px-2 py-1 text-white font-semibold text-sm rounded block text-center sm:inline-block" onClick={()=>onSubscribe(aboutMe._id,props)}>Follow</button>
+            ):(
+                <button className="bg-fuchsia-600 px-2 py-1 text-white font-semibold text-sm rounded block text-center sm:inline-block" onClick={()=>onUnSubscribe(aboutMe._id,props)}>UnFollow</button>
+            )}
+            
             </>
         )
 }
 
-const CFollowButton = connect(state=>({auth: state.auth.payload?.sub?.id || {}}),{onSubscribe: actionFullSubscribe})(FollowButton)
+const CFollowButton = connect(state=>({aboutMe: state.promise.aboutMe?.payload || {}}),{onSubscribe: actionFullSubscribe, onUnSubscribe: actionFullUnSubscribe})(FollowButton)
 
 
 const UserItem = ({aboutUser = {}}) =>{