Lib: Fix promise handling and reactive placeholder/chips in RaceResultCard

src/lib/components/cards/RaceResultCard.svelte

@@ -31,29 +31,28 @@
   }
 
   let races: Race[] | undefined = $state(undefined);
-  data.races.then((r: Race[]) => {
-    races = r;
-  });
+  data.races.then((r: Race[]) => (races = r));
 
-  const required: boolean = $derived(!result);
-  const disabled: boolean = $derived(!data.admin);
+  let drivers: Driver[] | undefined = $state(undefined);
+  data.drivers.then((d: Driver[]) => (drivers = d));
+
+  // Constants
   const labelwidth: string = "70px";
 
+  // Reactive state
+  let required: boolean = $derived(!result);
+  let disabled: boolean = $derived(!data.admin);
   let race_select_value: string = $state(result?.race ?? "");
 
-  // TODO: Currentrace needs to be updated once a race is selected
-  //       This way it doesn't update the placeholder (or the chips)...
-  // const currentrace: Promise<Race | undefined> = $derived.by(async () =>
-  //   get_by_value(await data.races, "id", race_select_value),
-  // );
-
   let currentrace: Race | undefined = $derived(
-    races ? (get_by_value(races, "id", race_select_value) ?? undefined) : undefined,
+    get_by_value<Race>(races ?? [], "id", race_select_value) ?? undefined,
   );
 
-  $effect(() => {
-    console.log("Updated currentrace", currentrace);
-  });
+  let pxxs_placeholder: string = $derived(
+    currentrace
+      ? `Select P${(currentrace.pxx ?? -10) - 3} to P${(currentrace.pxx ?? -10) + 3}...`
+      : `Select race first...`,
+  );
 
   let pxxs_input: string = $state("");
   let pxxs_chips: string[] = $state([]);
@@ -61,12 +60,24 @@
   let dnfs_input: string = $state("");
   let dnfs_chips: string[] = $state([]);
 
+  // Set the pxxs/dnfs states once the drivers are loaded
+  data.drivers.then(async (drivers: Driver[]) => {
+    pxxs_chips =
+      result?.pxxs.map(
+        (id: string, index: number) =>
+          `P${(currentrace?.pxx ?? -10) + index - 3}: ${get_by_value(drivers, "id", id)?.code ?? "Invalid"}`,
+      ) ?? [];
+
+    dnfs_chips =
+      result?.dnfs.map((id: string) => get_by_value(drivers, "id", id)?.code ?? "Invalid") ?? [];
+  });
+
   // This is the actual data that gets sent through the form
   let pxxs_ids: string[] = $state(result?.pxxs ?? []);
   let dnfs_ids: string[] = $state(result?.dnfs ?? []);
 
