Refactor to make concert filtering cleaner

penelopeysm · penelopeysm · commit 3b84b0f531f9 · 2024-04-17T01:36:59.000+01:00
diff --git a/src/App.svelte b/src/App.svelte
@@ -3,17 +3,24 @@
     import Filters from "src/lib/Filters.svelte";
     import Overview from "src/lib/Overview.svelte";
     import Details from "src/lib/Details.svelte";
-
-    import { type FiltersType } from "src/lib/filters";
     import { type Concert } from "src/lib/bindings/Concert";
-    let selectedConcert: Concert | null = null;
+    import { type FiltersType, satisfies } from "src/lib/filters";
+
+    // Initialise list of concerts
+    import rawConcerts from "src/assets/concerts.json";
+    const concerts = rawConcerts as Concert[];
 
-    let filters: Filters = {
+    // Filter concerts
+    let filters: FiltersType = {
         searchTerm: "",
         wigmoreU35: false,
     };
+    let concertsToShow: Concert[];
+    $: {
+        concertsToShow = concerts.filter((c) => satisfies(c, filters));
+    }
 
-    let searchTerm: string = "";
+    let selectedConcert: Concert | null = null;
 </script>
 
 <body>
@@ -23,7 +30,7 @@
             <Filters bind:filters />
         </div>
         <div class="bottom">
-            <Overview bind:filters bind:selectedConcert />
+            <Overview concerts={concertsToShow} bind:selectedConcert />
             <Details bind:selectedConcert />
         </div>
     </main>
@@ -62,7 +69,7 @@
         grid-template-columns: 1fr 1fr;
         gap: 30px;
         width: 100%;
-        min-height: 0;  /* So confusing that this is required */
+        min-height: 0; /* So confusing that this is required */
         max-height: 100%;
     }
 </style>
diff --git a/src/lib/Overview.svelte b/src/lib/Overview.svelte
@@ -1,43 +1,14 @@
 <script lang="ts">
     import { type Concert } from "src/lib/bindings/Concert";
     import Tags from "src/lib/Tags.svelte";
-    import { type FiltersType } from "src/lib/filters";
     import { formatDate, getPriceString } from "src/utils";
 
+    export let concerts: Concert[];
     export let selectedConcert: Concert | null;
-    export let filters: FiltersType;
-
-    // Initialise list of concerts
-    import rawConcerts from "src/assets/concerts.json";
-    const concerts = rawConcerts as Concert[];
-    let concertsToShow: Concert[] = [];
-
-    function satisfiesFilters(concert: Concert, filters: FiltersType): boolean {
-        // Check search filter
-        let ciSearchTerm = filters.searchTerm.toLowerCase();
-        let searchPass =
-            filters.searchTerm === "" ||
-            concert.title.toLowerCase().includes(ciSearchTerm) ||
-            (concert.subtitle !== null &&
-                concert.subtitle.toLowerCase().includes(ciSearchTerm)) ||
-            concert.venue.toLowerCase().includes(ciSearchTerm) ||
-            concert.performers.some((p) =>
-                p.name.toLowerCase().includes(ciSearchTerm),
-            );
-
-        // Check U35 filter
-        let u35Pass = filters.wigmoreU35 ? concert.is_wigmore_u35 : true;
-
-        return searchPass && u35Pass;
-    }
-
-    $: {
-        concertsToShow = concerts.filter((c) => satisfiesFilters(c, filters));
-    }
 </script>
 
 <div class="overview">
-    {#each concertsToShow as concert}
+    {#each concerts as concert}
         <button
             class="concert"
             class:active={selectedConcert === concert}
diff --git a/src/lib/filters.ts b/src/lib/filters.ts
@@ -1,4 +1,27 @@
+import { type Concert } from "src/lib/bindings/Concert";
+
 export type FiltersType = {
     searchTerm: string;
     wigmoreU35: boolean;
 };
+
+// Check if a concert satisfies the filters
+export function satisfies(concert: Concert, filters: FiltersType): boolean {
+    // Check search filter
+    let ciSearchTerm = filters.searchTerm.toLowerCase();
+    let searchPass =
+        filters.searchTerm === "" ||
+        concert.title.toLowerCase().includes(ciSearchTerm) ||
+        (concert.subtitle !== null &&
+            concert.subtitle.toLowerCase().includes(ciSearchTerm)) ||
+        concert.venue.toLowerCase().includes(ciSearchTerm) ||
+        concert.performers.some((p) =>
+            p.name.toLowerCase().includes(ciSearchTerm),
+        );
+
+    // Check U35 filter
+    let u35Pass = filters.wigmoreU35 ? concert.is_wigmore_u35 : true;
+
+    return searchPass && u35Pass;
+}
+
