From 0864159546254481bda098c180fe7bd118663132 Mon Sep 17 00:00:00 2001 From: Bradley Shellnut Date: Thu, 29 Sep 2022 17:22:01 -0500 Subject: [PATCH] Moving form posts to actions slowly. --- src/app.d.ts | 15 +- src/hooks.server..ts | 25 +-- src/routes/+page.server.ts | 2 + src/routes/+page.svelte | 294 ++++++++++++++++-------------- src/routes/about/+page.svelte | 13 ++ src/routes/about/+page.ts | 9 + src/routes/search/+page.server.ts | 6 + src/routes/search/+page.svelte | 1 + src/search/actions.ts | 105 ++++++++++- 9 files changed, 313 insertions(+), 157 deletions(-) create mode 100644 src/routes/about/+page.svelte create mode 100644 src/routes/about/+page.ts create mode 100644 src/routes/search/+page.server.ts create mode 100644 src/routes/search/+page.svelte diff --git a/src/app.d.ts b/src/app.d.ts index f201c93..89fa05e 100644 --- a/src/app.d.ts +++ b/src/app.d.ts @@ -1,11 +1,14 @@ -/// - // See https://kit.svelte.dev/docs/types#app // for information about these interfaces // and what to do when importing types declare namespace App { - // interface Locals {} - // interface Platform {} - // interface Session {} - // interface Stuff {} + interface Locals { + userid: string; + } + + // interface PageData {} + + // interface PageError {} + + // interface Platform {} } diff --git a/src/hooks.server..ts b/src/hooks.server..ts index 1a08dbc..ef64e7f 100644 --- a/src/hooks.server..ts +++ b/src/hooks.server..ts @@ -1,23 +1,16 @@ import type { Handle } from '@sveltejs/kit'; -import * as cookie from 'cookie'; export const handle: Handle = async ({ event, resolve }) => { - const cookies = cookie.parse(event.request.headers.get('cookie') || ''); - event.locals.userid = cookies['userid'] || crypto.randomUUID(); + let userid = event.cookies.get('userid'); - const response = await resolve(event); + if (!userid) { + // if this is the first time the user has visited this app, + // set a cookie so that we recognise them when they return + userid = crypto.randomUUID(); + event.cookies.set('userid', userid, { path: '/' }); + } - if (!cookies['userid']) { - // if this is the first time the user has visited this app, - // set a cookie so that we recognise them when they return - response.headers.set( - 'set-cookie', - cookie.serialize('userid', event.locals.userid, { - path: '/', - httpOnly: true - }) - ); - } + event.locals.userid = userid; - return response; + return resolve(event); }; diff --git a/src/routes/+page.server.ts b/src/routes/+page.server.ts index 62964c8..67f6811 100644 --- a/src/routes/+page.server.ts +++ b/src/routes/+page.server.ts @@ -1,3 +1,5 @@ +import type { PageServerLoad, Actions } from './$types'; + export const actions: Actions = { default: async ({ request, locals }): Promise => { // Do things in here diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index c8e8676..f05471b 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -1,165 +1,191 @@ - Bored Game | Home + Bored Game | Home

Search Boardgames!

- Input your requirements to search for board game that match your criteria. + Input your requirements to search for board game that match your criteria.

-
- - -
-

Or pick a random game!

-
- - -
-
+
{ + boredState.update((n) => ({ ...n, loading: true })); + return async ({ result }) => { + boredState.update((n) => ({ ...n, loading: false })); + // `result` is an `ActionResult` object + if (result.type === 'error') { + toast.send('Error!', { duration: 3000, type: ToastType.ERROR, dismissible: true }); + await applyAction(result); + } else { + gameStore.removeAll(); + gameStore.addAll(result?.data?.games); + totalItems = result?.data?.totalCount; + console.log(`Frontend result: ${JSON.stringify(result)}`); + toast.send('Sucess!', { duration: 3000, type: ToastType.INFO, dismissible: true }); + await applyAction(result); + } + }; + }} + > + + +
+

Or pick a random game!

+
+ + +
+
{#if $gameStore?.length > 0} -
-

Games Found:

-
- {#each $gameStore as game (game.id)} - - {/each} -
- console.log('Prev page called', event)} - on:perPageEvent={(event) => console.log('Per page called', event)} - /> -
+
+

Games Found:

+
+ {#each $gameStore as game (game.id)} + + {/each} +
+ console.log('Prev page called', event)} + on:perPageEvent={(event) => console.log('Per page called', event)} + /> +
{/if} diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte new file mode 100644 index 0000000..0972241 --- /dev/null +++ b/src/routes/about/+page.svelte @@ -0,0 +1,13 @@ + + Bored Game | About + + + +
+

About Bored Game

+

+ One day we were bored and wanted to play one of our board games. Our problem was that we didn't + know which one to play. +

+

Rather than just pick one I decided to make this overcomplicated version of choice.

+
diff --git a/src/routes/about/+page.ts b/src/routes/about/+page.ts new file mode 100644 index 0000000..3e13462 --- /dev/null +++ b/src/routes/about/+page.ts @@ -0,0 +1,9 @@ +import { dev } from '$app/environment'; + +// we don't need any JS on this page, though we'll load +// it in dev so that we get hot module replacement... +export const csr = dev; + +// since there's no dynamic data here, we can prerender +// it so that it gets served as a static asset in prod +export const prerender = true; diff --git a/src/routes/search/+page.server.ts b/src/routes/search/+page.server.ts new file mode 100644 index 0000000..86f2cf5 --- /dev/null +++ b/src/routes/search/+page.server.ts @@ -0,0 +1,6 @@ +import type { Actions } from '../$types'; +import { Games } from '$root/search/actions'; + +export const actions: Actions = { + search: Games.search, +} \ No newline at end of file diff --git a/src/routes/search/+page.svelte b/src/routes/search/+page.svelte new file mode 100644 index 0000000..63e6401 --- /dev/null +++ b/src/routes/search/+page.svelte @@ -0,0 +1 @@ +

Search

diff --git a/src/search/actions.ts b/src/search/actions.ts index 339a0a0..23026b1 100644 --- a/src/search/actions.ts +++ b/src/search/actions.ts @@ -1,10 +1,113 @@ +import type { RequestEvent } from '@sveltejs/kit'; +import { BOARD_GAME_ATLAS_CLIENT_ID } from '$env/static/private'; +import type { GameType, SearchQuery } from "$root/lib/types"; +import { mapAPIGameToBoredGame } from "$root/lib/util/gameMapper"; + interface Actions { [key: string]: any // Action } export const Games: Actions = { - search: async function search({ request, locals }): Promise { + search: async ({ request, locals }: RequestEvent): Promise => { + console.log("In search action specific") + // Do things in here + const form = await request.formData(); + console.log('form', form); + const queryParams: SearchQuery = { + order_by: 'rank', + ascending: false, + limit: 20, + client_id: BOARD_GAME_ATLAS_CLIENT_ID + }; + 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 = {}; + 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('board game response', 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(); + const gameList = gameResponse?.games; + const games: GameType[] = []; + gameList.forEach((game: GameType) => { + games.push(mapAPIGameToBoredGame(game)); + }); + console.log('games', games); + return { + success: true, + games, + totalCount: games.length + }; + } + + return { success: false }; } // create: async function create({ request, locals }): Promise { // const data = await getFormDataObject(request);