Create results page + Vuex Store

nuxt/pages/results.vue

@@ -0,0 +1,117 @@
+<template>
+  <a-layout id="main">
+    <TheHeader />
+    <a-layout-content>
+      <a-row type="flex" align="middle" justify="center" style="height: 100%;">
+        <a-col :span="12">
+          <nuxt-link to="/">
+            <a-button type="primary"> <a-icon type="left" />Go back </a-button>
+          </nuxt-link>
+
+          <h3 style="color: #FFFFFF;">
+            Your search: "{{ search }}" ({{ nbResults }} match)
+          </h3>
+          <a-carousel arrows dot-position="top">
+            <div
+              slot="prevArrow"
+              slot-scope="props"
+              class="custom-slick-arrow"
+              style="left: 10px;zIndex: 1"
+            >
+              <a-icon type="left-circle" />
+            </div>
+            <div
+              slot="nextArrow"
+              slot-scope="props"
+              class="custom-slick-arrow"
+              style="right: 10px"
+            >
+              <a-icon type="right-circle" />
+            </div>
+            <a-card
+              :bordered="false"
+              :key="movie.imdbID"
+              v-for="movie in movies"
+            >
+              <img
+                slot="cover"
+                :alt="movie.Title"
+                :src="
+                  movie.Poster === 'N/A'
+                    ? 'https://place-hold.it/285x380'
+                    : movie.Poster
+                "
+              />
+              <a-card-meta :title="movie.Title">
+                <template slot="description">
+                  {{ movie.Director }}
+                  -
+                  <span style="font-size: 12px; font-style: oblique;">{{
+                    movie.Year
+                  }}</span>
+                </template>
+              </a-card-meta>
+            </a-card>
+          </a-carousel>
+        </a-col>
+      </a-row>
+    </a-layout-content>
+    <TheFooter />
+  </a-layout>
+</template>
+
+<script>
+import { mapState } from "vuex";
+
+export default {
+  middleware: "redirect",
+  async asyncData({ store }) {
+    await store.dispatch("getMovies");
+  },
+  computed: {
+    ...mapState({
+      search: "search",
+      movies: "movies",
+      nbResults: "nbResults",
+      error: "error"
+    })
+  }
+};
+</script>
+
+<style scoped>
+#main {
+  height: 100vh;
+  width: 100%;
+  background-size: cover;
+  background-attachment: fixed;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-image: url("~assets/background.jpg");
+}
+
+.ant-carousel >>> .slick-slide {
+  text-align: center;
+  overflow: hidden;
+}
+
+.ant-carousel >>> .slick-slide .ant-card {
+  width: 285px !important;
+}
+
+.ant-carousel >>> .custom-slick-arrow {
+  width: 25px;
+  height: 25px;
+  font-size: 25px;
+  color: #fff;
+  background-color: rgba(31, 45, 61, 0.11);
+  opacity: 0.3;
+}
+
+.ant-carousel >>> .custom-slick-arrow:before {
+  display: none;
+}
+.ant-carousel >>> .custom-slick-arrow:hover {
+  opacity: 0.5;
+}
+</style>

nuxt/store/index.js

@@ -0,0 +1,70 @@
+import { resolve } from "core-js/fn/promise";
+
+export const strict = false;
+
+export const state = () => ({
+  search: "",
+  movies: [],
+  nbResults: 0,
+  loading: false,
+  error: ""
+});
+
+export const mutations = {
+  setSearch: (state, search) => (state.search = search),
+  setMovies: (state, movies) => (state.movies = movies),
+  updateMovie: (state, { movie, index }) => (state.movies[index] = movie),
+  setNbResults: (state, nbResults) => (state.nbResults = nbResults),
+  setLoading: (state, loading) => (state.loading = loading),
+  setError: (state, error) => (state.error = error)
+};
+
+export const actions = {
+  async getMovies({ commit, state, dispatch }) {
+    commit("setLoading", true);
+    const response = await this.$axios.$get("", {
+      params: {
+        apikey: "a4bf96a7",
+        s: state.search,
+        type: "movie"
+      }
+    });
+
+    if (response.Response === "True") {
+      commit("setNbResults", response.totalResults);
+      dispatch("setDirectors", response.Search).then(function(res) {
+        console.log(res);
+        commit("setMovies", res);
+      });
+    } else if (response.Response === "False") {
+      commit("setMovies", []);
+      commit("setNbResults", 0);
+      commit("setError", response.Error);
+    }
+
+    commit("setLoading", false);
+  },
+  async getDirector({}, id) {
+    const response = await this.$axios.$get("", {
+      params: {
+        apikey: "a4bf96a7",
+        i: id,
+        type: "movie"
+      }
+    });
+
+    if (response.Response === "True") return response.Director;
+    else if (response.Response === "False") throw new Error(response.Error);
+  },
+  setDirectors({ dispatch }, data) {
+    let tmp = [];
+    data.forEach(async (movie, index) => {
+      const director = await dispatch("getDirector", movie.imdbID);
+      movie.Director = director;
+      tmp.push(movie);
+    });
+    return tmp;
+  }
+};
+
+export const getters = {};