fix(client): SettingPage js->ts

fixing #109
roman-ojha · Jun 26, 2022 · 620ed68 · 620ed68
1 parent 7068e96
commit 620ed68
Show file tree

Hide file tree

Showing 6 changed files with 82 additions and 51 deletions.
diff --git a/client/src/components/MainPageMsgAndNtfBar.tsx b/client/src/components/MainPageMsgAndNtfBar.tsx
@@ -24,6 +24,7 @@ import constant from "../constant/constant";
 import { useMediaQuery } from "react-responsive";
 import { bindActionCreators } from "redux";
 import { AppState, actionCreators } from "../services/redux";
+import { AxiosError } from "axios";
 
 const MainPageMsgAndNtfBar = () => {
   const history = useHistory();
@@ -72,7 +73,8 @@ const MainPageMsgAndNtfBar = () => {
         // error
         toastError(data.msg);
       }
-    } catch (err) {
+    } catch (error) {
+      const err = error as AxiosError;
       if (err.response) {
         if (err.response.data.success === false) {
           toastError(err.response.data.msg);
@@ -99,7 +101,8 @@ const MainPageMsgAndNtfBar = () => {
         toastError("Error While fetching Messages");
       }
       stopProgressBar();
-    } catch (err) {
+    } catch (error) {
+      const err = error as AxiosError;
       if (err.response) {
         if (err.response.data.success === false) {
           toastError(err.response.data.msg);

diff --git a/...ponents/SettingPage/ChangeDisplayName.jsx → ...ponents/SettingPage/ChangeDisplayName.tsx b/...ponents/SettingPage/ChangeDisplayName.jsx → ...ponents/SettingPage/ChangeDisplayName.tsx
@@ -1,40 +1,46 @@
 import React, { useState } from "react";
 import { useDispatch } from "react-redux";
-import {
-  changeRootUserNameAction,
-  startProgressBar,
-  stopProgressBar,
-} from "../../services/redux-actions";
+// import {
+//   changeRootUserNameAction,
+//   startProgressBar,
+//   stopProgressBar,
+// } from "../../services/redux-actions";
 import settingPageApi from "../../services/api/pages/settingPageApi";
 import { toastError, toastSuccess } from "../../services/toast";
+import { AxiosError } from "axios";
+import { actionCreators } from "../../services/redux";
+import { bindActionCreators } from "redux";
 
 const ChangeDisplayName = () => {
   const dispatch = useDispatch();
-  const [newName, setNewName] = useState("");
+  const [newName, setNewName] = useState<string>("");
+  const { changeRootUserNameAction, startProgressBar, stopProgressBar } =
+    bindActionCreators(actionCreators, dispatch);
 
-  const changeName = async (e) => {
+  const changeName = async (e: React.MouseEvent<HTMLButtonElement>) => {
     try {
       e.preventDefault();
-      dispatch(startProgressBar());
+      startProgressBar();
       const res = await settingPageApi.changeName(newName);
       const resData = await res.data;
       if (resData.success && res.status === 200) {
         toastSuccess(resData.msg);
-        dispatch(changeRootUserNameAction(resData.name));
+        changeRootUserNameAction(resData.name);
       } else {
         toastError(resData.msg);
       }
-      dispatch(stopProgressBar());
+      stopProgressBar();
       setNewName("");
-    } 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();
     }
   };
 

diff --git a/...components/SettingPage/ChangePassword.jsx → ...components/SettingPage/ChangePassword.tsx b/...components/SettingPage/ChangePassword.jsx → ...components/SettingPage/ChangePassword.tsx
@@ -1,22 +1,33 @@
 import React from "react";
 import { useDispatch } from "react-redux";
-import {
-  startProgressBar,
-  stopProgressBar,
-} from "../../services/redux-actions";
+// import {
+//   startProgressBar,
+//   stopProgressBar,
+// } from "../../services/redux-actions";
 import settingPageApi from "../../services/api/pages/settingPageApi";
 import { useState } from "react";
 import { toastError, toastSuccess } from "../../services/toast";
+import { bindActionCreators } from "redux";
+import { actionCreators } from "../../services/redux";
+import { AxiosError } from "axios";
 
 const ChangePassword = () => {
   const dispatch = useDispatch();
-  const [inputFieldData, setInputFieldData] = useState({
+  const [inputFieldData, setInputFieldData] = useState<{
+    oldPassword: string;
+    newPassword: string;
+    cNewPassword: string;
+  }>({
     oldPassword: "",
     newPassword: "",
     cNewPassword: "",
   });
+  const { startProgressBar, stopProgressBar } = bindActionCreators(
+    actionCreators,
+    dispatch
+  );
 
-  const getInputFieldData = (e) => {
+  const getInputFieldData = (e: React.ChangeEvent<HTMLInputElement>) => {
     const name = e.target.name;
     const value = e.target.value;
     setInputFieldData({
@@ -25,32 +36,33 @@ const ChangePassword = () => {
     });
   };
 
-  const changePassword = async (e) => {
+  const changePasswordFunc = async (e: React.MouseEvent<HTMLButtonElement>) => {
     try {
       e.preventDefault();
-      dispatch(startProgressBar());
+      startProgressBar();
       const res = await settingPageApi.changePassword(inputFieldData);
       const data = await res.data;
       if (res.status === 200 && data.success) {
         toastSuccess(data.msg);
       } else {
         toastError(data.msg);
       }
-      dispatch(stopProgressBar());
+      stopProgressBar();
       setInputFieldData({
         oldPassword: "",
         newPassword: "",
         cNewPassword: "",
       });
-    } 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();
     }
   };
 
@@ -81,7 +93,7 @@ const ChangePassword = () => {
             value={inputFieldData.cNewPassword}
             onChange={getInputFieldData}
           />
-          <button onClick={changePassword}>Change</button>
+          <button onClick={changePasswordFunc}>Change</button>
         </form>
         <p>Don't Forgot Your Password</p>
       </div>

diff --git a/client/src/components/SettingPage/ChangeProfilePicture.jsx b/client/src/components/SettingPage/ChangeProfilePicture.jsx
@@ -2,11 +2,13 @@ import React, { useState, useEffect } from "react";
 import { Icon } from "@iconify/react";
 import { toastError, toastSuccess } from "../../services/toast";
 import { useDispatch, useSelector } from "react-redux";
-import {
-  changeUserProfilePictureAction,
-  showLoadingSpinner,
-} from "../../services/redux-actions";
+// import {
+//   changeUserProfilePictureAction,
+//   showLoadingSpinner,
+// } from "../../services/redux-actions";
 import settingPageApi from "../../services/api/pages/settingPageApi";
+import { bindActionCreators } from "redux";
+import { actionCreators } from "../../services/redux";
 
 const ChangeProfilePicture = () => {
   const dispatch = useDispatch();
@@ -15,36 +17,38 @@ const ChangeProfilePicture = () => {
   const userProfileDetailStore = useSelector(
     (state) => state.setUserProfileDetailReducer
   );
+  const { changeUserProfilePictureAction, showLoadingSpinner } =
+    bindActionCreators(actionCreators, dispatch);
 
   const changeProfilePicture = async (e) => {
     try {
       e.preventDefault();
       const imageFile = document.getElementById("user-profile-input").files[0];
       const imageUrl = imgUrl;
       if (!isImgUrl) {
-        dispatch(showLoadingSpinner(true));
+        showLoadingSpinner(true);
         const data = new FormData();
         data.append("image", imageFile);
         const res = await settingPageApi.changeImageFileProfilePicture(data);
         const resData = await res.data;
         if (resData.success && res.status === 200) {
           toastSuccess(resData.msg);
-          dispatch(changeUserProfilePictureAction(resData.picture));
+          changeUserProfilePictureAction(resData.picture);
         } else {
           toastError(resData.msg);
         }
-        dispatch(showLoadingSpinner(false));
+        showLoadingSpinner(false);
       } else {
-        dispatch(showLoadingSpinner(true));
+        showLoadingSpinner(true);
         const res = await settingPageApi.changeImageUrlProfilePicture(imageUrl);
         const resData = await res.data;
         if (resData.success && res.status === 200) {
           toastSuccess(resData.msg);
-          dispatch(changeUserProfilePictureAction(imageUrl));
+          changeUserProfilePictureAction(imageUrl);
         } else {
           toastError(resData.msg);
         }
-        dispatch(showLoadingSpinner(false));
+        showLoadingSpinner(false);
       }
       setImgUrl("");
     } catch (err) {
@@ -55,7 +59,7 @@ const ChangeProfilePicture = () => {
       } else {
         toastError("Some Problem Occur, Please Try again later!!!");
       }
-      dispatch(showLoadingSpinner(false));
+      showLoadingSpinner(false);
     }
     setImgUrl("");
   };

diff --git a/...c/components/SettingPage/ChangeUserID.jsx → ...c/components/SettingPage/ChangeUserID.tsx b/...c/components/SettingPage/ChangeUserID.jsx → ...c/components/SettingPage/ChangeUserID.tsx
@@ -1,41 +1,47 @@
 import React, { useState } from "react";
 import settingPageApi from "../../services/api/pages/settingPageApi";
 import { useDispatch } from "react-redux";
-import {
-  changeRootUserUserIDAction,
-  startProgressBar,
-  stopProgressBar,
-} from "../../services/redux-actions";
+// import {
+//   changeRootUserUserIDAction,
+//   startProgressBar,
+//   stopProgressBar,
+// } from "../../services/redux-actions";
 import { toastError, toastSuccess } from "../../services/toast";
+import { AxiosError } from "axios";
+import { actionCreators } from "../../services/redux";
+import { bindActionCreators } from "redux";
 
 const ChangeUserID = () => {
   const dispatch = useDispatch();
-  const [newUserID, setNewUserID] = useState("");
+  const [newUserID, setNewUserID] = useState<string>("");
+  const { startProgressBar, stopProgressBar, changeRootUserUserIDAction } =
+    bindActionCreators(actionCreators, dispatch);
 
-  const changeUserID = async (e) => {
+  const changeUserIDFunc = async (e: React.MouseEvent<HTMLButtonElement>) => {
     try {
       e.preventDefault();
-      dispatch(startProgressBar());
+      startProgressBar();
       //   console.log(newUserID);
       const res = await settingPageApi.changeUserID(newUserID);
       const resData = await res.data;
       if (resData.success) {
         toastSuccess(resData.msg);
-        dispatch(changeRootUserUserIDAction(resData.userID));
+        changeRootUserUserIDAction(resData.userID);
       } else {
         toastError(resData.msg);
       }
-      dispatch(stopProgressBar());
+      stopProgressBar();
       setNewUserID("");
-    } 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();
     }
   };
 
@@ -54,7 +60,7 @@ const ChangeUserID = () => {
               setNewUserID(e.target.value);
             }}
           />
-          <button onClick={changeUserID}>Change</button>
+          <button onClick={changeUserIDFunc}>Change</button>
         </form>
         <p>You can only be able to set unique ID for your profile</p>
       </div>

diff --git a/.../components/SettingPage/DeleteProfile.jsx → .../components/SettingPage/DeleteProfile.tsx b/.../components/SettingPage/DeleteProfile.jsx → .../components/SettingPage/DeleteProfile.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { toastInfo } from "../../services/toast";
 
 const DeleteProfile = () => {
-  const deleteUser = (e) => {
+  const deleteUser = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
     toastInfo("Sorry!! this feature is not available right now");
   };