Refactor: replaced Dispatch to useQuery/Request of src/Components/Aut…

…h/log… (#6333) * Refactor: replaced useDispatch to useQuery of src/Components/Auth/login.tsx * fix:useQuery changed to Request * feat: replaced dispatch with request * fix: types and added pathparams * fix: request body error * Update Login.tsx * change:Tres to Tbody * fixes: response type change * Update package-lock.json
ohcnetwork · Oct 4, 2023 · d53eed9 · d53eed9
1 parent 8589460
commit d53eed9
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 65 deletions.
diff --git a/src/Components/Auth/Login.tsx b/src/Components/Auth/Login.tsx
@@ -1,10 +1,9 @@
 import { useEffect, useState } from "react";
-import { useDispatch } from "react-redux";
-import { postForgotPassword, postLogin } from "../../Redux/actions";
+import request from "../../Utils/request/request";
+import routes from "../../Redux/api";
 import { useTranslation } from "react-i18next";
 import ReCaptcha from "react-google-recaptcha";
 import * as Notification from "../../Utils/Notifications.js";
-import { get } from "lodash";
 import LegendInput from "../../CAREUI/interactive/LegendInput";
 import LanguageSelectorLogin from "../Common/LanguageSelectorLogin";
 import CareIcon from "../../CAREUI/icons/CareIcon";
@@ -25,7 +24,6 @@ export const Login = (props: { forgot?: boolean }) => {
     custom_logo_alt,
     custom_description,
   } = useConfig();
-  const dispatch: any = useDispatch();
   const initForm: any = {
     username: "",
     password: "",
@@ -90,37 +88,35 @@ export const Login = (props: { forgot?: boolean }) => {
     };
   }, []);
 
