feat: rebase + improvements

Author: Guillermo Machado

src/api/auth/use-user.tsx

@@ -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/types.ts

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

src/app/(app)/settings.tsx

@@ -1,8 +1,10 @@
+/* eslint-disable max-lines-per-function */
 import { Env } from '@env';
 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';
@@ -13,6 +15,7 @@ import { colors, FocusAwareStatusBar, ScrollView, Text, View } from '@/ui';
 import { Website } from '@/ui/icons';
 
 export default function Settings() {
+  const { data: userData } = useUser();
   const { logout } = useAuth();
   const { colorScheme } = useColorScheme();
   const iconColor =
@@ -23,10 +26,17 @@ export default function Settings() {
       <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 />

src/components/providers/auth.tsx

@@ -9,7 +9,8 @@ import React, {
 import { MMKV } from 'react-native-mmkv';
 
 import { client } from '@/api';
-import { storage } from '@/core/storage';
+
+const unauthorizedHttpStatusCode = 401;
 
 const storageKey = 'auth-storage';
 
@@ -125,17 +126,20 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({
   }, []);
 
   const logout = () => {
-    storage.delete(HEADER_KEYS.ACCESS_TOKEN);
-    storage.delete(HEADER_KEYS.REFRESH_TOKEN);
-    storage.delete(HEADER_KEYS.USER_ID);
-    storage.delete(HEADER_KEYS.EXPIRY);
+    authStorage.delete(HEADER_KEYS.ACCESS_TOKEN);
+    authStorage.delete(HEADER_KEYS.REFRESH_TOKEN);
+    authStorage.delete(HEADER_KEYS.USER_ID);
+    authStorage.delete(HEADER_KEYS.EXPIRY);
     setToken(null);
   };
 
   useEffect(() => {
     checkToken();
     const requestInterceptor = client.interceptors.response.use(
       (config) => {
+        if (config.status === unauthorizedHttpStatusCode) {
+          logout();
+        }
         checkToken();
         return config;
       },

src/components/settings/items-container.tsx

@@ -9,12 +9,12 @@ type Props = {
 };
 
 export const ItemsContainer = ({ children, title }: Props) => (
-    <>
-      {title && <Text className="pb-2 pt-4 text-lg" tx={title} />}
-      {
-        <View className=" rounded-md border border-neutral-200 dark:border-neutral-700 dark:bg-neutral-800">
-          {children}
-        </View>
-      }
-    </>
-  );
+  <View className="gap-2">
+    {title && <Text className="text-lg" tx={title} />}
+    {
+      <View className=" rounded-md border border-neutral-200 dark:border-neutral-700 dark:bg-neutral-800">
+        {children}
+      </View>
+    }
+  </View>
+);

src/translations/en.json

@@ -65,6 +65,11 @@
   },
   "settings": {
     "about": "About",
+    "account": {
+      "email": "Email",
+      "name": "Name",
+      "title": "Account"
+    },
     "app_name": "App Name",
     "arabic": "Arabic",
     "english": "English",