Implement logout functionality and enhance popup alert system, remove logout screen

Author: codeAbinash

App.tsx

@@ -29,7 +29,6 @@ import type { DeviceParamList } from '@screens/Settings/Devices/Device'
 import Device from '@screens/Settings/Devices/Device'
 import Devices from '@screens/Settings/Devices/Devices'
 import About from '@screens/Settings/Extra/About'
-import Logout from '@screens/Settings/Logout/Logout'
 import ManageStorage from '@screens/Settings/ManageStorage'
 import Settings from '@screens/Settings/Settings/Settings'
 import UiAndComponents from '@screens/Settings/UiAndComponents'
@@ -151,7 +150,6 @@ export type RootStackParamList = {
   Devices: undefined
   Device: DeviceParamList
   AllUsers: undefined
-  Logout: undefined
   EditVersion: undefined
   Story: undefined
   User: UserParamList
@@ -185,7 +183,6 @@ function Navigation() {
         <Stack.Screen name='Home' component={Home} options={SMOOTH_ANIMATION} />
         <Stack.Screen name='Test' component={Test} options={GestureEnabled} />
         <Stack.Screen name='AllUsers' component={AllUsers} options={GestureEnabled} />
-        <Stack.Screen name='Logout' component={Logout} options={IOS_BOTTOM_STYLE} />
         {/* <Stack.Screen name='Location' component={Location} /> */}
         {/* <Stack.Screen name='CompassAnimation' component={CompassAnimation} /> */}
         {/* <Stack.Screen name='ParallaxWallpaper' component={ParallaxWallpaper} /> */}

src/assets/images/src/logout.svg

@@ -12,9 +12,10 @@ type PopupT = {
     text: string
     onPress?: () => void
   }[]
+  noClose?: boolean
 }
 
-const Popup = React.memo<PopupT>(({ text, title, buttons, index }) => {
+const Popup = React.memo<PopupT>(({ text, title, buttons, index, noClose }) => {
   const removePopup = popupStore((store) => store.removePopup)
 
   return (
@@ -25,7 +26,9 @@ const Popup = React.memo<PopupT>(({ text, title, buttons, index }) => {
         visible={true}
         hardwareAccelerated
         statusBarTranslucent
-        onRequestClose={() => removePopup(index)}
+        onRequestClose={() => {
+          if (!noClose) removePopup(index)
+        }}
       >
         <View className='flex-1 items-center justify-center bg-black/40 dark:bg-black/50'>
           <View className='w-[85%] rounded-xl bg-white dark:bg-zinc-900'>
@@ -61,7 +64,7 @@ export default Popup
 const PopupButton = React.memo<{ text: string; onPress?: () => void }>(({ text, onPress }) => {
   return (
     <TouchableOpacity
-      className='min-w-20 items-center justify-center rounded-lg px-5 py-3 active:bg-black/5 dark:active:bg-white/10'
+      className='min-w-20 items-center justify-center rounded-lg px-3 py-3 active:bg-black/5 dark:active:bg-white/10'
       onPress={onPress}
       activeOpacity={1}
     >
@@ -82,6 +85,7 @@ export const Popups = React.memo((props) => {
           index={index}
           text={popup.text}
           title={popup.title}
+          noClose={popup.noClose}
           buttons={popup.buttons || [{ text: 'OK' }]}
         />
       ))}

src/components/Popup.tsx

@@ -7,6 +7,7 @@ import SettText from '@components/Settings/SettText'
 import SettWrapper from '@components/Settings/SettWrapper'
 import { queryClient } from '@query/index'
 import type { RouteProp } from '@react-navigation/native'
+import { handleLogout, logout } from '@screens/auth/utils'
 import { useMutation } from '@tanstack/react-query'
 import { client } from '@utils/client'
 import { F, Medium } from '@utils/fonts'
@@ -39,6 +40,16 @@ export default function Device({ navigation, route }: { navigation: StackNav; ro
     mutationFn: async () =>
       await (await client.api.devices.delete.$post({ form: { device: device?.id || '' } })).json(),
   })
+
+  const { mutate: logoutMutation } = useMutation({
+    mutationKey: ['logout'],
+    mutationFn: async () => await (await client.api.logout.$post()).json(),
+    onSuccess: (d) => {
+      if (!d.status) ToastAndroid.show('Error logging out!', ToastAndroid.SHORT)
+      logout()
+    },
+  })
+
   const relativeTime = useMemo(() => getRelativeTime(device?.time), [device?.time])
 
   const DeviceIcon = useMemo(() => getDeviceIcon(device?.os, device?.name), [device?.os, device?.name])
@@ -62,7 +73,10 @@ export default function Device({ navigation, route }: { navigation: StackNav; ro
   }, [data])
 
   function handleRemove() {
-    if (route.params.device?.isSelf) return navigation.navigate('Logout')
+    if (route.params.device?.isSelf) {
+      handleLogout(logoutMutation)
+      return
+    }
     alert('Remove Device', 'Are you sure you want to remove this device?', [
       { text: 'Cancel' },
       { text: 'Remove', onPress: () => mutate() },

src/screens/Settings/Devices/Device.tsx

@@ -33,20 +33,20 @@ import { SettOption } from '@components/Settings/SettOption'
 import SettText from '@components/Settings/SettText'
 import { Txt, TxtAcc } from '@components/Text'
 import { useIsFocused } from '@react-navigation/native'
+import { handleLogout, logout } from '@screens/auth/utils'
+import { useMutation } from '@tanstack/react-query'
+import { client } from '@utils/client'
 import { Colors } from '@utils/colors'
 import { APP_VERSION, APP_VERSION_CODE, ask_a_question, join_telegram_channel } from '@utils/constants'
 import { Bold } from '@utils/fonts'
 import { Caches, clearStorage, getStartWithSize, getStorageSize } from '@utils/storage'
 import type { NavProp } from '@utils/types'
 import { screenDelay, toReadableSize } from '@utils/utils'
 import React, { useEffect } from 'react'
-import { View, useColorScheme } from 'react-native'
+import { ToastAndroid, View, useColorScheme } from 'react-native'
 import { ScrollView } from 'react-native-gesture-handler'
 import Animated, { FadeIn } from 'react-native-reanimated'
 import AdminSettings from './AdminSettings'
-// function getTransparentCardStyle(scheme: ColorSchemeName) {
-//   return scheme === 'dark' ? 'aa' : '77'
-// }
 
 function SettingsHeader({ title, Title }: { title?: string; Title?: React.ReactNode }) {
   const [search, setSearch] = React.useState('')
@@ -71,20 +71,29 @@ export default function Settings({ navigation }: NavProp) {
 
   const focused = useIsFocused()
 
+  const { mutate: logoutMutation } = useMutation({
+    mutationKey: ['logout'],
+    mutationFn: async () => await (await client.api.logout.$post()).json(),
+    onSuccess: (d) => {
+      if (!d.status) ToastAndroid.show('Error logging out!', ToastAndroid.SHORT)
+      logout()
+    },
+  })
+
   useEffect(() => {
     focused &&
       screenDelay(() => {
         setTotalSize(getStartWithSize(''))
         setTotalCache(getStorageSize(Caches))
       })
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
   function clearCache() {
     clearStorage(Caches)
     setTotalCache(0)
   }
 
+
   return (
     <View className='flex-1 bg-white dark:bg-zinc-950'>
       <PaddingTop />
@@ -95,8 +104,6 @@ export default function Settings({ navigation }: NavProp) {
         keyboardShouldPersistTaps='always'
       >
         <SettingsHeader title='Settings' />
-        {/* <SettingsHeader navigation={navigation} title='Settings' back={false}/> */}
-        {/* <SettingBackHeader title='Computer Science' navigation={navigation} /> */}
         <Gap20>
           <Gap12>
             <SettText className='mt-3'>
@@ -105,34 +112,6 @@ export default function Settings({ navigation }: NavProp) {
             </SettText>
             <UpdateSettings navigation={navigation} />
             <SettGroup title='General'>
-              {/* <SettOption
-                title='App Update'
-                Icon={<RoundedIcon Icon={Setting07SolidIcon} className='bg-slate-500' />}
-                arrow
-                Right={<RoundNotification n={4} />}
-                onPress={() =>
-                  navigation.navigate('Update', {
-                    version: '2.7.3',
-                    size: '10MB',
-                    whatsNew: ['New features', 'Bug fixes', 'Performance improvements'],
-                  })
-                }
-              /> */}
-              {/* <SettOption
-                title='App Update'
-                Icon={<RoundedIcon Icon={Setting07SolidIcon} className='bg-slate-500' />}
-                arrow
-                Right={<RoundNotification n={1} />}
-                onPress={() =>
-                  navigation.navigate('ForceUpdate', {
-                    shouldGoBack: true,
-                    version: '2.7.3',
-                    size: '10MB',
-                    whatsNew: ['New features', 'Bug fixes', 'Performance improvements'],
-                  })
-                }
-              /> */}
-
               <SettOption
                 title='Your Profile'
                 Icon={<RoundedIcon Icon={UserSolidIcon} className='bg-green-500' />}
@@ -172,7 +151,7 @@ export default function Settings({ navigation }: NavProp) {
                 arrow
                 title='Log Out'
                 Icon={<RoundedIcon Icon={Logout02SolidIcon} className='bg-red-500' />}
-                onPress={() => navigation.navigate('Logout')}
+                onPress={() => handleLogout(logoutMutation)}
               />
             </SettGroup>
           </Gap12>

src/screens/Settings/Logout/Logout.tsx

@@ -15,6 +15,7 @@ import { SettOption } from '@components/Settings/SettOption'
 import SettText from '@components/Settings/SettText'
 import { useMutation } from '@tanstack/react-query'
 import { client, updateClientHeader } from '@utils/client'
+import { W } from '@utils/dimensions'
 import { Bold, SemiBold } from '@utils/fonts'
 import type { NavProp } from '@utils/types'
 import { useMemo, useState } from 'react'
@@ -68,7 +69,7 @@ export default function Login({ navigation }: NavProp) {
     },
   })
 
-  function handelSubmit() {
+  function handleSubmit() {
     const { error, data } = loginZodValidator.safeParse({ username, password, deviceName, deviceOs })
     if (error) {
       alert('Error', error.errors[0]?.message || '')
@@ -81,9 +82,9 @@ export default function Login({ navigation }: NavProp) {
     <KeyboardAvoid className='bg flex-1' contentContainerStyle={{ paddingBottom: 20 }}>
       <View className='pb-5'>
         <PaddingTop />
-        <View className='px-5 py-5 pb-10'>
-          <Bold className='text-3xl text-black dark:text-white'>Welcome to Tech Triangle</Bold>
-          <Lottie source={Animations['welcome']} />
+        <View className='px-5 py-5 pb-8'>
+          <Bold className='pb-3 text-3xl text-black dark:text-white'>Welcome to Tech Triangle</Bold>
+          <Lottie source={Animations['welcome']} style={{ width: W * 0.6, height: W * 0.6 }} />
         </View>
         <Gap12>
           <SettGroup title='Email or Username'>
@@ -121,7 +122,7 @@ export default function Login({ navigation }: NavProp) {
             title={isPending ? 'Logging in...' : 'Login'}
             className='w-full'
             disabled={isPending}
-            onPress={handelSubmit}
+            onPress={handleSubmit}
           />
         </View>
         <SettGroup title='More Options' className='mt-5'>

src/screens/Settings/Settings/Settings.tsx

@@ -0,0 +1,26 @@
+import authStore from '@/zustand/authStore'
+import { navigationStore } from '@/zustand/navigationStore'
+import popupStore from '@/zustand/popupStore'
+import { queryClient } from '@query/index'
+
+export function logout() {
+  const navigation = navigationStore.getState().navigation
+  authStore.getState().removeToken()
+  popupStore.getState().clear()
+  queryClient.clear()
+  navigation?.reset({ index: 0, routes: [{ name: 'Login' }] })
+}
+
+export function handleLogout(logoutMutation: () => void) {
+  const alert = popupStore.getState().alert
+  alert('Log out', 'This is the device you are currently using. Are you sure you want to log out?', [
+    {
+      text: 'Log out',
+      onPress() {
+        logoutMutation()
+        alert('Please wait', 'Please wait while we log you out', [], true)
+      },
+    },
+    { text: 'Cancel' },
+  ])
+}

src/screens/auth/Login.tsx

@@ -4,19 +4,22 @@ export type Popup = {
   text?: string
   title?: string
   buttons?: { text: string; onPress?: () => void }[]
+  noClose?: boolean
 }
 
 type PopupStore = {
   popups: Popup[]
-  alert: (title: string, text: string, buttons?: { text: string; onPress?: () => void }[]) => void
+  alert: (title: string, text: string, buttons?: { text: string; onPress?: () => void }[], noClose?: boolean) => void
   removePopup: (index: number) => void
+  clear: () => void
 }
 
 const popupStore = create<PopupStore>((set) => ({
   popups: [],
-  alert: (title, text, buttons = [{ text: 'OK' }]) =>
-    set((state) => ({ popups: [...state.popups, { title, text, buttons }] })),
+  alert: (title, text, buttons = [{ text: 'OK' }], noClose = false) =>
+    set((state) => ({ popups: [...state.popups, { title, text, buttons, noClose }] })),
   removePopup: (index) => set((state) => ({ popups: state.popups.filter((_, i) => i !== index) })),
+  clear: () => set({ popups: [] }),
 }))
 
 export default popupStore