Enhance user setup process by adding character selection functionality, updating API endpoints, and improving token validation in request interceptor.

Author: Rice9547

src/api/client.ts

@@ -22,7 +22,13 @@ apiClient.interceptors.request.use(
       !config.url?.includes(API_ENDPOINTS.AUTH_LOGIN) &&
       !config.url?.includes(API_ENDPOINTS.AUTH_REGISTER)
     ) {
-      config.headers.Authorization = `Bearer ${token}`;
+      if (token.split('.').length === 3) {
+        config.headers.Authorization = `Bearer ${token}`;
+      } else {
+        console.error('Invalid token format');
+        await AsyncStorage.removeItem('userToken');
+        await AsyncStorage.removeItem('refreshToken');
+      }
     }
     return config;
   },

src/api/endpoints.ts

@@ -6,6 +6,7 @@ export const API_ENDPOINTS = {
 
   USER_ME: '/users/me',
   USER_UPDATE: '/users/me',
+  USER_CHARACTER: '/users/me/character',
 
   TRANSACTION: '/transactions',
 };

src/api/userService.ts

@@ -4,12 +4,24 @@ import useSWR from 'swr';
 import {useAuth} from '../contexts/AuthContext';
 
 interface UserProfileResponse {
+  id: string;
+  email: string;
+  name: string;
+  character: {
+    id: string;
+    image_url: string;
+  };
   wallet: {
     diamonds: number;
     saving: number;
   };
 }
 
+interface SetCharacterRequest {
+  character_id: string;
+  image_url: string;
+}
+
 export const userService = {
   getUserProfile: async (): Promise<UserProfileResponse> => {
     const response = await apiClient.get(API_ENDPOINTS.USER_ME);
@@ -20,6 +32,13 @@ export const userService = {
     const response = await apiClient.put(API_ENDPOINTS.USER_UPDATE, userData);
     return response.data;
   },
+
+  setCharacter: async (
+    data: SetCharacterRequest,
+  ): Promise<UserProfileResponse> => {
+    const response = await apiClient.put(API_ENDPOINTS.USER_CHARACTER, data);
+    return response.data;
+  },
 };
 
 export const useUserProfile = () => {
@@ -49,10 +68,21 @@ export const useUserProfileManager = () => {
     }
   };
 
+  const setCharacter = async (data: SetCharacterRequest) => {
+    try {
+      const updatedUser = await userService.setCharacter(data);
+      mutate(updatedUser, false);
+      return updatedUser;
+    } catch (error) {
+      throw error;
+    }
+  };
+
   return {
     user,
     isLoading,
     isError,
     updateProfile,
+    setCharacter,
   };
 };

src/navigation/AppNavigator.tsx

@@ -1,53 +1,32 @@
-import React, {useEffect, useState} from 'react';
-import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
+import React, {useState, useEffect} from 'react';
 import {createStackNavigator} from '@react-navigation/stack';
-import AsyncStorage from '@react-native-async-storage/async-storage';
 import {useAuth} from '../contexts/AuthContext';
-
-import HomeScreen from '../screens/HomeScreen';
-import GachaScreen from '../screens/GachaScreen';
-import InvestScreen from '../screens/InvestScreen';
-import AnalysisScreen from '../screens/AnalysisScreen';
-import BagScreen from '../screens/BagScreen';
-import SettingsScreen from '../screens/SettingsScreen';
-import TransactionScreen from '../screens/TransactionScreen';
+import {useUserProfile} from '../api/userService';
 import SetUp from '../screens/SetUp';
+import TabNavigator from './TabNavigator';
+import SettingsScreen from '../screens/SettingsScreen';
 
-const Tab = createBottomTabNavigator();
 const Stack = createStackNavigator();
 
-const TabNavigator = () => {
-  return (
-    <Tab.Navigator
-      screenOptions={{
-        headerShown: false,
-        tabBarStyle: {display: 'none'},
-      }}>
-      <Tab.Screen name="Home" component={HomeScreen} />
-      <Tab.Screen name="Gacha" component={GachaScreen} />
-      <Tab.Screen name="Invest" component={InvestScreen} />
-      <Tab.Screen name="Analysis" component={AnalysisScreen} />
-      <Tab.Screen name="Bag" component={BagScreen} />
-      <Tab.Screen name="TransactionScreen" component={TransactionScreen} />
-    </Tab.Navigator>
-  );
-};
-
 const AppNavigator = () => {
   const {user} = useAuth();
+  const {user: userProfile, isLoading: isUserLoading} = useUserProfile();
   const [initialRoute, setInitialRoute] = useState<string | null>(null);
 
   useEffect(() => {
     const checkSetup = async () => {
-      if (!user?.uid) {return;}
-      const key = `setupDone-${user.uid}`;
-      const setupDone = await AsyncStorage.getItem(key);
-      setInitialRoute(setupDone === 'true' ? 'MainTabs' : 'SetUp');
+      if (!user?.uid || isUserLoading) {return;}
+
+      if (!userProfile?.character?.id) {
+        setInitialRoute('SetUp');
+      } else {
+        setInitialRoute('MainTabs');
+      }
     };
     checkSetup();
-  }, [user]);
+  }, [user, userProfile, isUserLoading]);
 
-  if (!initialRoute) {return null;}
+  if (!initialRoute || isUserLoading) {return null;}
 
   return (
     <Stack.Navigator

src/navigation/TabNavigator.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
+import HomeScreen from '../screens/HomeScreen';
+import GachaScreen from '../screens/GachaScreen';
+import InvestScreen from '../screens/InvestScreen';
+import AnalysisScreen from '../screens/AnalysisScreen';
+import BagScreen from '../screens/BagScreen';
+import TransactionScreen from '../screens/TransactionScreen';
+
+const Tab = createBottomTabNavigator();
+
+const TabNavigator = () => {
+  return (
+    <Tab.Navigator
+      screenOptions={{
+        headerShown: false,
+        tabBarStyle: {display: 'none'},
+      }}>
+      <Tab.Screen name="Home" component={HomeScreen} />
+      <Tab.Screen name="Gacha" component={GachaScreen} />
+      <Tab.Screen name="Invest" component={InvestScreen} />
+      <Tab.Screen name="Analysis" component={AnalysisScreen} />
+      <Tab.Screen name="Bag" component={BagScreen} />
+      <Tab.Screen name="TransactionScreen" component={TransactionScreen} />
+    </Tab.Navigator>
+  );
+};
+
+export default TabNavigator;