From 08d391010d9357f83133e0e60ea0fab7c363e1e5 Mon Sep 17 00:00:00 2001
From: Yanick Champoux <yanick@babyl.ca>
Date: Mon, 5 Feb 2024 10:30:23 -0500
Subject: [PATCH] show the neighbourhood

---
 Taskfile.yaml              |  2 ++
 src/routes/+layout.svelte  | 32 +++++++++++++++++++++++++++++++-
 src/routes/+page.js        |  9 ---------
 src/routes/+page.svelte    | 12 ++++++------
 src/routes/GameList.svelte | 27 ++++++++++++++++++---------
 static/dev/sellers.json    |  2 ++
 6 files changed, 59 insertions(+), 25 deletions(-)
 delete mode 100644 src/routes/+page.js
 create mode 100644 static/dev/sellers.json

diff --git a/Taskfile.yaml b/Taskfile.yaml
index 3ea7723..0277974 100644
--- a/Taskfile.yaml
+++ b/Taskfile.yaml
@@ -9,9 +9,11 @@ tasks:
     export-db:
         cmds:
             - sqlite3 /home/bggsell/games.db '.mode json' '.once /home/bggsell/db/games.json' 'select * from game'
+            - sqlite3 /home/bggsell/games.db '.mode json' '.once /home/bggsell/db/sellers.json' 'select * from bgg_user'
     export-db:dev:
         cmds:
             - sqlite3 games.db '.mode json' '.once static/dev/games.json' 'select * from game'
+            - sqlite3 games.db '.mode json' '.once static/dev/sellers.json' 'select * from bgg_user'
 
     deploy:
         deps: [build]
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index f4203f6..2c863f5 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -7,7 +7,37 @@
 
 <script>
     import 'beercss/dist/cdn/beer.min.css';
-    //import beercss from "./dist/cdn/beer.min.js";
+    import { setContext } from 'svelte';
+    import { dev, browser } from '$app/environment';
+    import { readable } from 'svelte/store';
+
+    const prefix = dev ? '/dev/' : '/db/';
+
+    const games = readable([], async (set) => {
+        if (!browser) return () => {};
+
+        fetch(prefix + 'games.json')
+            .then((doc) => doc.json())
+            .then(set);
+
+        return () => {};
+    });
+    setContext('games', games);
+
+    const sellers = readable({}, async (set) => {
+        if (!browser) return () => {};
+
+        const sellers_list = await fetch(prefix + 'sellers.json').then((doc) =>
+            doc.json(),
+        );
+        set(
+            Object.fromEntries(
+                sellers_list.map((seller) => [seller.username, seller]),
+            ),
+        );
+        return () => {};
+    });
+    setContext('sellers', sellers);
 </script>
 
 <style>
diff --git a/src/routes/+page.js b/src/routes/+page.js
deleted file mode 100644
index 95b5bf8..0000000
--- a/src/routes/+page.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import { dev, browser } from '$app/environment';
-
-export async function load({ fetch }) {
-    const url = dev ? '/dev/games.json' : '/games.json';
-
-    return {
-        games: browser ? fetch(url).then((doc) => doc.json()) : [],
-    };
-}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 24f1a45..8919ede 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -8,7 +8,7 @@
 </header>
 
 <article>
-    {#await data.games}
+    {#await $games}
         <div class="medium-height middle-align center-align">
             <div class="center-align">
                 <progress class="circle"></progress>
@@ -17,17 +17,17 @@
             </div>
         </div>
     {:then games}
-        <GameList {games} />
+        <GameList {games} sellers={$sellers} />
     {/await}
 </article>
 
 <script>
-    // TODO hide games I'm not interested in
-    // TODO add cart
-    // TODO prettify via beercss
+    import { getContext } from 'svelte';
     import GameList from './GameList.svelte';
 
-    export let data;
+    const games = getContext('games');
+    const sellers = getContext('sellers');
+    $: console.log($sellers);
 
     function pretty_date(date) {
         if (!date) return '';
diff --git a/src/routes/GameList.svelte b/src/routes/GameList.svelte
index 71c166c..3f8d4ea 100644
--- a/src/routes/GameList.svelte
+++ b/src/routes/GameList.svelte
@@ -17,15 +17,20 @@
                     </strong>
                 </div>
                 <div class="s3">
-                    <a
-                        target="_blank"
-                        href={`https://boardgamegeek.com/collection/user/${game.username}?trade=1&subtype=boardgame&ff=1`}
-                        >{game.username}</a>
-                    &nbsp;
-                    <a
-                        target="_blank"
-                        href={`https://boardgamegeek.com/geekmail/compose?touser=${game.username}`}>
-                        <i>email</i></a>
+                    <div>
+                        <a
+                            target="_blank"
+                            href={`https://boardgamegeek.com/collection/user/${game.username}?trade=1&subtype=boardgame&ff=1`}
+                            >{game.username}</a>
+                        &nbsp;
+                        <a
+                            target="_blank"
+                            href={`https://boardgamegeek.com/geekmail/compose?touser=${game.username}`}>
+                            <i>email</i></a>
+                    </div>
+                    <div class="neighbourhood">
+                        {sellers[game.username]?.neighbourhood ?? ''}
+                    </div>
                 </div>
                 <div class="s1 right-align">
                     {game.price ? '$' + game.price : ''}
@@ -44,6 +49,7 @@
 
 <script>
     export let games;
+    export let sellers = {};
 
     // add filter
     // add sort (user, game, price)
@@ -78,4 +84,7 @@
     .updated-at::before {
         content: 'last update: ';
     }
+    .neighbourhood {
+        font-size: smaller;
+    }
 </style>
diff --git a/static/dev/sellers.json b/static/dev/sellers.json
new file mode 100644
index 0000000..68503d3
--- /dev/null
+++ b/static/dev/sellers.json
@@ -0,0 +1,2 @@
+[{"username":"yenzie","neighbourhood":"Bells Corners"},
+{"username":"jmarkmoss","neighbourhood":null}]