Add autocomplete to search

server/autocomplete.js

@@ -0,0 +1,30 @@
+const axios = require('axios')
+
+function autocompleteHandler (req, res) {
+  const country = req.url.replace('/autocomplete/', '')
+  axios.all([
+    axios.get(`http://because.moe/json/${country}`),
+    axios.get('http://www.crunchyroll.com/ajax/?req=RpcApiSearch_GetSearchCandidates')
+  ]).then(axios.spread((a, b) => {
+    const moe = a.data.shows
+    const cr = JSON.parse(b.data.substring(10, b.data.length - 2)).data
+
+    const filtered = cr
+      .filter((c) => c.type === 'Series' && !!(moe.find((m) => m.sites.crunchyroll && m.sites.crunchyroll === `http://www.crunchyroll.com${c.link}`)))
+      .map((c) => ({
+        name: c.name,
+        id: c.id,
+        image: c.img
+      }))
+
+      res.setHeader('Access-Control-Allow-Origin', '*')
+      res.setHeader('Content-Type', 'application/json')
+      res.end(JSON.stringify(filtered))
+  })).catch((err) => {
+    console.error(err.message)
+    res.statusCode = 500
+    res.end('something went wrong')
+  })
+}
+
+module.exports = autocompleteHandler

server/index.js

@@ -1,5 +1,16 @@
-const http = require('http');
-const srv = http.createServer((req, res) => res.end('love arrow shoot!'))
+const http = require('http')
+const compress = require('compression')()
+const autocompleteHandler = require('./autocomplete')
+
+const srv = http.createServer((req, res) => {
+  compress(req, res, () => {
+    if (req.url.indexOf('/autocomplete') === 0) {
+      autocompleteHandler(req, res)
+    } else {
+      res.end('love arrow shoot!')
+    }
+  })
+})
 const io = require('socket.io')(srv)
 io.origins('*:*')
 

server/package.json

@@ -6,9 +6,14 @@
   "author": "Zach Bruggeman",
   "license": "MIT",
   "dependencies": {
+    "axios": "^0.15.3",
+    "compression": "^1.6.2",
     "socket.io": "^1.7.2"
   },
   "scripts": {
     "start": "node index.js"
+  },
+  "now": {
+    "alias": "umi-watch-api"
   }
 }

server/yarn.lock

@@ -2,7 +2,7 @@
 # yarn lockfile v1
 
 
-[email protected]:
+[email protected], accepts@~1.3.3:
   version "1.3.3"
   resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.3.tgz#c3ca7434938648c3e0d9c1e328dd68b622c284ca"
   dependencies:
@@ -17,6 +17,12 @@ [email protected]:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/arraybuffer.slice/-/arraybuffer.slice-0.0.6.tgz#f33b2159f0532a3f3107a272c0ccfbd1ad2979ca"
 
+axios@^0.15.3:
+  version "0.15.3"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.15.3.tgz#2c9d638b2e191a08ea1d6cc988eadd6ba5bdc053"
+  dependencies:
+    follow-redirects "1.0.0"
+
 [email protected]:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/backo2/-/backo2-1.0.2.tgz#31ab1ac8b129363463e35b3ebb69f4dfcfba7947"
@@ -39,6 +45,10 @@ [email protected]:
   version "0.0.4"
   resolved "https://registry.yarnpkg.com/blob/-/blob-0.0.4.tgz#bcf13052ca54463f30f9fc7e95b9a47630a94921"
 
+[email protected]:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/bytes/-/bytes-2.3.0.tgz#d5b680a165b6201739acb611542aabc2d8ceb070"
+
 [email protected]:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/callsite/-/callsite-1.0.0.tgz#280398e5d664bd74038b6f0905153e6e8af1bc20"
@@ -59,17 +69,34 @@ [email protected]:
   version "0.0.3"
   resolved "https://registry.yarnpkg.com/component-inherit/-/component-inherit-0.0.3.tgz#645fc4adf58b72b649d5cae65135619db26ff143"
 
+compressible@~2.0.8:
+  version "2.0.10"
+  resolved "https://registry.yarnpkg.com/compressible/-/compressible-2.0.10.tgz#feda1c7f7617912732b29bf8cf26252a20b9eecd"
+  dependencies:
+    mime-db ">= 1.27.0 < 2"
+
+compression@^1.6.2:
+  version "1.6.2"
+  resolved "https://registry.yarnpkg.com/compression/-/compression-1.6.2.tgz#cceb121ecc9d09c52d7ad0c3350ea93ddd402bc3"
+  dependencies:
+    accepts "~1.3.3"
+    bytes "2.3.0"
+    compressible "~2.0.8"
+    debug "~2.2.0"
+    on-headers "~1.0.1"
+    vary "~1.1.0"
+
 [email protected]:
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.3.1.tgz#e7e0a1f9ef43b4c8ba925c5c5a96e806d16873bb"
 
-[email protected]:
+[email protected], debug@~2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.2.0.tgz#f87057e995b1a1f6ae6a4960664137bc56f039da"
   dependencies:
     ms "0.7.1"
 
