feat(custom_hook): completed hook for routing

fixes #124
roman-ojha · Jul 8, 2022 · 6b2d0de · 6b2d0de
1 parent d3992e7
commit 6b2d0de
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 98 deletions.
diff --git a/client/src/components/FollowedBy.tsx b/client/src/components/FollowedBy.tsx
@@ -152,7 +152,10 @@ const FollowedBy = (): JSX.Element => {
             }
             onClick={async () => {
               if (userInformation.type !== "bot") {
-                await routeToProfilePage({ userID: userInformation.userID });
+                await routeToProfilePage({
+                  userID: userInformation.userID,
+                  from: "followedByComp",
+                });
               } else {
                 toastError("Sorry!!, can't be able to open bot Profile");
               }
@@ -164,7 +167,10 @@ const FollowedBy = (): JSX.Element => {
               className="MainPage_Followed_User_Name"
               onClick={async () => {
                 if (userInformation.type !== "bot") {
-                  await routeToProfilePage({ userID: userInformation.userID });
+                  await routeToProfilePage({
+                    userID: userInformation.userID,
+                    from: "followedByComp",
+                  });
                 } else {
                   toastError("Sorry!!, can't be able to open bot Profile");
                 }
@@ -176,7 +182,10 @@ const FollowedBy = (): JSX.Element => {
               className="MainPage_Followed_User_Follower_Name"
               onClick={async () => {
                 if (userInformation.type !== "bot") {
-                  await routeToProfilePage({ userID: userInformation.userID });
+                  await routeToProfilePage({
+                    userID: userInformation.userID,
+                    from: "followedByComp",
+                  });
                 } else {
                   toastError("Sorry!!, can't be able to open bot Profile");
                 }

diff --git a/client/src/components/ProfileFriends.tsx b/client/src/components/ProfileFriends.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import User_Profile_Icon from "../assets/svg/User_profile_Icon.svg";
 import "../styles/components/profileFriends.css";
-import { useHistory, useLocation } from "react-router-dom";
+import { useLocation } from "react-router-dom";
 import { toastError } from "../services/toast";
 import UserApi from "../services/api/global/user";
 import { Helmet } from "react-helmet";
@@ -15,17 +15,16 @@ import { Helmet } from "react-helmet";
 //   profilePageDataAction,
 //   setRootUserProfileDataState,
 // } from "../services/redux-actions";
-import GlobalApi from "../services/api/global";
 import { AppState, actionCreators } from "../services/redux";
 import { bindActionCreators } from "redux";
 import UserDocument from "../interface/userDocument";
 import { AxiosError } from "axios";
-import { ProfilePageDataState } from "src/services/redux/pages/profile/profilePageData/types";
+import useRouteToProfilePage from "../hooks/useRouteToProfilePage";
 
 const ProfileFriends = (): JSX.Element => {
   const dispatch = useDispatch();
+  const routeToProfilePage = useRouteToProfilePage();
   const location = useLocation();
-  const history = useHistory();
   const [userDetails, setUserDetails] = useState<{
     fetchedData: boolean;
     user: UserDocument[];
@@ -43,10 +42,6 @@ const ProfileFriends = (): JSX.Element => {
     setProfilePageFriends,
     setProfilePageFollowers,
     setProfilePageFollowings,
-    startProgressBar,
-    stopProgressBar,
-    profilePageDataAction,
-    setRootUserProfileDataState,
   } = bindActionCreators(actionCreators, dispatch);
 
   const loadingContainerSpinnerStyle = {
@@ -176,45 +171,10 @@ const ProfileFriends = (): JSX.Element => {
                 key={index}
                 style={{ textDecoration: "none", color: "black" }}
                 onClick={async () => {
-                  try {
-                    startProgressBar();
-                    const res = await GlobalApi.getFriendData(
-                      userDetail.userID
-                    );
-                    const userData = await res.data;
-                    if (res.status === 200 && userData.success) {
-                      // success
-                      const userObj: ProfilePageDataState = {
-                        ...userData.searchedUser,
-                        isRootUserFollowed: userData.isRootUserFollowed,
-                        throughRouting: true,
-                      };
-                      profilePageDataAction(userObj);
-                      if (userDetail.userID === userProfileDetailStore.userID) {
-                        setRootUserProfileDataState({
-                          fetchedRootUserProfileData: true,
-                          getRootUserProfileData: false,
-                        });
-                      }
-                      history.push(`/u/profile/${userDetail.userID}/posts`);
-                    } else {
-                      // error
-                      toastError(userData.msg);
-                    }
-                    stopProgressBar();
-                  } catch (error) {
-                    const err = error as AxiosError;
-                    if (err.response) {
-                      if (err.response.data.success === false) {
-                        toastError(err.response.data.msg);
-                      }
-                    } else {
-                      toastError(
-                        "Some Problem Occur, Please Try again later!!!"
-                      );
-                    }
-                    stopProgressBar();
-                  }
+                  routeToProfilePage({
+                    userID: userDetail.userID,
+                    from: "profileFriendsComp",
+                  });
                 }}
               >
                 <img

diff --git a/client/src/components/SideBar/Friends.tsx b/client/src/components/SideBar/Friends.tsx
@@ -1,7 +1,6 @@
 import React from "react";
 import User_Profile_Icon from "../../assets/svg/User_profile_Icon.svg";
 import { useDispatch, useSelector } from "react-redux";
-import GlobalApi from "../../services/api/global";
 import UserApi from "../../services/api/global/user";
 // import {
 //   profilePageDataAction,
@@ -10,68 +9,33 @@ import UserApi from "../../services/api/global/user";
 //   setRootUserFriends,
 // } from "../../services/redux-actions";
 import { toastError } from "../../services/toast";
-import { useHistory } from "react-router-dom";
 import constant from "../../constant/constant";
 import { useMediaQuery } from "react-responsive";
 import { useEffect } from "react";
 import { bindActionCreators } from "redux";
 import { AppState, actionCreators } from "../../services/redux";
 import { AxiosError } from "axios";
-import { ProfilePageDataState } from "../../services/redux/pages/profile/profilePageData/types";
+import useRouteToProfilePage from "../../hooks/useRouteToProfilePage";
 
 const Friends = () => {
   const dispatch = useDispatch();
-  const history = useHistory();
+  const routeToProfilePage = useRouteToProfilePage();
   const userProfileDetailStore = useSelector(
     (state: AppState) => state.setUserProfileDetailReducer
   );
   const rootUserFriends = useSelector(
     (state: AppState) => state.rootUserFriends
   );
-  const {
-    startProgressBar,
-    stopProgressBar,
-    setRootUserFriends,
-    profilePageDataAction,
-  } = bindActionCreators(actionCreators, dispatch);
+  const { setRootUserFriends } = bindActionCreators(actionCreators, dispatch);
 
   const MainPageFriend = (props) => {
     return (
       <>
         <div
           className="MainPage_SideBar_Friend_Outline"
           onClick={async () => {
-            try {
-              startProgressBar();
-              const res = await GlobalApi.getFriendData(
-                props.friendDetail.userID
-              );
-              const userData = await res.data;
-              if (res.status === 200 && userData.success) {
-                // success
-                const userObj: ProfilePageDataState = {
-                  ...userData.searchedUser,
-                  isRootUserFollowed: userData.isRootUserFollowed,
-                  throughRouting: true,
-                };
-                profilePageDataAction(userObj);
-                history.push(`/u/profile/${props.friendDetail.userID}/posts`);
-              } else {
-                // error
-                toastError(userData.msg);
-              }
-              stopProgressBar();
-            } catch (error) {
-              const err = error as AxiosError;
-              if (err.response) {
-                if (err.response.data.success === false) {
-                  toastError(err.response.data.msg);
-                }
-              } else {
-                toastError("Some Problem Occur, Please Try again later!!!");
-              }
-              stopProgressBar();
-            }
+            console.log(props.friendDetail.userID);
+            await routeToProfilePage({ userID: props.friendDetail.userID });
           }}
         >
           <img

diff --git a/client/src/components/UserSuggestionComp/SuggestedUser.tsx b/client/src/components/UserSuggestionComp/SuggestedUser.tsx
@@ -134,7 +134,10 @@ const SuggestedUser: React.FC<SuggestedUserProps> = ({
           }
           onClick={async () => {
             if (userInformation.type !== "bot") {
-              await routeToProfilePage({ userID: userInformation.userID });
+              await routeToProfilePage({
+                userID: userInformation.userID,
+                from: "suggestionComp",
+              });
             } else {
               toastError("Sorry!!, can't be able to open bot Profile");
             }
@@ -146,7 +149,10 @@ const SuggestedUser: React.FC<SuggestedUserProps> = ({
             className="MainPage_Suggested_User_Name"
             onClick={async () => {
               if (userInformation.type !== "bot") {
-                await routeToProfilePage({ userID: userInformation.userID });
+                await routeToProfilePage({
+                  userID: userInformation.userID,
+                  from: "suggestionComp",
+                });
               } else {
                 toastError("Sorry!!, can't be able to open bot Profile");
               }
@@ -158,7 +164,10 @@ const SuggestedUser: React.FC<SuggestedUserProps> = ({
             className="MainPage_Suggested_User_Follower_Name"
             onClick={async () => {
               if (userInformation.type !== "bot") {
-                await routeToProfilePage({ userID: userInformation.userID });
+                await routeToProfilePage({
+                  userID: userInformation.userID,
+                  from: "suggestionComp",
+                });
               } else {
                 toastError("Sorry!!, can't be able to open bot Profile");
               }

diff --git a/client/src/hooks/useRouteToProfilePage.ts b/client/src/hooks/useRouteToProfilePage.ts
@@ -9,7 +9,12 @@ import { useMediaQuery } from "react-responsive";
 import constant from "../constant/constant";
 import { AxiosError } from "axios";
 
-type CallingFrom = "postBox" | undefined;
+type CallingFrom =
+  | "postBox"
+  | "suggestionComp"
+  | "followedByComp"
+  | "profileFriendsComp"
+  | undefined;
 type ReturnFuncArgument = {
   userID: string;
   from?: CallingFrom;
@@ -46,10 +51,12 @@ const useRouteToProfilePage = () => {
           throughRouting: true,
         };
         profilePageDataAction(userObj);
-        if (isMax850px) {
-          openRightPartDrawer(false);
+        if (obj.from === "suggestionComp" || obj.from === "followedByComp") {
+          if (isMax850px) {
+            openRightPartDrawer(false);
+          }
         }
-        if (obj.from === "postBox") {
+        if (obj.from === "postBox" || obj.from === "profileFriendsComp") {
           if (obj.userID === userProfileDetailStore.userID) {
             setRootUserProfileDataState({
               fetchedRootUserProfileData: true,