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

Implementing same search page logic on the main page.

Browse source
This commit is contained in:
Bradley Shellnut 2022-11-09 22:02:38 -06:00
parent c3b3a36173
commit fe2a88ab61
3 changed files with 17 additions and 174 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/lib/components/search/textSearch/index.svelte
View file

@ -84,6 +84,9 @@
dialog: { isOpen: true, content: RemoveWishlistDialog, additionalData: gameToRemove }
}));
}
// TODO: Keep all Pagination Values on back and forth browser
// TODO: Add cache for certain number of pages so back and forth doesn't request data again
</script>
<form
@ -94,7 +97,6 @@
boredState.update((n) => ({ ...n, loading: true }));
return async ({ result }) => {
boredState.update((n) => ({ ...n, loading: false }));
console.log(result);
// `result` is an `ActionResult` object
if (result.type === 'error') {
toast.send('Error!', { duration: 3000, type: ToastType.ERROR, dismissible: true });
@ -102,9 +104,8 @@
} else if (result.type === 'success') {
gameStore.removeAll();
gameStore.addAll(result?.data?.games);
console.log(`Frontend result search enhance: ${JSON.stringify(result)}`);
totalItems = result?.data?.totalCount;
toast.send('Sucess!', { duration: 3000, type: ToastType.INFO, dismissible: true });
// toast.send('Sucess!', { duration: 3000, type: ToastType.INFO, dismissible: true });
await applyAction(result);
} else {
await applyAction(result);
@ -245,15 +246,20 @@
.games-list {
display: grid;
grid-template-columns: repeat(3, minmax(200px, 1fr));
--listColumns: 4;
grid-template-columns: repeat(var(--listColumns), minmax(200px, 1fr));
gap: 2rem;
@media (max-width: 1200px) {
--listColumns: 3;
}
@media (max-width: 800px) {
grid-template-columns: 1fr 1fr;
--listColumns: 2;
}
@media (max-width: 650px) {
grid-template-columns: 1fr;
--listColumns: 1;
}
}
</style>

131
src/routes/+page.svelte
View file

@ -1,30 +1,11 @@
<script lang="ts">
import { enhance, applyAction } from '$app/forms';
import type { ActionData, PageData } from './$types';
import { ToastType, type GameType, type SavedGameType } from '$root/lib/types';
import { toast } from '$root/lib/components/toast/toast';
import { gameStore } from '$lib/stores/gameSearchStore';
import { boredState } from '$root/lib/stores/boredState';
// import { md, xl } from '$root/lib/stores/mediaQueryStore';
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 RemoveWishlistDialog from '$root/lib/components/dialog/RemoveWishlistDialog.svelte';
import SkeletonPlaceholder from '$root/lib/components/SkeletonPlaceholder.svelte';
export let data: PageData;
export let form: ActionData;
let submitButton: HTMLElement;
console.log('form routesss', form);
console.log('Formed data:', JSON.stringify(data));
let pageSize = 10;
let page = 0;
let submitting = $boredState?.loading;
let numberOfGameSkeleton = 1;
// if ($xl) {
// numberOfGameSkeleton = 8;
// } else if ($md) {
@ -32,48 +13,6 @@
// } else {
// numberOfGameSkeleton = 1;
// }
console.log({ submitting });
console.log('Form total count:' + form?.totalCount);
console.log('Data total count: ' + data?.totalCount);
let totalItems = form?.totalCount || data?.totalCount || 0;
console.log('totalItems', totalItems);
// async function handleItemsPerPageChange(event) {
// const perPage = event?.detail;
// if ($gameStore.length )
// }
async function handleNextPageEvent(event: CustomEvent) {
console.log('Next page called', event);
page = event.detail || page;
document.getElementById('search-form')?.submit();
}
let gameToRemove: GameType | SavedGameType;
interface RemoveGameEvent extends Event {
detail: GameType | SavedGameType;
}
function handleRemoveCollection(event: RemoveGameEvent) {
console.log('Remove collection event handler');
console.log('event', event);
gameToRemove = event?.detail;
boredState.update((n) => ({
...n,
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>
<svelte:head>
@ -81,53 +20,18 @@
</svelte:head>
<h1>Search Boardgames!</h1>
<p style="margin: 1rem 0;">
Input your requirements to search for board games that match your criteria.
</p>
<div class="game-search">
<form
id="search-form"
action="/search"
method="post"
use:enhance={({ data }) => {
gameStore.removeAll();
data.append('limit', pageSize.toString());
data.append('skip', Math.floor(page * pageSize).toString());
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');
const resultGames = result?.data?.games;
if (resultGames?.length <= 0) {
toast.send('No results found 😿', {
duration: 3000,
type: ToastType.ERROR,
dismissible: true
});
}
gameStore.addAll(resultGames);
totalItems = result?.data?.totalCount;
console.log(`Frontend base page: ${JSON.stringify(result)}`);
await applyAction(result);
} else {
console.log('Invalid');
await applyAction(result);
}
};
}}
>
<TextSearch showButton advancedSearch {submitButton} {form} />
</form>
<section>
<p style="margin: 1rem 0;">
Input your requirements to search for board games that match your criteria.
</p>
<p>Or pick a random game!</p>
<div class="random-buttons">
<RandomSearch />
<Random />
</div>
</section>
<TextSearch showButton advancedSearch {data} {form} />
</div>
<style lang="scss">
@ -141,33 +45,6 @@
}
}
.games {
margin: 2rem 0rem;
h1 {
margin-bottom: 2rem;
}
}
.games-list {
display: grid;
--listColumns: 4;
grid-template-columns: repeat(var(--listColumns), minmax(200px, 1fr));
gap: 2rem;
@media (max-width: 1200px) {
--listColumns: 3;
}
@media (max-width: 800px) {
--listColumns: 2;
}
@media (max-width: 650px) {
--listColumns: 1;
}
}
.random-buttons {
display: flex;
place-content: space-between;

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

@ -1,35 +1,10 @@
<script lang="ts">
import { applyAction, enhance } from '$app/forms';
import { ToastType, type GameType, type SavedGameType } from '$root/lib/types';
import type { ActionData, PageData } from './$types';
import Game from '$lib/components/game/index.svelte';
import { gameStore } from '$lib/stores/gameSearchStore';
import TextSearch from '$lib/components/search/textSearch/index.svelte';
import RemoveCollectionDialog from '$root/lib/components/dialog/RemoveCollectionDialog.svelte';
import { boredState } from '$root/lib/stores/boredState';
import { toast } from '$root/lib/components/toast/toast';
import Pagination from '$lib/components/pagination/index.svelte';
import RemoveWishlistDialog from '$root/lib/components/dialog/RemoveWishlistDialog.svelte';
export let data: PageData;
console.log('search page data', data);
export let form: ActionData;
console.log('search page form', form);
let gameToRemove: GameType | SavedGameType;
let pageSize = 10;
console.log('Form data page', +form?.data?.page);
let page = +form?.data?.page || 1;
$: skip = (page - 1) * pageSize;
console.log({ skip });
let totalItems = form?.totalCount || data?.totalCount || 0;
console.log({ pageSize });
console.log({ page });
console.log({ totalItems });
let submitting = $boredState?.loading;
let numberOfGameSkeleton = 1;
let submitButton: HTMLElement;
console.log('Search page total count: ', totalItems);
$: if (data?.games) {
gameStore.removeAll();
@ -40,25 +15,10 @@
gameStore.removeAll();
gameStore.addAll(form?.games);
}
function handleNextPageEvent(event: CustomEvent) {
console.log('Next page called', event.detail);
console.log('Current page: ', page);
if (+event?.detail?.page === page + 1) {
console.log('Page equals plus one');
page += 1;
}
console.log('New page value: ', page);
console.log('New skip value: ', skip);
// document.getElementById('skip')?.setAttribute('value', `${page * pageSize}`);
console.log('New skip value DOM: ', document.getElementById('skip')?.getAttribute('value'));
submitButton.click();
// document.getElementById('search-submit')?.click();
}
</script>
<div class="game-search">
<TextSearch showButton advancedSearch />
<TextSearch showButton advancedSearch {data} {form} />
</div>
<!-- {#if $gameStore?.length > 0}