mirror of
https://github.com/BradNut/boredgame
synced 2025-09-08 17:40:22 +00:00
Moving form posts to actions slowly.
This commit is contained in:
parent
a3f0d811f9
commit
0864159546
9 changed files with 313 additions and 157 deletions
15
src/app.d.ts
vendored
15
src/app.d.ts
vendored
|
|
@ -1,11 +1,14 @@
|
|||
/// <reference types="@sveltejs/kit" />
|
||||
|
||||
// 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 {}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
import type { PageServerLoad, Actions } from './$types';
|
||||
|
||||
export const actions: Actions = {
|
||||
default: async ({ request, locals }): Promise<any> => {
|
||||
// Do things in here
|
||||
|
|
|
|||
|
|
@ -1,165 +1,191 @@
|
|||
<script lang="ts">
|
||||
import type { GameType, SavedGameType } from '$root/lib/types';
|
||||
import { gameStore } from '$lib/stores/gameSearchStore';
|
||||
import { boredState } from '$root/lib/stores/boredState';
|
||||
import RemoveCollectionDialog from '$root/lib/components/dialog/RemoveCollectionDialog.svelte';
|
||||
import Game from '$lib/components/game/index.svelte';
|
||||
import TextSearch from '$lib/components/search/textSearch/index.svelte';
|
||||
import RandomSearch from '$lib/components/search/random/index.svelte';
|
||||
import Random from '$lib/components/random/index.svelte';
|
||||
import Pagination from '$lib/components/pagination/index.svelte';
|
||||
import { enhance, applyAction } from '$app/forms';
|
||||
import type { PageData } from './$types';
|
||||
import { ToastType, type GameType, type SavedGameType } from '$root/lib/types';
|
||||
import { gameStore } from '$lib/stores/gameSearchStore';
|
||||
import { boredState } from '$root/lib/stores/boredState';
|
||||
import RemoveCollectionDialog from '$root/lib/components/dialog/RemoveCollectionDialog.svelte';
|
||||
import Game from '$lib/components/game/index.svelte';
|
||||
import TextSearch from '$lib/components/search/textSearch/index.svelte';
|
||||
import RandomSearch from '$lib/components/search/random/index.svelte';
|
||||
import Random from '$lib/components/random/index.svelte';
|
||||
import Pagination from '$lib/components/pagination/index.svelte';
|
||||
import { toast } from '$root/lib/components/toast/toast';
|
||||
|
||||
let pageSize: number;
|
||||
let currentPage: number;
|
||||
$: totalItems = 0;
|
||||
console.log('totalItems', totalItems);
|
||||
export let data: PageData;
|
||||
console.log('Formed data:', JSON.stringify(data));
|
||||
let pageSize: number;
|
||||
let currentPage: number;
|
||||
$: totalItems = 0;
|
||||
console.log('totalItems', totalItems);
|
||||
|
||||
async function handleSearch(event: SubmitEvent) {
|
||||
boredState.update((n) => ({ ...n, loading: true }));
|
||||
const form = event.target as HTMLFormElement;
|
||||
console.log('form', form);
|
||||
const response = await fetch('/api/game', {
|
||||
method: 'POST',
|
||||
headers: { accept: 'application/json' },
|
||||
body: new FormData(form)
|
||||
});
|
||||
const responseData = await response.json();
|
||||
boredState.update((n) => ({ ...n, loading: false }));
|
||||
gameStore.removeAll();
|
||||
gameStore.addAll(responseData?.games);
|
||||
totalItems = responseData?.totalCount;
|
||||
}
|
||||
async function handleSearch(event: SubmitEvent) {
|
||||
boredState.update((n) => ({ ...n, loading: true }));
|
||||
const form = event.target as HTMLFormElement;
|
||||
console.log('form', form);
|
||||
const response = await fetch('/api/game', {
|
||||
method: 'POST',
|
||||
headers: { accept: 'application/json' },
|
||||
body: new FormData(form)
|
||||
});
|
||||
const responseData = await response.json();
|
||||
boredState.update((n) => ({ ...n, loading: false }));
|
||||
gameStore.removeAll();
|
||||
gameStore.addAll(responseData?.games);
|
||||
totalItems = responseData?.totalCount;
|
||||
}
|
||||
|
||||
// async function handleItemsPerPageChange(event) {
|
||||
// const perPage = event?.detail;
|
||||
// if ($gameStore.length )
|
||||
// }
|
||||
async function handleNextPageEvent(event: CustomEvent) {
|
||||
console.log('Next page called', event);
|
||||
boredState.update((n) => ({ ...n, loading: true }));
|
||||
const form = event.target as HTMLFormElement;
|
||||
console.log('form', form);
|
||||
const response = await fetch('/api/game', {
|
||||
method: 'POST',
|
||||
headers: { accept: 'application/json' },
|
||||
body: new FormData(form)
|
||||
});
|
||||
const responseData = await response.json();
|
||||
boredState.update((n) => ({ ...n, loading: false }));
|
||||
gameStore.removeAll();
|
||||
gameStore.addAll(responseData?.games);
|
||||
const skip = $boredState?.search?.skip;
|
||||
const pageSize = $boredState?.search?.pageSize;
|
||||
const currentPage = $boredState?.search?.currentPage;
|
||||
const totalCount = responseData?.totalCount;
|
||||
boredState.update((n) => ({
|
||||
...n,
|
||||
search: { totalCount, skip, pageSize, currentPage }
|
||||
}));
|
||||
}
|
||||
// async function handleItemsPerPageChange(event) {
|
||||
// const perPage = event?.detail;
|
||||
// if ($gameStore.length )
|
||||
// }
|
||||
async function handleNextPageEvent(event: CustomEvent) {
|
||||
console.log('Next page called', event);
|
||||
boredState.update((n) => ({ ...n, loading: true }));
|
||||
const form = event.target as HTMLFormElement;
|
||||
console.log('form', form);
|
||||
const response = await fetch('/api/game', {
|
||||
method: 'POST',
|
||||
headers: { accept: 'application/json' },
|
||||
body: new FormData(form)
|
||||
});
|
||||
const responseData = await response.json();
|
||||
boredState.update((n) => ({ ...n, loading: false }));
|
||||
gameStore.removeAll();
|
||||
gameStore.addAll(responseData?.games);
|
||||
const skip = $boredState?.search?.skip;
|
||||
const pageSize = $boredState?.search?.pageSize;
|
||||
const currentPage = $boredState?.search?.currentPage;
|
||||
const totalCount = responseData?.totalCount;
|
||||
boredState.update((n) => ({
|
||||
...n,
|
||||
search: { totalCount, skip, pageSize, currentPage }
|
||||
}));
|
||||
}
|
||||
|
||||
let isOpen: boolean = false;
|
||||
let gameToRemove: GameType | SavedGameType;
|
||||
console.log('isOpen', isOpen);
|
||||
let isOpen: boolean = false;
|
||||
let gameToRemove: GameType | SavedGameType;
|
||||
console.log('isOpen', isOpen);
|
||||
|
||||
interface RemoveGameEvent extends Event {
|
||||
detail: GameType | SavedGameType;
|
||||
}
|
||||
interface RemoveGameEvent extends Event {
|
||||
detail: GameType | SavedGameType;
|
||||
}
|
||||
|
||||
function handleRemoveGame(event: RemoveGameEvent) {
|
||||
console.log('event', event);
|
||||
gameToRemove = event?.detail;
|
||||
boredState.update((n) => ({
|
||||
...n,
|
||||
dialog: { isOpen: true, content: RemoveCollectionDialog, additionalData: gameToRemove }
|
||||
}));
|
||||
}
|
||||
function handleRemoveGame(event: RemoveGameEvent) {
|
||||
console.log('event', event);
|
||||
gameToRemove = event?.detail;
|
||||
boredState.update((n) => ({
|
||||
...n,
|
||||
dialog: { isOpen: true, content: RemoveCollectionDialog, additionalData: gameToRemove }
|
||||
}));
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Bored Game | Home</title>
|
||||
<title>Bored Game | Home</title>
|
||||
</svelte:head>
|
||||
|
||||
<h1>Search Boardgames!</h1>
|
||||
<p style="margin: 1rem 0;">
|
||||
Input your requirements to search for board game that match your criteria.
|
||||
Input your requirements to search for board game that match your criteria.
|
||||
</p>
|
||||
<div class="game-search">
|
||||
<form on:submit|preventDefault={handleSearch} method="post">
|
||||
<TextSearch showButton advancedSearch />
|
||||
</form>
|
||||
<section>
|
||||
<p>Or pick a random game!</p>
|
||||
<div class="random-buttons">
|
||||
<RandomSearch />
|
||||
<Random />
|
||||
</div>
|
||||
</section>
|
||||
<form
|
||||
action="/search?/search"
|
||||
method="post"
|
||||
use:enhance={() => {
|
||||
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);
|
||||
}
|
||||
};
|
||||
}}
|
||||
>
|
||||
<TextSearch showButton advancedSearch />
|
||||
</form>
|
||||
<section>
|
||||
<p>Or pick a random game!</p>
|
||||
<div class="random-buttons">
|
||||
<RandomSearch />
|
||||
<Random />
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
{#if $gameStore?.length > 0}
|
||||
<div class="games">
|
||||
<h1>Games Found:</h1>
|
||||
<div class="games-list">
|
||||
{#each $gameStore as game (game.id)}
|
||||
<Game on:removeGameEvent={handleRemoveGame} {game} />
|
||||
{/each}
|
||||
</div>
|
||||
<Pagination
|
||||
{pageSize}
|
||||
{currentPage}
|
||||
{totalItems}
|
||||
forwardText="Next"
|
||||
backwardText="Prev"
|
||||
pageSizes={[10, 25, 50, 100]}
|
||||
on:nextPageEvent={handleNextPageEvent}
|
||||
on:previousPageEvent={(event) => console.log('Prev page called', event)}
|
||||
on:perPageEvent={(event) => console.log('Per page called', event)}
|
||||
/>
|
||||
</div>
|
||||
<div class="games">
|
||||
<h1>Games Found:</h1>
|
||||
<div class="games-list">
|
||||
{#each $gameStore as game (game.id)}
|
||||
<Game on:removeGameEvent={handleRemoveGame} {game} />
|
||||
{/each}
|
||||
</div>
|
||||
<Pagination
|
||||
{pageSize}
|
||||
{currentPage}
|
||||
{totalItems}
|
||||
forwardText="Next"
|
||||
backwardText="Prev"
|
||||
pageSizes={[10, 25, 50, 100]}
|
||||
on:nextPageEvent={handleNextPageEvent}
|
||||
on:previousPageEvent={(event) => console.log('Prev page called', event)}
|
||||
on:perPageEvent={(event) => console.log('Per page called', event)}
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style lang="scss">
|
||||
.game-search {
|
||||
display: grid;
|
||||
gap: 2rem;
|
||||
.game-search {
|
||||
display: grid;
|
||||
gap: 2rem;
|
||||
|
||||
section {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
}
|
||||
}
|
||||
section {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.games {
|
||||
margin: 2rem 0rem;
|
||||
.games {
|
||||
margin: 2rem 0rem;
|
||||
|
||||
h1 {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
}
|
||||
h1 {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.games-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(200px, 1fr));
|
||||
gap: 2rem;
|
||||
.games-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(200px, 1fr));
|
||||
gap: 2rem;
|
||||
|
||||
@media (max-width: 800px) {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
@media (max-width: 800px) {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
@media (max-width: 650px) {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
@media (max-width: 650px) {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.random-buttons {
|
||||
display: flex;
|
||||
place-content: space-between;
|
||||
place-items: center;
|
||||
.random-buttons {
|
||||
display: flex;
|
||||
place-content: space-between;
|
||||
place-items: center;
|
||||
|
||||
@media (max-width: 650px) {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
@media (max-width: 650px) {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
13
src/routes/about/+page.svelte
Normal file
13
src/routes/about/+page.svelte
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
<svelte:head>
|
||||
<title>Bored Game | About</title>
|
||||
<meta name="description" content="About Bored Game" />
|
||||
</svelte:head>
|
||||
|
||||
<div class="content">
|
||||
<h1>About Bored Game</h1>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<p>Rather than just pick one I decided to make this overcomplicated version of choice.</p>
|
||||
</div>
|
||||
9
src/routes/about/+page.ts
Normal file
9
src/routes/about/+page.ts
Normal file
|
|
@ -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;
|
||||
6
src/routes/search/+page.server.ts
Normal file
6
src/routes/search/+page.server.ts
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
import type { Actions } from '../$types';
|
||||
import { Games } from '$root/search/actions';
|
||||
|
||||
export const actions: Actions = {
|
||||
search: Games.search,
|
||||
}
|
||||
1
src/routes/search/+page.svelte
Normal file
1
src/routes/search/+page.svelte
Normal file
|
|
@ -0,0 +1 @@
|
|||
<h1>Search</h1>
|
||||
|
|
@ -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<any> {
|
||||
search: async ({ request, locals }: RequestEvent): Promise<any> => {
|
||||
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<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('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<any> {
|
||||
// const data = await getFormDataObject<any>(request);
|
||||
|
|
|
|||
Loading…
Reference in a new issue