Add logout button (#35)

src/hooks/useLogout.ts

@@ -1,16 +1,11 @@
 import { useQueryClient } from "@tanstack/react-query";
 import storage from "../utils/storage";
-import { useNavigation } from "@react-navigation/native";
 
 export function useLogout() {
-  const navigation = useNavigation();
   const queryClient = useQueryClient();
   return async () => {
     await storage.removeItem(storage.TOKEN_KEY);
-    queryClient.removeQueries();
-    queryClient.resetQueries();
-    queryClient.invalidateQueries();
-    queryClient.setQueryData(["user"], null);
-    console.log("ok");
+    await queryClient.resetQueries();
+    await queryClient.invalidateQueries();
   };
 }

src/hooks/useUser.ts

@@ -11,5 +11,5 @@ export function useUserQuery(disabled?: boolean) {
 
 export function useUser() {
   const { data, error } = useUserQuery();
-  return data ? data : null;
+  return data && !error ? data : null;
 }

src/navigation/DrawerNavigation.tsx

@@ -7,7 +7,7 @@ import {
 import { BottomNavigator } from "./BottomTabNavigator";
 import { Icon } from "../icons";
 import colors from "../../colors";
-import { View, ViewProps } from "react-native";
+import { Pressable, View, ViewProps } from "react-native";
 import { Avatar, HorizontalDivider, StyledText } from "../components";
 import { IconButton } from "../components/IconButton";
 import { twMerge } from "tailwind-merge";
@@ -20,6 +20,7 @@ import { useUser } from "../hooks";
 import { NotificationsScreen } from "../screens/NotificationsScreen/NotificationsScreen";
 import { MyProfileScreen } from "../screens/MyProfileScreen";
 import { SettingsStack } from "./SettingsStack";
+import { useLogout } from "../hooks/useLogout";
 
 const Drawer = createDrawerNavigator<DrawerNavigatorParamList>();
 
@@ -29,6 +30,7 @@ const DrawerHeader = ({
   className?: ViewProps["className"];
 }) => {
   const user = useUser()!;
+  const logout = useLogout();
   return (
     <>
       <View className={twMerge("md:hidden", className)}>
@@ -38,6 +40,13 @@ const DrawerHeader = ({
             <StyledText weight={600} color="black">
               {user.name}
             </StyledText>
+            <Pressable
+              onPress={() => {
+                logout();
+              }}
+            >
+              <StyledText color="black">Logout</StyledText>
+            </Pressable>
           </View>
           <IconButton
             iconProps={{ name: "notifications", color: "gray38", size: 23 }}
@@ -63,6 +72,8 @@ const DrawerFooter = ({
 }) => {
   const user = useUser()!;
 
+  const logout = useLogout();
+
   return (
     <View className={twMerge("items-center mb-20", className)}>
       <Avatar
@@ -76,6 +87,13 @@ const DrawerFooter = ({
       <StyledText color="gray7C" weight={500}>
         {user.email}
       </StyledText>
+      <Pressable
+        onPress={() => {
+          logout();
+        }}
+      >
+        <StyledText>Logout</StyledText>
+      </Pressable>
     </View>
   );
 };

src/navigation/navigation.tsx

@@ -3,9 +3,8 @@ import LinkingConfiguration from "./LinkingConfiguration";
 import { NavigationContainer } from "@react-navigation/native";
 import { createNativeStackNavigator } from "@react-navigation/native-stack";
 import * as React from "react";
-import { BottomNavigator } from "./BottomTabNavigator";
 import { AuthStackNavigator } from "./AuthStack";
-import { useUser } from "../hooks";
+import { useUserQuery } from "../hooks";
 import { EmailVerificationSuccess } from "../screens/AuthScreens";
 import { AuthHeader } from "../components";
 import { DrawerNavigator } from "./DrawerNavigation";
@@ -18,7 +17,7 @@ import { addPushToken } from "../utils/api";
 const Stack = createNativeStackNavigator<RootStackParamList>();
 
 const RootNavigator = () => {
-  const user = useUser();
+  const user = useUserQuery();
   const [expoPushToken, setExpoPushToken] = useState("");
   const [notification, setNotification] = useState<
     Notifications.Notification | undefined
@@ -27,7 +26,7 @@ const RootNavigator = () => {
   const responseListener = useRef<Notifications.Subscription>();
 
   React.useEffect(() => {
-    if (user) {
+    if (user.data) {
       registerForPushNotificationsAsync().then((token) => {
         if (token) {
           addPushToken(token);
@@ -52,7 +51,7 @@ const RootNavigator = () => {
       responseListener.current &&
         Notifications.removeNotificationSubscription(responseListener.current);
     };
-  }, [user]);
+  }, [user.data]);
 
   return (
     <Stack.Navigator
@@ -61,7 +60,7 @@ const RootNavigator = () => {
         animation: "slide_from_right",
       }}
     >
-      {user ? (
+      {user.data && !user.isError ? (
         <>
           <Stack.Screen name="HomeScreen" component={DrawerNavigator} />
         </>