fix: add loading to history screen

So it can logout the user when the token expires and refresh token fails

src/contexts/AuthContext.tsx

@@ -32,11 +32,15 @@ export function AuthContextProvider({ children }: AuthContextProviderProps) {
     setUser(userData);
   }
 
-  async function saveUserAndTokenStorageData(userData: UserDTO, token: string) {
+  async function saveUserAndTokenStorageData(
+    userData: UserDTO,
+    token: string,
+    refresh_token: string,
+  ) {
     try {
       setIsLoadingUserStorageData(true);
       await storageUserSave(userData);
-      await storageAuthTokenSave(token);
+      await storageAuthTokenSave({ token, refresh_token });
     } catch (error) {
       throw error;
     } finally {
@@ -48,8 +52,8 @@ export function AuthContextProvider({ children }: AuthContextProviderProps) {
     try {
       const { data } = await api.post('/sessions', { email, password });
 
-      if (data.user && data.token) {
-        saveUserAndTokenStorageData(data.user, data.token);
+      if (data.user && data.token && data.refresh_token) {
+        saveUserAndTokenStorageData(data.user, data.token, data.refresh_token);
         updateUserAndTokenData(data.user, data.token);
       }
     } catch (error) {
@@ -86,7 +90,7 @@ export function AuthContextProvider({ children }: AuthContextProviderProps) {
       setIsLoadingUserStorageData(true);
 
       const loggedUser = await storageUserGet();
-      const token = await storageAuthTokenGet();
+      const { token } = await storageAuthTokenGet();
 
       if (loggedUser && token) {
         updateUserAndTokenData(loggedUser, token);
@@ -102,6 +106,14 @@ export function AuthContextProvider({ children }: AuthContextProviderProps) {
     loadUserData();
   }, []);
 
+  useEffect(() => {
+    const subscription = api.registerInterceptTokenManager(signOut);
+
+    return () => {
+      subscription();
+    };
+  }, []);
+
   return (
     <AuthContext.Provider
       value={{ user, signIn, signOut, updateUserData, isLoadingUserStorageData }}>

src/screens/History.tsx

@@ -10,6 +10,7 @@ import { HistoryByDayDTO } from '@dtos/HistoryByDayDTO';
 import { HistoryCard } from '@components/HistoryCard';
 import { ScreenHeader } from '@components/ScreenHeader';
 import { ToastMessage } from '@components/ToastMessage';
+import { Loading } from '@components/Loading';
 
 export function History() {
   const [isLoading, setIsLoading] = useState(true);
@@ -47,24 +48,28 @@ export function History() {
     <VStack flex={1}>
       <ScreenHeader title="Histórico" />
 
-      <SectionList
-        sections={exercises}
-        keyExtractor={(item) => item.id}
-        renderItem={({ item }) => <HistoryCard data={item} />}
-        renderSectionHeader={({ section }) => (
-          <Heading color="$gray200" fontSize="$md" mt="$10" mb="$3">
-            {section.title}
-          </Heading>
-        )}
-        style={{ paddingHorizontal: 32 }}
-        contentContainerStyle={exercises.length === 0 && { flex: 1, justifyContent: 'center' }}
-        ListEmptyComponent={() => (
-          <Text color="$gray100" textAlign="center">
-            Não há exercícios registrados ainda.{'\n'}Vamos fazer exercícios hoje?
-          </Text>
-        )}
-        showsVerticalScrollIndicator={false}
-      />
+      {isLoading ? (
+        <Loading />
+      ) : (
+        <SectionList
+          sections={exercises}
+          keyExtractor={(item) => item.id}
+          renderItem={({ item }) => <HistoryCard data={item} />}
+          renderSectionHeader={({ section }) => (
+            <Heading color="$gray200" fontSize="$md" mt="$10" mb="$3">
+              {section.title}
+            </Heading>
+          )}
+          style={{ paddingHorizontal: 32 }}
+          contentContainerStyle={exercises.length === 0 && { flex: 1, justifyContent: 'center' }}
+          ListEmptyComponent={() => (
+            <Text color="$gray100" textAlign="center">
+              Não há exercícios registrados ainda.{'\n'}Vamos fazer exercícios hoje?
+            </Text>
+          )}
+          showsVerticalScrollIndicator={false}
+        />
+      )}
     </VStack>
   );
 }

src/services/api.ts

@@ -1,10 +1,23 @@
-import axios from 'axios';
+import axios, { AxiosError, AxiosInstance } from 'axios';
 
 import { AppError } from '@utils/AppError';
 
+import { storageAuthTokenGet, storageAuthTokenSave } from '@storage/storageAuthToken';
+
+type SignOut = () => void;
+
+type PromiseType = {
+  onSuccess: (token: string) => void;
+  onFailure: (error: AxiosError) => void;
+};
+
+type APIInstanceProps = AxiosInstance & {
+  registerInterceptTokenManager: (signOut: SignOut) => () => void;
+};
+
 const api = axios.create({
   baseURL: 'http://192.168.0.61:3333',
-});
+}) as APIInstanceProps;
 
 api.interceptors.request.use(
   (config) => {
@@ -15,14 +28,82 @@ api.interceptors.request.use(
   },
 );
 
-api.interceptors.response.use(
-  (response) => response,
-  (error) => {
-    if (error.response && error.response.data) {
-      return Promise.reject(new AppError(error.response.data.message));
-    }
-    return Promise.reject(error);
-  },
-);
+let failedQueue: Array<PromiseType> = [];
+let isRefreshing = false;
+
+api.registerInterceptTokenManager = (signOut: SignOut) => {
+  const interceptTokenManager = api.interceptors.response.use(
+    (response) => response,
+    async (requestError) => {
+      if (requestError?.response?.status === 401) {
+        if (
+          requestError.response.data?.message === 'token.expired' ||
+          requestError.response.data?.message === 'token.invalid'
+        ) {
+          const { refresh_token } = await storageAuthTokenGet();
+
+          if (!refresh_token) {
+            signOut();
+            return Promise.reject(requestError);
+          }
+
+          const originalRequestConfig = requestError.config;
+
+          if (isRefreshing) {
+            return new Promise((resolve, reject) => {
+              failedQueue.push({
+                onSuccess: (token: string) => {
+                  originalRequestConfig.headers.Authorization = `Bearer ${token}`;
+                  resolve(api(originalRequestConfig));
+                },
+                onFailure: (error: AxiosError) => {
+                  reject(error);
+                },
+              });
+            });
+          }
+
+          isRefreshing = true;
+
+          return new Promise(async (resolve, reject) => {
+            try {
+              const { data } = api.post('/sessions/refresh_token', { refresh_token });
+              await storageAuthTokenSave({ token: data.token, refresh_token: data.refresh_token });
+
+              if (originalRequestConfig.data) {
+                originalRequestConfig.data = JSON.parse(JSON.stringify(originalRequestConfig.data));
+              }
+
+              originalRequestConfig.headers.Authorization = `Bearer ${data.token}`;
+              api.defaults.headers.common.Authorization = `Bearer ${data.token}`;
+
+              failedQueue.forEach((request) => request.onSuccess(data.token));
+
+              resolve(api(originalRequestConfig));
+            } catch (error: any) {
+              failedQueue.forEach((request) => request.onFailure(error));
+              signOut();
+              reject(error);
+            } finally {
+              isRefreshing = false;
+              failedQueue = [];
+            }
+          });
+        }
+
+        signOut();
+      }
+
+      if (requestError.response && requestError.response.data) {
+        return Promise.reject(new AppError(requestError.response.data.message));
+      }
+      return Promise.reject(requestError);
+    },
+  );
+
+  return () => {
+    api.interceptors.response.eject(interceptTokenManager);
+  };
+};
 
 export { api };

src/storage/storageAuthToken.ts

@@ -2,12 +2,19 @@ import AsyncStorage from '@react-native-async-storage/async-storage';
 
 import { TOKEN_STORAGE } from './storageConfig';
 
-export async function storageAuthTokenSave(token: string) {
-  await AsyncStorage.setItem(TOKEN_STORAGE, token);
+type AuthTokenStorageProps = {
+  token: string;
+  refresh_token?: string;
+};
+
+export async function storageAuthTokenSave({ token, refresh_token }: AuthTokenStorageProps) {
+  await AsyncStorage.setItem(TOKEN_STORAGE, JSON.stringify({ token, refresh_token }));
 }
 
 export async function storageAuthTokenGet() {
-  return await AsyncStorage.getItem(TOKEN_STORAGE);
+  const response = await AsyncStorage.getItem(TOKEN_STORAGE);
+  const { token, refresh_token }: AuthTokenStorageProps = response ? JSON.parse(response) : {};
+  return { token, refresh_token };
 }
 
 export async function storageAuthTokenRemove() {