fix(client): UserSuggestion SuggestedUser js->ts

fixing #109
roman-ojha · Jun 28, 2022 · 2f2159b · 2f2159b
1 parent 1167f73
commit 2f2159b
Showing 1 changed file with 70 additions and 54 deletions.
diff --git a/...ents/UserSuggestionComp/SuggestedUser.jsx → ...ents/UserSuggestionComp/SuggestedUser.tsx b/...ents/UserSuggestionComp/SuggestedUser.jsx → ...ents/UserSuggestionComp/SuggestedUser.tsx
@@ -1,34 +1,50 @@
 import React from "react";
 import { toastError, toastSuccess } from "../../services/toast";
 import { instance as axios } from "../../services/axios";
-import {
-  profilePageDataAction,
-  startProgressBar,
-  stopProgressBar,
-  isFollowedSuggestedUser,
-  openRightPartDrawer,
-} from "../../services/redux-actions";
+// import {
+//   profilePageDataAction,
+//   startProgressBar,
+//   stopProgressBar,
+//   isFollowedSuggestedUser,
+//   openRightPartDrawer,
+// } from "../../services/redux-actions";
 import User_Profile_Icon from "../../assets/svg/User_profile_Icon.svg";
 import { useDispatch } from "react-redux";
 import { useHistory } from "react-router-dom";
 import GlobalApi from "../../services/api/global";
 import { useMediaQuery } from "react-responsive";
 import constant from "../../constant/constant";
+import { bindActionCreators } from "redux";
+import { actionCreators } from "../../services/redux";
+import { AxiosError } from "axios";
 
