feat: show errors, sort tags

packages/search-site/src/index.ejs

@@ -70,6 +70,7 @@
           <label class="label">Search By Name</label>
           <div class="control">
             <input ref="name" class="input" type="text" placeholder="Text input">
+            <p v-if="error.length" class="help is-danger">{{error}}</p>
           </div>
         </div>
 
@@ -168,6 +169,12 @@
     // mitt = window.mitt
     (function ({ mitt, lunr }, data) {
       const emitter = mitt();
+      const stringAscending = (a, b) => {
+        const aa = a.toLowerCase();
+        const bb = b.toLowerCase();
+        if (aa === bb) return 0;
+        return aa < bb ? -1 : 1;
+      }
 
       // helpers
       const getMultiValues = node => Array.from(node.selectedOptions).map(o => o.value);
@@ -233,12 +240,16 @@
         el: '#search-form',
         data() {
           return {
-            effects: data.effects,
-            uses: data.uses,
-            conditions: data.conditions,
-            flavors: data.flavors,
+            effects: data.effects.sort(stringAscending),
+            uses: data.uses.sort(stringAscending),
+            conditions: data.conditions.sort(stringAscending),
+            flavors: data.flavors.sort(stringAscending),
+            error: '',
           };
         },
+        created() {
+          emitter.on('error', msg => this.error = msg);
+        },
         methods: {
           handleSubmit() {
             const requirements = {
@@ -249,6 +260,7 @@
               flavors: getMultiValues(this.$refs.flavors),
             }
 
+            this.error = '';
             emitter.emit('search', requirements);
           },
           resetForm() {
@@ -317,26 +329,31 @@
             this.requirements.conditions.forEach(t => searchParts.push(`+conditions:${t}`));
             this.requirements.flavors.forEach(t => searchParts.push(`+flavors:${t}`));
 
-            const hits = this.idx
-              .search(searchParts.join(' '))
-              // .slice(0, limit);
-            const refs = hits.map(({ ref }) => parseInt(ref, 10));
+            try {
+              const hits = this.idx
+                .search(searchParts.join(' '))
+                // .slice(0, limit);
+              const refs = hits.map(({ ref }) => parseInt(ref, 10));
 
-            this.strains = this
-              .all_strains
-              .map((strain, i) => {
-                const idx = refs.indexOf(strain.id);
-                if (idx < 0) return;
-                return Object.assign({ score: hits[idx].score }, strain)
-              })
-              .filter(Boolean)
-              .sort((a, b) => {
-                if (a.score === b.score) {
-                  if (a.rating === b.rating) return 0;
-                  return a.rating > b.rating ? -1 : 1;
-                }
-                return a.score > b.score ? -1 : 1;
-              });
+              this.strains = this
+                .all_strains
+                .map((strain, i) => {
+                  const idx = refs.indexOf(strain.id);
+                  if (idx < 0) return;
+                  return Object.assign({ score: hits[idx].score }, strain)
+                })
+                .filter(Boolean)
+                .sort((a, b) => {
+                  if (a.score === b.score) {
+                    if (a.rating === b.rating) return 0;
+                    return a.rating > b.rating ? -1 : 1;
+                  }
+                  return a.score > b.score ? -1 : 1;
+                });
+            } catch(err) {
+              this.strains = [];
+              emitter.emit('error', err.message);
+            }
           },
         },
       });