From 5f6256fe758ba31fe8df9e9b58afb55ea83ed7b7 Mon Sep 17 00:00:00 2001
From: Roman Ojha <razzroman98@gmail.com>
Date: Mon, 6 Jun 2022 19:02:23 +0545
Subject: [PATCH] fix(setting_page): created changePassword as separated
 component

---
 .../components/SettingPage/ChangePassword.jsx | 91 +++++++++++++++++++
 client/src/pages/Setting.js                   | 75 +--------------
 .../src/services/api/pages/settingPageApi.js  |  8 +-
 3 files changed, 97 insertions(+), 77 deletions(-)
 create mode 100644 client/src/components/SettingPage/ChangePassword.jsx

diff --git a/client/src/components/SettingPage/ChangePassword.jsx b/client/src/components/SettingPage/ChangePassword.jsx
new file mode 100644
index 00000000..9eda1aae
--- /dev/null
+++ b/client/src/components/SettingPage/ChangePassword.jsx
@@ -0,0 +1,91 @@
+import React from "react";
+import { useDispatch } from "react-redux";
+import {
+  startProgressBar,
+  stopProgressBar,
+} from "../../services/redux-actions";
+import settingPageApi from "../../services/api/pages/settingPageApi";
+import { useState } from "react";
+import { toastError, toastSuccess } from "../../services/toast";
+
+const ChangePassword = () => {
+  const dispatch = useDispatch();
+  const [inputFieldData, setInputFieldData] = useState({
+    oldPassword: "",
+    newPassword: "",
+    cNewPassword: "",
+  });
+
+  const getInputFieldData = (e) => {
+    const name = e.target.name;
+    const value = e.target.value;
+    setInputFieldData({
+      ...inputFieldData,
+      [name]: value,
+    });
+  };
+
+  const changePassword = async (e) => {
+    try {
+      e.preventDefault();
+      dispatch(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());
+      setInputFieldData({
+        oldPassword: "",
+        newPassword: "",
+        cNewPassword: "",
+      });
+    } 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 Password</h1>
+        <input
+          type="password"
+          placeholder="Old password"
+          name="oldPassword"
+          value={inputFieldData.oldPassword}
+          onChange={getInputFieldData}
+        />
+        <input
+          type="password"
+          placeholder="New password"
+          name="newPassword"
+          value={inputFieldData.newPassword}
+          onChange={getInputFieldData}
+        />
+        <form>
+          <input
+            type="password"
+            placeholder="Conform password"
+            name="cNewPassword"
+            value={inputFieldData.cNewPassword}
+            onChange={getInputFieldData}
+          />
+          <button onClick={changePassword}>Change</button>
+        </form>
+        <p>Don't Forgot Your Password</p>
+      </div>
+    </>
+  );
+};
+
+export default ChangePassword;
diff --git a/client/src/pages/Setting.js b/client/src/pages/Setting.js
index 65aebe4d..278eb35e 100644
--- a/client/src/pages/Setting.js
+++ b/client/src/pages/Setting.js
@@ -13,55 +13,11 @@ import OpenSideBarDrawerButton from "../components/OpenSideBarDrawerButton";
 import ChangeProfilePicture from "../components/SettingPage/ChangeProfilePicture";
 import ChangeUserID from "../components/SettingPage/ChangeUserID";
 import ChangeDisplayName from "../components/SettingPage/ChangeDisplayName";
+import ChangePassword from "../components/SettingPage/ChangePassword";
 
 const Setting = () => {
   const dispatch = useDispatch();
-  const [settingInputFieldData, setSettingInputFieldData] = useState({
-    userID: "",
-    name: "",
-    oldPassword: "",
-    newPassword: "",
-    cNewPassword: "",
-    imgUrl: "",
-  });
-  const getInputFieldData = (e) => {
-    const name = e.target.name;
-    const value = e.target.value;
-    setSettingInputFieldData({
-      ...settingInputFieldData,
-      [name]: value,
-    });
-  };
 
-  const changePassword = async (e) => {
-    try {
-      e.preventDefault();
-      dispatch(startProgressBar());
-      const res = await Api.changePassword(settingInputFieldData);
-      const data = await res.data;
-      if (res.status === 200 && data.success) {
-        toastSuccess(data.msg);
-      } else {
-        toastError(data.msg);
-      }
-      dispatch(stopProgressBar());
-      setSettingInputFieldData({
-        ...settingInputFieldData,
-        oldPassword: "",
-        newPassword: "",
-        cNewPassword: "",
-      });
-    } 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 deleteUser = (e) => {
     e.preventDefault();
     toastInfo("Sorry!! this feature is not available right now");
@@ -80,34 +36,7 @@ const Setting = () => {
         <ChangeProfilePicture />
         <ChangeUserID />
         <ChangeDisplayName />
-        <div className="Setting_Container_With_Input_Field">
-          <h1>Change Password</h1>
-          <input
-            type="password"
-            placeholder="Old password"
-            name="oldPassword"
-            value={settingInputFieldData.oldPassword}
-            onChange={getInputFieldData}
-          />
-          <input
-            type="password"
-            placeholder="New password"
-            name="newPassword"
-            value={settingInputFieldData.newPassword}
-            onChange={getInputFieldData}
-          />
-          <form>
-            <input
-              type="password"
-              placeholder="Conform password"
-              name="cNewPassword"
-              value={settingInputFieldData.cNewPassword}
-              onChange={getInputFieldData}
-            />
-            <button onClick={changePassword}>Change</button>
-          </form>
-          <p>Don't Forgot Your Password</p>
-        </div>
+        <ChangePassword />
         <div className="Setting_Page_Delete_User_Profile_Container">
           <h1>Delete User Profile</h1>
           <p>
diff --git a/client/src/services/api/pages/settingPageApi.js b/client/src/services/api/pages/settingPageApi.js
index f214120f..b5235a6f 100644
--- a/client/src/services/api/pages/settingPageApi.js
+++ b/client/src/services/api/pages/settingPageApi.js
@@ -9,14 +9,14 @@ export default {
       withCredentials: true,
     });
   },
-  changePassword: async (settingInputFieldData) => {
+  changePassword: async (inputFieldData) => {
     return await axios({
       method: "POST",
       url: "/changePassword",
       data: {
-        oldPassword: settingInputFieldData.oldPassword,
-        newPassword: settingInputFieldData.newPassword,
-        cNewPassword: settingInputFieldData.cNewPassword,
+        oldPassword: inputFieldData.oldPassword,
+        newPassword: inputFieldData.newPassword,
+        cNewPassword: inputFieldData.cNewPassword,
       },
       withCredentials: true,
     });