-[email protected]:
+[email protected], debug@^2.2.0:
   version "2.3.3"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.3.3.tgz#40c453e67e6e13c901ddec317af8986cda9eff8c"
   dependencies:
@@ -114,6 +141,12 @@ [email protected]:
     engine.io-parser "1.3.2"
     ws "1.1.2"
 
+[email protected]:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.0.0.tgz#8e34298cbd2e176f254effec75a1c78cc849fd37"
+  dependencies:
+    debug "^2.2.0"
+
 [email protected]:
   version "0.1.7"
   resolved "https://registry.yarnpkg.com/has-binary/-/has-binary-0.1.7.tgz#68e61eb16210c9545a0a5cce06a873912fe1e68c"
@@ -136,6 +169,10 @@ [email protected]:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/json3/-/json3-3.3.2.tgz#3c0434743df93e2f5c42aee7b19bcb483575f4e1"
 
+"mime-db@>= 1.27.0 < 2":
+  version "1.27.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.27.0.tgz#820f572296bbd20ec25ed55e5b5de869e5436eb1"
+
 mime-db@~1.26.0:
   version "1.26.0"
   resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.26.0.tgz#eaffcd0e4fc6935cf8134da246e2e6c35305adff"
@@ -166,6 +203,10 @@ [email protected]:
   version "0.0.3"
   resolved "https://registry.yarnpkg.com/object-component/-/object-component-0.0.3.tgz#f0c69aa50efc95b866c186f400a33769cb2f1291"
 
+on-headers@~1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/on-headers/-/on-headers-1.0.1.tgz#928f5d0f470d49342651ea6794b0857c100693f7"
+
 options@>=0.0.5:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/options/-/options-0.0.6.tgz#ec22d312806bb53e731773e7cdaefcf1c643128f"
@@ -240,6 +281,10 @@ [email protected]:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/ultron/-/ultron-1.0.2.tgz#ace116ab557cd197386a4e88f4685378c8b2e4fa"
 
+vary@~1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.1.tgz#67535ebb694c1d52257457984665323f587e8d37"
+
 [email protected]:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/ws/-/ws-1.1.2.tgz#8a244fa052401e08c9886cf44a85189e1fd4067f"

src/App.vue

@@ -61,14 +61,11 @@ export default {
       return `${window.location.origin}/room/${this.room.replace('umi//', '')}`
     },
     routeName () {
-      return this.$store.state.route.name
+      return this.$route.name
     },
     lights () {
       return this.$store.state.lights
     },
-    showTabs () {
-      return this.$route.name === 'home' || this.$route.name === 'history'
-    },
     roomBarClass () {
       return !this.connected ? 'hidden' : (this.hideBar ? 'peek' : 'show')
     }

src/components/Header.vue

@@ -13,10 +13,7 @@
           <router-link to="/history" class="white no-underline bg-animate"><i class="fa fa-history v-mid mr2" aria-hidden="true"></i> History</router-link>
         </div>
         <div class="absolute search right-0" style="top: 6px;">
-          <form @submit.prevent="search" class="dib">
-            <input type="text" class="br2 br--left input-reset white bw0 search-bar" placeholder="Search Crunchyroll" v-model="searchInput">
-            <button class="br2 br--right pointer bw0 button-reset search-btn"><i class="fa fa-search white"></i></button>
-          </form>
+          <search />
           <span class="f6 fw5 dib ml1 ba b--white-40 bg-transparent bg-animate white br1 pointer ph2 pv1 tc logout" @click="logout">Log out</span>
         </div>
       </div>
@@ -25,30 +22,20 @@
 </template>
 
 <script>
+import Search from './Search'
+
 export default {
   name: 'umi-header',
+  components: { Search },
   computed: {
     username () {
       return this.$store.state.auth.username
     },
     lights () {
       return this.$store.state.lights
-    },
-    searchInput: {
-      get () {
-        return this.$store.state.searchQuery
-      },
-      set (value) {
-        this.$store.commit('SET_SEARCH_QUERY', value)
-      }
     }
   },
   methods: {
-    search () {
-      if (this.searchInput.trim() === '') return
-      const method = this.$route.name === 'search' ? 'replace' : 'push'
-      this.$router[method](`/search?q=${this.searchInput}`)
-    },
     async logout () {
       await this.$store.dispatch('logout')
       this.$router.push('/login')
@@ -128,27 +115,6 @@ export default {
   .nav .router-link-active {
     border-bottom: 0.25rem solid #2c60a2;
   }
-
-  .search-bar {
-    background-color: #2c60a2;
-    padding: 0.5rem;
-  }
-
-  .search-bar::placeholder {
-    color: white;
-    opacity: 0.8;
-  }
-
-  .search-btn {
-    background-color: #2c60a2;
-    padding: 0.5rem;
-    margin-left: -5px;
-  }
-
-  .search-bar:focus, .search-btn:active, .search-btn:focus {
-    outline: none;
-  }
-
   .logout:hover {
     background-color: #2c60a2;
   }