FEAT - Jotai state management

app/(app)/(authorized)/_layout.tsx

@@ -1,13 +1,14 @@
 import { Redirect, Stack } from 'expo-router'
+import { useAtomValue } from 'jotai'
 
-import { useAuth } from '~hooks'
+import { isSignedInAtom } from '~store/auth'
 
 export const unstable_settings = {
   initialRouteName: '(tabs)',
 }
 
 export default function AuthorizedLayout() {
-  const { isSignedIn } = useAuth()
+  const isSignedIn = useAtomValue(isSignedInAtom)
 
   if (isSignedIn === false) {
     return <Redirect href="/sign-in" />

app/(app)/(not-authorized)/_layout.tsx

@@ -1,13 +1,13 @@
 import { Redirect, Stack } from 'expo-router'
+import { useAtomValue } from 'jotai'
 
-import { useAuth } from '~hooks'
-
+import { isSignedInAtom } from '~store/auth'
 export const unstable_settings = {
   initialRouteName: 'sign-in',
 }
 
 export default function NotAuthorizedLayout() {
-  const { isSignedIn } = useAuth()
+  const isSignedIn = useAtomValue(isSignedInAtom)
 
   if (isSignedIn === true) {
     return <Redirect href="/home" />

app/_layout.tsx

@@ -1,16 +1,18 @@
 import { ThemeProvider } from '@react-navigation/native'
 import { Slot } from 'expo-router'
+import { useAtomValue } from 'jotai'
 
 import { AbsoluteFullFill, Loader, StatusBar } from '~components'
-import { useAuth, useNavigationTheme, useRouterNotifications } from '~hooks'
+import { useNavigationTheme, useRouterNotifications } from '~hooks'
 import { Providers } from '~providers'
+import { isSignedInAtom } from '~store/auth'
 
 export const unstable_settings = {
   initialRouteName: 'index',
 }
 
 const Layout = () => {
-  const { isSignedIn } = useAuth()
+  const isSignedIn = useAtomValue(isSignedInAtom)
   const { navigationTheme } = useNavigationTheme()
 
   useRouterNotifications() // TODO: check if handling notification deeplinks works correctly

app/index.tsx

@@ -1,11 +1,12 @@
 import { Redirect } from 'expo-router'
+import { useAtomValue } from 'jotai'
 import { Platform } from 'react-native'
 
-import { useAuth } from '~hooks'
 import { LandingScreen } from '~screens/LandingScreen'
+import { isSignedInAtom } from '~store/auth'
 
 export default function Root() {
-  const { isSignedIn } = useAuth()
+  const isSignedIn = useAtomValue(isSignedInAtom)
 
   if (isSignedIn === true) {
     return <Redirect href="/home" />

package.json

@@ -127,6 +127,7 @@
     "expo-updates": "~0.24.8",
     "expo-web-browser": "~12.8.2",
     "i18next": "^23.7.20",
+    "jotai": "^2.4.3",
     "moti": "^0.25.3",
     "react": "18.2.0",
     "react-dom": "18.2.0",

src/components/AppLoading.tsx

@@ -1,10 +1,12 @@
 import * as SplashScreen from 'expo-splash-screen'
+import { useAtomValue } from 'jotai'
 import { FC, PropsWithChildren, useCallback, useEffect } from 'react'
 import { View, StyleSheet } from 'react-native'
 
 import { AbsoluteFullFill, Loader, Center } from './atoms'
 
-import { useAuth, useBoolean, useCachedResources, useFonts } from '~hooks'
+import { useBoolean, useCachedResources, useFonts } from '~hooks'
+import { isSignedInAtom } from '~store/auth'
 
 SplashScreen.preventAutoHideAsync()
 
@@ -21,7 +23,8 @@ export const AppLoading: FC<PropsWithChildren> = ({ children }) => {
 
   // Delay loading logic was made to prevent displaying empty screen after splash screen will hide
   const [isDelayLoading, setIsDelayLoading] = useBoolean(true)
-  const { isSignedIn } = useAuth()
+
+  const isSignedIn = useAtomValue(isSignedInAtom)
 
   useEffect(() => {
     async function prepare() {

src/components/Header.tsx

@@ -1,23 +1,13 @@
 import { NativeStackHeaderProps } from '@react-navigation/native-stack'
 import { useRouter } from 'expo-router'
 
-import { Touchable } from './atoms'
-
-import { Box, Column, Row, Icon, Text } from '~components/atoms'
+import { Box, Column, Row, Icon, Text, Touchable } from '~components/atoms'
 
 const logoHeight = 24
 
-export const Header = ({ options, ...rest }: NativeStackHeaderProps) => {
+export const Header = ({ options }: NativeStackHeaderProps) => {
   const router = useRouter()
 
-  console.log('options', {
-    options,
-    rest,
-    canGoBack: router.canGoBack(),
-    restxd: rest.navigation.getState(),
-    canGoBack2: rest.navigation.canGoBack(),
-  })
-
   return (
     <Column bg="fg.white">
       <Row bg="fg.white" zIndex={3} justifyContent="space-between" alignItems="center">

src/components/LandingHeader.tsx

@@ -1,20 +1,21 @@
 import { useRouter } from 'expo-router'
+import { useAtomValue } from 'jotai'
 import { Image, StyleSheet, Platform, View } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 
 import { Box, Button, Icon, Pressable } from '~components'
 import { darkLogoFull, lightLogoFull } from '~constants'
 import { useColorScheme } from '~contexts'
-import { useAuth, useTranslation } from '~hooks'
+import { useTranslation } from '~hooks'
 import { TabColorsStrings } from '~navigation/tabNavigator/config'
-
+import { isSignedInAtom } from '~store/auth'
 export function LandingHeader() {
   const { colorScheme } = useColorScheme()
   const { top } = useSafeAreaInsets()
   const { t } = useTranslation()
   const { push, canGoBack, back } = useRouter()
 
-  const { isSignedIn } = useAuth()
+  const isSignedIn = useAtomValue(isSignedInAtom)
 
   const navigateToLogin = () => push('/sign-in')
 

src/constants/theme.ts

@@ -356,8 +356,8 @@ export const theme = {
 export const lightNavigationTheme: Theme = {
   colors: {
     background: themeColors.lightMode.bg.primary,
-    border: themeColors.lightMode.border.primary,
-    card: themeColors.lightMode.button.primary.bg,
+    border: 'transparent',
+    card: themeColors.lightMode.bg.primary,
     text: themeColors.lightMode.alpha.black[70],
     notification: themeColors.lightMode.avatar.bg,
     primary: themeColors.lightMode.utility.purple[500],
@@ -368,8 +368,8 @@ export const lightNavigationTheme: Theme = {
 export const darkNavigationTheme: Theme = {
   colors: {
     background: themeColors.darkMode.bg.primary,
-    border: themeColors.darkMode.border.primary,
-    card: themeColors.darkMode.button.primary.bg,
+    border: 'transparent',
+    card: themeColors.darkMode.bg.primary,
     text: themeColors.darkMode.alpha.black[70],
     notification: themeColors.darkMode.avatar.bg,
     primary: themeColors.darkMode.utility.purple[500],

src/contexts/index.ts

@@ -1,3 +1,2 @@
-export * from './AuthContext'
 export * from './NotificationContext'
 export * from './ColorSchemeContext'

src/hooks/forms/useSignInForm.ts

@@ -1,12 +1,13 @@
 import { isError } from '@tanstack/react-query'
+import { useSetAtom } from 'jotai'
 import { useState } from 'react'
 import { useForm } from 'react-hook-form'
 import { useTranslation } from 'react-i18next'
 
-import { useAuth } from '../useAuth'
-
+import { setToken } from '~services'
+import { isSignedInAtom } from '~store/auth'
 import { SignInFormValues } from '~types/authForms'
-import { hapticImpact } from '~utils'
+import { hapticImpact, wait } from '~utils'
 
 const defaultValues: SignInFormValues = {
   // TODO: Reset this values when building production app
@@ -16,11 +17,13 @@ const defaultValues: SignInFormValues = {
 }
 
 export const useSignInForm = () => {
-  const { signIn } = useAuth()
   const [error, setError] = useState('')
   const [isSubmitting, setIsSubmitting] = useState(false)
+
   const { t } = useTranslation()
 
+  const setIsSignedIn = useSetAtom(isSignedInAtom)
+
   const {
     control,
     formState: { errors },
@@ -35,7 +38,18 @@ export const useSignInForm = () => {
     try {
       setIsSubmitting(true)
       setError('')
-      await signIn(data)
+      // Errors are handled on UI side
+      // if you want to stop this function with error just throw new Error.
+      // Remember to pass readable error message for user, because this error will be displayed for him
+
+      // TODO: Add some backend call here, you can use react query for this
+      await wait(500)
+
+      if (data.email !== 'test@example.com' || data.password !== '123456') {
+        throw new Error('Incorrect email or password')
+      }
+      await setToken('token_here')
+      setIsSignedIn(true)
     } catch (e) {
       if (isError(e)) {
         setError(e.message)

src/hooks/forms/useSignUpForm.ts

@@ -1,12 +1,12 @@
 import { isError } from '@tanstack/react-query'
+import { useSetAtom } from 'jotai'
 import { useState } from 'react'
 import { useForm } from 'react-hook-form'
 import { useTranslation } from 'react-i18next'
 
-import { useAuth } from '../useAuth'
-
+import { isSignedInAtom } from '~store/auth'
 import { SignUpFormValues } from '~types/authForms'
-import { hapticImpact } from '~utils'
+import { hapticImpact, wait } from '~utils'
 
 const defaultValues: SignUpFormValues = {
   user: '',
@@ -17,11 +17,13 @@ const defaultValues: SignUpFormValues = {
 }
 
 export const useSignUpForm = () => {
-  const { signUp } = useAuth()
   const [error, setError] = useState('')
   const [isSubmitting, setIsSubmitting] = useState(false)
+
   const { t } = useTranslation()
 
+  const setIsSignedIn = useSetAtom(isSignedInAtom)
+
   const {
     control,
     formState: { errors },
@@ -36,7 +38,9 @@ export const useSignUpForm = () => {
     try {
       setIsSubmitting(true)
       setError('')
-      await signUp(data)
+      await wait(500)
+      // TODO: Add some backend call here, you can use react query for this
+      setIsSignedIn(true)
     } catch (e) {
       if (isError(e)) {
         setError(e.message)

src/hooks/index.ts

@@ -57,7 +57,6 @@ export * from './navigation'
 
 // Custom hooks implemented in app
 export * from './useAppStateActive'
-export * from './useAuth'
 export * from './useBoolean'
 export * from './useCachedResources'
 export * from './useKeyboardHeight'

src/logic/AuthLogic.tsx

@@ -0,0 +1,22 @@
+import { useSetAtom } from 'jotai'
+import { FC } from 'react'
+
+import { useEffect } from '~hooks'
+import { getToken } from '~services'
+import { isSignedInAtom } from '~store/auth'
+
+export const AuthLogic: FC = () => {
+  const setIsSignedIn = useSetAtom(isSignedInAtom)
+
+  useEffect(() => {
+    const bootstrap = async () => {
+      // TODO: This should be moved to backend calls, in this bootstrap function we should fetch user info and not token
+      const token = await getToken()
+      setIsSignedIn(!!token)
+    }
+
+    bootstrap()
+  }, [setIsSignedIn])
+
+  return null
+}

src/navigation/tabNavigator/components/SideBar.tsx

@@ -6,14 +6,13 @@ import { TabColorsStrings, upperSideTabs } from '../config'
 import { useWidth } from '../hooks'
 import { cns } from '../utils'
 
-import { useAuth } from '~hooks'
+import { signOut } from '~store/auth'
 import cssStyles from '~styles'
 
 const NAV_MEDIUM_WIDTH = 244
 
 export function SideBar({ visible }: { visible: boolean }) {
   const isLarge = useWidth(1264)
-  const { signOut } = useAuth()
 
   return (
     <View