-const SuggestedUser = (props) => {
+interface SuggestedUserProps {
+  userInformation: any;
+}
+
+const SuggestedUser: React.FC<SuggestedUserProps> = ({
+  userInformation,
+}): JSX.Element => {
   const dispatch = useDispatch();
   const history = useHistory();
   const isMax850px = useMediaQuery({
     query: `(max-width:${constant.mediaQueryRes.screen850}px)`,
   });
+  const {
+    profilePageDataAction,
+    startProgressBar,
+    stopProgressBar,
+    isFollowedSuggestedUser,
+    openRightPartDrawer,
+  } = bindActionCreators(actionCreators, dispatch);
 
-  const followUser = async () => {
-    if (props.userInformation.type !== "bot") {
+  const followUser = async (): Promise<void> => {
+    if (userInformation.type !== "bot") {
       try {
-        dispatch(startProgressBar());
+        startProgressBar();
         const followedTo = {
-          userID: props.userInformation.userID,
-          id: props.userInformation.id,
+          userID: userInformation.userID,
+          id: userInformation.id,
         };
         const response = await axios({
           method: "POST",
@@ -43,36 +59,36 @@ const SuggestedUser = (props) => {
         const data = await response.data;
         if (response.status === 200 && data.success) {
           toastSuccess(data.msg);
-          dispatch(
-            isFollowedSuggestedUser({
-              userID: props.userInformation.userID,
-              followed: true,
-            })
-          );
-          dispatch(stopProgressBar());
+
+          isFollowedSuggestedUser({
+            userID: userInformation.userID,
+            followed: true,
+          });
+          stopProgressBar();
         }
-      } catch (err) {
+      } 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!!!");
         }
-        dispatch(stopProgressBar());
+        stopProgressBar();
       }
     } else {
       toastError("Sorry!!, can't be able to Follow bot");
     }
   };
 
-  const unFollowUser = async () => {
-    if (props.userInformation.type !== "bot") {
+  const unFollowUser = async (): Promise<void> => {
+    if (userInformation.type !== "bot") {
       try {
-        dispatch(startProgressBar());
+        startProgressBar();
         const unfollowedTo = {
-          userID: props.userInformation.userID,
-          id: props.userInformation.id,
+          userID: userInformation.userID,
+          id: userInformation.id,
         };
         const response = await axios({
           method: "POST",
@@ -87,32 +103,31 @@ const SuggestedUser = (props) => {
         const data = await response.data;
         if (response.status === 200 && data.success) {
           toastSuccess(data.msg);
-          dispatch(
-            isFollowedSuggestedUser({
-              userID: props.userInformation.userID,
-              followed: false,
-            })
-          );
-          dispatch(stopProgressBar());
+          isFollowedSuggestedUser({
+            userID: userInformation.userID,
+            followed: false,
+          });
+          stopProgressBar();
         }
-      } catch (err) {
+      } 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!!!");
         }
-        dispatch(stopProgressBar());
+        stopProgressBar();
       }
     } else {
       toastError("Sorry!!, can't be able to Follow bot");
     }
   };
 
-  const routeToProfile = async (userID) => {
+  const routeToProfile = async (userID: string): Promise<void> => {
     try {
-      dispatch(startProgressBar());
+      startProgressBar();
       const res = await GlobalApi.getFriendData(userID);
       const userData = await res.data;
       if (res.status === 200 && userData.success) {
@@ -121,25 +136,26 @@ const SuggestedUser = (props) => {
           ...userData.searchedUser,
           isRootUserFollowed: userData.isRootUserFollowed,
         };
-        dispatch(profilePageDataAction(userObj));
+        profilePageDataAction(userObj);
         if (isMax850px) {
-          dispatch(openRightPartDrawer(false));
+          openRightPartDrawer(false);
         }
         history.push(`/u/profile/${userID}/posts`);
       } else {
         // error
         toastError(userData.msg);
       }
-      dispatch(stopProgressBar());
-    } catch (err) {
+      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!!!");
       }
-      dispatch(stopProgressBar());
+      stopProgressBar();
     }
   };
 
@@ -149,14 +165,14 @@ const SuggestedUser = (props) => {
         <img
           className="MainPage_Suggested_User_Image"
           src={
-            props.userInformation.picture
-              ? props.userInformation.picture
+            userInformation.picture
+              ? userInformation.picture
               : User_Profile_Icon
           }
           onClick={() => {
-            if (props.userInformation.type !== "bot") {
+            if (userInformation.type !== "bot") {
               // history.push(`/u/profile/${props.userInformation.userID}/posts`);
-              routeToProfile(props.userInformation.userID);
+              routeToProfile(userInformation.userID);
             } else {
               toastError("Sorry!!, can't be able to open bot Profile");
             }
@@ -167,38 +183,38 @@ const SuggestedUser = (props) => {
           <p
             className="MainPage_Suggested_User_Name"
             onClick={() => {
-              if (props.userInformation.type !== "bot") {
+              if (userInformation.type !== "bot") {
                 // history.push(
                 //   `/u/profile/${props.userInformation.userID}/posts`
                 // );
-                routeToProfile(props.userInformation.userID);
+                routeToProfile(userInformation.userID);
               } else {
                 toastError("Sorry!!, can't be able to open bot Profile");
               }
             }}
           >
-            {props.userInformation.name}
+            {userInformation.name}
           </p>
           <p
             className="MainPage_Suggested_User_Follower_Name"
             onClick={() => {
-              if (props.userInformation.type !== "bot") {
+              if (userInformation.type !== "bot") {
                 // history.push(
                 //   `/u/profile/${props.userInformation.userID}/posts`
                 // );
-                routeToProfile(props.userInformation.userID);
+                routeToProfile(userInformation.userID);
               } else {
                 toastError("Sorry!!, can't be able to open bot Profile");
               }
             }}
           >
             {/* Followed By John */}
             {/* NOTE We need to implement Follow by <user> feature but for right now we will who userID here */}
-            {props.userInformation.userID}
+            {userInformation.userID}
           </p>
         </div>
         <div className="MainPage_Suggested_User_Follow_Button">
-          {props.userInformation.followed ? (
+          {userInformation.followed ? (
             <p
               className="MainPage_Suggested_User_Follow_Button_Text"
               onClick={unFollowUser}