fix(client): MainPageMsgAndNtfBar ts->js

fixing #109
roman-ojha · Jun 26, 2022 · 956a2a4 · 956a2a4
1 parent 6aac3b9
commit 956a2a4
Showing 1 changed file with 63 additions and 53 deletions.
diff --git a/...t/src/components/MainPageMsgAndNtfBar.jsx → ...t/src/components/MainPageMsgAndNtfBar.tsx b/...t/src/components/MainPageMsgAndNtfBar.jsx → ...t/src/components/MainPageMsgAndNtfBar.tsx
@@ -1,18 +1,18 @@
 import React from "react";
 import more_icon from "../assets/svg/more_icon.svg";
 import { useSelector, useDispatch } from "react-redux";
-import {
-  mainPageMessageViewOnOff,
-  openNotificationBox,
-  openMoreProfileBox,
-  startProgressBar,
-  stopProgressBar,
-  setNotificationData,
-  messageListAction,
-  setRootUserProfileDataState,
-  profilePageDataAction,
-  openRightPartDrawer,
-} from "../services/redux-actions";
+// import {
+//   mainPageMessageViewOnOff,
+//   openNotificationBox,
+//   openMoreProfileBox,
+//   startProgressBar,
+//   stopProgressBar,
+//   setNotificationData,
+//   messageListAction,
+//   setRootUserProfileDataState,
+//   profilePageDataAction,
+//   openRightPartDrawer,
+// } from "../services/redux-actions";
 import User_Profile_Icon from "../assets/svg/User_profile_Icon.svg";
 import "../styles/components/mainPageMsgAndNtfBar.css";
 import { Icon } from "@iconify/react";
@@ -22,36 +22,52 @@ import messageApi from "../services/api/global/message";
 import Api from "../services/api/components/MainPageMsgAndNtfBar";
 import constant from "../constant/constant";
 import { useMediaQuery } from "react-responsive";
