Merge pull request #3 from cssbubble/main

localstorage features added

src/App.svelte

@@ -20,7 +20,6 @@
         {text: "Random item", link: "#/item/1", icon: "home"},
         {text: "Search", link: "#/search", icon: "home"},
         {text: "Want to learn", link: "#/wanttolearn", icon: "home"},
-        {text: "Learning", link: "#/learning", icon: "home"},
         {text: "Finished learning", link: "#/finishedlearning", icon: "home"},
         {text: "Datasette", link: "/learn", icon: "home"}
     ]
@@ -69,10 +68,8 @@
     {:else if currentView === "/search"}
         <AdvancedSearch/>
     {:else if currentView === "/wanttolearn"}
-        <ItemList kind="wanttolearn"/>
+        <ItemList kind={0}/>
-    {:else if currentView === "/learning"}
-        <ItemList kind="learning"/>
     {:else if currentView === "/finishedlearning"}
-        <ItemList kind="finishedlearning"/>
+        <ItemList kind={1}/>
     {/if}
 </TailwindUI.AppShell>

src/Button.svelte

@@ -1,9 +0,0 @@
-<script>
-
-</script>
-
-<span class="relative z-0 inline-flex rounded-md mt-5 flex-nowrap">
-  <button type="button" class="relative inline-flex flex-nowrap items-center px-4 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 ">Want to Learn</button>
-  
-  <button type="button" class="-ml-px relative inline-flex items-center px-4 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500">Finished</button>
-</span>

src/ButtonGroup.svelte

@@ -0,0 +1,35 @@
+<script>
+  import { createEventDispatcher } from 'svelte';
+
+  
+  const dispatch = createEventDispatcher();
+  export let tabs = ['first', 'second'];
+  export let currentlySelected = undefined;
+
+  function changeStatus(val){
+    currentlySelected = val;
+    dispatch('change', {value: val})
+  }
+  
+</script>
+
+<span class="relative z-0 inline-flex rounded-md mt-5 flex-nowrap">
+  {#each tabs as tab, i}
+  <button 
+     type="button" 
+     on:click="{e => changeStatus(currentlySelected === i? undefined : i)}"
+     class="
+       relative inline-flex flex-nowrap items-center px-4 py-2 
+      {i == 0 && 'rounded-l-md'}
+      {i == tabs.length-1 && 'rounded-r-md'} 
+      border border-indigo-500  text-sm font-medium focus:z-10 focus:outline-none 
+      {currentlySelected === i? 'bg-indigo-700 text-white' : 'bg-gray-100 text-gray-800'}
+     "
+  >
+     {tab}
+  </button>
+  {/each}
+  
+
+</span>
+

src/ItemDetail.svelte

@@ -1,6 +1,7 @@
 <script>
-    import WantToLearnButton from './WantToLearnButton.svelte';
+    import ButtonGroup from "./ButtonGroup.svelte";
-    import Button from "./Button.svelte";
+    import { bookmarks } from "./stores.js"
+
     export let itemid;
     let item;
 
@@ -10,6 +11,15 @@
             item = data[itemid];
         });
 
+    function saveStatusToLocalStorage(event){
+      // console.log($bookmarks)
+      let newobj = {};
+      newobj = Object.assign(newobj, $bookmarks)
+      newobj[itemid] = event.detail.value
+      // console.log({newobj})
+      bookmarks.set(newobj)
+    }
+
 </script>
 
 {#if item}
@@ -36,7 +46,8 @@
               <span class="text-xs text-gray-500">333 Ratings</span>
             </div>
             
-            <Button />
+            <ButtonGroup tabs={['Want to learn','Finished']} currentlySelected={$bookmarks[itemid]} on:change={saveStatusToLocalStorage}/>
+
           </div>
           
 

src/ItemList.svelte

@@ -1,22 +1,32 @@
 <script>
     import { onMount } from 'svelte';
     import ItemCard from "./ItemCard.svelte"
+    import { bookmarks } from "./stores.js"
 
     export let kind;
-    let ls = null;
+    let items = []
-    let items = []; //TODO: Only store item IDs in localStorage
-
-    const read = () => !!ls && JSON.parse(ls.getItem(kind) || "[]");
 
     onMount(() => {
-        typeof localStorage !== `undefined` && (ls = localStorage);
+        // items = read();
-        items = read();
     });
 
+    function encodeArray(kind){
+        console.log($bookmarks)
+        return Object.entries($bookmarks).filter(pair => pair[1] == kind).map(pair => pair[0]).join("%2C")
+    }
+
+    $: fetch(`/learn/items.json?_shape=array&rowid__in=${encodeArray(kind)}`)
+        .then(r => r.json())
+        .then(data => {
+            items = data;
+        });  
+
 </script>
 
-<h1>{kind}</h1>
+<h1>{kind == 0 ? 'Want to learn' : 'Finished learning'}</h1>
 
+<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-1 lg:grid-cols-2 xl:grid-cols-3">
 {#each items as item}
 <ItemCard {item}/>
 {/each}
+</div>

src/persistStore.js

@@ -0,0 +1,14 @@
+import { writable } from "svelte/store";
+
+export const persistStore = (key, initial)=> {
+  const persist = localStorage.getItem(key)
+  const data = persist ? JSON.parse(persist) : initial
+
+  const store = writable(data, () => {
+    const unsubscribe = store.subscribe(value => {
+      localStorage.setItem(key, JSON.stringify(value))
+    })
+    return unsubscribe
+  })
+  return store
+}

src/stores.js

@@ -0,0 +1,4 @@
+import { persistStore } from "./persistStore";
+
+ // {item_id: integer} 0 = want to learn, 1 = finished
+export const bookmarks = persistStore('bookmarks', {})