improve the store

.envrc

@@ -1 +1,2 @@
 export DATABASE_URL=sqlite3:./games.db
+export VITE_DB_DIR=/dev/

Taskfile.yaml

@@ -6,6 +6,14 @@ vars:
     GREETING: Hello, World!
 
 tasks:
+    preview:
+        deps: [build]
+        cmds:
+            - npm exec vite preview
+    test:e2e:
+        deps: [build]
+        cmds:
+            - npm exec playwright test
     export-db:
         cmds:
             - sqlite3 /home/bggsell/games.db '.mode json' '.once /home/bggsell/db/games.json' 'select * from game'

e2e/hide-game.test.js

@@ -0,0 +1,20 @@
+import { test, expect } from '@playwright/test';
+
+test('hide game', async ({ page }) => {
+    await page.goto('/');
+    const nbr_games = await page
+        .locator('.games > div')
+        .all()
+        .then((games) => games.length);
+
+    await page.getByRole('button', { name: 'visibility' }).first().click();
+
+    await expect(async () => {
+        const one_hidden = await page
+            .locator('.games > div')
+            .all()
+            .then((games) => games.length);
+
+        expect(one_hidden).toEqual(nbr_games - 1);
+    }).toPass({ timeout: 10_000 });
+});

e2e/test.js

@@ -0,0 +1,12 @@
+import { expect, test } from '@playwright/test';
+
+for (const url of ['/', '/stats/', '/about/']) {
+    test(url + ' render', async ({ page }) => {
+        await page.goto(url);
+        await expect(
+            page.getByRole('heading', {
+                name: 'Ottawa board games for sale and trade',
+            }),
+        ).toBeVisible();
+    });
+}

package.json

@@ -16,7 +16,7 @@
     },
     "devDependencies": {
         "@changesets/cli": "^2.27.1",
-        "@playwright/test": "^1.28.1",
+        "@playwright/test": "^1.41.2",
         "@sveltejs/kit": "^2.5.0",
         "@sveltejs/vite-plugin-svelte": "^3.0.0",
         "@types/eslint": "8.56.0",

playwright.config.js

@@ -1,11 +1,12 @@
 /** @type {import('@playwright/test').PlaywrightTestConfig} */
 const config = {
     webServer: {
-		command: 'npm run build && npm run preview',
-		port: 4173
+        command: 'npm exec vite preview',
+        port: 4173,
+        reuseExistingServer: true,
     },
-	testDir: 'tests',
-	testMatch: /(.+\.)?(test|spec)\.[jt]s/
+    testDir: 'e2e',
+    testMatch: /(.+\.)?(test|spec)\.[jt]s/,
 };
 
 export default config;

src/lib/stores/index.js

@@ -0,0 +1,51 @@
+import { readable, writable, derived } from 'svelte/store';
+import { dev, browser } from '$app/environment';
+import u from '@yanick/updeep-remeda';
+
+const prefix = import.meta.env.VITE_DB_DIR ?? '/db/';
+console.log({ prefix });
+
+const _games_store = readable([], (set) => {
+    if (!browser) return;
+
+    fetch(prefix + 'games.json')
+        .then((doc) => doc.json())
+        .then((games) =>
+            games.map((game) => ({
+                ...game,
+                id: [game.username, game.bgg_id].join('!'),
+            })),
+        )
+        .then(set);
+});
+
+export const sellers_store = readable({}, (set) => {
+    if (!browser) return;
+
+    fetch(prefix + 'sellers.json')
+        .then((doc) => doc.json())
+        .then((sellers_list) =>
+            set(
+                Object.fromEntries(
+                    sellers_list.map((seller) => [seller.username, seller]),
+                ),
+            ),
+        );
+});
+
+let stored = localStorage.getItem('games_hidden');
+if (stored) stored = JSON.parse(stored);
+const games_hidden_store = writable(stored || {});
+games_hidden_store.subscribe((data) =>
+    localStorage.setItem('games_hidden', JSON.stringify(data)),
+);
+
+export const games_store = derived(
+    [_games_store, games_hidden_store],
+    ([$games, $hidden]) =>
+        $games.map((game) => ({ ...game, is_hidden: $hidden[game.id] })),
+);
+
+games_store.toggle_hidden = (id) => {
+    games_hidden_store.update(u.updateIn(id, (v) => !v));
+};

src/routes/+layout.svelte

@@ -15,49 +15,9 @@
     import { persisted } from 'svelte-persisted-store';
     import u from '@yanick/updeep-remeda';
     import AppTop from './AppTop.svelte';
-
-    const prefix = dev ? '/dev/' : '/db/';
-
-    const games = readable([], (set) => {
-        if (!browser) return () => {};
-
-        fetch(prefix + 'games.json')
-            .then((doc) => doc.json())
-            .then(set);
-
-        return () => {};
-    });
-    setContext('games', games);
-
-    const sellers = readable({}, (set) => {
-        if (!browser) return () => {};
-
-        const sellers_list = fetch(prefix + 'sellers.json')
-            .then((doc) => doc.json())
-            .then((sellers_list) =>
-                set(
-                    Object.fromEntries(
-                        sellers_list.map((seller) => [seller.username, seller]),
-                    ),
-                ),
-            );
-        return () => {};
-    });
-    setContext('sellers', sellers);
-
-    const games_hidden = writable(
-        JSON.parse(localStorage.getItem('games_hidden') || '{}'),
-    );
-    games_hidden.toggle = (username, bgg_id) => {
-        console.log({ username, bgg_id });
-        games_hidden.update(
-            u.updateIn([username, bgg_id].join('!'), (v) => !v),
-        );
-    };
-    setContext('games_hidden', games_hidden);
-    games_hidden.subscribe((data) =>
-        localStorage.setItem('games_hidden', JSON.stringify(data)),
-    );
+    import { games_store, sellers_store } from '$lib/stores/index.js';
+    setContext('games', games_store);
+    setContext('sellers', sellers_store);
 </script>
 
 <style>

src/routes/+page.svelte

@@ -1,5 +1,5 @@
 <article>
-    {#await $games}
+    {#if $games.length == 0}
         <div class="medium-height middle-align center-align">
             <div class="center-align">
                 <progress class="circle"></progress>
@@ -7,9 +7,13 @@
                 <h5>gathering games...</h5>
             </div>
         </div>
-    {:then games}
-        <GameList {games} sellers={$sellers} />
-    {/await}
+    {:else}
+        <GameList
+            games={$games}
+            sellers={$sellers}
+            on:toggle_game_visibility={({ detail }) =>
+                games.toggle_hidden(detail)} />
+    {/if}
 </article>
 
 <script>

src/routes/GameList.svelte

@@ -18,12 +18,10 @@
                 .toLowerCase()
                 .includes(target);
     }) as game}
