fix(client): SideBar Menu,SearchBar js->ts

fixing #109
roman-ojha · Jun 28, 2022 · df7f4e4 · df7f4e4
1 parent 9d17b21
commit df7f4e4
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 29 deletions.
diff --git a/client/src/components/PostBox/CommentField.tsx b/client/src/components/PostBox/CommentField.tsx
@@ -45,7 +45,7 @@ const CommentField: React.FC<CommentFieldProps> = ({
     setRootUserProfileDataState,
   } = bindActionCreators(actionCreators, dispatch);
 
-  const comment = async () => {
+  const comment = async (): Promise<void> => {
     try {
       startProgressBar();
       if (isEmptyString(commentInputField)) {

diff --git a/client/src/components/PostBox/CommentedUser.tsx b/client/src/components/PostBox/CommentedUser.tsx
@@ -42,7 +42,7 @@ const CommentedUser: React.FC<CommentedUserProps> = ({
     commentBoxAction,
   } = bindActionCreators(actionCreators, dispatch);
 
-  const routeToProfile = async (userID) => {
+  const routeToProfile = async (userID: string): Promise<void> => {
     try {
       startProgressBar();
       const res = await GlobalApi.getFriendData(userID);

diff --git a/client/src/components/SideBar/Menu.jsx → client/src/components/SideBar/Menu.tsx b/client/src/components/SideBar/Menu.jsx → client/src/components/SideBar/Menu.tsx
@@ -2,20 +2,23 @@ import React from "react";
 import { NavLink } from "react-router-dom";
 import { Icon } from "@iconify/react";
 import { useSelector, useDispatch } from "react-redux";
-import {
-  profilePageDataAction,
-  setRootUserProfileDataState,
-} from "../../services/redux-actions";
+// import {
+//   profilePageDataAction,
+//   setRootUserProfileDataState,
+// } from "../../services/redux-actions";
+import { AppState, actionCreators } from "../../services/redux";
+import { bindActionCreators } from "redux";
 
-const Menu = () => {
+const Menu = (): JSX.Element => {
   const dispatch = useDispatch();
   const userProfileDetailStore = useSelector(
-    (state) => state.setUserProfileDetailReducer
+    (state: AppState) => state.setUserProfileDetailReducer
   );
-
   const rootUserProfileDataState = useSelector(
-    (state) => state.rootUserProfileDataState
+    (state: AppState) => state.rootUserProfileDataState
   );
+  const { profilePageDataAction, setRootUserProfileDataState } =
+    bindActionCreators(actionCreators, dispatch);
 
   return (
     <>
@@ -74,14 +77,12 @@ const Menu = () => {
                 ...userProfileDetailStore,
                 isRootUserFollowed: false,
               };
-              dispatch(profilePageDataAction(userObj));
+              profilePageDataAction(userObj);
               if (!rootUserProfileDataState.fetchedRootUserProfileData) {
-                dispatch(
-                  setRootUserProfileDataState({
-                    fetchedRootUserProfileData: false,
-                    getRootUserProfileData: true,
-                  })
-                );
+                setRootUserProfileDataState({
+                  fetchedRootUserProfileData: false,
+                  getRootUserProfileData: true,
+                });
               }
             }}
           >

diff --git a/client/src/components/SideBar/SearchBar.jsx → client/src/components/SideBar/SearchBar.tsx b/client/src/components/SideBar/SearchBar.jsx → client/src/components/SideBar/SearchBar.tsx
@@ -2,23 +2,27 @@ import React from "react";
 import User_profile_icon from "../../assets/svg/User_profile_Icon_color_white.svg";
 import { useHistory } from "react-router-dom";
 import { useDispatch, useSelector } from "react-redux";
-import {
-  startProgressBar,
-  stopProgressBar,
-  profilePageDataAction,
-} from "../../services/redux-actions";
+// import {
+//   startProgressBar,
+//   stopProgressBar,
+//   profilePageDataAction,
+// } from "../../services/redux-actions";
 import { instance as axios } from "../../services/axios";
 import "../../styles/components/mainPageSearchBar.css";
 import { toastError } from "../../services/toast";
+import { AppState, actionCreators } from "../../services/redux";
+import { bindActionCreators } from "redux";
 
 const MainPageSearchBar = (props) => {
   const history = useHistory();
   const dispatch = useDispatch();
   let noResultFound = true;
   // Storing Searched userData into redux
   const userProfileDetailStore = useSelector(
-    (state) => state.setUserProfileDetailReducer
+    (state: AppState) => state.setUserProfileDetailReducer
   );
+  const { startProgressBar, stopProgressBar, profilePageDataAction } =
+    bindActionCreators(actionCreators, dispatch);
 
   const SearchBarUser = (props) => {
     // console.log(props.userDetail);
@@ -28,7 +32,7 @@ const MainPageSearchBar = (props) => {
           className="MainPage_SearchBar_User_Container"
           onClick={async () => {
             try {
-              dispatch(startProgressBar());
+              startProgressBar();
               const res = await axios({
                 method: "GET",
                 url: `/u/profile/${props.userDetail.userID}`,
@@ -46,8 +50,8 @@ const MainPageSearchBar = (props) => {
                   ...userData.searchedUser,
                   isRootUserFollowed: userData.isRootUserFollowed,
                 };
-                dispatch(stopProgressBar());
-                dispatch(profilePageDataAction(userObj));
+                stopProgressBar();
+                profilePageDataAction(userObj);
                 history.push(`/u/profile/${props.userDetail.userID}/posts`);
               }
             } catch (err) {
@@ -58,7 +62,7 @@ const MainPageSearchBar = (props) => {
               } else {
                 toastError("Some Problem Occur, Please Try again later!!!");
               }
-              dispatch(stopProgressBar());
+              stopProgressBar();
             }
           }}
         >

diff --git a/client/src/components/SideBar/index.jsx b/client/src/components/SideBar/index.jsx
@@ -1,16 +1,19 @@
 import React, { useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import "../../styles/components/mainPageSideBar.css";
-import { openSideBarDrawer } from "../../services/redux-actions";
+// import { openSideBarDrawer } from "../../services/redux-actions";
 import LogoAndSearchBar from "./LogoAndSearchBar";
 import Menu from "./Menu";
 import Friends from "./Friends";
 import Account from "./Account";
+import { AppState, actionCreators } from "../../services/redux";
+import { bindActionCreators } from "redux";
 
 const MainPageSideBar = () => {
   const dispatch = useDispatch();
   const sideBarDrawerState = useSelector((state) => state.sideBarDrawerReducer);
   const [onSearchBar, setOnSearchBar] = useState(false);
+  const { openSideBarDrawer } = bindActionCreators(actionCreators, dispatch);
 
   useEffect(() => {
     document
@@ -21,7 +24,7 @@ const MainPageSideBar = () => {
             .getElementsByClassName("MainPage_SideBar_Container")[0]
             .contains(e.target)
         ) {
-          dispatch(openSideBarDrawer(false));
+          openSideBarDrawer(false);
           document.getElementById("MainPage_Logo").style =
             "visibility:visible;position:static";
           document.querySelector(