Revert SearchInput logic to a simplified one + Redirect on results on page reload

nuxt/components/SearchInput.vue

@@ -1,37 +1,13 @@
 <template>
   <div>
     <label>Type any movie title you want:</label>
-    <a-auto-complete
+    <a-input-search
-      v-model="search"
-      :data-source="dataSource"
-      size="large"
-      style="width: 100%"
       placeholder="Ex: Star Wars"
-      :allowClear="true"
+      enter-button
-      :autoFocus="true"
+      v-model="search"
-      not-found-content="0 Result"
+      size="large"
-      :loading="fetching"
-      @select="onSelect"
       @search="handleSearch"
-    >
+    />
-      <a-input-search enter-button size="large" />
-      <template slot="dataSource">
-        <a-select-option
-          v-for="(opt, index) in dataSource"
-          :key="index"
-          :label="opt.text"
-          :value="opt.value"
-        >
-          <div class="item-content">
-            <img class="item-thumbnail" :src="opt.poster" :alt="opt.text" />
-            <div class="item-infos">
-              {{ opt.text }}
-              <span>{{ opt.year }}</span>
-            </div>
-          </div>
-        </a-select-option>
-      </template>
-    </a-auto-complete>
     <a-alert
       v-if="!search || search.length < 3"
       message="Type at least 3 letters."
@@ -46,50 +22,13 @@ import { groupBy } from "lodash";
 export default {
   data() {
     return {
-      search: "",
+      search: ""
-      fetching: false,
-      dataSource: []
     };
   },
   methods: {
-    async getMovies(value) {
-      if (value && value.length >= 3) {
-        this.fetching = true;
-
-        const result = await this.$axios.$get("", {
-          params: {
-            apikey: "a4bf96a7",
-            s: value,
-            type: "movie"
-          }
-        });
-
-        if (result.Response === "True") {
-          const data = result.Search.map(movie => ({
-            text: movie.Title,
-            value: movie.imdbID,
-            poster: movie.Poster,
-            year: movie.Year
-          }));
-
-          this.dataSource = data;
-          this.fetching = false;
-        } else if (result.Response === "False") {
-          this.dataSource = [];
-        }
-      }
-    },
     handleSearch(value) {
-      this.getMovies(value);
+      this.$store.commit("setSearch", value);
-    },
+      this.$router.push("/results");
-    handleChange(value) {
-      this.search = value;
-      this.getMovies(value);
-    },
-    onSelect(value) {
-      console.log(value);
-
-      //TODO: Fetch the selected Movies and redirect to result page
     }
   }
 };

nuxt/middleware/redirect.js

@@ -0,0 +1,3 @@
+export default function({ store, redirect, route }) {
+  if (store.state.search == "") return redirect("/");
+}