Skeleton: Use writable store for pbUser object

src/lib/components/cards/DriverCard.svelte

@@ -43,7 +43,7 @@
 
   // Reactive state
   let required: boolean = $derived(!driver);
-  let disabled: boolean = $derived(!pbUser?.admin);
+  let disabled: boolean = $derived(!$pbUser?.admin);
   let firstname_input_value: string = $state(driver?.firstname ?? "");
   let lastname_input_value: string = $state(driver?.lastname ?? "");
   let code_input_value: string = $state(driver?.code ?? "");

src/lib/components/cards/RaceCard.svelte

@@ -50,7 +50,7 @@
 
   // Reactive state
   let required: boolean = $derived(!race);
-  let disabled: boolean = $derived(!pbUser?.admin);
+  let disabled: boolean = $derived(!$pbUser?.admin);
   let name_value: string = $state(race?.name ?? "");
   let step_value: string = $state(race?.step.toString() ?? "");
   let pxx_value: string = $state(race?.pxx.toString() ?? "");

src/lib/components/cards/RacePickCard.svelte

@@ -96,7 +96,7 @@
   // Database actions
   const update_racepick = (create?: boolean): (() => Promise<void>) => {
     const handler = async (): Promise<void> => {
-      if (!pbUser?.id || pbUser.id === "") {
+      if (!$pbUser?.id || $pbUser.id === "") {
         toastStore.trigger(get_error_toast("Invalid user id!"));
         return;
       }
@@ -114,7 +114,7 @@
       }
 
       const racepick_data = {
-        user: pbUser.id,
+        user: $pbUser.id,
         race: data.currentrace.id,
         pxx: pxx_select_value,
         dnf: dnf_select_value,

src/lib/components/cards/RaceResultCard.svelte

@@ -51,7 +51,7 @@
 
   // Reactive state
   let required: boolean = $derived(!result);
-  let disabled: boolean = $derived(!pbUser?.admin); // TODO: Datelock (prevent entering future result)
+  let disabled: boolean = $derived(!$pbUser?.admin); // TODO: Datelock (prevent entering future result)
   let race_select_value: string = $state(result?.race ?? "");
 
   let currentrace: Race | undefined = $derived(

src/lib/components/cards/SeasonPickCard.svelte

@@ -184,7 +184,7 @@
   // Database actions
   const update_seasonpick = (create?: boolean): (() => Promise<void>) => {
     const handler = async (): Promise<void> => {
-      if (!pbUser?.id || pbUser.id === "") {
+      if (!$pbUser?.id || $pbUser.id === "") {
         toastStore.trigger(get_error_toast("Invalid user id!"));
         return;
       }
@@ -229,7 +229,7 @@
       }
 
       const seasonpick_data = {
-        user: pbUser.id,
+        user: $pbUser.id,
         hottake: hottake_value,
         wdcwinner: wdc_value,
         wccwinner: wcc_value,

src/lib/components/cards/SubstitutionCard.svelte

@@ -43,7 +43,7 @@
 
   // Reactive state
   let required: boolean = $derived(!substitution);
-  let disabled: boolean = $derived(!pbUser?.admin);
+  let disabled: boolean = $derived(!$pbUser?.admin);
   let active_drivers: Driver[] = $derived((drivers ?? []).filter((d: Driver) => d.active));
   let inactive_drivers: Driver[] = $derived((drivers ?? []).filter((d: Driver) => !d.active));
   let substitute_value: string = $state(substitution?.substitute ?? "");

src/lib/components/cards/TeamCard.svelte

@@ -46,7 +46,7 @@
 
   // Reactive state
   let required: boolean = $derived(!team);
-  let disabled: boolean = $derived(!pbUser?.admin);
+  let disabled: boolean = $derived(!$pbUser?.admin);
   let name_value: string = $state(team?.name ?? "");
   let color_value: string = $state(team?.color ?? "");
   let banner_value: FileList | undefined = $state();

src/lib/fetch.ts

@@ -159,11 +159,12 @@ export const fetch_visibleracepicks = async (
 export const fetch_currentracepick = async (
   fetch: (_: any) => Promise<Response>,
 ): Promise<RacePick | undefined> => {
-  if (!pbUser) return undefined;
+  const user: User | undefined = get(pbUser);
+  if (!user) return undefined;
 
   const currentpickeduser: CurrentPickedUser = await pb
     .collection("currentpickedusers")
-    .getOne(pbUser.id, { fetch: fetch });
+    .getOne(user.id, { fetch: fetch });
 
   if (!currentpickeduser.picked) return undefined;
 
@@ -204,11 +205,12 @@ export const fetch_hottakes = async (fetch: (_: any) => Promise<Response>): Prom
 export const fetch_currentseasonpick = async (
   fetch: (_: any) => Promise<Response>,
 ): Promise<SeasonPick | undefined> => {
-  if (!pbUser) return undefined;
+  const user: User | undefined = get(pbUser);
+  if (!user) return undefined;
 
   const seasonpickeduser: CurrentPickedUser = await pb
     .collection("seasonpickedusers")
-    .getOne(pbUser.id, { fetch: fetch });
+    .getOne(user.id, { fetch: fetch });
 
   if (!seasonpickeduser.picked) return undefined;
 

src/lib/pocketbase.ts

@@ -2,9 +2,13 @@ import Pocketbase, { type RecordModel, type RecordSubscription } from "pocketbas
 import type { Graphic, User } from "$lib/schema";
 import { env } from "$env/dynamic/public";
 import { invalidate } from "$app/navigation";
+import { get, writable, type Writable } from "svelte/store";
 
 export let pb = new Pocketbase(env.PUBLIC_PBURL || "http://192.168.86.50:8090");
-export let pbUser: User | undefined = undefined;
+
+// Keep this in a writable store, because this is basically a $state.
+// We can't use $state in non-component files though.
+export let pbUser: Writable<User | undefined> = writable(undefined);
 
 const update_user = async (record: RecordModel): Promise<void> => {
   let avatar_url: string;
@@ -17,7 +21,7 @@ const update_user = async (record: RecordModel): Promise<void> => {
     avatar_url = pb.files.getURL(driver_headshot_template, driver_headshot_template.file);
   }
 
-  pbUser = {
+  pbUser.set({
     id: record.id,
     username: record.username,
     firstname: record.firstname,
@@ -25,19 +29,19 @@ const update_user = async (record: RecordModel): Promise<void> => {
     avatar: record.avatar,
     avatar_url: avatar_url,
     admin: record.admin,
-  } as User;
+  } as User);
 };
 
 // Update the pbUser object when authStore changes (e.g. after logging in)
 pb.authStore.onChange(async () => {
   if (!pb.authStore.isValid) {
     console.log("pb.authStore is invalid: Setting pbUser to undefined");
-    pbUser = undefined;
+    pbUser.set(undefined);
     return;
   }
   if (!pb.authStore.record) {
     console.log("pb.authStore.record is null: Setting pbUser to undefined");
-    pbUser = undefined;
+    pbUser.set(undefined);
     return;
   }
 
@@ -46,9 +50,24 @@ pb.authStore.onChange(async () => {
   // TODO: If the user has not chosen an avatar,
   //       the page keeps displaying the "Login" button (wtf)
   console.log("Updating pbUser...");
-  console.dir(pbUser, { depth: null });
+  console.dir(get(pbUser), { depth: null });
 }, true);
 
+export const clear_auth = (): void => {
+  console.log("Cleared pb.authStore");
+  pb.authStore.clear();
+};
+
+export const refresh_auth = async (): Promise<void> => {
+  if (pb.authStore.isValid) {
+    console.log("Refreshed pb.authStore");
+    await pb.collection("users").authRefresh();
+  } else {
+    console.log("pb.autStore is invalid: Did not refresh pb.authStore");
+    pb.authStore.clear();
+  }
+};
+
 /**
  * Subscribe to PocketBase realtime collections
  */