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

Fixed random search in form action and the random component.

Browse source
This commit is contained in:
Bradley Shellnut 2022-10-26 17:31:57 -04:00
parent a8ed73ebc0
commit bac9b7f888
3 changed files with 103 additions and 68 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

95
src/lib/components/search/random/index.svelte
View file

@ -1,43 +1,72 @@
<script lang="ts"> <script lang="ts">
import { boredState } from '$lib/stores/boredState'; import { applyAction, enhance } from '$app/forms';
import { gameStore } from '$lib/stores/gameSearchStore'; import { boredState } from '$lib/stores/boredState';
import { gameStore } from '$lib/stores/gameSearchStore';
import { ToastType } from '$root/lib/types';
import { toast } from '../../toast/toast';
async function handleSubmit(event: SubmitEvent) { // async function handleSubmit(event: SubmitEvent) {
// submitting = true; // // submitting = true;
boredState.update((n) => ({ ...n, loading: true })); // boredState.update((n) => ({ ...n, loading: true }));
const form = event.target as HTMLFormElement; // const form = event.target as HTMLFormElement;
console.log('form', form); // console.log('form', form);
const response = await fetch('/api/games', { // const response = await fetch('/api/games', {
method: 'POST', // method: 'POST',
headers: { accept: 'application/json' }, // headers: { accept: 'application/json' },
body: new FormData(form) // body: new FormData(form)
}); // });
const responseData = await response.json(); // const responseData = await response.json();
// submitting = false; // // submitting = false;
boredState.update((n) => ({ ...n, loading: false })); // boredState.update((n) => ({ ...n, loading: false }));
gameStore.removeAll(); // gameStore.removeAll();
gameStore.addAll(responseData?.games); // gameStore.addAll(responseData?.games);
// games = responseData?.games; // // games = responseData?.games;
} // }
let submitting = $boredState?.loading; let submitting = $boredState?.loading;
let checked = true;
</script> </script>
<form on:submit|preventDefault={handleSubmit} method="post"> <form
<fieldset aria-busy={submitting} disabled={submitting}> action="/search"
<input type="checkbox" id="random" name="random" hidden checked /> method="POST"
<button class="btn" type="submit" disabled={submitting}>Random Game 🎲</button> use:enhance={() => {
</fieldset> boredState.update((n) => ({ ...n, loading: true }));
return async ({ result }) => {
boredState.update((n) => ({ ...n, loading: false }));
console.log('result main page search', result);
// `result` is an `ActionResult` object
if (result.type === 'success') {
console.log('In success');
gameStore.removeAll();
const resultGames = result?.data?.games;
if (resultGames?.length <= 0) {
toast.send('No results!', { duration: 3000, type: ToastType.INFO, dismissible: true });
}
gameStore.addAll(resultGames);
console.log(`Frontend result: ${JSON.stringify(result)}`);
await applyAction(result);
} else {
console.log('Invalid');
await applyAction(result);
}
};
}}
>
<fieldset aria-busy={submitting} disabled={submitting}>
<input type="checkbox" id="random" name="random" hidden {checked} />
<button class="btn" type="submit" disabled={submitting}>Random Game 🎲</button>
</fieldset>
</form> </form>
<style lang="scss"> <style lang="scss">
fieldset { fieldset {
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
} }
button { button {
max-width: 450px; max-width: 450px;
padding: var(--spacing-8) var(--spacing-16); padding: var(--spacing-8) var(--spacing-16);
} }
</style> </style>

2
src/routes/+page.svelte
View file

@ -73,7 +73,7 @@
<h1>Search Boardgames!</h1> <h1>Search Boardgames!</h1>
<p style="margin: 1rem 0;"> <p style="margin: 1rem 0;">
Input your requirements to search for board game that match your criteria. Input your requirements to search for board games that match your criteria.
</p> </p>
<div class="game-search"> <div class="game-search">
<form <form

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

@ -29,44 +29,50 @@ export const actions: Actions = {
name: '' name: ''
}; };
const minAge = form.get('minAge'); const random = form.get('random') && form.get('random') === 'on';
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;
if (minAge) {
if (exactMinAge) {
queryParams.min_age = +minAge;
} else {
queryParams.gt_min_age = +minAge === 1 ? 0 : +minAge - 1;
}
}
if (minPlayers && maxPlayers) { if (random) {
if (minPlayers > maxPlayers) { queryParams.random = random;
return invalid(400, { minPlayers, error: { id: 'minPlayers', message: 'Min must be less than max' } }); } else {
} else if (maxPlayers < minPlayers) { const minAge = form.get('minAge');
return invalid(400, { maxPlayers, error: { id: 'maxPlayers', message: 'Max must be greater than min' } }); const minPlayers = form.get('minPlayers');
} const maxPlayers = form.get('maxPlayers');
if (exactMinPlayers) { const exactMinAge = form.get('exactMinAge') || false;
queryParams.min_players = +minPlayers; const exactMinPlayers = form.get('exactMinPlayers') || false;
} else { const exactMaxPlayers = form.get('exactMaxPlayers') || false;
queryParams.gt_min_players = +minPlayers === 1 ? 0 : +minPlayers - 1;
if (minAge) {
if (exactMinAge) {
queryParams.min_age = +minAge;
} else {
queryParams.gt_min_age = +minAge === 1 ? 0 : +minAge - 1;
}
} }
if (exactMaxPlayers) { if (minPlayers && maxPlayers) {
queryParams.max_players = +maxPlayers; if (minPlayers > maxPlayers) {
} else { return invalid(400, { minPlayers, error: { id: 'minPlayers', message: 'Min must be less than max' } });
queryParams.lt_max_players = +maxPlayers + 1; } else if (maxPlayers < minPlayers) {
} return invalid(400, { maxPlayers, error: { id: 'maxPlayers', message: 'Max must be greater than min' } });
} }
if (exactMinPlayers) {
queryParams.min_players = +minPlayers;
} else {
queryParams.gt_min_players = +minPlayers === 1 ? 0 : +minPlayers - 1;
}
const name = form.has('name') ? form.get('name') : await request?.text(); if (exactMaxPlayers) {
console.log('name', name); queryParams.max_players = +maxPlayers;
if (name) { } else {
queryParams.name = `${name}`; queryParams.lt_max_players = +maxPlayers + 1;
}
}
const name = form.has('name') ? form.get('name') : await request?.text();
console.log('name', name);
if (name) {
queryParams.name = `${name}`;
}
} }
const newQueryParams: Record<string, string> = {}; const newQueryParams: Record<string, string> = {};