call api with data from storage if available, if credentials have expired, renew them

Author: StackOverflowIsBetterThanAnyAI

src/helper/getProfilePicture.tsx

@@ -1,14 +1,26 @@
 import axios from 'axios'
 import { AuthorizationProps } from '../types/AuthorizationProps'
+import { getItemFromStorage } from './getItemFromStorage'
 import { getTwitchAuthorization } from './getTwitchAuthorization'
 
 export const getProfilePicture = async (
     user_id: string
 ): Promise<string | undefined> => {
+    const parsedData = getItemFromStorage()
     const authorizationObject: AuthorizationProps =
-        await getTwitchAuthorization()
+        parsedData.access_token &&
+        parsedData.expires_in &&
+        parsedData.token_type
+            ? {
+                  access_token: parsedData.access_token,
+                  expires_in: parsedData.expires_in,
+                  token_type: parsedData.token_type,
+              }
+            : await getTwitchAuthorization()
     let { access_token, token_type } = authorizationObject
-    if (!access_token || !token_type) return undefined
+    if (!access_token || !token_type) {
+        return undefined
+    }
 
     token_type =
         token_type.substring(0, 1).toUpperCase() +
@@ -30,11 +42,29 @@ export const getProfilePicture = async (
 
         return response.data.imageUrl
     } catch (error) {
+        if (axios.isAxiosError(error) && error.response?.status === 401) {
+            console.warn('Token expired, refreshing...')
+
+            const retryAuth: AuthorizationProps = await getTwitchAuthorization()
+            if (retryAuth.access_token) {
+                const retryResponse = await axios.post(
+                    'https://twitch-backend.vercel.app/api/profile-picture',
+                    {
+                        access_token: retryAuth.access_token,
+                        token_type: retryAuth.token_type,
+                        user_id,
+                    }
+                )
+                return retryResponse.data.imageUrl
+            }
+        }
+
         console.error(
             'The following error occurred while fetching a user profile picture for the user:',
             user_id,
             error
         )
+
         return undefined
     }
 }

src/helper/getStreams.tsx

@@ -1,15 +1,27 @@
 import axios from 'axios'
 import { AuthorizationProps } from '../types/AuthorizationProps'
+import { StreamProps } from '../types/StreamProps'
+import { getItemFromStorage } from './getItemFromStorage'
 import { getTwitchAuthorization } from './getTwitchAuthorization'
-import type { StreamProps } from '../types/StreamProps'
 
 export const getStreams = async (
     url: string
 ): Promise<StreamProps | undefined | { error: 'login' }> => {
+    const parsedData = getItemFromStorage()
     const authorizationObject: AuthorizationProps =
-        await getTwitchAuthorization()
+        parsedData.access_token &&
+        parsedData.expires_in &&
+        parsedData.token_type
+            ? {
+                  access_token: parsedData.access_token,
+                  expires_in: parsedData.expires_in,
+                  token_type: parsedData.token_type,
+              }
+            : await getTwitchAuthorization()
     let { access_token, token_type } = authorizationObject
-    if (!access_token || !token_type) return { error: 'login' }
+    if (!access_token || !token_type) {
+        return { error: 'login' }
+    }
 
     token_type =
         token_type.substring(0, 1).toUpperCase() +
@@ -36,6 +48,23 @@ export const getStreams = async (
 
         return response.data
     } catch (error: any) {
+        if (axios.isAxiosError(error) && error.response?.status === 401) {
+            console.warn('Token expired, refreshing...')
+
+            const retryAuth: AuthorizationProps = await getTwitchAuthorization()
+            if (retryAuth.access_token) {
+                const retryResponse = await axios.post(
+                    'https://twitch-backend.vercel.app/api/streams',
+                    {
+                        access_token: retryAuth.access_token,
+                        token_type: retryAuth.token_type,
+                        url,
+                    }
+                )
+                return retryResponse.data
+            }
+        }
+
         console.error(
             'The following error occured while fetching the current Livestreams:',
             error