From 7c0e774ed9b0bff0d3c19d1944eaa5748e82e55a Mon Sep 17 00:00:00 2001
From: Bradley Shellnut <bradleyshellnut@protonmail.com>
Date: Mon, 8 Aug 2022 14:13:51 -0700
Subject: [PATCH] Fix localstorage query.

---
 src/lib/components/game/index.svelte | 21 +++++++++++++++------
 src/routes/__layout.svelte           |  2 +-
 src/styles/global.scss               |  5 +++++
 3 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/src/lib/components/game/index.svelte b/src/lib/components/game/index.svelte
index 48927b9..cae2db9 100644
--- a/src/lib/components/game/index.svelte
+++ b/src/lib/components/game/index.svelte
@@ -1,13 +1,14 @@
 <script lang="ts">
   import { fade } from 'svelte/transition';
-  import { ToastType, type GameType } from '$lib/types';
+  import { MinusCircleIcon, PlusCircleIcon } from '@rgossiaux/svelte-heroicons/outline';
+  import { ToastType, type GameType, type SavedGameType } from '$lib/types';
   import { collectionStore } from '$lib/stores/collectionStore';
   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);
+  $: existsInCollection = $collectionStore.find((item: SavedGameType) => item.id === game.id);
 </script>
 
 <article class="game-container" transition:fade>
@@ -29,12 +30,12 @@
     {/if}
   </div>
   {#if existsInCollection}
-    <button class="btn" type="button" on:click={() => removeFromCollection(game)}
-      >Remove from collection -</button
+    <button aria-label="Remove from collection" class="btn" type="button" on:click={() => removeFromCollection(game)}
+      >Remove <MinusCircleIcon class="icon" /></button
     >
   {:else}
-    <button class="btn" type="button" on:click={() => addToCollection(game)}
-      >Add to collection +</button
+    <button aria-label="Add to collection" class="btn" type="button" on:click={() => addToCollection(game)}
+      >Add to collection <PlusCircleIcon class="icon" /></button
     >
   {/if}
 </article>
@@ -49,12 +50,20 @@
   }
 
   button {
+    display: flex;
+    justify-content: space-between;
+    gap: 1rem;
     width: 100%;
     border-radius: 10px;
     padding: 1rem;
     background-color: var(--color-btn-primary-active);
   }
 
+  /* :global(.icon) {
+    width: 24px;
+    height: 24px;
+  } */
+
   .game-container {
     display: flex;
     flex-wrap: wrap;
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
index c4b7067..166bc51 100644
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@@ -22,7 +22,7 @@
       collectionEmpty &&
       localStorage &&
       localStorage.collection &&
-      localStorage.collection !== 0
+      localStorage.collection.length !== 0
     ) {
       const collection = JSON.parse(localStorage.collection);
       console.log('collection', collection);
diff --git a/src/styles/global.scss b/src/styles/global.scss
index cdf62da..3cc2456 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -271,4 +271,9 @@ ol {
   padding: var(--spacing-20) 0;
   background-color: var(--color-placeholder);
   border-radius: var(--radius-base);
+}
+
+.icon {
+  width: 24px;
+  height: 24px;
 }
\ No newline at end of file