feat: prompt before logging out

mrbasel · Aug 25, 2023 · 39253db · 39253db
1 parent a422576
commit 39253db
Showing 1 changed file with 40 additions and 7 deletions.
diff --git a/src/components/MainDrawer.tsx b/src/components/MainDrawer.tsx
@@ -1,7 +1,15 @@
 import { StyleSheet, View } from "react-native";
 import React, { useContext } from "react";
 import { DrawerNavigationHelpers } from "@react-navigation/drawer/lib/typescript/src/types";
-import { Divider, Drawer, useTheme } from "react-native-paper";
+import {
+  Button,
+  Dialog,
+  Divider,
+  Drawer,
+  Portal,
+  Text,
+  useTheme,
+} from "react-native-paper";
 import { AuthContext } from "../contexts";
 
 const bookmarkDrawerItems = ["All", "Archived", "Unread", "Untagged"];
@@ -16,16 +24,11 @@ export function MainDrawer({
   currentScreenIndex,
 }: MainDrawerProps) {
   const theme = useTheme();
-  const { setConfig } = useContext(AuthContext);
 
   const handlePress = (name: string) => {
     navigation?.navigate(name);
   };
 
-  const handleLogout = () => {
-    setConfig({ apiToken: "", serverUrl: "" });
-  };
-
   return (
     <View
       style={{ ...styles.container, backgroundColor: theme.colors.background }}
@@ -53,12 +56,42 @@ export function MainDrawer({
       </View>
       <View>
         <Drawer.Item label="About" onPress={() => handlePress("AboutScreen")} />
-        <Drawer.Item label="Logout" onPress={handleLogout} />
+        <LogoutDialogItem />
       </View>
     </View>
   );
 }
 
+function LogoutDialogItem() {
+  const [visible, setVisible] = React.useState(false);
+  const { setConfig } = useContext(AuthContext);
+
+  const handleLogout = () => {
+    setConfig({ apiToken: "", serverUrl: "" });
+  };
+
+  const toggleDialog = () => {
+    setVisible(!visible);
+  };
+
+  return (
+    <>
+      <Drawer.Item label="Logout" onPress={toggleDialog} />
+      <Portal>
+        <Dialog visible={visible} onDismiss={toggleDialog}>
+          <Dialog.Content>
+            <Text variant="bodyMedium">Are you sure you want to logout?</Text>
+          </Dialog.Content>
+          <Dialog.Actions>
+            <Button onPress={toggleDialog}>Close</Button>
+            <Button onPress={handleLogout}>Logout</Button>
+          </Dialog.Actions>
+        </Dialog>
+      </Portal>
+    </>
+  );
+}
+
 const styles = StyleSheet.create({
   container: {
     flex: 1,