BradNut/boredgame
1
0
Fork 0
mirror of https://github.com/BradNut/boredgame synced 2025-09-08 17:40:22 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fixing add remove for both stores on other pages.

Browse source
This commit is contained in:
Bradley Shellnut 2022-10-31 15:09:21 -05:00
parent 9b60fc2671
commit 7fe85df58b
4 changed files with 47 additions and 105 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/routes/+layout.svelte
View file

@ -40,7 +40,6 @@
} }
if (collectionEmpty && localStorage?.collection && localStorage?.collection?.length !== 0) { if (collectionEmpty && localStorage?.collection && localStorage?.collection?.length !== 0) {
const collection = JSON.parse(localStorage.collection); const collection = JSON.parse(localStorage.collection);
console.log('collection', collection);
if (collection?.length !== 0) { if (collection?.length !== 0) {
collectionStore.addAll(collection); collectionStore.addAll(collection);
} }

33
src/routes/+page.svelte
View file

@ -11,6 +11,7 @@
import RandomSearch from '$lib/components/search/random/index.svelte'; import RandomSearch from '$lib/components/search/random/index.svelte';
import Random from '$lib/components/random/index.svelte'; import Random from '$lib/components/random/index.svelte';
import Pagination from '$lib/components/pagination/index.svelte'; import Pagination from '$lib/components/pagination/index.svelte';
import RemoveWishlistDialog from '$root/lib/components/dialog/RemoveWishlistDialog.svelte';
export let data: PageData; export let data: PageData;
export let form: ActionData; export let form: ActionData;
@ -57,8 +58,8 @@
detail: GameType | SavedGameType; detail: GameType | SavedGameType;
} }
function handleRemoveGame(event: RemoveGameEvent) { function handleRemoveCollection(event: RemoveGameEvent) {
console.log('Base Page handle remove'); console.log('Remove collection event handler');
console.log('event', event); console.log('event', event);
gameToRemove = event?.detail; gameToRemove = event?.detail;
boredState.update((n) => ({ boredState.update((n) => ({
@ -66,6 +67,16 @@
dialog: { isOpen: true, content: RemoveCollectionDialog, additionalData: gameToRemove } dialog: { isOpen: true, content: RemoveCollectionDialog, additionalData: gameToRemove }
})); }));
} }
function handleRemoveWishlist(event: RemoveGameEvent) {
console.log('Remove wishlist event handler');
console.log('event', event);
gameToRemove = event?.detail;
boredState.update((n) => ({
...n,
dialog: { isOpen: true, content: RemoveWishlistDialog, additionalData: gameToRemove }
}));
}
</script> </script>
<svelte:head> <svelte:head>
@ -124,7 +135,12 @@
<h1>Games Found:</h1> <h1>Games Found:</h1>
<div class="games-list"> <div class="games-list">
{#each $gameStore as game (game.id)} {#each $gameStore as game (game.id)}
<Game on:removeGameEvent={handleRemoveGame} {game} /> <Game
on:handleRemoveWishlist={handleRemoveWishlist}
on:handleRemoveCollection={handleRemoveCollection}
minimal
{game}
/>
{/each} {/each}
</div> </div>
<!-- <Pagination <!-- <Pagination
@ -162,15 +178,20 @@
.games-list { .games-list {
display: grid; display: grid;
grid-template-columns: repeat(3, minmax(200px, 1fr)); --listColumns: 4;
grid-template-columns: repeat(var(--listColumns), minmax(200px, 1fr));
gap: 2rem; gap: 2rem;
@media (max-width: 1200px) {
--listColumns: 3;
}
@media (max-width: 800px) { @media (max-width: 800px) {
grid-template-columns: 1fr 1fr; --listColumns: 2;
} }
@media (max-width: 650px) { @media (max-width: 650px) {
grid-template-columns: 1fr; --listColumns: 1;
} }
} }

95
src/routes/search/+page.server.ts
View file

@ -120,99 +120,4 @@ export const actions: Actions = {
totalCount: 0 totalCount: 0
}; };
} }
// const id = form.get('id');
// const ids = form.get('ids');
// const minAge = form.get('minAge');
// const minPlayers = form.get('minPlayers');
// const maxPlayers = form.get('maxPlayers');
// const exactMinAge = form.get('exactMinAge') || false;
// const exactMinPlayers = form.get('exactMinPlayers') || false;
// const exactMaxPlayers = form.get('exactMaxPlayers') || false;
// const random = form.get('random') === 'on' || false;
// if (minAge) {
// if (exactMinAge) {
// queryParams.min_age = +minAge;
// } else {
// queryParams.gt_min_age = +minAge === 1 ? 0 : +minAge - 1;
// }
// }
// if (minPlayers) {
// if (exactMinPlayers) {
// queryParams.min_players = +minPlayers;
// } else {
// queryParams.gt_min_players = +minPlayers === 1 ? 0 : +minPlayers - 1;
// }
// }
// if (maxPlayers) {
// if (exactMaxPlayers) {
// queryParams.max_players = +maxPlayers;
// } else {
// queryParams.lt_max_players = +maxPlayers + 1;
// }
// }
// if (id) {
// queryParams.ids = new Array(`${id}`);
// }
// if (ids) {
// // TODO: Pass in ids array from localstorage / game store
// queryParams.ids = new Array(ids);
// }
// queryParams.random = random;
// console.log('queryParams', queryParams);
// const newQueryParams: Record<string, string> = {};
// for (const key in queryParams) {
// newQueryParams[key] = `${queryParams[key as keyof typeof queryParams]}`;
// }
// const urlQueryParams = new URLSearchParams(newQueryParams);
// const url = `https://api.boardgameatlas.com/api/search${urlQueryParams ? `?${urlQueryParams}` : ''
// }`;
// const response = await fetch(url, {
// method: 'get',
// headers: {
// 'content-type': 'application/json'
// }
// });
// console.log('response status', response.status);
// console.log('board game response action', response);
// if (response.status === 404) {
// // user hasn't created a todo list.
// // start with an empty array
// return {
// success: true,
// games: [],
// totalCount: 0
// };
// }
// if (response.status === 200) {
// const gameResponse = await response.json();
// console.log('gameResponse', gameResponse);
// const gameList = gameResponse?.games;
// const games: GameType[] = [];
// gameList.forEach((game: GameType) => {
// games.push(mapAPIGameToBoredGame(game));
// });
// console.log('action games', games);
// return {
// games,
// totalCount: games.length
// };
// }
// return { success: false };
// }
// create: async function create({ request, locals }): Promise<any> {
// const data = await getFormDataObject<any>(request);
// return data;
// }
} }

