Stop concerts from being deselected all the time

Closes #1

Author: penelopeysm

src/components/ConcertList.svelte

@@ -2,43 +2,44 @@
     import Tags from "src/components/Tags.svelte";
     import { type Concert } from "src/lib/bindings/Concert";
     import { formatDate, getPriceString } from "src/lib/utils";
-    import { selectedConcertIndices } from "src/lib/stores";
+    import { concertViews, selectedConcertIds } from "src/lib/stores";
+    import { notUndefined } from "src/lib/utils";
 
     export let allConcerts: Concert[];
-    export let shownIndices: number[];
+    export let shownIds: string[];
 
     // Event handler when a concert is clicked. The behaviour is chosen to
     // provide as intuitive a UI as possible
-    function selectOrDeselect(event: MouseEvent, idx: number) {
-        if ($selectedConcertIndices.includes(idx)) {
+    function selectOrDeselect(event: MouseEvent, id: string) {
+        if ($selectedConcertIds.includes(id)) {
             if (event.shiftKey) {
-                $selectedConcertIndices = $selectedConcertIndices.filter(
-                    (i) => i !== idx,
+                $selectedConcertIds = $selectedConcertIds.filter(
+                    (i) => i !== id,
                 );
             } else {
-                if ($selectedConcertIndices.length === 1) {
-                    $selectedConcertIndices = [];
+                if ($selectedConcertIds.length === 1) {
+                    $selectedConcertIds = [];
                 } else {
-                    $selectedConcertIndices = [idx];
+                    $selectedConcertIds = [id];
                 }
             }
         } else {
             if (event.shiftKey) {
-                $selectedConcertIndices = [...$selectedConcertIndices, idx];
+                $selectedConcertIds = [...$selectedConcertIds, id];
             } else {
-                $selectedConcertIndices = [idx];
+                $selectedConcertIds = [id];
             }
         }
     }
 </script>
 
 <div class="concert-list">
-    {#each shownIndices as idx}
-        {@const concert = allConcerts[idx]}
+    {#each shownIds as id}
+        {@const concert = notUndefined(allConcerts.find((c) => c.id === id))}
         <button
             class="concert"
-            class:active={$selectedConcertIndices.includes(idx)}
-            on:click={(event) => selectOrDeselect(event, idx)}
+            class:active={$selectedConcertIds.includes(id)}
+            on:click={(event) => selectOrDeselect(event, id)}
         >
             <Tags {concert} />
             <h3>{concert.title}</h3>
@@ -68,7 +69,9 @@
         border: 2px solid #666;
         padding: 10px;
         border-radius: 5px;
-        width: calc(100% - 5px); /* Leave some space for scrollbar on some systems */
+        width: calc(
+            100% - 5px
+        ); /* Leave some space for scrollbar on some systems */
 
         font-family: inherit;
         text-align: left;

src/components/Details.svelte

@@ -4,16 +4,16 @@
     import {
         concertViews,
         currentViewName,
-        selectedConcertIndices,
+        selectedConcertIds,
         defaultViewName,
     } from "src/lib/stores";
     import Dropdown from "src/components/Dropdown.svelte";
 
     let allConcerts: Concert[] = $concertViews.get(
         $currentViewName,
     ) as Concert[];
-    let selectedConcerts: Concert[] = allConcerts.filter((_, idx) =>
-        $selectedConcertIndices.includes(idx),
+    let selectedConcerts: Concert[] = allConcerts.filter((c) =>
+        $selectedConcertIds.includes(c.id),
     );
 
     function compareConcertTime(a: Concert, b: Concert): number {
@@ -61,8 +61,8 @@
 
     $: {
         allConcerts = $concertViews.get($currentViewName) as Concert[];
-        selectedConcerts = allConcerts.filter((_, idx) =>
-            $selectedConcertIndices.includes(idx),
+        selectedConcerts = allConcerts.filter((c) =>
+            $selectedConcertIds.includes(c.id),
         );
     }
 </script>

src/components/Overview.svelte

@@ -6,25 +6,37 @@
         concertViews,
         filters,
         currentViewName,
-        selectedConcertIndices,
+        selectedConcertIds,
     } from "src/lib/stores";
-    import { getPassingIndices } from "src/lib/filters";
+    import { getPassingIds, type FiltersType } from "src/lib/filters";
 
-    let allConcerts: Concert[] = $concertViews.get($currentViewName) as Concert[];
-    let shownIndices: number[] = getPassingIndices(allConcerts, $filters);
+    let allConcerts: Concert[] = $concertViews.get(
+        $currentViewName,
+    ) as Concert[];
+    let shownIds: string[] = getPassingIds(allConcerts, $filters);
+
+    // Whenever either the view name changes or the filters are updated, update the UI,
+    // and reset the selected concert IDs.
+    // The reason why we explicitly take currentViewName and filters as arguments is that
+    // we can use them in the $: block to trigger the updateUI function
+    // whenever these variables change.
+    // In contrast, we don't need to do this when $concertViews itself gets updated, so we
+    // just use its value directly inside the function.
+    // Hacky!
+    function updateUI(currentViewName1: string, filters1: FiltersType) {
+        allConcerts = $concertViews.get(currentViewName1) as Concert[];
+        shownIds = getPassingIds(allConcerts, filters1);
+        $selectedConcertIds = [];
+    }
 
     $: {
-        // Calculate the indices of the concerts that should be shown
-        allConcerts = $concertViews.get($currentViewName) as Concert[];
-        shownIndices = getPassingIndices(allConcerts, $filters);
-        // Clear selected concerts when filters are changed (or allConcerts for that matter)
-        $selectedConcertIndices = [];
+        updateUI($currentViewName, $filters);
     }
 </script>
 
 <div class="overview">
-    <ViewList bind:allConcerts bind:shownIndices />
-    <ConcertList bind:allConcerts bind:shownIndices />
+    <ViewList bind:allConcerts bind:shownIds />
+    <ConcertList bind:allConcerts bind:shownIds />
 </div>
 
 <style>

src/components/ViewList.svelte

@@ -4,15 +4,15 @@
         concertViews,
         filters,
         currentViewName,
-        selectedConcertIndices,
+        selectedConcertIds,
         defaultViewName,
     } from "src/lib/stores";
     import { initialFilters } from "src/lib/filters";
     import FileSelector from "src/components/FileSelector.svelte";
     import Dropdown from "src/components/Dropdown.svelte";
 
     export let allConcerts: Concert[];
-    export let shownIndices: number[];
+    export let shownIds: string[];
 
     function setViewName(newViewName: string) {
         $currentViewName = newViewName;
@@ -33,7 +33,9 @@
         if (newViewName === null) {
             return;
         }
-        const shownConcerts = shownIndices.map((i) => allConcerts[i]);
+        const shownConcerts = shownIds.map((i) =>
+            allConcerts.find((c) => c.id === i),
+        ) as Concert[];
         $filters = initialFilters;
         $concertViews.set(newViewName, shownConcerts);
         $concertViews = new Map($concertViews); // Required to trigger store update
@@ -45,9 +47,9 @@
         if (newViewName === null) {
             return;
         }
-        const selectedConcerts = $selectedConcertIndices.map(
-            (i) => allConcerts[i],
-        );
+        const selectedConcerts = $selectedConcertIds
+            .map((i) => allConcerts.find((c) => c.id === i))
+            .filter((c) => c !== undefined) as Concert[];
         $filters = initialFilters;
         $concertViews.set(newViewName, selectedConcerts);
         $concertViews = new Map($concertViews); // Required to trigger store update
@@ -133,7 +135,7 @@
         {@const allConcertsLength = notUndefined(
             $concertViews.get(viewName),
         ).length}
-        {@const shownConcertsLength = shownIndices.length}
+        {@const shownConcertsLength = shownIds.length}
         <Dropdown
             hasOptions={viewName !== defaultViewName}
             selected={$currentViewName === viewName}

src/lib/filters.ts

@@ -64,14 +64,14 @@ function satisfies(concert: Concert, filters: FiltersType): boolean {
     return searchPass && booleanPass;
 }
 
-export function getPassingIndices(concerts: Concert[], filters: FiltersType): number[] {
-    let passingIndices: number[] = [];
-    concerts.forEach((concert, i) => {
+export function getPassingIds(concerts: Concert[], filters: FiltersType): string[] {
+    let passingIds: string[] = [];
+    concerts.forEach((concert) => {
         if (satisfies(concert, filters)) {
-            passingIndices.push(i);
+            passingIds.push(concert.id);
         }
     });
-    return passingIndices;
+    return passingIds;
 }
 
 export const initialFilters: FiltersType = {

src/lib/stores.ts

@@ -66,7 +66,7 @@ export const concertViews = {
 export const currentViewName: Writable<string> = writable(defaultViewName);
 
 // Indices of selected concerts
-export const selectedConcertIndices: Writable<number[]> = writable([]);
+export const selectedConcertIds: Writable<string[]> = writable([]);
 
 // Store for state of filters. We have to make a copy of initialFilters to avoid
 // mutating it

src/lib/utils.ts

@@ -22,3 +22,10 @@ export function getPriceString(concert: Concert): string {
     }
     return "Price not available";
 }
+
+export function notUndefined<T>(x: T | undefined): T {
+    if (x === undefined) {
+        throw new Error("Unexpected undefined value");
+    }
+    return x;
+}