Merge pull request #207 from starboardcoop/wish-list

Rename Wanted to Wish List and only use black style
starboardcoop · Dec 2, 2022 · 6c6f4c6 · 6c6f4c6
2 parents 261cf7b + f1aef3b
commit 6c6f4c6
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 16 deletions.
diff --git a/src/lib/filters.ts b/src/lib/filters.ts
@@ -1,8 +1,8 @@
-export const filter = (things, { keyword, showWantedThings }) => {
+export const filter = (things, { keyword, onlyWishList }) => {
     let filtered = things;
     if (keyword.length > 0)
         filtered = filtered.filter(thing => thing.name.toLowerCase().includes(keyword.toLowerCase()));
-    if (showWantedThings)
+    if (onlyWishList)
         filtered = filtered.filter(thing => thing.stock < 1);
 
     return filtered;

diff --git a/src/lib/foundation/Button.svelte b/src/lib/foundation/Button.svelte
@@ -32,7 +32,7 @@
     }
 
     button.defaultToggled {
-        @apply bg-green-300 !important;
+        @apply bg-yellow-400 !important;
     }
 
     button.alert {

diff --git a/src/lib/things/Thing.svelte b/src/lib/things/Thing.svelte
@@ -11,11 +11,9 @@
     <div class="pl-1 pt-2 w-24 lg:w-48 flex flex-col gap-2 justify-between flex-grow">
         <Text display bold smallauto>{thing.name}</Text>
         <div class="flex flex-col lg:flex-row gap-2">
-            {#if thing.stock > 0}
-                <div class="px-2 py-1 rounded bg-black"><Text body small light>{thing.stock} in stock</Text></div>
-            {:else}
-                <div class="px-2 py-1 rounded bg-white"><Text body small>Wanted</Text></div>
-            {/if}
+            <div class="px-2 py-1 rounded bg-black">
+                <Text body small light>{thing.stock > 0 ? `${thing.stock} in stock` : 'Wish List'}</Text>
+            </div>
         </div>
     </div>
 </div>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -8,22 +8,22 @@
 
     let shownThings = data.things;
     let searchText = "";
-    let showWantedThings = false;
+    let showingOnlyWishList = false;
 
     const filterThings = () => {
         shownThings = filter(data.things, {
             keyword: searchText,
-            showWantedThings: showWantedThings
+            onlyWishList: showingOnlyWishList
         });
     }
 
     const showAll = () => {
-        showWantedThings = false;
+        showingOnlyWishList = false;
         filterThings();
     }
 
-    const showWanted = () => {
-        showWantedThings = true;
+    const showOnlyWishList = () => {
+        showingOnlyWishList = true;
         filterThings();
     }
 </script>
@@ -39,9 +39,9 @@
                 placeholder="Search..."
             />
             <div class="flex flex-row flex-wrap gap-4">
-                {#key showWantedThings}
-                    <Button on:click={showAll} theme={ButtonTheme.default} text="All" selected={!showWantedThings} />
-                    <Button on:click={showWanted} theme={ButtonTheme.alert} text="Wanted" selected={showWantedThings} />
+                {#key showingOnlyWishList}
+                    <Button on:click={showAll} theme={ButtonTheme.default} text="All" selected={!showingOnlyWishList} />
+                    <Button on:click={showOnlyWishList} theme={ButtonTheme.default} text="Wish List" selected={showingOnlyWishList} />
                 {/key}
             </div>
         </div>