23
src/routes/search/+page.svelte
View file

@ -8,6 +8,7 @@
import { ToastType, type GameType, type SavedGameType } from '$root/lib/types'; import { ToastType, type GameType, type SavedGameType } from '$root/lib/types';
import { boredState } from '$root/lib/stores/boredState'; import { boredState } from '$root/lib/stores/boredState';
import { toast } from '$root/lib/components/toast/toast'; import { toast } from '$root/lib/components/toast/toast';
import RemoveWishlistDialog from '$root/lib/components/dialog/RemoveWishlistDialog.svelte';
export let data: PageData; export let data: PageData;
export let form: ActionData; export let form: ActionData;
@ -27,7 +28,8 @@
detail: GameType | SavedGameType; detail: GameType | SavedGameType;
} }
function handleRemoveGame(event: RemoveGameEvent) { function handleRemoveCollection(event: RemoveGameEvent) {
console.log('Remove collection event handler');
console.log('event', event); console.log('event', event);
gameToRemove = event?.detail; gameToRemove = event?.detail;
boredState.update((n) => ({ boredState.update((n) => ({
@ -35,6 +37,16 @@
dialog: { isOpen: true, content: RemoveCollectionDialog, additionalData: gameToRemove } dialog: { isOpen: true, content: RemoveCollectionDialog, additionalData: gameToRemove }
})); }));
} }
function handleRemoveWishlist(event: RemoveGameEvent) {
console.log('Remove wishlist event handler');
console.log('event', event);
gameToRemove = event?.detail;
boredState.update((n) => ({
...n,
dialog: { isOpen: true, content: RemoveWishlistDialog, additionalData: gameToRemove }
}));
}
</script> </script>
<div class="game-search"> <div class="game-search">
@ -53,7 +65,7 @@
} else { } else {
gameStore.removeAll(); gameStore.removeAll();
gameStore.addAll(result?.data?.games); gameStore.addAll(result?.data?.games);
totalItems = result?.data?.totalCount; // totalItems = result?.data?.totalCount;
console.log(`Frontend result: ${JSON.stringify(result)}`); console.log(`Frontend result: ${JSON.stringify(result)}`);
toast.send('Sucess!', { duration: 3000, type: ToastType.INFO, dismissible: true }); toast.send('Sucess!', { duration: 3000, type: ToastType.INFO, dismissible: true });
await applyAction(result); await applyAction(result);
@ -70,7 +82,12 @@
<h1>Games Found:</h1> <h1>Games Found:</h1>
<div class="games-list"> <div class="games-list">
{#each $gameStore as game (game.id)} {#each $gameStore as game (game.id)}
<Game on:removeGameEvent={handleRemoveGame} {game} /> <Game
on:handleRemoveWishlist={handleRemoveWishlist}
on:handleRemoveCollection={handleRemoveCollection}
minimal
{game}
/>
{/each} {/each}
</div> </div>
</div> </div>