+import { bindActionCreators } from "redux";
+import { AppState, actionCreators } from "../services/redux";
 
 const MainPageMsgAndNtfBar = () => {
   const history = useHistory();
   const location = useLocation();
   const dispatch = useDispatch();
   const userProfileDetailStore = useSelector(
-    (state) => state.setUserProfileDetailReducer
+    (state: AppState) => state.setUserProfileDetailReducer
   );
   const mainPageMessageOnOffState = useSelector(
-    (state) => state.changeMainPageMessageView
+    (state: AppState) => state.changeMainPageMessageView
   );
   const moreProfileBoxState = useSelector(
-    (state) => state.moreProfileBoxReducer
+    (state: AppState) => state.moreProfileBoxReducer
+  );
+  const notificationBoxState = useSelector(
+    (state: AppState) => state.notificationBox
   );
-  const notificationBoxState = useSelector((state) => state.notificationBox);
   const rootUserProfileDataState = useSelector(
-    (state) => state.rootUserProfileDataState
+    (state: AppState) => state.rootUserProfileDataState
   );
   const isMax850px = useMediaQuery({
     query: `(max-width:${constant.mediaQueryRes.screen850}px)`,
   });
+  const {
+    mainPageMessageViewOnOff,
+    openNotificationBox,
+    openMoreProfileBox,
+    startProgressBar,
+    stopProgressBar,
+    setNotificationData,
+    messageListAction,
+    setRootUserProfileDataState,
+    profilePageDataAction,
+    openRightPartDrawer,
+  } = bindActionCreators(actionCreators, dispatch);
 
   const getNotificationData = async () => {
-    dispatch(startProgressBar());
+    startProgressBar();
     try {
       const res = await Api.getNotificationData();
       const data = await res.data;
       if (res.status === 200 && data.success) {
         // success
-        dispatch(setNotificationData(data.data));
+        setNotificationData(data.data);
       } else {
         // error
         toastError(data.msg);
@@ -65,24 +81,24 @@ const MainPageMsgAndNtfBar = () => {
         toastError("Some Problem Occur, Please Try again later!!!");
       }
     }
-    dispatch(stopProgressBar());
-    dispatch(openNotificationBox(true));
+    stopProgressBar();
+    openNotificationBox(true);
   };
 
   const getUserMessages = async () => {
     try {
-      dispatch(startProgressBar());
+      startProgressBar();
       const resMessage = await messageApi.getUserMessages();
       const resMessageData = await resMessage.data;
       if (resMessage.status === 200 && resMessageData.success) {
-        dispatch(messageListAction(resMessageData.messages));
-        dispatch(mainPageMessageViewOnOff(!mainPageMessageOnOffState));
-        dispatch(openNotificationBox(false));
-        dispatch(openMoreProfileBox(false));
+        messageListAction(resMessageData.messages);
+        mainPageMessageViewOnOff(!mainPageMessageOnOffState);
+        openNotificationBox(false);
+        openMoreProfileBox(false);
       } else {
         toastError("Error While fetching Messages");
       }
-      dispatch(stopProgressBar());
+      stopProgressBar();
     } catch (err) {
       if (err.response) {
         if (err.response.data.success === false) {
@@ -91,7 +107,7 @@ const MainPageMsgAndNtfBar = () => {
       } else {
         toastError("Some Problem Occur, Please Try again later!!!");
       }
-      dispatch(stopProgressBar());
+      stopProgressBar();
     }
   };
 
@@ -110,11 +126,9 @@ const MainPageMsgAndNtfBar = () => {
                 if (!mainPageMessageOnOffState) {
                   getUserMessages();
                 } else {
-                  dispatch(
-                    mainPageMessageViewOnOff(!mainPageMessageOnOffState)
-                  );
-                  dispatch(openNotificationBox(false));
-                  dispatch(openMoreProfileBox(false));
+                  mainPageMessageViewOnOff(!mainPageMessageOnOffState);
+                  openNotificationBox(false);
+                  openMoreProfileBox(false);
                 }
               }}
             />
@@ -128,11 +142,9 @@ const MainPageMsgAndNtfBar = () => {
                 if (!mainPageMessageOnOffState) {
                   getUserMessages();
                 } else {
-                  dispatch(
-                    mainPageMessageViewOnOff(!mainPageMessageOnOffState)
-                  );
-                  dispatch(openNotificationBox(false));
-                  dispatch(openMoreProfileBox(false));
+                  mainPageMessageViewOnOff(!mainPageMessageOnOffState);
+                  openNotificationBox(false);
+                  openMoreProfileBox(false);
                 }
               }}
             />
@@ -142,17 +154,17 @@ const MainPageMsgAndNtfBar = () => {
           className="MainPage_Message_Bar_Notification_Outline"
           onClick={() => {
             if (notificationBoxState.open) {
-              dispatch(openNotificationBox(false));
+              openNotificationBox(false);
             } else if (
               notificationBoxState.open === false &&
               notificationBoxState.notificationData.length === 0
             ) {
               getNotificationData();
             } else {
-              dispatch(openNotificationBox(true));
+              openNotificationBox(true);
             }
-            dispatch(mainPageMessageViewOnOff(false));
-            dispatch(openMoreProfileBox(false));
+            mainPageMessageViewOnOff(false);
+            openMoreProfileBox(false);
           }}
         >
           <Icon
@@ -163,9 +175,9 @@ const MainPageMsgAndNtfBar = () => {
         <div
           className="MainPage_Message_Bar_More_Outline"
           onClick={() => {
-            dispatch(openMoreProfileBox(!moreProfileBoxState));
-            dispatch(mainPageMessageViewOnOff(false));
-            dispatch(openNotificationBox(false));
+            openMoreProfileBox(!moreProfileBoxState);
+            mainPageMessageViewOnOff(false);
+            openNotificationBox(false);
           }}
         >
           <img src={more_icon} alt="more" />
@@ -182,17 +194,15 @@ const MainPageMsgAndNtfBar = () => {
               ...userProfileDetailStore,
               isRootUserFollowed: false,
             };
-            dispatch(profilePageDataAction(userObj));
+            profilePageDataAction(userObj);
             if (!rootUserProfileDataState.fetchedRootUserProfileData) {
-              dispatch(
-                setRootUserProfileDataState({
-                  fetchedRootUserProfileData: false,
-                  getRootUserProfileData: true,
-                })
-              );
+              setRootUserProfileDataState({
+                fetchedRootUserProfileData: false,
+                getRootUserProfileData: true,
+              });
             }
             if (isMax850px) {
-              dispatch(openRightPartDrawer(false));
+              openRightPartDrawer(false);
             }
             history.push(`/u/profile/${userProfileDetailStore.userID}/posts`);
           }}