-        {#if show_hidden || !$games_hidden[[game.username, game.bgg_id].join('!')]}
+        {#if show_hidden || !game.is_hidden}
             <div
                 transition:slide={{ delay: 250, duration: 300 }}
-                class:hidden={$games_hidden[
-                    [game.username, game.bgg_id].join('!')
-                ]}>
+                class:hidden={game.is_hidden}>
                 <div class="grid top-align">
                     <a
                         class="s12 m2"
@@ -75,13 +73,8 @@
                                 <button
                                     class="transparent round"
                                     title="hide game"
-                                    on:click={() =>
-                                        toggle_game_visibility(
-                                            game.username,
-                                            game.bgg_id,
-                                        )}
-                                    >{#if $games_hidden[[game.username, game.bgg_id].join('!')]}<i
-                                            >visibility_off</i
+                                    on:click={() => toggle_visibility(game.id)}
+                                    >{#if game.is_hidden}<i>visibility_off</i
                                         >{:else}
                                         <i>visibility</i>
                                     {/if}
@@ -97,16 +90,19 @@
 </div>
 
 <script>
-    import { getContext } from 'svelte';
+    import { getContext, createEventDispatcher } from 'svelte';
     import { slide, fade } from 'svelte/transition';
 
-    export let games;
+    export let games = [];
     export let sellers = {};
 
     let show_hidden = false;
 
     let search_text = '';
 
+    const dispatch = createEventDispatcher();
+    const toggle_visibility = (id) => dispatch('toggle_game_visibility', id);
+
     // add filter
     // add sort (user, game, price)
 
@@ -115,9 +111,6 @@
 
         return date.replace(/T.*/, '');
     }
-
-    const games_hidden = getContext('games_hidden');
-    const toggle_game_visibility = games_hidden.toggle;
 </script>
 
 <style>

tests/test.js

@@ -1,6 +0,0 @@
-import { expect, test } from '@playwright/test';
-
-test('index page has expected h1', async ({ page }) => {
-	await page.goto('/');
-	await expect(page.getByRole('heading', { name: 'Welcome to SvelteKit' })).toBeVisible();
-});