From 1f847c91e725eb5381b72d8568eea3ec1e2aee1c Mon Sep 17 00:00:00 2001 From: Bradley Shellnut Date: Wed, 27 Jul 2022 16:16:50 -0700 Subject: [PATCH] feat: :art: Move collection functions to a util. Button to add on game page as well. Add icon component and feather icons.. --- package.json | 2 ++ pnpm-lock.yaml | 24 ++++++++++++++ src/lib/components/Icon.svelte | 38 ++++++++++++++++++++++ src/lib/components/game/index.svelte | 17 +++------- src/lib/util/manipulateCollection.ts | 13 ++++++++ src/routes/api/game/index.ts | 10 ++++-- src/routes/api/games/index.ts | 2 -- src/routes/game/[id].svelte | 37 +++++++++++---------- src/routes/game/[id].ts | 48 ---------------------------- 9 files changed, 109 insertions(+), 82 deletions(-) create mode 100644 src/lib/components/Icon.svelte create mode 100644 src/lib/util/manipulateCollection.ts diff --git a/package.json b/package.json index f8ae965..9f66076 100644 --- a/package.json +++ b/package.json @@ -44,7 +44,9 @@ "@leveluptuts/svelte-side-menu": "^1.0.2", "@leveluptuts/svelte-toy": "^2.0.2", "@lukeed/uuid": "^2.0.0", + "@types/feather-icons": "^4.7.0", "cookie": "^0.5.0", + "feather-icons": "^4.29.0", "zod": "^3.17.10" } } \ No newline at end of file diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 24a970d..fa79f25 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -11,6 +11,7 @@ specifiers: '@sveltejs/adapter-auto': 1.0.0-next.63 '@sveltejs/kit': 1.0.0-next.392 '@types/cookie': ^0.5.1 + '@types/feather-icons': ^4.7.0 '@types/node': ^18.0.6 '@typescript-eslint/eslint-plugin': ^5.27.0 '@typescript-eslint/parser': ^5.27.0 @@ -20,6 +21,7 @@ specifiers: eslint: ^8.19.0 eslint-config-prettier: ^8.1.0 eslint-plugin-svelte3: ^4.0.0 + feather-icons: ^4.29.0 prettier: ^2.7.1 prettier-plugin-svelte: ^2.7.0 sass: ^1.54.0 @@ -36,7 +38,9 @@ dependencies: '@leveluptuts/svelte-side-menu': 1.0.2 '@leveluptuts/svelte-toy': 2.0.2 '@lukeed/uuid': 2.0.0 + '@types/feather-icons': 4.7.0 cookie: 0.5.0 + feather-icons: 4.29.0 zod: 3.17.10 devDependencies: @@ -303,6 +307,10 @@ packages: resolution: {integrity: sha512-COUnqfB2+ckwXXSFInsFdOAWQzCCx+a5hq2ruyj+Vjund94RJQd4LG2u9hnvJrTgunKAaax7ancBYlDrNYxA0g==} dev: true + /@types/feather-icons/4.7.0: + resolution: {integrity: sha512-vflOrmlHMGIGVN4AEl6ErPCNKBLcP1ehEpLqnJkTgf69r5QmJzy7BF1WzbBc8Hqs9KffROPT/JqlSKH4o5vB/w==} + dev: false + /@types/json-schema/7.0.11: resolution: {integrity: sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==} dev: true @@ -619,6 +627,10 @@ packages: engines: {node: '>=10'} dev: true + /classnames/2.3.1: + resolution: {integrity: sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==} + dev: false + /color-convert/2.0.1: resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==} engines: {node: '>=7.0.0'} @@ -648,6 +660,11 @@ packages: engines: {node: '>= 0.6'} dev: false + /core-js/3.24.0: + resolution: {integrity: sha512-IeOyT8A6iK37Ep4kZDD423mpi6JfPRoPUdQwEWYiGolvn4o6j2diaRzNfDfpTdu3a5qMbrGUzKUpYpRY8jXCkQ==} + requiresBuild: true + dev: false + /cross-spawn/7.0.3: resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==} engines: {node: '>= 8'} @@ -1101,6 +1118,13 @@ packages: reusify: 1.0.4 dev: true + /feather-icons/4.29.0: + resolution: {integrity: sha512-Y7VqN9FYb8KdaSF0qD1081HCkm0v4Eq/fpfQYQnubpqi0hXx14k+gF9iqtRys1SIcTEi97xDi/fmsPFZ8xo0GQ==} + dependencies: + classnames: 2.3.1 + core-js: 3.24.0 + dev: false + /file-entry-cache/6.0.1: resolution: {integrity: sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==} engines: {node: ^10.12.0 || >=12.0.0} diff --git a/src/lib/components/Icon.svelte b/src/lib/components/Icon.svelte new file mode 100644 index 0000000..9fa5392 --- /dev/null +++ b/src/lib/components/Icon.svelte @@ -0,0 +1,38 @@ + + +{#if icon} + + + {@html icon.contents} + + +{/if} + + \ No newline at end of file diff --git a/src/lib/components/game/index.svelte b/src/lib/components/game/index.svelte index ae069c7..d25bdf7 100644 --- a/src/lib/components/game/index.svelte +++ b/src/lib/components/game/index.svelte @@ -2,21 +2,12 @@ import { fade } from 'svelte/transition'; import { ToastType, type GameType } from '$lib/types'; import { collectionStore } from '$lib/stores/collectionStore'; - import { toast } from '../toast/toast'; + import { toast } from '$lib/components/toast/toast'; +import { addToCollection, removeFromCollection } from '$lib/util/manipulateCollection'; export let game: GameType; export let detailed: boolean = false; $: existsInCollection = $collectionStore.find((item: GameType) => item.id === game.id); - - function addToCollection() { - collectionStore.add(game) - toast.send(`"${game.name}" added to collection!`, { duration: 3000, type: ToastType.INFO }); - } - - function removeFromCollection() { - collectionStore.remove(game.id) - toast.send(`Removed "${game.name}" from collection!`, { duration: 3000, type: ToastType.INFO }); - }
@@ -38,9 +29,9 @@ {/if} {#if existsInCollection} - + {:else} - + {/if}
diff --git a/src/lib/util/manipulateCollection.ts b/src/lib/util/manipulateCollection.ts new file mode 100644 index 0000000..cda3f9c --- /dev/null +++ b/src/lib/util/manipulateCollection.ts @@ -0,0 +1,13 @@ +import { collectionStore } from '$lib/stores/collectionStore'; +import { toast } from '$lib/components/toast/toast'; +import { ToastType, type GameType } from '$lib/types'; + +export function addToCollection(game: GameType) { + collectionStore.add(game) + toast.send(`"${game.name}" added to collection!`, { duration: 3000, type: ToastType.INFO }); +} + +export function removeFromCollection(game: GameType) { + collectionStore.remove(game.id) + toast.send(`Removed "${game.name}" from collection!`, { duration: 3000, type: ToastType.INFO }); +} \ No newline at end of file diff --git a/src/routes/api/game/index.ts b/src/routes/api/game/index.ts index caad145..b337af7 100644 --- a/src/routes/api/game/index.ts +++ b/src/routes/api/game/index.ts @@ -1,5 +1,6 @@ import type { RequestHandler } from '@sveltejs/kit'; -import type { SearchQuery } from '$lib/types'; +import type { GameType, SearchQuery } from '$lib/types'; +import { mapAPIGameToBoredGame } from '$lib/util/gameMapper'; export const POST: RequestHandler = async ({ request }) => { const form = await request.formData(); @@ -45,8 +46,11 @@ export const POST: RequestHandler = async ({ request }) => { if (response.status === 200) { const gameResponse = await response.json(); - const games = gameResponse?.games; - console.log('games', games); + const gameList = gameResponse?.games; + const games: GameType[] = []; + gameList.forEach(game => { + games.push(mapAPIGameToBoredGame(game)) + }); return { body: { games: gameResponse?.games diff --git a/src/routes/api/games/index.ts b/src/routes/api/games/index.ts index f96e44a..0f1bfe8 100644 --- a/src/routes/api/games/index.ts +++ b/src/routes/api/games/index.ts @@ -99,8 +99,6 @@ export const POST: RequestHandler = async ({ request }) => { if (response.status === 200) { const gameResponse = await response.json(); const gameList = gameResponse?.games; - console.log('gameList', gameList); - console.log('type', typeof gameList); const games: GameType[] = []; gameList.forEach(game => { games.push(mapAPIGameToBoredGame(game)) diff --git a/src/routes/game/[id].svelte b/src/routes/game/[id].svelte index 4442bf8..f12a0e0 100644 --- a/src/routes/game/[id].svelte +++ b/src/routes/game/[id].svelte @@ -1,11 +1,11 @@