fix: token promise errors

app/(app)/(tabs)/settings.tsx

@@ -16,6 +16,7 @@ import { Colors, LoadingIndicator, ScreenInfo, styles } from '@/lib/ui'
 import { reloadAppAsync } from 'expo'
 import { useAuth } from '@/lib/providers/auth'
 import { Image } from 'expo-image'
+import { queryClient } from '@/lib/clients/classroom'
 
 const Settings = () => {
   const colorScheme = useColorScheme()
@@ -274,6 +275,43 @@ const Settings = () => {
         </List.Accordion>
       </Surface>
 
+      {__DEV__ && (
+        <Surface elevation={0}>
+          <List.Accordion
+            id="3"
+            title="Developer"
+            left={(props) => <List.Icon {...props} icon="code-tags" />}
+          >
+            <List.Item
+              title="Clear settings"
+              description="Clear all setttings"
+              left={(props) => <List.Icon {...props} icon="delete" />}
+              onPress={async () => {
+                await SecureStore.deleteItemAsync('settings')
+                setMessage({
+                  visible: true,
+                  content: 'Settings cleared',
+                })
+                await reloadAppAsync()
+              }}
+            />
+            <List.Item
+              title="Clear cache"
+              description="Clear all cache"
+              left={(props) => <List.Icon {...props} icon="delete-forever" />}
+              onPress={async () => {
+                queryClient.clear()
+                setMessage({
+                  visible: true,
+                  content:
+                    'Cache cleared. Wait 1s for the persisters to actually clear',
+                })
+              }}
+            />
+          </List.Accordion>
+        </Surface>
+      )}
+
       <Snackbar
         visible={message.visible}
         onDismiss={() => setMessage({ ...message, visible: false })}

app/(app)/drawer/_layout.tsx

@@ -8,35 +8,33 @@ const DrawerLayout = () => {
   const theme = useTheme()
 
   return (
-    <GestureHandlerRootView style={{ flex: 1 }}>
-      <Drawer
-        drawerContent={(props) => (
-          <DrawerContent
-            navProps={props}
-            showDivider={false}
-            children={undefined}
-            title="Drawer Navigation"
-          />
-        )}
-        screenOptions={{
-          drawerStyle: {
-            backgroundColor: theme.colors.background,
-            paddingTop: 32,
-          },
-          header: (props) => (
-            <DrawerHeader navProps={props} children={undefined} />
-          ),
-        }}
-      >
-        <Drawer.Screen
-          name="courses/[id]"
-          options={{
-            drawerLabel: 'Courses',
-            title: 'Courses',
-          }}
+    <Drawer
+      drawerContent={(props) => (
+        <DrawerContent
+          navProps={props}
+          showDivider={false}
+          children={undefined}
+          title="Drawer Navigation"
         />
-      </Drawer>
-    </GestureHandlerRootView>
+      )}
+      screenOptions={{
+        drawerStyle: {
+          backgroundColor: theme.colors.background,
+          paddingTop: 32,
+        },
+        header: (props) => (
+          <DrawerHeader navProps={props} children={undefined} />
+        ),
+      }}
+    >
+      <Drawer.Screen
+        name="courses/[id]"
+        options={{
+          drawerLabel: 'Courses',
+          title: 'Courses',
+        }}
+      />
+    </Drawer>
   )
 }
 

app/_layout.tsx

@@ -35,18 +35,20 @@ export default function Root() {
   }, [])
 
   return (
-    <PaperProvider
-      theme={
-        Themes[
-          settings.theme === 'auto' ? (colorScheme ?? 'dark') : settings.theme
-        ][settings.color]
-      }
-    >
-      <QueryClientProvider client={queryClient}>
-        <AuthProvider>
-          <Slot />
-        </AuthProvider>
-      </QueryClientProvider>
-    </PaperProvider>
+    <GestureHandlerRootView style={{ flex: 1 }}>
+      <PaperProvider
+        theme={
+          Themes[
+            settings.theme === 'auto' ? (colorScheme ?? 'dark') : settings.theme
+          ][settings.color]
+        }
+      >
+        <QueryClientProvider client={queryClient}>
+          <AuthProvider>
+            <Slot />
+          </AuthProvider>
+        </QueryClientProvider>
+      </PaperProvider>
+    </GestureHandlerRootView>
   )
 }

lib/clients/classroom.ts

@@ -21,13 +21,25 @@ export const queryClient = new QueryClient({
 // API Functions
 const BASE_URL = 'https://classroom.googleapis.com'
 
+// Should fix annoying (in my experience the announcement hook) missing errors.
+let tokenPromise: Promise<string> | null = null
+async function getAuthToken(): Promise<string> {
+  if (!tokenPromise) {
+    tokenPromise = GoogleSignin.getTokens()
+      .then((tokens) => tokens.accessToken)
+      .finally(() => {
+        tokenPromise = null
+      })
+  }
+  return tokenPromise
+}
+
 async function fetchApi<T>(
   endpoint: string,
   insideKey?: string,
   options?: RequestInit,
 ): Promise<T> {
-  const token = (await GoogleSignin.getTokens()).accessToken
-  //console.log(token)
+  const token = await getAuthToken()
   const response = await fetch(`${BASE_URL}${endpoint}`, {
     ...options,
     headers: {
@@ -42,7 +54,7 @@ async function fetchApi<T>(
   }
 
   const data = await response.json()
-  return insideKey ? data[insideKey] : data
+  return insideKey ? (data[insideKey] ?? []) : data
 }
 
 // Query Keys
@@ -50,7 +62,7 @@ export const keys = {
   courses: {
     all: ['courses'],
     one: (id: string) => ['courses', id],
-    announcement: (courseId: string) => ['courses', courseId, 'announcements'],
+    announcements: (courseId: string) => ['courses', courseId, 'announcements'],
     courseWork: (courseId: string) => ['courses', courseId, 'courseWork'],
     courseWorkMaterials: (courseId: string) => [
       'courses',
@@ -78,7 +90,7 @@ export function useCourse(id: string) {
 
 export function useAnnouncements(courseId: string) {
   return useQuery({
-    queryKey: keys.courses.announcement(courseId),
+    queryKey: keys.courses.announcements(courseId),
     queryFn: () =>
       fetchApi<classroom_v1.Schema$Announcement[]>(
         `/v1/courses/${courseId}/announcements`,

tsconfig.json

@@ -7,7 +7,8 @@
         "./*"
       ]
     },
-    "jsxImportSource": "nativewind"
+    "jsxImportSource": "nativewind",
+    "module": "ESNext"
   },
   "include": [
     "**/*.ts",