Merge pull request #116 from rootstrap/feat/auth-provider-proposal

Feat/auth provider proposal

Author: guillermomachado

package.json

@@ -69,8 +69,10 @@
     "@lukemorales/query-key-factory": "^1.3.4",
     "@shopify/flash-list": "1.6.4",
     "@tanstack/react-query": "^5.52.1",
+    "@testing-library/react-hooks": "^8.0.1",
     "app-icon-badge": "^0.0.15",
     "axios": "^1.7.5",
+    "dayjs": "^1.11.13",
     "expo": "~51.0.39",
     "expo-constants": "~16.0.2",
     "expo-dev-client": "~4.0.29",

pnpm-lock.yaml

@@ -0,0 +1,24 @@
+import { createQuery } from 'react-query-kit';
+
+import { client } from '../common';
+
+export type User = {
+  id: number;
+  name: string;
+  email: string;
+  picture: string | null;
+  birthday: Date | null;
+};
+
+const getUser = async () => {
+  const { data } = await client({
+    url: '/v1/users',
+    method: 'GET',
+  });
+  return data;
+};
+
+export const useUser = createQuery<User>({
+  queryKey: ['getUser'],
+  fetcher: getUser,
+});

src/api/auth/use-user.tsx

@@ -4,3 +4,9 @@ export type PaginateQuery<T> = {
   next: string | null;
   previous: string | null;
 };
+
+export type ApiResponse<T> =
+  | {
+      errors: string[];
+    }
+  | T;

src/api/types.ts

@@ -1,7 +1,8 @@
 import { Link, Redirect, SplashScreen, Tabs } from 'expo-router';
 import { useCallback, useEffect } from 'react';
 
-import { useAuth, useIsFirstTime } from '@/core';
+import { useAuth } from '@/components/providers/auth';
+import { useIsFirstTime } from '@/core';
 import { Pressable, Text } from '@/ui';
 import {
   Feed as FeedIcon,
@@ -10,24 +11,22 @@ import {
 } from '@/ui/icons';
 
 export default function TabLayout() {
-  const status = useAuth.use.status();
+  const { isAuthenticated, ready } = useAuth();
   const [isFirstTime] = useIsFirstTime();
   const hideSplash = useCallback(async () => {
     await SplashScreen.hideAsync();
   }, []);
+
   useEffect(() => {
-    const TIMEOUT = 1000;
-    if (status !== 'idle') {
-      setTimeout(() => {
-        hideSplash();
-      }, TIMEOUT);
+    if (!ready) {
+      hideSplash();
     }
-  }, [hideSplash, status]);
+  }, [hideSplash, ready]);
 
   if (isFirstTime) {
     return <Redirect href="/onboarding" />;
   }
-  if (status === 'signOut') {
+  if (!isAuthenticated && ready) {
     return <Redirect href="/sign-in" />;
   }
   return (
@@ -45,7 +44,6 @@ export default function TabLayout() {
         name="style"
         options={{
           title: 'Style',
-          headerShown: false,
           tabBarIcon: ({ color }) => <StyleIcon color={color} />,
           tabBarTestID: 'style-tab',
         }}
@@ -54,7 +52,6 @@ export default function TabLayout() {
         name="settings"
         options={{
           title: 'Settings',
-          headerShown: false,
           tabBarIcon: ({ color }) => <SettingsIcon color={color} />,
           tabBarTestID: 'settings-tab',
         }}

src/app/(app)/_layout.tsx

@@ -1,31 +1,41 @@
-import { Env } from '@env';
+/* eslint-disable max-lines-per-function */
 import { Link } from 'expo-router';
 import { useColorScheme } from 'nativewind';
 import React from 'react';
 
+import { useUser } from '@/api/auth/use-user';
+import { useAuth } from '@/components/providers/auth';
 import { Item } from '@/components/settings/item';
 import { ItemsContainer } from '@/components/settings/items-container';
 import { LanguageItem } from '@/components/settings/language-item';
 import { ThemeItem } from '@/components/settings/theme-item';
-import { translate, useAuth } from '@/core';
+import { translate } from '@/core';
+import { Env } from '@/core/env';
 import { colors, FocusAwareStatusBar, ScrollView, Text, View } from '@/ui';
 import { Website } from '@/ui/icons';
 
 export default function Settings() {
-  const signOut = useAuth.use.signOut();
+  const { data: userData } = useUser();
+  const { logout } = useAuth();
   const { colorScheme } = useColorScheme();
   const iconColor =
     colorScheme === 'dark' ? colors.neutral[400] : colors.neutral[500];
 
   return (
     <>
       <FocusAwareStatusBar />
-
       <ScrollView>
-        <View className="flex-1 px-4 pt-16 ">
+        <View className="flex-1 gap-2 p-4">
           <Text className="text-xl font-bold">
             {translate('settings.title')}
           </Text>
+          <ItemsContainer title="settings.account.title">
+            <Item text={'settings.account.name'} value={userData?.name ?? ''} />
+            <Item
+              text={'settings.account.email'}
+              value={userData?.email ?? ''}
+            />
+          </ItemsContainer>
           <ItemsContainer title="settings.generale">
             <LanguageItem />
             <ThemeItem />
@@ -67,7 +77,7 @@ export default function Settings() {
 
           <View className="my-8">
             <ItemsContainer>
-              <Item text="settings.logout" onPress={signOut} />
+              <Item text="settings.logout" onPress={logout} />
             </ItemsContainer>
           </View>
         </View>

src/app/(app)/settings.tsx

@@ -12,6 +12,7 @@ import { KeyboardProvider } from 'react-native-keyboard-controller';
 
 import { APIProvider } from '@/api';
 import interceptors from '@/api/common/interceptors';
+import { AuthProvider } from '@/components/providers/auth';
 import { hydrateAuth, loadSelectedTheme } from '@/core';
 import { useThemeConfig } from '@/core/use-theme-config';
 
@@ -61,10 +62,12 @@ function Providers({ children }: { children: React.ReactNode }) {
       <KeyboardProvider>
         <ThemeProvider value={theme}>
           <APIProvider>
-            <BottomSheetModalProvider>
-              {children}
-              <FlashMessage position="top" />
-            </BottomSheetModalProvider>
+            <AuthProvider>
+              <BottomSheetModalProvider>
+                {children}
+                <FlashMessage position="top" />
+              </BottomSheetModalProvider>
+            </AuthProvider>
           </APIProvider>
         </ThemeProvider>
       </KeyboardProvider>