-  const handleSubmit = (e: any) => {
+  const handleSubmit = async (e: any) => {
     e.preventDefault();
     const valid = validateData();
     if (valid) {
       // replaces button with spinner
       setLoading(true);
 
-      dispatch(postLogin(valid)).then((resp: any) => {
-        const res = get(resp, "data", null);
-        const statusCode = get(resp, "status", "");
-        if (res && statusCode === 429) {
-          setCaptcha(true);
-          // captcha displayed set back to login button
-          setLoading(false);
-        } else if (res && statusCode === 200) {
-          localStorage.setItem(LocalStorageKeys.accessToken, res.access);
-          localStorage.setItem(LocalStorageKeys.refreshToken, res.refresh);
-
-          if (
-            window.location.pathname === "/" ||
-            window.location.pathname === "/login"
-          ) {
-            window.location.href = "/facility";
-          } else {
-            window.location.href = window.location.pathname.toString();
-          }
+      const { res, data } = await request(routes.login, {
+        body: { ...valid },
+      });
+      if (res && res.status === 429) {
+        setCaptcha(true);
+        // captcha displayed set back to login button
+        setLoading(false);
+      } else if (res && res.status === 200 && data) {
+        localStorage.setItem(LocalStorageKeys.accessToken, data.access);
+        localStorage.setItem(LocalStorageKeys.refreshToken, data.refresh);
+        if (
+          window.location.pathname === "/" ||
+          window.location.pathname === "/login"
+        ) {
+          window.location.href = "/facility";
         } else {
-          // error from server set back to login button
-          setLoading(false);
+          window.location.href = window.location.pathname.toString();
         }
-      });
+      } else {
+        // error from server set back to login button
+        setLoading(false);
+      }
     }
   };
 
@@ -146,26 +142,22 @@ export const Login = (props: { forgot?: boolean }) => {
     return form;
   };
 
-  const handleForgetSubmit = (e: any) => {
+  const handleForgetSubmit = async (e: any) => {
     e.preventDefault();
     const valid = validateForgetData();
     if (valid) {
       setLoading(true);
-      dispatch(postForgotPassword(valid)).then((resp: any) => {
-        setLoading(false);
-        const res = resp && resp.data;
-        if (res && res.status === "OK") {
-          Notification.Success({
-            msg: t("password_sent"),
-          });
-        } else if (res && res.data) {
-          setErrors(res.data);
-        } else {
-          Notification.Error({
-            msg: t("something_wrong"),
-          });
-        }
+      const { res, error } = await request(routes.forgotPassword, {
+        body: { ...valid },
       });
+      setLoading(false);
+      if (res && res.statusText === "OK") {
+        Notification.Success({
+          msg: t("password_sent"),
+        });
+      } else if (res && error) {
+        setErrors(error);
+      }
     }
   };
 

diff --git a/src/Components/Auth/ResetPassword.tsx b/src/Components/Auth/ResetPassword.tsx
@@ -1,17 +1,16 @@
 import { useEffect, useState } from "react";
-import { useDispatch } from "react-redux";
+import request from "../../Utils/request/request.js";
 import * as Notification from "../../Utils/Notifications.js";
-import { postResetPassword, checkResetToken } from "../../Redux/actions";
 import { navigate } from "raviger";
 import { useTranslation } from "react-i18next";
 import { LocalStorageKeys } from "../../Common/constants";
 import { Cancel, Submit } from "../Common/components/ButtonV2";
 import TextFormField from "../Form/FormFields/TextFormField";
 import { validateRule } from "../Users/UserAdd";
 import { validatePassword } from "../../Common/validation.js";
+import routes from "../../Redux/api.js";
 
 export const ResetPassword = (props: any) => {
-  const dispatch: any = useDispatch();
   const initForm: any = {
     password: "",
     confirm: "",
@@ -65,36 +64,37 @@ export const ResetPassword = (props: any) => {
     return form;
   };
 
-  const handleSubmit = (e: any) => {
+  const handleSubmit = async (e: any) => {
     e.preventDefault();
     const valid = validateData();
     if (valid) {
       valid.token = props.token;
-      dispatch(postResetPassword(valid)).then((resp: any) => {
-        const res = resp && resp.data;
-        if (res && res.status === "OK") {
-          localStorage.removeItem(LocalStorageKeys.accessToken);
-          Notification.Success({
-            msg: t("password_reset_success"),
-          });
-          navigate("/login");
-        } else if (res && res.data) {
-          setErrors(res.data);
-        } else {
-          Notification.Error({
-            msg: t("password_reset_failure"),
-          });
-        }
+      const { res, error } = await request(routes.resetPassword, {
+        body: { ...valid },
       });
+      if (res && res.statusText === "OK") {
+        localStorage.removeItem(LocalStorageKeys.accessToken);
+        Notification.Success({
+          msg: t("password_reset_success"),
+        });
+        navigate("/login");
+      } else if (res && error) {
+        setErrors(error);
+      }
     }
   };
 
   useEffect(() => {
-    if (props.token) {
-      dispatch(checkResetToken({ token: props.token })).then((resp: any) => {
-        const res = resp && resp.data;
-        if (!res || res.status !== "OK") navigate("/invalid-reset");
+    const checkResetToken = async () => {
+      const { res } = await request(routes.checkResetToken, {
+        body: { token: props.token },
       });
+      if (!res || res.statusText !== "OK") {
+        navigate("/invalid-reset");
+      }
+    };
+    if (props.token) {
+      checkResetToken();
     } else {
       navigate("/invalid-reset");
     }

diff --git a/src/Redux/api.tsx b/src/Redux/api.tsx
@@ -17,6 +17,11 @@ interface JwtTokenObtainPair {
   refresh: string;
 }
 
+interface LoginInput {
+  username: string;
+  password: string;
+}
+
 const routes = {
   config: {
     path: import.meta.env.REACT_APP_CONFIG ?? "/config.json",
@@ -30,6 +35,8 @@ const routes = {
     path: "/api/v1/auth/login/",
     method: "POST",
     noAuth: true,
+    TRes: Type<JwtTokenObtainPair>(),
+    TBody: Type<LoginInput>(),
   },
 
   token_refresh: {
@@ -47,16 +54,22 @@ const routes = {
   checkResetToken: {
     path: "/api/v1/password_reset/check/",
     method: "POST",
+    TRes: Type<Record<string, never>>(),
+    TBody: Type<{ token: string }>(),
   },
 
   resetPassword: {
     path: "/api/v1/password_reset/confirm/",
     method: "POST",
+    TRes: Type<Record<string, never>>(),
+    TBody: Type<{ password: string; confirm: string }>(),
   },
 
   forgotPassword: {
     path: "/api/v1/password_reset/",
     method: "POST",
+    TRes: Type<Record<string, never>>(),
+    TBody: Type<{ username: string }>(),
   },
 
   updatePassword: {