fix(client): ProfilePage js->ts

fixing #109
roman-ojha · Jun 26, 2022 · 7bb30bb · 7bb30bb
1 parent 2e95fda
commit 7bb30bb
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 47 deletions.
diff --git a/.../src/components/ProfilePage/PageRoute.jsx → .../src/components/ProfilePage/PageRoute.tsx b/.../src/components/ProfilePage/PageRoute.jsx → .../src/components/ProfilePage/PageRoute.tsx
@@ -2,9 +2,12 @@ import React from "react";
 import { Icon } from "@iconify/react";
 import { NavLink } from "react-router-dom";
 import { useSelector } from "react-redux";
+import { AppState } from "../../services/redux";
 
-const PageRoute = () => {
-  const profilePageData = useSelector((state) => state.profilePageDataReducer);
+const PageRoute = (): JSX.Element => {
+  const profilePageData = useSelector(
+    (state: AppState) => state.profilePageDataReducer
+  );
   return (
     <>
       <nav className="ProfilePage_UserContent_Route_Container">

diff --git a/...t/src/components/ProfilePage/UserInfo.jsx → ...t/src/components/ProfilePage/UserInfo.tsx b/...t/src/components/ProfilePage/UserInfo.jsx → ...t/src/components/ProfilePage/UserInfo.tsx
@@ -2,35 +2,48 @@ import React from "react";
 import User_Profile_Icon from "../../assets/svg/User_profile_Icon.svg";
 import { useSelector, useDispatch } from "react-redux";
 import { Icon } from "@iconify/react";
-import {
-  mainPageMessageViewOnOff,
-  mainPageMessageInnerViewOnOff,
-  currentUserMessageAction,
-  startProgressBar,
-  stopProgressBar,
-  profilePageDataAction,
-} from "../../services/redux-actions";
+// import {
+//   mainPageMessageViewOnOff,
+//   mainPageMessageInnerViewOnOff,
+//   currentUserMessageAction,
+//   startProgressBar,
+//   stopProgressBar,
+//   profilePageDataAction,
+// } from "../../services/redux-actions";
 import { instance as axios } from "../../services/axios";
 import { toastError, toastSuccess } from "../../services/toast";
 import { useHistory } from "react-router-dom";
 import { useMediaQuery } from "react-responsive";
 import constant from "../../constant/constant";
+import { bindActionCreators } from "redux";
+import { AppState, actionCreators } from "../../services/redux";
+import { AxiosError } from "axios";
 
-const UserInfo = () => {
+const UserInfo = (): JSX.Element => {
   const history = useHistory();
   const dispatch = useDispatch();
-  const profilePageData = useSelector((state) => state.profilePageDataReducer);
+  const profilePageData = useSelector(
+    (state: AppState) => state.profilePageDataReducer
+  );
   const userProfileDetailStore = useSelector(
-    (state) => state.setUserProfileDetailReducer
+    (state: AppState) => state.setUserProfileDetailReducer
   );
   const isMax850px = useMediaQuery({
     query: `(max-width:${constant.mediaQueryRes.screen850}px)`,
   });
+  const {
+    mainPageMessageViewOnOff,
+    mainPageMessageInnerViewOnOff,
+    currentUserMessageAction,
+    startProgressBar,
+    stopProgressBar,
+    profilePageDataAction,
+  } = bindActionCreators(actionCreators, dispatch);
 
-  const followUser = async () => {
+  const followUser = async (): Promise<void> => {
     // writing logic for followuser
     try {
-      dispatch(startProgressBar());
+      startProgressBar();
       const followedTo = {
         userID: profilePageData.userID,
         id: profilePageData.id,
@@ -54,24 +67,25 @@ const UserInfo = () => {
       }
       if (response.status === 200 && data.success) {
         toastSuccess(data.msg);
-        dispatch(profilePageDataAction(userObj));
-        dispatch(stopProgressBar());
+        profilePageDataAction(userObj);
+        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();
     }
   };
 
-  const unFollowUser = async () => {
+  const unFollowUser = async (): Promise<void> => {
     try {
-      dispatch(startProgressBar());
+      startProgressBar();
       const unfollowedTo = {
         userID: profilePageData.userID,
         id: profilePageData.id,
@@ -93,38 +107,37 @@ const UserInfo = () => {
       };
       if (response.status === 200 && data.success) {
         toastSuccess(data.msg);
-        dispatch(profilePageDataAction(userObj));
-        dispatch(stopProgressBar());
+        profilePageDataAction(userObj);
+        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();
     }
   };
 
-  const showInnerMessage = async () => {
+  const showInnerMessage = async (): Promise<void> => {
     // before getting new message we will reset the previous message stored into redux
     try {
       if (isMax850px) {
         history.push("/u/message");
       } else {
-        dispatch(mainPageMessageViewOnOff(true));
+        mainPageMessageViewOnOff(true);
       }
-      dispatch(
-        currentUserMessageAction({
-          messageToId: profilePageData.id,
-          messageToUserId: profilePageData.userID,
-          receiverPicture: profilePageData.picture,
-          message: [],
-        })
-      );
-      dispatch(mainPageMessageInnerViewOnOff(true));
+      currentUserMessageAction({
+        messageToId: profilePageData.id,
+        messageToUserId: profilePageData.userID,
+        receiverPicture: profilePageData.picture,
+        message: [],
+      });
+      mainPageMessageInnerViewOnOff(true);
       const resMessage = await axios({
         // sending receiver userID to get message data of that user
         method: "POST",
@@ -143,18 +156,17 @@ const UserInfo = () => {
       } else {
         const resData = await resMessage.data.data;
         // after getting message we will store that message into redux
-        dispatch(
-          currentUserMessageAction({
-            messageToId: resData.messageToId,
-            messageToUserId: profilePageData.userID,
-            receiverPicture: profilePageData.picture,
-            // roomID: resData.roomID,
-            message: resData.message,
-            fetchedInnerMessage: true,
-          })
-        );
+        currentUserMessageAction({
+          messageToId: resData.messageToId,
+          messageToUserId: profilePageData.userID,
+          receiverPicture: profilePageData.picture,
+          // roomID: resData.roomID,
+          message: resData.message,
+          fetchedInnerMessage: true,
+        });
       }
-    } catch (err) {
+    } catch (error) {
+      const err = error as AxiosError;
       if (err.response) {
         if (err.response.data.success === false) {
           toastError(err.response.data.msg);