Feat: follow and unfollow people

chimobi-justice · Oct 6, 2024 · ab1b8a6 · ab1b8a6
1 parent f682e8a
commit ab1b8a6
Show file tree

Hide file tree

Showing 38 changed files with 640 additions and 211 deletions.
diff --git a/src/Route/index.tsx b/src/Route/index.tsx
@@ -29,6 +29,8 @@ const ProfileEdit = lazy(() => import('@pages/Users/Settings'));
 const ShowUserPublicPosts = lazy(() => import('@pages/Users/show'));
 const Search = lazy(() => import('@pages/Search'));
 
+const FollowPeople = lazy(() => import('@pages/FollowPeople'))
+
 const Login = lazy(() => import('@pages/Auth/Login'));
 const Register = lazy(() => import('@pages/Auth/Register'));
 
@@ -39,6 +41,8 @@ const routes = createBrowserRouter(
 
       <Route path="/search" element={<Search />} />
 
+      <Route path="/follow/people/suggestions" element={<FollowPeople />} />
+
       <Route index path='/threads' element={<Threads />} />
       <Route index path='/threads/:slug/:id' element={<ShowThread />} />
 

diff --git a/src/api/endpoints/userEndpoints.ts b/src/api/endpoints/userEndpoints.ts
@@ -11,3 +11,13 @@ export const UPDATE_PASSWORD_ENDPOINT = `${API_BASE_URL}/users/accounts/update-p
 export const DELETE_ACCOUNT_ENDPOINT = `${API_BASE_URL}/users/accounts/delete`;
 
 export const PUBLIC_USER_ENDPOINT = `${API_BASE_URL}/users`;
+
+export const GET_THREE_USERS_ENDPOINT = `${API_BASE_URL}/users/get-three-users`;
+
+export const GET_ALL_USERS_ENDPOINT = `${API_BASE_URL}/users/all-users`;
+
+export const Get_FOLLOWING_USERS_ARTICLES_ENDPOINT = `${API_BASE_URL}/users/my-follow-users/articles`;
+
+export const FOLLOW_USERS_ENDPOINT = `${API_BASE_URL}/users`;
+
+export const ONFOLLOW_USERS_ENDPOINT = `${API_BASE_URL}/users`;
diff --git a/src/components/ArticleCard/Articles.tsx b/src/components/ArticleCard/Articles.tsx
@@ -34,6 +34,8 @@ interface IProps {
   id?: any;
   isLoggedIn?: any;
   is_saved?: boolean;
+  is_following?: boolean;
+  followUser?: () => void;
   saveUnsavedArticle?: () => void;
 }
 
@@ -51,6 +53,8 @@ const ArticlesCard: FunctionComponent<IProps> = ({
   id,
   isLoggedIn,
   is_saved,
+  is_following,
+  followUser,
   saveUnsavedArticle
 }) => {
   return (
@@ -146,7 +150,15 @@ const ArticlesCard: FunctionComponent<IProps> = ({
                     )}
 
                     {!isOwner && isLoggedIn && (
-                      <Text fontSize={"14px"} color={"blue"} cursor={"pointer"} _hover={{ textDecoration: "underline" }}>follow</Text>
+                      <Text
+                        fontSize={"14px"}
+                        color={"blue"}
+                        cursor={"pointer"}
+                        _hover={{ textDecoration: "underline" }}
+                        onClick={followUser}
+                      >
+                        {is_following ? "following" : "follow"}
+                      </Text>
                     )}
 
                   </Box>

diff --git a/src/components/FollowCard/index.tsx b/src/components/FollowCard/index.tsx
@@ -8,15 +8,31 @@ import {
   CardHeader,
   Flex,
   Heading,
+  Spinner,
   Text,
 } from '@chakra-ui/react'
 
 import { colors } from '../../colors'
 import { Button } from '@components/index'
-import AvatarPic from '@assets/images/avatar.jpg'
+import truncate from '@helpers/truncate'
+import { useGetThreeCardUsers } from '@hooks/user/useGetFollowUsers'
+import { useUser } from '@context/userContext'
+import { useCreateFollowUser } from '@hooks/user/useCreateFollowUser'
+import { useCreateOnFollowUser } from '@hooks/user/useCreateUnFollowUser'
 
 const FollowCard: FunctionComponent = () => {
-  const data = [1, 2, 3];
+  const { user } = useUser()
+  const { data: people, isLoading } = useGetThreeCardUsers();
+  const { createFollowUserMutation } = useCreateFollowUser()
+  const { createOnFollowUserMutation } = useCreateOnFollowUser();
+
+  const handleFollowUnfollow = (userId: string, following: boolean) =>  {
+    if (following) {
+      createOnFollowUserMutation.mutate(userId)
+    } else {
+      createFollowUserMutation.mutate(userId)
+    }
+  }
 
   return (
     <Card>
@@ -25,34 +41,58 @@ const FollowCard: FunctionComponent = () => {
       </CardHeader>
 
       <CardBody>
-        {data.map((index) => (
+        {isLoading && (
+          <Box textAlign={"center"}>
+            <Spinner size={"xl"} thickness={"4px"} color={colors.primary} />
+          </Box>
+        )}
+        {people && people?.map((person: any, index: number) => (
           <Flex key={index} mb={"8px"}>
             <Flex flex="1" gap="4" alignItems="center" flexWrap="wrap">
-              <Avatar size={"sm"} name="Justice Chimobi" src={AvatarPic} />
+              <Link to={`/user/${person?.username}`}>
+                <Avatar size={"sm"} name={person?.fullname} src={person?.avatar} />
+              </Link>
 
               <Box>
-                <Heading size="xs">Justice Chimobi</Heading>
-                <Text fontSize={"13px"} color={"#0009"}>Developer at Retailloop</Text>
+                <Link to={`/user/${person?.username}`}>
+                  <Heading size="xs">{person?.fullname}</Heading>
+                </Link>
+                <Text fontSize={"13px"} color={"#0009"}>{truncate(person?.bio, 25)}</Text>
               </Box>
             </Flex>
-
-            <Button
-              size="sm"
-              rounded="lg"
-              type="button"
-              variant="outline"
 
-            >
-              follow
-            </Button>
+            {user && (
+              <Button
+                size="sm"
+                rounded="lg"
+                type="button"
+                variant={person?.is_following ? "solid" : "outline"}
+                onClick={() => handleFollowUnfollow(person?.id, person?.is_following)}
+              >
+                {person?.is_following ? "following" : "follow"}
+              </Button>
+            )}
+
+            {!user && (
+              <Link to={"/auth/login"}>
+                <Button
+                  size="sm"
+                  rounded="lg"
+                  type="button"
+                  variant="outline"
+                >
+                  follow
+                </Button>
+              </Link>
+            )}
           </Flex>
         ))}
-        
-        <Link to="/follow/people">
-          <Text 
-            fontSize={"13px"} 
-            color={colors.primary} 
-            mt={"20px"} 
+
+        <Link to="/follow/people/suggestions">
+          <Text
+            fontSize={"13px"}
+            color={colors.primary}
+            mt={"20px"}
             _hover={{
               color: "#101828",
               textDecoration: "underline"

diff --git a/src/components/NavBar/navBarLg.tsx b/src/components/NavBar/navBarLg.tsx
@@ -30,11 +30,7 @@ import { useSignOut } from '@hooks/auth/useSignOut'
 
 const NavBarLg: FunctionComponent = () => {
   const { user } = useUser();
-  const { signOutMutation } = useSignOut()
-
-  const handleLoggedOut = () => {
-    signOutMutation.mutate();
-  };
+  const { signOutMutation } = useSignOut();
 
   return (
     <Box
@@ -112,39 +108,39 @@ const NavBarLg: FunctionComponent = () => {
                               >
                                 {user?.data?.fullname}
                               </Text>
-                            </Box>
+                            </Box>  
                           </Box>
                           {isOpen ? <IoIosArrowUp /> : <IoIosArrowDown />}
                         </Box>
                       </MenuButton>
                       <MenuList>
-                        <Link to={`/${user?.data?.username}`}>
-                          <MenuItem color={"blcack"}>
+                        <Link to={`/${user?.data?.username}`} style={{display: "block"}}>
+                          <MenuItem color={"black"}>
                             <GoPerson style={{ marginRight: "4px" }} /> Your Profile
                           </MenuItem>
                         </Link>
-                        <Link to={`/me/articles/${user?.data?.username}`}>
+                        <Link to={`/me/articles/${user?.data?.username}`} style={{display: "block"}}>
                           <MenuItem color={"black"}>
                             <RiArticleFill style={{ marginRight: "4px" }} /> Your Articles
                           </MenuItem>
                         </Link>
-                        <Link to={`/me/threads/${user?.data?.username}`}>
+                        <Link to={`/me/threads/${user?.data?.username}`} style={{display: "block"}}>
                           <MenuItem color={"black"}>
                             <RiChatThreadLine style={{ marginRight: "4px" }} /> Your Threads
                           </MenuItem>
                         </Link>
-                        <Link to={`/${user?.data?.username}/reading-list`}>
+                        <Link to={`/${user?.data?.username}/reading-list`} style={{display: "block"}}>
                           <MenuItem color={"black"}>
                             <CiViewList style={{ marginRight: "4px" }} /> Reading List
                           </MenuItem>
                         </Link>
-                        <Link to="/me/settings/account/edit">
+                        <Link to="/me/settings/account/edit" style={{display: "block"}}>
                           <MenuItem color={"black"}>
                             <IoSettingsOutline style={{ marginRight: "4px" }} /> Settings
                           </MenuItem>
                         </Link>
                         <MenuDivider />
-                        <MenuItem color={"black"} onClick={handleLoggedOut}>
+                        <MenuItem color={"black"} onClick={() => signOutMutation.mutate()}>
                           <FaRegUser style={{ marginRight: "4px" }} /> Logout
                         </MenuItem>
                       </MenuList>

diff --git a/src/components/NavBar/navBarSm.tsx b/src/components/NavBar/navBarSm.tsx
@@ -44,10 +44,6 @@ const NavBarSm: FunctionComponent = () => {
   const { user } = useUser();
   const { signOutMutation } = useSignOut()
 
-  const handleLoggedOut = () => {
-    signOutMutation.mutate();
-  };
-
   const handleDrawerBox = () => {
     setOpen((prevState) => !prevState);
   }
@@ -225,7 +221,7 @@ const NavBarSm: FunctionComponent = () => {
                               </MenuItem>
                             </Link>
                             <MenuDivider />
-                            <MenuItem color={"black"} onClick={handleLoggedOut}>
+                            <MenuItem color={"black"} onClick={() => signOutMutation.mutate()}>
                               <FaRegUser style={{ marginRight: "4px" }} />  Logout
                             </MenuItem>
                           </MenuList>

diff --git a/src/hooks/article/useCreateArticle.ts b/src/hooks/article/useCreateArticle.ts
@@ -11,9 +11,7 @@ export const useCreateArticle = () => {
     onSuccess: (data) => {
       successNotification(data.message);
 
-      queryClient.invalidateQueries({
-        queryKey: ['articles']
-      })
+      queryClient.invalidateQueries({ queryKey: ['articles']})
     },
     onError: (error: any) => {
       errorNotification(error?.response?.data?.message)

diff --git a/src/hooks/article/useCreateArticleComment.ts b/src/hooks/article/useCreateArticleComment.ts
@@ -11,13 +11,9 @@ export const useCreateArticleComment = () => {
     onSuccess: (data) => {
       successNotification(data.message);
 
-      queryClient.invalidateQueries({
-        queryKey: ['articles']
-      });
+      queryClient.invalidateQueries({ queryKey: ['articles']});
 
-      queryClient.invalidateQueries({
-        queryKey: ['article']
-      });
+      queryClient.invalidateQueries({ queryKey: ['article']});
     },
     onError: (error: any) => {
       errorNotification(error?.response?.data?.message)

diff --git a/src/hooks/article/useCreateArticleDisLike.ts b/src/hooks/article/useCreateArticleDisLike.ts
@@ -9,17 +9,11 @@ export const useCreateArticleDisLike = () => {
   const createArticleDisLikeMutation = useMutation({
     mutationFn: createArticleDisLike,
     onSuccess: () => {
-      queryClient.invalidateQueries({
-        queryKey: ['articles']
-      });
+      queryClient.invalidateQueries({ queryKey: ['articles'] });
 
-      queryClient.invalidateQueries({
-        queryKey: ['article']
-      });
+      queryClient.invalidateQueries({ queryKey: ['article'] });
 
-      queryClient.invalidateQueries({
-        queryKey: ['public-author-article']
-      });
+      queryClient.invalidateQueries({ queryKey: ['public-author-article'] });
     },
     onError: (error: any) => {
       errorNotification(error?.response?.data?.message)

diff --git a/src/hooks/article/useCreateArticleLike.ts b/src/hooks/article/useCreateArticleLike.ts
@@ -9,17 +9,11 @@ export const useCreateArticleLike = () => {
   const createArticleLikeMutation = useMutation({
     mutationFn: createArticleLike,
     onSuccess: () => {
-      queryClient.invalidateQueries({
-        queryKey: ['articles']
-      });
+      queryClient.invalidateQueries({ queryKey: ['articles'] });
 
-      queryClient.invalidateQueries({
-        queryKey: ['article']
-      });
+      queryClient.invalidateQueries({ queryKey: ['article'] });
 
-      queryClient.invalidateQueries({
-        queryKey: ['public-author-article']
-      });
+      queryClient.invalidateQueries({ queryKey: ['public-author-article'] });
     },
     onError: (error: any) => {
       errorNotification(error?.response?.data?.message)

diff --git a/src/hooks/article/useCreateSaveArticles.ts b/src/hooks/article/useCreateSaveArticles.ts
@@ -11,17 +11,11 @@ export const useCreateSaveArticle = () => {
     onSuccess: (data) => {
       successNotification(data?.message)
 
-      queryClient.invalidateQueries({
-        queryKey: ['articles']
-      });
+      queryClient.invalidateQueries({ queryKey: ['articles'] });
 
-      queryClient.invalidateQueries({
-        queryKey: ['saved-articles']
-      });
+      queryClient.invalidateQueries({ queryKey: ['saved-articles'] });
 
-      queryClient.invalidateQueries({
-        queryKey: ['recommented-articles']
-      });
+      queryClient.invalidateQueries({ queryKey: ['recommented-articles'] });
     },
     onError: (error: any) => {
       errorNotification(error?.response?.data?.message)

diff --git a/src/hooks/article/useDeleteArticle.ts b/src/hooks/article/useDeleteArticle.ts
@@ -11,13 +11,9 @@ export const useDeleteArticle = () => {
     onSuccess: (data) => {
       successNotification(data.message);
 
-      queryClient.invalidateQueries({
-        queryKey: ['articles']
-      });
+      queryClient.invalidateQueries({ queryKey: ['articles'] });
 
-      queryClient.invalidateQueries({
-        queryKey: ['article']
-      });
+      queryClient.invalidateQueries({ queryKey: ['article'] });
     },
     onError: (error: any) => {
       errorNotification(error?.response?.data?.message)

diff --git a/src/hooks/article/useDeleteSavaArticles.ts b/src/hooks/article/useDeleteSavaArticles.ts
@@ -11,17 +11,11 @@ export const useDeleteSaveArticle = () => {
     onSuccess: (data) => {
       successNotification(data?.message)
 
-      queryClient.invalidateQueries({
-        queryKey: ['articles']
-      });
+      queryClient.invalidateQueries({ queryKey: ['articles'] });
 
-      queryClient.invalidateQueries({
-        queryKey: ['saved-articles']
-      });
+      queryClient.invalidateQueries({ queryKey: ['saved-articles'] });
 
-      queryClient.invalidateQueries({
-        queryKey: ['recommented-articles']
-      });
+      queryClient.invalidateQueries({ queryKey: ['recommented-articles'] });
     },
     onError: (error: any) => {
       errorNotification(error?.response?.data?.message)

diff --git a/src/hooks/article/useEditArticle.ts b/src/hooks/article/useEditArticle.ts
@@ -11,9 +11,7 @@ export const useEditArticle = () => {
     onSuccess: (data) => {
       successNotification(data.message);
 
-      queryClient.invalidateQueries({
-        queryKey: ['articles']
-      })
+      queryClient.invalidateQueries({ queryKey: ['articles'] })
     },
     onError: (error: any) => {
       errorNotification(error?.response?.data?.message)