-  const pxxs_options: Promise<AutocompleteOption<string>[]> = $derived.by(async () =>
-    (await data.drivers)
+  let pxxs_options: AutocompleteOption<string>[] = $derived.by(() =>
+    (drivers ?? [])
       .filter((driver: Driver) => {
         // Filter out all drivers that are already selected
         return !pxxs_ids.includes(driver.id);
@@ -81,8 +92,8 @@
       }),
   );
 
-  const dnfs_options: Promise<AutocompleteOption<string>[]> = $derived.by(async () =>
-    (await data.drivers).map((driver: Driver) => {
+  let dnfs_options: AutocompleteOption<string>[] = $derived.by(() =>
+    (drivers ?? []).map((driver: Driver) => {
       return {
         // NOTE: Because Skeleton displays the values inside the autocomplete input,
         //       we have to supply the driver code twice and manage a list of ids manually (ugh)
@@ -92,15 +103,21 @@
     }),
   );
 
-  const pxxs_whitelist: Promise<string[]> = $derived.by(async () =>
-    (await data.drivers).map((driver: Driver) => {
+  let pxxs_whitelist: string[] = $derived.by(() =>
+    (drivers ?? []).map((driver: Driver) => {
       return driver.code;
     }),
   );
 
-  const on_pxxs_chip_select = async (
-    event: CustomEvent<AutocompleteOption<string>>,
-  ): Promise<void> => {
+  // Event handlers
+  const on_race_select = (event: Event): void => {
+    pxxs_chips = pxxs_chips.map(
+      (label: string, index: number) =>
+        `P${(currentrace?.pxx ?? -10) + index - 3}: ${label.split(" ").pop()}`,
+    );
+  };
+
+  const on_pxxs_chip_select = (event: CustomEvent<AutocompleteOption<string>>): void => {
     if (disabled) return;
 
     // Can only select 7 drivers
@@ -110,33 +127,26 @@
     if (pxxs_chips.some((label: string) => label.endsWith(event.detail.value))) return;
 
     // Manage labels that are displayed
-    pxxs_chips.push(
-      `P${((await currentrace)?.pxx ?? -10) + pxxs_chips.length - 3}: ${event.detail.value}`,
-    );
+    pxxs_chips.push(`P${(currentrace?.pxx ?? -10) + pxxs_chips.length - 3}: ${event.detail.value}`);
     pxxs_input = "";
 
     // Manage ids that are submitted via form
-    const id: string =
-      get_by_value(await data.drivers, "code", event.detail.value)?.id ?? "Invalid";
+    const id: string = get_by_value(drivers ?? [], "code", event.detail.value)?.id ?? "Invalid";
     if (!pxxs_ids.includes(id)) {
       pxxs_ids.push(id);
     }
   };
 
-  const on_pxxs_chip_remove = async (event: CustomEvent): Promise<void> => {
+  const on_pxxs_chip_remove = (event: CustomEvent): void => {
     pxxs_ids.splice(event.detail.chipIndex, 1);
 
-    pxxs_chips = await Promise.all(
-      pxxs_chips.map(
-        async (label: string, index: number) =>
-          `P${((await currentrace)?.pxx ?? -10) + index - 3}: ${label.split(" ").pop()}`,
-      ),
+    pxxs_chips = pxxs_chips.map(
+      (label: string, index: number) =>
+        `P${(currentrace?.pxx ?? -10) + index - 3}: ${label.split(" ").pop()}`,
     );
   };
 
-  const on_dnfs_chip_select = async (
-    event: CustomEvent<AutocompleteOption<string>>,
-  ): Promise<void> => {
+  const on_dnfs_chip_select = (event: CustomEvent<AutocompleteOption<string>>): void => {
     if (disabled) return;
 
     // Can only select a driver once
@@ -147,29 +157,15 @@
     dnfs_input = "";
 
     // Manage ids that are submitted via form
-    const id: string =
-      get_by_value(await data.drivers, "code", event.detail.value)?.id ?? "Invalid";
+    const id: string = get_by_value(drivers ?? [], "code", event.detail.value)?.id ?? "Invalid";
     if (!dnfs_ids.includes(id)) {
       dnfs_ids.push(id);
     }
   };
 
-  const on_dnfs_chip_remove = async (event: CustomEvent): Promise<void> => {
+  const on_dnfs_chip_remove = (event: CustomEvent): void => {
     dnfs_ids.splice(event.detail.chipIndex, 1);
   };
-
-  // Set the pxxs/dnfs states once the drivers are loaded
-  data.drivers.then(async (drivers: Driver[]) => {
-    pxxs_chips = await Promise.all(
-      result?.pxxs.map(
-        async (id: string, index: number) =>
-          `P${((await currentrace)?.pxx ?? -10) + index - 3}: ${get_by_value(drivers, "id", id)?.code ?? "Invalid"}`,
-      ) ?? [],
-    );
-
-    dnfs_chips =
-      result?.dnfs.map((id: string) => get_by_value(drivers, "id", id)?.code ?? "Invalid") ?? [];
-  });
 </script>
 
 <Card width="w-full sm:w-[512px]">
@@ -194,6 +190,7 @@
         name="race"
         bind:value={race_select_value}
         options={race_dropdown_options(races)}
+        onchange={on_race_select}
         {labelwidth}
         {disabled}
         {required}
@@ -204,52 +201,44 @@
 
     <div class="mt-2 flex flex-col gap-2">
       <!-- PXXs autocomplete chips -->
-      {#await Promise.all([currentrace, pxxs_whitelist]) then [current, whitelist]}
-        <InputChip
-          bind:input={pxxs_input}
-          bind:value={pxxs_chips}
-          {whitelist}
-          allowUpperCase
-          placeholder="Select P{(current?.pxx ?? -10) - 3} to P{(current?.pxx ?? -10) + 3}..."
-          name="pxxs_codes"
-          {disabled}
-          {required}
-          on:remove={on_pxxs_chip_remove}
-        />
-      {/await}
+      <InputChip
+        bind:input={pxxs_input}
+        bind:value={pxxs_chips}
+        whitelist={pxxs_whitelist}
+        allowUpperCase
+        placeholder={pxxs_placeholder}
+        name="pxxs_codes"
+        {disabled}
+        {required}
+        on:remove={on_pxxs_chip_remove}
+      />
       <div class="card max-h-48 w-full overflow-y-auto p-2" tabindex="-1">
-        {#await pxxs_options then options}
-          <Autocomplete
-            bind:input={pxxs_input}
-            {options}
-            denylist={pxxs_chips}
-            on:selection={on_pxxs_chip_select}
-          />
-        {/await}
+        <Autocomplete
+          bind:input={pxxs_input}
+          options={pxxs_options}
+          denylist={pxxs_chips}
+          on:selection={on_pxxs_chip_select}
+        />
       </div>
 
       <!-- DNFs autocomplete chips -->
-      {#await pxxs_whitelist then whitelist}
-        <InputChip
-          bind:input={dnfs_input}
-          bind:value={dnfs_chips}
-          {whitelist}
-          allowUpperCase
-          placeholder="Select DNFs..."
-          name="dnfs_codes"
-          {disabled}
-          on:remove={on_dnfs_chip_remove}
-        />
-      {/await}
+      <InputChip
+        bind:input={dnfs_input}
+        bind:value={dnfs_chips}
+        whitelist={pxxs_whitelist}
+        allowUpperCase
+        placeholder="Select DNFs..."
+        name="dnfs_codes"
+        {disabled}
+        on:remove={on_dnfs_chip_remove}
+      />
       <div class="card max-h-48 w-full overflow-y-auto p-2" tabindex="-1">
-        {#await dnfs_options then options}
-          <Autocomplete
-            bind:input={dnfs_input}
-            {options}
-            denylist={dnfs_chips}
-            on:selection={on_dnfs_chip_select}
-          />
-        {/await}
+        <Autocomplete
+          bind:input={dnfs_input}
+          options={dnfs_options}
+          denylist={dnfs_chips}
+          on:selection={on_dnfs_chip_select}
+        />
       </div>
 
       <!-- Save/Delete buttons -->