From df468e1f414341c926b2266fb4b853a3887d36f8 Mon Sep 17 00:00:00 2001
From: Georgi 7DIGIT <georgi@7digit.io>
Date: Thu, 8 Feb 2024 12:30:25 +0200
Subject: [PATCH] Refactor: the useLogout hook to send api request to
 invalidate the jwt

---
 src/backdrops/DeleteAccount/DeleteAccount.jsx | 12 ++++--------
 src/blocks/UserDetails/UserDetails.jsx        |  4 ++--
 src/hooks/useLogout.js                        | 15 +++++++++------
 src/services/user.js                          | 10 ++++++++++
 4 files changed, 25 insertions(+), 16 deletions(-)

diff --git a/src/backdrops/DeleteAccount/DeleteAccount.jsx b/src/backdrops/DeleteAccount/DeleteAccount.jsx
index 6e47b137..b5a7f512 100644
--- a/src/backdrops/DeleteAccount/DeleteAccount.jsx
+++ b/src/backdrops/DeleteAccount/DeleteAccount.jsx
@@ -5,9 +5,9 @@ import Joi from "joi";
 
 import { Backdrop, InputPassword } from "#components";
 
-import { useError } from "#hooks";
+import { useError, useLogout } from "#hooks";
 
-import { clientSvc, localStorage, Context } from "#services";
+import { clientSvc, Context } from "#services";
 
 import { StyleSheet } from "react-native";
 
@@ -30,6 +30,7 @@ export const DeleteAccount = ({ isOpen, onClose }) => {
   const [data, setData] = useState({ password: "" });
   const [errors, setErrors] = useState({});
   const [isSubmitting, setIsSubmitting] = useState(false);
+  const logoutMutation = useLogout();
 
   const deleteAccount = async () => {
     const res = await clientSvc.deleteClientProfile(data.password);
@@ -40,7 +41,7 @@ export const DeleteAccount = ({ isOpen, onClose }) => {
   const deleteAccountMutation = useMutation(deleteAccount, {
     onSuccess: () => {
       setIsSubmitting(false);
-      handleLogout();
+      logoutMutation.mutate();
     },
     onError: (error) => {
       const { message: errorMessage } = useError(error);
@@ -60,11 +61,6 @@ export const DeleteAccount = ({ isOpen, onClose }) => {
     deleteAccountMutation.mutate();
   };
 
-  const handleLogout = () => {
-    localStorage.removeItem("token");
-    setToken(null);
-  };
-
   return (
     <Backdrop
       classes="delete-account"
diff --git a/src/blocks/UserDetails/UserDetails.jsx b/src/blocks/UserDetails/UserDetails.jsx
index b5de56e6..aa572e2e 100644
--- a/src/blocks/UserDetails/UserDetails.jsx
+++ b/src/blocks/UserDetails/UserDetails.jsx
@@ -262,7 +262,7 @@ export const UserDetails = ({
     }
   };
 
-  const handleLogout = useLogout();
+  const logoutMutation = useLogout();
 
   const handleGoBack = () => {
     navigation.goBack();
@@ -456,7 +456,7 @@ export const UserDetails = ({
                 iconColor={appStyles.colorPrimary_20809e}
                 label={t("logout")}
                 type="ghost"
-                onPress={handleLogout}
+                onPress={logoutMutation.mutate}
                 style={styles.textButton}
               />
               <ButtonWithIcon
diff --git a/src/hooks/useLogout.js b/src/hooks/useLogout.js
index 84401367..fd911ed1 100644
--- a/src/hooks/useLogout.js
+++ b/src/hooks/useLogout.js
@@ -1,17 +1,20 @@
 import { useContext } from "react";
-import { useQueryClient } from "@tanstack/react-query";
-import { localStorage, Context } from "#services";
+import { useQueryClient, useMutation } from "@tanstack/react-query";
+import { localStorage, Context, userSvc } from "#services";
 
 export const useLogout = () => {
   const { setToken, setInitialRouteName } = useContext(Context);
   const queryClient = useQueryClient();
 
-  const logout = () => {
-    localStorage.removeItem("token");
+  const logoutMutation = useMutation(async () => {
+    userSvc.logoutRequest();
     queryClient.clear();
     setToken(null);
     setInitialRouteName("TabNavigation");
-  };
+    setTimeout(() => {
+      localStorage.removeItem("token");
+    }, 500);
+  });
 
-  return logout;
+  return logoutMutation;
 };
diff --git a/src/services/user.js b/src/services/user.js
index f7995205..2f73beee 100644
--- a/src/services/user.js
+++ b/src/services/user.js
@@ -225,6 +225,15 @@ async function requestEmailOTP(email) {
   return response;
 }
 
+async function logoutRequest() {
+  try {
+    const response = await http.post(`${API_ENDPOINT}/logout`);
+    return response;
+  } catch (e) {
+    console.log("Error logging out", e);
+  }
+}
+
 const exportedFunctions = {
   changePassword,
   generateClientAccesToken,
@@ -246,6 +255,7 @@ const exportedFunctions = {
   transformUserData,
   changeLanguage,
   requestEmailOTP,
+  logoutRequest,
 };
 
 export default exportedFunctions;