Merge branch 'improve-the-store'
This commit is contained in:
commit
cdb0bfaca8
@ -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'
|
||||
|
20
e2e/hide-game.test.js
Normal file
20
e2e/hide-game.test.js
Normal file
@ -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 });
|
||||
});
|
12
e2e/test.js
Normal file
12
e2e/test.js
Normal file
@ -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();
|
||||
});
|
||||
}
|
@ -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",
|
||||
|
@ -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;
|
||||
|
51
src/lib/stores/index.js
Normal file
51
src/lib/stores/index.js
Normal file
@ -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));
|
||||
};
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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();
|
||||
});
|
Loading…
Reference in New Issue
Block a user