Add campus to dropdown

src/lib/util.ts

@@ -8,5 +8,12 @@ type Entries<T> = {
 export const typedEntries = <T extends object>(obj: T) =>
     Object.entries(obj) as Entries<T>;
 
+export const sortedEntriesByKey = <T extends object>(
+    obj: T,
+    fn: (a: keyof T, b: keyof T) => number,
+) => typedEntries(obj).toSorted(([a], [b]) => fn(a, b));
+
+export const strCompare = (a: string, b: string) => a.localeCompare(b);
+
 const mongoIdRegex = /^[0-9a-f]{24}$/i;
 export const isMongoId = (id: string) => mongoIdRegex.test(id);

src/routes/+layout.svelte

@@ -3,16 +3,17 @@
     import type { Restaurant } from "$lib/restaurant";
     import { MetaTags } from "svelte-meta-tags";
     import "../app.pcss";
-    import { _, __, messages } from "$lib/i18n";
+    import { _, __, messages, type Language } from "$lib/i18n";
+    import { sortedEntriesByKey, strCompare } from "$lib/util";
 
     export let data;
 
-    $: lang = $page.data.lang as string | undefined;
+    $: lang = $page.data.lang as Language | undefined;
     $: date = $page.data.date as string | undefined;
 
-    $: restaurants = lang
-        ? data.restaurants.filter((restaurant) => restaurant.lang === lang)
-        : data.restaurants;
+    $: restaurantsByCampus = lang
+        ? data.restaurantsByLanguageAndCampus[lang]
+        : data.restaurantsByCampus;
 
     $: selectedRestaurant =
         "restaurant" in $page.data
@@ -37,15 +38,20 @@
                 <ul
                     class="menu dropdown-content z-20 mt-2 max-h-52 w-64 flex-nowrap overflow-y-auto rounded-box bg-base-300 p-2 shadow"
                 >
-                    {#each restaurants as restaurant, i (i)}
-                        <li>
-                            <a
-                                href="/{restaurant.lang}/{restaurant.slug ??
-                                    restaurant.id}/{date ?? ''}"
-                            >
-                                {restaurant.name}
-                            </a>
-                        </li>
+                    {#each sortedEntriesByKey(restaurantsByCampus, strCompare) as [campus, restaurants] (campus)}
+                        <li class="menu-title">{campus}</li>
+                        {#each restaurants as restaurant (restaurant.id)}
+                            <li>
+                                <a
+                                    class:active={restaurant.id ===
+                                        selectedRestaurant.id}
+                                    href="/{restaurant.lang}/{restaurant.slug ??
+                                        restaurant.id}/{date ?? ''}"
+                                >
+                                    {restaurant.name}
+                                </a>
+                            </li>
+                        {/each}
                     {/each}
                 </ul>
             </div>

src/routes/+layout.ts

@@ -1,3 +1,4 @@
+import { __, type Language, messages } from "$lib/i18n";
 import type { Restaurant } from "$lib/restaurant";
 import type { LayoutLoad } from "./$types";
 
@@ -8,7 +9,29 @@ export const load: LayoutLoad = async ({ fetch }) => {
 
     const { restaurants } = (await req.json()) as { restaurants: Restaurant[] };
 
+    const restaurantsByLanguage = Object.groupBy(
+        restaurants,
+        (r) => r.lang,
+    ) as Record<Language, Restaurant[]>;
+
+    const restaurantsByLanguageAndCampus = Object.fromEntries(
+        Object.entries(restaurantsByLanguage).map(([lang, restaurants]) => [
+            lang,
+            Object.groupBy(
+                restaurants,
+                (r) => r.campus ?? __(r.lang, messages.other),
+            ) as Record<string, Restaurant[]>,
+        ]),
+    ) as Record<Language, Record<string, Restaurant[]>>;
+
+    const restaurantsByCampus = Object.values(
+        restaurantsByLanguageAndCampus,
+    ).reduce((acc, lang) => ({ ...acc, ...lang }), {});
+
     return {
         restaurants,
+        restaurantsByCampus,
+        restaurantsByLanguage,
+        restaurantsByLanguageAndCampus,
     };
 };

src/routes/[lang=lang]/+page.svelte

@@ -1,16 +1,12 @@
 <script lang="ts">
     import { _, messages } from "$lib/i18n";
-    import type { Restaurant } from "$lib/restaurant.js";
-    import { typedEntries } from "$lib/util.js";
+    import { sortedEntriesByKey, strCompare } from "$lib/util.js";
     import { MetaTags } from "svelte-meta-tags";
 
     export let data;
 
     $: lang = data.lang;
-    $: restaurantsByCampus = Object.groupBy(
-        data.restaurants.filter((restaurant) => restaurant.lang === lang),
-        (r) => r.campus ?? $_(messages.other),
-    ) as Record<string, Restaurant[]>;
+    $: restaurantsByCampus = data.restaurantsByLanguageAndCampus[lang];
 </script>
 
 <MetaTags
@@ -22,7 +18,7 @@
     ]}
 />
 
-{#each typedEntries(restaurantsByCampus).toSorted( ([a], [b]) => a.localeCompare(b), ) as [campus, restaurants] (campus)}
+{#each sortedEntriesByKey(restaurantsByCampus, strCompare) as [campus, restaurants] (campus)}
     <h2 class="text-xl">{campus}</h2>
     <ul class="grid gap-4 md:grid-cols-2">
         {#each restaurants as restaurant (restaurant.id)}