fix(setting_page): created ChangeDisplayName as separated component

roman-ojha · Jun 6, 2022 · 4af10fd · 4af10fd
1 parent 51bc077
commit 4af10fd
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 52 deletions.
diff --git a/client/src/components/SettingPage/ChangeDisplayName.jsx b/client/src/components/SettingPage/ChangeDisplayName.jsx
@@ -0,0 +1,63 @@
+import React, { useState } from "react";
+import { useDispatch } from "react-redux";
+import {
+  changeRootUserNameAction,
+  startProgressBar,
+  stopProgressBar,
+} from "../../services/redux-actions";
+import settingPageApi from "../../services/api/pages/settingPageApi";
+import { toastError, toastSuccess } from "../../services/toast";
+
+const ChangeDisplayName = () => {
+  const dispatch = useDispatch();
+  const [newName, setNewName] = useState("");
+
+  const changeName = async (e) => {
+    try {
+      e.preventDefault();
+      dispatch(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));
+      } else {
+        toastError(resData.msg);
+      }
+      dispatch(stopProgressBar());
+      setNewName("");
+    } catch (err) {
+      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());
+    }
+  };
+
+  return (
+    <>
+      <div className="Setting_Container_With_Input_Field">
+        <h1>Change display name</h1>
+        <form>
+          <input
+            type="text"
+            placeholder="Display Name"
+            name="name"
+            value={newName}
+            onChange={(e) => {
+              setNewName(e.target.value);
+            }}
+          />
+          <button onClick={changeName}>Change</button>
+        </form>
+        <p>Not require to be unique</p>
+      </div>
+    </>
+  );
+};
+
+export default ChangeDisplayName;
diff --git a/client/src/pages/Setting.js b/client/src/pages/Setting.js
@@ -2,11 +2,7 @@ import React, { useState } from "react";
 import { Helmet } from "react-helmet";
 import "../styles/pages/settingPage.css";
 import { useDispatch } from "react-redux";
-import {
-  changeRootUserNameAction,
-  startProgressBar,
-  stopProgressBar,
-} from "../services/redux-actions";
+import { startProgressBar, stopProgressBar } from "../services/redux-actions";
 import LoadingSpinner from "../components/LoadingSpinner";
 import { ToastContainer } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
@@ -16,6 +12,7 @@ import OpenRightPartDrawerButton from "../components/OpenRightPartDrawerButton";
 import OpenSideBarDrawerButton from "../components/OpenSideBarDrawerButton";
 import ChangeProfilePicture from "../components/SettingPage/ChangeProfilePicture";
 import ChangeUserID from "../components/SettingPage/ChangeUserID";
+import ChangeDisplayName from "../components/SettingPage/ChangeDisplayName";
 
 const Setting = () => {
   const dispatch = useDispatch();
@@ -35,34 +32,7 @@ const Setting = () => {
       [name]: value,
     });
   };
-  const changeName = async (e) => {
-    try {
-      e.preventDefault();
-      dispatch(startProgressBar());
-      const res = await Api.changeName(settingInputFieldData);
-      const resData = await res.data;
-      if (resData.success && res.status === 200) {
-        toastSuccess(resData.msg);
-        dispatch(changeRootUserNameAction(resData.name));
-      } else {
-        toastError(resData.msg);
-      }
-      dispatch(stopProgressBar());
-      setSettingInputFieldData({
-        ...settingInputFieldData,
-        name: "",
-      });
-    } catch (err) {
-      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());
-    }
-  };
+
   const changePassword = async (e) => {
     try {
       e.preventDefault();
@@ -109,20 +79,7 @@ const Setting = () => {
         <OpenRightPartDrawerButton />
         <ChangeProfilePicture />
         <ChangeUserID />
-        <div className="Setting_Container_With_Input_Field">
-          <h1>Change display name</h1>
-          <form>
-            <input
-              type="text"
-              placeholder="Display Name"
-              name="name"
-              value={settingInputFieldData.name}
-              onChange={getInputFieldData}
-            />
-            <button onClick={changeName}>Change</button>
-          </form>
-          <p>Not require to be unique</p>
-        </div>
+        <ChangeDisplayName />
         <div className="Setting_Container_With_Input_Field">
           <h1>Change Password</h1>
           <input

diff --git a/client/src/services/api/pages/settingPageApi.js b/client/src/services/api/pages/settingPageApi.js
@@ -1,12 +1,11 @@
 import { instance as axios } from "../../axios";
 
 export default {
-  changeUserID: async (settingInputFieldData) => {
-    console.log(settingInputFieldData);
+  changeUserID: async (newUserID) => {
     return await axios({
       method: "POST",
       url: "/changeUserID",
-      data: { newUserID: settingInputFieldData },
+      data: { newUserID: newUserID },
       withCredentials: true,
     });
   },
@@ -22,11 +21,11 @@ export default {
       withCredentials: true,
     });
   },
-  changeName: async (settingInputFieldData) => {
+  changeName: async (newName) => {
     return await axios({
       method: "POST",
       url: "/changeName",
-      data: { newName: settingInputFieldData.name },
+      data: { newName: newName },
       withCredentials: true,
     });
   },