+follow to user +like

src/actions/index.js

@@ -132,10 +132,10 @@ export const actionAboutUser = (_id) =>
               url
             },
             followers {
-              _id
+              _id nick
             }
             following{
-              _id
+              _id nick
             }
           }
         }`,{
@@ -212,7 +212,7 @@ export const actionFindOnePost = _id =>
                       nick avatar{url}
                     }
                   }
-                },
+                }, likes {_id}, likesCount,
                 owner {
                   _id, nick avatar{url}
                 }
@@ -221,3 +221,37 @@ export const actionFindOnePost = _id =>
               postId: JSON.stringify([{_id}])
             } ))
 
+export const actionAddlike = _id => 
+            actionPromise("addLike", gql(`mutation AddLike($like:LikeInput){
+              LikeUpsert(like:$like){
+                _id
+              }
+            }`,{
+              like:{
+                  "post":{
+                      "_id": _id
+                  }
+              }
+            }))
+
+export const actionSubscribe = (userId,followId) =>
+            actionPromise('subscribe', gql(`mutation Subscribe($user:UserInput){
+              UserUpsert(user:$user){
+                  following{_id, nick}
+              }
+            }`,
+            {
+              user: {
+                  "_id": userId,
+                  "following": {"_id":followId}
+              }
+            }))
+export const actionFullSubscribe = (userId,followId) => async(dispatch,getState) => {
+        
+  let followingId = await dispatch(actionSubscribe(userId,followId));
+  if(followingId){
+    await dispatch(actionAboutUser(followId))
+    await dispatch(actionAboutMe(userId))
+  }
+
+}

src/components/Header/Header.js

@@ -15,12 +15,7 @@ const LogOutButton = ({onClick})=> {
 const CLogOut = connect(state => ({children: `logout(${state.auth.payload && state.auth.payload.sub.login || 'anon'})`}),
 {onClick: actionAuthLogout})(LogOutButton)
 
-const defaultUserInfo = {
-    _id:"61fe9cf2ad55d22f3e2fb226",
-    nick: "Nik",
-    avatar:'1',
-    following:"2"
-}
+
 /* const UserItem = ({user:{_id,nick,avatar}}) =>{
     return(
         <div>
@@ -28,7 +23,7 @@ const defaultUserInfo = {
         </div>
     )
 } */
-const UserBlock = ({aboutMe = defaultUserInfo}) => {
+const UserBlock = ({aboutMe = {}}) => {
     const [isOpen, setIsOpen] = useState(false);
     console.log(aboutMe)
     return(

src/components/Post/PostItem.js

@@ -1,11 +1,10 @@
 import { connect } from "react-redux";
 import "react-responsive-carousel/lib/styles/carousel.min.css";
 import { Carousel } from "react-responsive-carousel";
-import { backendURL } from "../../actions";
-
+import { actionAddlike, backendURL } from "../../actions";
+import {IoHeartOutline, IoHeartSharp} from "react-icons/io5"
 
 const ImagesInPost = ({image}) => {
-    console.log(image);
     return (
         <div>
         <img className="object-cover object-center w-full h-96 bg-slate-500" src={image.url ?`${backendURL}/${image?.url}` : ""}/>
@@ -13,6 +12,14 @@ const ImagesInPost = ({image}) => {
     )
 }
 
+const LikeButton = ({onLike, props,children}) => {
+    console.log(props);
+    console.log(children);
+    return(
+        <button className="flex items-center justify-center" onClick={()=>onLike(props)}><IoHeartOutline />{children}</button>
+    )
+}
+{/* <button className="flex items-center justify-center"><IoHeartOutline />{findPost?.likes?.length ? findPost?.likes?.length : "0"}</button> */}
 
 const PostItem = ({findPost}) =>{
     return(
@@ -33,7 +40,7 @@ const PostItem = ({findPost}) =>{
                 <div className="p-3">
                     <div className="flex items-center justify-between">
                         <div className="flex items-center space-x-3">
-                        <button className="flex items-center justify-center">Like</button>
+                       <CLikeButton props={findPost?._id} children={findPost?.likes?.length ? findPost?.likes?.length : "0"}/>
                         <button className="flex items-center justify-center">Comment</button>
                         <button className="flex items-center justify-center">Direct</button>
                         </div>
@@ -52,6 +59,8 @@ const PostItem = ({findPost}) =>{
     )
 }
 
+const CLikeButton = connect(null,{onLike: actionAddlike})(LikeButton)
+
 const CPostItem = connect(state=>({findPost: state.promise?.findPost?.payload || {}}))(PostItem)
 
 

src/components/UserPage/UserItem.js

@@ -1,8 +1,19 @@
 import { connect } from "react-redux"
-import { backendURL } from "../../actions"
+import { actionFullSubscribe, actionSubscribe, backendURL } from "../../actions"
 import CUserPosts from "./UserPosts";
 
 
+const FollowButton = ({auth={},onSubscribe, 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>
+            </>
+        )
+}
+
+const CFollowButton = connect(state=>({auth: state.auth.payload?.sub?.id || {}}),{onSubscribe: actionFullSubscribe})(FollowButton)
+
+
 const UserItem = ({aboutUser = {}}) =>{
         /* console.log(aboutUser.followers.length); */
     return(
@@ -14,7 +25,7 @@ const UserItem = ({aboutUser = {}}) =>{
                 <div className="w-8/12 md:w-7/12 m-4">
                 <div className="md:flex md:flex-wrap md:items-center">
                     <h2 className="text-3x1 inline-block font-light mr-0.5  sm:mb-0">{aboutUser.nick}</h2>
-                    <button className="bg-fuchsia-600 px-2 py-1 text-white font-semibold text-sm rounded block text-center sm:inline-block">Follow</button>
+                    <CFollowButton props={aboutUser._id}/>
                 </div>
                 <div className="block">
                     <ul className="md:flex space-x-8 mb-4">