Refactor: the useLogout hook to send api request to invalidate the jwt

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"

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

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;
 };

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;