add filtering by tags

src/App.svelte

@@ -1,4 +1,5 @@
 <script>
+  import Navigo from 'navigo'
   import MainInput from './lib/MainInput.svelte'
   import Note from './lib/Note.svelte'
   import Storage from './storage'
@@ -6,43 +7,78 @@
 
   const storage = new Storage()
   let notes = storage.getNotes()
+  let shownNotes = notes
   let hasNotes = notes.length > 0
   let clearConfirm = false
 
+  const router = new Navigo('/')
+
+  router.on('/', function (match) {
+    console.log("Clear Filter")
+    shownNotes = notes
+  })
+
+  router.on('/tag/:tag', function (match) {
+    console.log("Filtering by tag " + match.data.tag)
+    shownNotes = shownNotes.filter(note => {
+      return note.tags.includes(match.data.tag)
+    })
+  })
+
+  router.resolve();
+
   function handleNewNote(e) {
     notes.push(createNote(e.detail))
     notes = notes // Trigger reactiveness
+    shownNotes = notes
 
     storage.saveNotes(notes)
   }
 
   function handleToggle(e) {
     notes = toggleDoneState(notes, e.detail.created)
+    shownNotes = notes
 
     storage.saveNotes(notes)
   }
 
-  function handleClear(e) {
+  function handleFilter(e) {
+    shownNotes = shownNotes.filter(note => {
+      return note.tags.includes(e.detail)
+    })
+  }
+
+  function handleClearDone(e) {
     if (clearConfirm === false) {
       clearConfirm = true
     } else {
       clearConfirm = false
       notes = notes.filter(note => !note.done)
+      shownNotes = notes
       storage.saveNotes(notes)
     }
   }
+
+  function handleClearFilter(e) {
+    shownNotes = notes
+  }
 </script>
 
 <main>
   <MainInput on:added={handleNewNote} />
 
   <section class="notes">
-    {#each notes as note}
-      <Note note={note} on:toggle={handleToggle} />
+    {#each shownNotes as note}
+      <Note note={note} on:toggle={handleToggle} on:filter={handleFilter} />
     {/each}
   </section>
 
-  <button on:click={handleClear} class:confirm={clearConfirm}>Clear finished notes</button>
+  <footer>
+    <button on:click={handleClearFilter}>Clear filter</button>
+    <div class="flex-1" />
+    <button on:click={handleClearDone} class:confirm={clearConfirm}>Clear finished notes</button>
+  </footer>
+
 </main>
 
 <style>
@@ -74,10 +110,19 @@
     margin: 0 auto;
   }
 
+  footer {
+    display: flex;
+  }
+
   .notes {
     margin: 0.5rem 0;
   }
 
+  .flex-1 {
+    display: flex;
+    flex: 1 1 0;
+  }
+
   button {
     background: var(--gray-200);
     padding: 0.5rem;

src/lib/MainInput.svelte

@@ -11,7 +11,7 @@
   }
 </script>
 
-<input type="text" on:keyup={handleKeyup}>
+<input type="text" on:keyup={handleKeyup} placeholder="Add a new note, tag with #foo and #bar">
 
 <style>
   input {

src/lib/Note.svelte

@@ -7,16 +7,23 @@
 	function toggle(e) {
 		dispatch('toggle', note)
 	}
+
+	function filterByTag(e) {
+		e.preventDefault()
+		console.log(e.srcElement.dataset)
+		const tag = e.srcElement.dataset.tag
+		dispatch('filter', tag)
+	}
 </script>
 
-<article class="note flex" class:done={note.done} class:todo={!note.done} on:click={toggle}>
-	<div class="title">
+<article class="note flex" class:done={note.done} class:todo={!note.done}>
+	<div class="title" on:click={toggle}>
 		{note.title}
 	</div>
 
 	<aside class="tags">
 		{#each note.tags as tag}
-			<a href="#">#{tag}</a>
+			<a href={`/tag/${tag}`} data-tag={tag} on:click={filterByTag}>#{tag}</a>
 		{/each}
 	</aside>
 

src/note.js

@@ -15,7 +15,7 @@ export function createNote(noteTitle) {
 }
 
 export function toggleDoneState(notes, id) {
-	notes.map(note => {
+	return notes.map(note => {
     if (note.created === id) {
       // return a new object
       return {

src/storage.js

@@ -6,7 +6,11 @@ export default class Storage {
 	getNotes() {
 		const notesString = localStorage.getItem(`${this.prefix}-notes`)
 		if (notesString) {
-			return JSON.parse(notesString)
+			try {
+				return JSON.parse(notesString)
+			} catch(e) {
+				return []
+			}
 		} else {
 			return []
 		}