fix: media won't load when token needs refreshing

App.tsx

@@ -28,6 +28,7 @@ import ItemScreen from "./src/screens/feed/item";
 import { SerializedComponent } from "unfucked-ical";
 import EventScreen from "./src/screens/calendar/event";
 import "./src/logging";
+import ReloadProvider from "./src/components/register/reloadProvider";
 
 Notifications.setNotificationHandler({
   handleNotification: async () => ({
@@ -75,69 +76,71 @@ export default function App() {
         }
       >
         <AuthProvider>
-          <Stack.Navigator
-            screenOptions={{
-              header: CustomNavigationBar,
-            }}
-          >
-            <Stack.Screen
-              name={"Home"}
-              component={HomeScreen}
-              options={{
-                headerShown: false,
+          <ReloadProvider>
+            <Stack.Navigator
+              screenOptions={{
+                header: CustomNavigationBar,
               }}
-            />
-            <Stack.Screen
-              name={"Slot"}
-              component={SlotScreen}
-              options={({ route }) => ({
-                title: route.params.title,
-              })}
-            />
-            <Stack.Screen
-              name={"Album"}
-              component={AlbumScreen}
-              options={({ route }) => ({
-                title: route.params.title,
-              })}
-            />
-            <Stack.Screen
-              name={"Smoel"}
-              component={SmoelScreen}
-              options={({ route }) => ({
-                title: route.params.title,
-              })}
-            />
-            <Stack.Screen name={"Slides"} component={SlidesScreen} />
-            <Stack.Screen
-              name={"Web"}
-              component={WebScreen}
-              options={({ route }) => ({
-                title: route.params.title,
-              })}
-            />
-            <Stack.Screen
-              name={"Search"}
-              component={SearchScreen}
-              options={{
-                headerShown: false,
-              }}
-            />
-            <Stack.Screen
-              name={"Item"}
-              component={ItemScreen}
-              options={({ route }) => ({
-                title: route.params.title,
-              })}
-            />
-            <Stack.Screen
-              name={"Event"}
-              component={EventScreen}
-              options={({ route }) => ({
-                title: route.params.title,
-              })}
-            />
-          </Stack.Navigator>
+            >
+              <Stack.Screen
+                name={"Home"}
+                component={HomeScreen}
+                options={{
+                  headerShown: false,
+                }}
+              />
+              <Stack.Screen
+                name={"Slot"}
+                component={SlotScreen}
+                options={({ route }) => ({
+                  title: route.params.title,
+                })}
+              />
+              <Stack.Screen
+                name={"Album"}
+                component={AlbumScreen}
+                options={({ route }) => ({
+                  title: route.params.title,
+                })}
+              />
+              <Stack.Screen
+                name={"Smoel"}
+                component={SmoelScreen}
+                options={({ route }) => ({
+                  title: route.params.title,
+                })}
+              />
+              <Stack.Screen name={"Slides"} component={SlidesScreen} />
+              <Stack.Screen
+                name={"Web"}
+                component={WebScreen}
+                options={({ route }) => ({
+                  title: route.params.title,
+                })}
+              />
+              <Stack.Screen
+                name={"Search"}
+                component={SearchScreen}
+                options={{
+                  headerShown: false,
+                }}
+              />
+              <Stack.Screen
+                name={"Item"}
+                component={ItemScreen}
+                options={({ route }) => ({
+                  title: route.params.title,
+                })}
+              />
+              <Stack.Screen
+                name={"Event"}
+                component={EventScreen}
+                options={({ route }) => ({
+                  title: route.params.title,
+                })}
+              />
+            </Stack.Navigator>
+          </ReloadProvider>
         </AuthProvider>
       </PaperProvider>
     </NavigationContainer>

package.json

@@ -23,6 +23,7 @@
     "expo-image-picker": "~15.0.5",
     "expo-notifications": "~0.28.8",
     "expo-secure-store": "~13.0.1",
+    "expo-sharing": "~12.0.1",
     "expo-status-bar": "~1.12.1",
     "fast-html-parser": "^1.0.1",
     "html-to-text": "^9.0.5",
@@ -42,7 +43,7 @@
     "react-native-webview": "13.8.6",
     "rrule": "^2.8.1",
     "rss-to-json": "^2.1.1",
-    "expo-sharing": "~12.0.1"
+    "socket.io-client": "^4.7.5"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",

src/auth.tsx

@@ -62,7 +62,7 @@ interface GuestState {
   authenticated: Authed.GUEST;
   login: () => void;
 }
-type AuthState =
+export type AuthState =
   | AuthenticatedState
   | UnAuthenticatedState
   | LoadingState

src/components/register/precenseCard.tsx

@@ -17,7 +17,6 @@ export default function PresenceCard({
 }) {
   const theme = useTheme();
   const authState = useContext(AuthContext);
-  const setSlots = useSetAtom(slotsAtom);
 
   async function registerManual(user: string) {
     if (authState.authenticated !== Authed.AUTHENTICATED) return;
@@ -31,8 +30,6 @@ export default function PresenceCard({
         },
       },
     );
-
-    setSlots((await getSlots(token)).slots);
   }
 
   if (!slot.presence) return;

src/components/register/reloadProvider.tsx

@@ -0,0 +1,30 @@
+import { ReactNode, useContext, useEffect, useMemo } from "react";
+import AuthContext, { Authed } from "../../auth";
+import { io } from "socket.io-client";
+import { AANMELDEN } from "../../env";
+import { useSetAtom } from "jotai/index";
+import { getSlots, membersAtom, slotsAtom } from "../../stores/register";
+
+export default function ReloadProvider({
+  children,
+}: {
+  children: ReactNode | ReactNode[];
+}) {
+  const authState = useContext(AuthContext);
+
+  const setSlots = useSetAtom(slotsAtom);
+  const setMembers = useSetAtom(membersAtom);
+  useEffect(() => {
+    const socket = io(AANMELDEN);
+
+    socket.on("update_report_page", async () => {
+      if (authState.authenticated !== Authed.AUTHENTICATED) return;
+
+      const { slots, members } = await getSlots(await authState.token);
+      setSlots(slots);
+      if (members) setMembers(members);
+    });
+  }, []);
+
+  return children;
+}

src/screens/feed/slot.tsx

@@ -52,13 +52,11 @@ export default function SlotScreen({ route, navigation }: Props) {
       }
       slot.is_registered = !slot.is_registered;
     }
-
-    setSlots((await getSlots(token)).slots);
-    setLoading(false);
   }
 
   useEffect(() => {
     setSlot(slots[route.params.slot]);
+    setLoading(false);
   }, [slots]);
 
   if (!slot) return <Text>Something went wrong!</Text>;

src/screens/media/media.tsx

@@ -15,7 +15,7 @@ enum Page {
 
 export default function MediaScreen() {
   const authState = useContext(AuthContext);
-  const [api, setApi] = useAtom(apiAtom);
+  const [_api, setApi] = useAtom(apiAtom);
   const [page, setPage] = useState<Page>(Page.ALBUMS);
   const theme = useTheme();
 
@@ -24,9 +24,7 @@ export default function MediaScreen() {
       return setApi(null);
     }
 
-    authState.token.then((token) => {
-      setApi(getApi(token));
-    });
+    setApi(getApi(authState));
   }, [authState]);
 
   return (