fix: remove listener on form unmount

persisted in localstorage

packages/search-site/src/index.ejs

@@ -178,7 +178,7 @@
   <script>
     // lunr = window.lunr
     // mitt = window.mitt
-    (function ({ mitt, lunr }, data) {
+    (function ({ mitt, lunr, localStorage }, data) {
       const emitter = mitt();
       const stringAscending = (a, b) => {
         const aa = a.toLowerCase();
@@ -189,6 +189,23 @@
 
       // helpers
       const getMultiValues = node => Array.from(node.selectedOptions).map(o => o.value);
+      const store = {
+        get: id => JSON.parse(localStorage.getItem(id)),
+        set: (id, val) => localStorage.setItem(id, JSON.stringify(val)),
+      };
+
+      // listeners
+      emitter.on('favorite', ({ id, isFav }) => {
+          const favs = store.get('favorites') || [];
+          const idx = favs.indexOf(id);
+
+          // remove previously favorited strain
+          if (idx >= 0 && !isFav) {
+            store.set('favorites', favs.filter(f => f !== id));
+          } else if (idx === -1 && isFav) {
+            store.set('favorites', favs.concat(id));
+          }
+      });
 
       // vue helpers
       Vue.filter('capitalize', value => {
@@ -222,9 +239,22 @@
       });
 
       Vue.component('strain-card', {
+        data() {
+          const favs = store.get('favorites') || [];
+
+          return {
+            favorite: favs.indexOf(this.strain.id) >= 0,
+          };
+        },
         props: {
           strain: Object,
         },
+        methods: {
+          toggleFavorite(id) {
+            this.favorite = !this.favorite;
+            emitter.emit('favorite', { id: this.strain.id, isFav: this.favorite });
+          }
+        },
         template: `
           <div class="card">
             <header class="card-header">
@@ -242,6 +272,11 @@
               <tag-list title="Conditions" :tags="strain.conditions" />
               <tag-list title="Flavors" :tags="strain.flavors" />
             </div>
+            <footer class="card-footer">
+              <div class="card-footer-item">
+                <button class="button" :class="{ 'is-success': favorite }" @click.prevent="toggleFavorite(strain.id)">Save</button>
+              </div>
+            </footer>
           </div>
         `,
       });
@@ -259,7 +294,10 @@
           };
         },
         created() {
-          emitter.on('error', msg => this.error = msg);
+          emitter.on('error', this.setError);
+        },
+        beforeDestroy() {
+          emitter.off('error', this.setError);
         },
         methods: {
           handleSubmit() {
@@ -276,7 +314,10 @@
           },
           resetForm() {
             this.$el.reset();
-          }
+          },
+          setError(msg) {
+            this.error = msg
+          },
         },
       });