Refactor Device component to use relative time format and add self logout option

Author: codeAbinash

src/screens/Settings/Devices/Device.tsx

@@ -10,6 +10,8 @@ import React, { useEffect, useMemo } from 'react'
 import { Alert, ToastAndroid, View } from 'react-native'
 import type { Device } from './types'
 import { getDate, getDeviceIcon, getOSIcon } from './utils'
+import { getRelativeTime } from '@utils/timeFormat'
+import { Medium, F } from '@utils/fonts'
 
 type ParamList = {
   Device: DeviceParamList
@@ -21,12 +23,18 @@ export type DeviceParamList = {
 
 export default function Device({ navigation, route }: { navigation: StackNav; route: RouteProp<ParamList, 'Device'> }) {
   const device = route.params.device
+
+  useEffect(() => {
+    console.log(route.params.device?.isSelf)
+  }, [route.params.device?.isSelf])
+
   // const client = getClient()
   const { mutate, isPending, data } = useMutation({
     mutationKey: ['removeDevice', device?.id],
     mutationFn: async () =>
       await (await client.api.devices.delete.$post({ form: { device: device?.id || '' } })).json(),
   })
+  const relativeTime = useMemo(() => getRelativeTime(device?.time), [device?.time])
 
   const DeviceIcon = useMemo(() => getDeviceIcon(device?.os, device?.name), [device?.os, device?.name])
   const OsIcon = useMemo(() => getOSIcon(device?.os), [device?.os])
@@ -49,6 +57,7 @@ export default function Device({ navigation, route }: { navigation: StackNav; ro
   }, [data])
 
   function handelRemove() {
+    if (route.params.device?.isSelf) return navigation.navigate('Logout')
     Alert.alert('Remove Device', 'Are you sure you want to remove this device?', [
       { text: 'Cancel', style: 'cancel' },
       { text: 'Remove', onPress: () => mutate(), style: 'destructive' },
@@ -64,18 +73,19 @@ export default function Device({ navigation, route }: { navigation: StackNav; ro
       </View> */}
       <SettWrapper title={device?.name || 'Unknown Device'} navigation={navigation}>
         <Gap gap={15}>
-          <SettText className='mt-3'>
-            If you see a device that you don't recognize, you can remove it from the list. Just click on the 'Remove
-            Device' button.
-          </SettText>
+          <SettText className='mt-3'>If you cannot identify this device, you can remove it from the list.</SettText>
           <SettGroup title='Device' className='pb-4'>
             <SettOption title={device?.name || 'Unknown'} Icon={DeviceIcon}></SettOption>
           </SettGroup>
           <SettGroup title='Operating System' className='pb-4'>
             <SettOption title={device?.os || 'Unknown'} Icon={OsIcon}></SettOption>
           </SettGroup>
           <SettGroup title='Logged In'>
-            <SettOption title={getDate(device?.time)}></SettOption>
+            <SettOption title={relativeTime}>
+              <Medium className='text-zinc-600 dark:text-zinc-400' style={F.F10_5} numberOfLines={1}>
+                {getDate(device?.time)}
+              </Medium>
+            </SettOption>
           </SettGroup>
           <SettGroup title='Device ID'>
             <SettOption title={device?.id || 'Unknown'}></SettOption>
@@ -84,7 +94,7 @@ export default function Device({ navigation, route }: { navigation: StackNav; ro
             Removing a device will log you out from the device. You will need to log in again to use the app on that
             device.
           </SettText>
-          <View className='px-5'>
+          <View className='px-6'>
             <Btn
               title={isPending ? 'Removing Device...' : 'Remove Device'}
               onPress={handelRemove}

src/screens/Settings/Devices/Devices.tsx

@@ -1,23 +1,17 @@
-import {
-  AndroidSolidIcon,
-  AppleSolidIcon,
-  ChromeSolidIcon,
-  WavingHand02SolidIcon,
-  WindowsOldSolidIcon,
-} from '@assets/icons/icons'
+import { WavingHand02SolidIcon } from '@assets/icons/icons'
 import { Gap12 } from '@components/Gap'
 import RoundedIcon from '@components/RoundedIcon'
 import { SettGroup, SettOption, SettText, SettWrapper } from '@components/Settings'
 import { useMutation, useQuery } from '@tanstack/react-query'
 import { client } from '@utils/client'
 import { Colors } from '@utils/colors'
 import { F, Medium } from '@utils/fonts'
-import type { NavProp, NU, StackNav } from '@utils/types'
+import { getRelativeTime } from '@utils/timeFormat'
+import type { NavProp, StackNav } from '@utils/types'
 import React, { useEffect, useMemo } from 'react'
 import { ActivityIndicator, Alert, ToastAndroid } from 'react-native'
 import type { Device } from './types'
-import { getDate, getDeviceIcon } from './utils'
-import { getRelativeTime } from '@utils/timeFormat'
+import { getDeviceIcon } from './utils'
 
 export default function Devices({ navigation }: NavProp) {
   const { data, isPending } = useQuery({
@@ -50,12 +44,10 @@ export default function Devices({ navigation }: NavProp) {
   return (
     <SettWrapper title='Devices' navigation={navigation}>
       <Gap12>
-        <SettText className='mt-3'>
-          You can manage your devices here. You can remove unwanted devices from the list.
-        </SettText>
+        <SettText className='mt-3'>You can remove unwanted devices from the list.</SettText>
         <SettGroup title='This Device'>
           {isPending && <ActivityIndicator size='large' color={Colors.accent} className='mb-10 mt-5' />}
-          {data && data.data && <Device navigation={navigation} device={data.data.currentDevice} />}
+          {data && data.data && <Device navigation={navigation} device={data.data.currentDevice} isSelf={true} />}
         </SettGroup>
         {data && data.data && data.data.devices.length > 0 && (
           <SettGroup>
@@ -72,7 +64,7 @@ export default function Devices({ navigation }: NavProp) {
         {data && data.data && data.data.devices.length > 0 && (
           <SettGroup title='Other Devices'>
             {data.data.devices.map((device, i) => (
-              <Device key={i} navigation={navigation} device={device} arrow />
+              <Device key={i} navigation={navigation} device={device} isSelf />
             ))}
           </SettGroup>
         )}
@@ -84,21 +76,33 @@ export default function Devices({ navigation }: NavProp) {
   )
 }
 
-function Device({ navigation, device, arrow }: { navigation: StackNav; device: Device; arrow?: boolean }) {
+function Device({ navigation, device, isSelf }: { navigation: StackNav; device: Device; isSelf: boolean }) {
   const Icon = useMemo(() => getDeviceIcon(device?.os, device?.name), [device?.os, device?.name])
   const { id, time, os, name } = device || {}
-  // const relativeTime = useMemo(() => getRelativeTime(time), [time])
+
+  const relativeTime = useMemo(() => getRelativeTime(time), [time])
   return (
     <SettOption
-      onPress={() => arrow && navigation.navigate('Device', { device })}
+      onPress={() =>
+        navigation.navigate('Device', {
+          device: {
+            id: id || 'Unknown',
+            time: time || 0,
+            os,
+            name,
+            isSelf,
+          },
+        })
+      }
       title={name || 'Unknown'}
       numberOfLines={1}
       key={id}
       Icon={Icon}
-      arrow={arrow}
+      arrow
     >
       <Medium className='text-zinc-600 dark:text-zinc-400' style={F.F10_5} numberOfLines={1}>
-        {os || 'Unknown'} • {getDate(time)}
+        {/* {os || 'Unknown'} • {getDate(time)} */}
+        {os || 'Unknown'} • {relativeTime}
       </Medium>
     </SettOption>
   )

src/screens/Settings/Devices/types.ts

@@ -5,4 +5,5 @@ export type Device = {
   time: number
   name: string | NU
   os: string | NU
+  isSelf?: boolean
 } | null

src/screens/Settings/Devices/utils.tsx

@@ -26,8 +26,8 @@ export function getDeviceIcon(os: string | NU, name: string | NU) {
   else if (name?.includes('Opera')) return <RoundedIcon Icon={OperaIcon} className='bg-rose-600' />
   else if (name?.includes('Firefox')) return <RoundedIcon Icon={FirefoxIcon} className='bg-orange-500' />
   else if (name?.includes('Safari')) return <RoundedIcon Icon={SafariIcon} className='bg-blue-500' />
-  else if (os?.startsWith('Windows')) return <RoundedIcon Icon={WindowsOldSolidIcon} className='bg-blue-500' />
-  else if (os?.startsWith('Linux')) return <RoundedIcon Icon={LinuxIcon} className='bg-black' />
+  else if (os?.includes('Windows')) return <RoundedIcon Icon={WindowsOldSolidIcon} className='bg-blue-500' />
+  else if (os?.includes('Linux')) return <RoundedIcon Icon={LinuxIcon} className='bg-black' />
   else return <RoundedIcon Icon={DeviceAccessSolidIcon} className='bg-rose-500' />
 }
 

src/screens/Settings/Settings.tsx

@@ -273,7 +273,7 @@ function AdminSettings({ navigation }: NavProp) {
 
   return (
     <Gap12>
-      <SettGroup title='Admin Settings'>
+      <SettGroup title='Admin Settings' className='pb-3.5'>
         <SettOption
           title='All users'
           Icon={<RoundedIcon Icon={UserSolidIcon} className='bg-green-500' />}

src/utils/timeFormat.ts

@@ -1,4 +1,4 @@
-const f = new Intl.RelativeTimeFormat('en-us', { numeric: 'auto', style: 'long' })
+// const f = new Intl.RelativeTimeFormat('en-us', { numeric: 'auto', style: 'long' })
 
 const MIN = 60
 const HOUR = MIN * 60
@@ -15,14 +15,31 @@ const units: { unit: Intl.RelativeTimeFormatUnit; value: number }[] = [
   { unit: 'second', value: 1 },
 ]
 
+// export function getRelativeTime(date1: number | undefined, date2: number = new Date().getTime()) {
+//   if (!date1) return 'Unknown Time'
+//   const diffInSeconds = (date1 - date2) / 1000
+//   for (const { unit, value } of units) {
+//     const relativeValue = diffInSeconds / value
+//     if (Math.abs(relativeValue) >= 1) {
+//       return f.format(Math.round(relativeValue), unit)
+//     }
+//   }
+//   return f.format(0, 'second')
+// }
+
 export function getRelativeTime(date1: number | undefined, date2: number = new Date().getTime()) {
   if (!date1) return 'Unknown Time'
   const diffInSeconds = (date1 - date2) / 1000
   for (const { unit, value } of units) {
     const relativeValue = diffInSeconds / value
     if (Math.abs(relativeValue) >= 1) {
-      return f.format(Math.round(relativeValue), unit)
+      const roundedValue = Math.round(relativeValue)
+      if (relativeValue > 0) {
+        return `in ${roundedValue} ${unit}${roundedValue > 1 ? 's' : ''}`
+      } else {
+        return `${Math.abs(roundedValue)} ${unit}${Math.abs(roundedValue) > 1 ? 's' : ''} ago`
+      }
     }
   }
-  return f.format(0, 'second')
+  return 'just now'
 }