diff --git a/nuxt/components/Carousel.vue b/nuxt/components/Carousel.vue new file mode 100644 index 0000000..ab20964 --- /dev/null +++ b/nuxt/components/Carousel.vue @@ -0,0 +1,49 @@ + + + + + diff --git a/nuxt/components/MovieCard.vue b/nuxt/components/MovieCard.vue new file mode 100644 index 0000000..2d19872 --- /dev/null +++ b/nuxt/components/MovieCard.vue @@ -0,0 +1,62 @@ + + + + + diff --git a/nuxt/components/TheHeader.vue b/nuxt/components/TheHeader.vue index a7ea1b1..58e49d3 100644 --- a/nuxt/components/TheHeader.vue +++ b/nuxt/components/TheHeader.vue @@ -42,4 +42,19 @@ h2 { height: 48px; margin: 0 12px 0 0; } + +@media screen and (max-width: 414px) { + .NuxtLogo { + width: 28px; + height: 28px; + } + + h1 { + font-size: 18px; + } + + h2 { + display: none; + } +} diff --git a/nuxt/package-lock.json b/nuxt/package-lock.json index 923740a..fdf896c 100644 --- a/nuxt/package-lock.json +++ b/nuxt/package-lock.json @@ -5204,6 +5204,11 @@ } } }, + "dom-walk": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.2.tgz", + "integrity": "sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w==" + }, "domain-browser": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.2.0.tgz", @@ -6439,6 +6444,15 @@ "is-glob": "^4.0.1" } }, + "global": { + "version": "4.4.0", + "resolved": "https://registry.npmjs.org/global/-/global-4.4.0.tgz", + "integrity": "sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==", + "requires": { + "min-document": "^2.19.0", + "process": "^0.11.10" + } + }, "globals": { "version": "11.12.0", "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz", @@ -9386,6 +9400,14 @@ "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-3.1.0.tgz", "integrity": "sha512-Ysbi9uYW9hFyfrThdDEQuykN4Ey6BuwPD2kpI5ES/nFTDn/98yxYNLZJcgUAKPT/mcrLLKaGzJR9YVxJrIdASQ==" }, + "min-document": { + "version": "2.19.0", + "resolved": "https://registry.npmjs.org/min-document/-/min-document-2.19.0.tgz", + "integrity": "sha1-e9KC4/WELtKVu3SM3Z8f+iyCRoU=", + "requires": { + "dom-walk": "^0.1.0" + } + }, "minimalistic-assert": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz", @@ -13986,6 +14008,23 @@ "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.12.tgz", "integrity": "sha512-uhmLFETqPPNyuLLbsKz6ioJ4q7AZHzD8ZVFNATNyICSZouqP2Sz0rotWQC8UNBF6VGSCs5abnKJoStA6JbCbfg==" }, + "vue-carousel": { + "version": "0.18.0", + "resolved": "https://registry.npmjs.org/vue-carousel/-/vue-carousel-0.18.0.tgz", + "integrity": "sha512-a2zxh7QJioDxNMguqcuJ7TPbfgK5bGDaAXIia7NWxPAWsEvNE4ZtHgsGu40L5Aha4uyjmNKXvleB14QAXFoKig==", + "requires": { + "global": "^4.3.2", + "regenerator-runtime": "^0.12.1", + "vue": "^2.5.17" + }, + "dependencies": { + "regenerator-runtime": { + "version": "0.12.1", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz", + "integrity": "sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg==" + } + } + }, "vue-client-only": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/vue-client-only/-/vue-client-only-2.0.0.tgz", diff --git a/nuxt/package.json b/nuxt/package.json index d11c5ac..c418504 100644 --- a/nuxt/package.json +++ b/nuxt/package.json @@ -16,7 +16,8 @@ "ant-design-vue": "^1.6.5", "core-js": "^3.6.5", "lodash": "^4.17.20", - "nuxt": "^2.14.5" + "nuxt": "^2.14.5", + "vue-carousel": "^0.18.0" }, "devDependencies": { "@vue/test-utils": "^1.1.0", diff --git a/nuxt/pages/index.vue b/nuxt/pages/index.vue index 77ac63d..507fcaf 100644 --- a/nuxt/pages/index.vue +++ b/nuxt/pages/index.vue @@ -3,7 +3,7 @@ - + diff --git a/nuxt/pages/results.vue b/nuxt/pages/results.vue index c75a624..fe2d014 100644 --- a/nuxt/pages/results.vue +++ b/nuxt/pages/results.vue @@ -3,54 +3,16 @@ - - - Go back - - -

- Your search: "{{ search }}" ({{ nbResults }} match) -

- -
- -
-
- -
- - - - - - - + + + + + @@ -65,19 +27,22 @@ export default { middleware: "redirect", async asyncData({ store }) { await store.dispatch("getMovies"); + + await store.dispatch("setDirectors"); }, computed: { ...mapState({ search: "search", movies: "movies", nbResults: "nbResults", - error: "error" + error: "error", + loading: "loading" }) } }; - diff --git a/nuxt/store/index.js b/nuxt/store/index.js index bf45c4e..be2dc98 100644 --- a/nuxt/store/index.js +++ b/nuxt/store/index.js @@ -5,7 +5,7 @@ export const state = () => ({ movies: [], nbResults: 0, loading: false, - error: "" + error: null }); export const mutations = { @@ -18,50 +18,62 @@ export const mutations = { }; export const actions = { - async getMovies({ commit, state, dispatch }) { + async getMovies({ commit, state }) { 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); + return await this.$axios + .$get("", { + params: { + apikey: "a4bf96a7", + s: state.search, + type: "movie" + } + }) + .then(response => { + if (response.Response === "False") throw new Error(response.Error); + + commit("setNbResults", response.totalResults); + commit("setMovies", response.Search); + commit("setError", null); + }) + .catch(e => { + commit("setMovies", []); + commit("setNbResults", 0); + commit("setError", e.message); + }) + .finally(() => { + commit("setLoading", false); }); - } 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" - } + return await this.$axios + .$get("", { + params: { + apikey: "a4bf96a7", + i: id, + type: "movie" + } + }) + .then(response => { + if (response.Response === "False") throw new Error(response.Error); + + return response.Director; + }) + .catch(e => commit("setError", e.message)); + }, + setDirectors({ state, dispatch, commit }) { + commit("setLoading", true); + + let tmp = []; + state.movies.forEach(async movie => { + return await dispatch("getDirector", movie.imdbID).then(director => { + movie.Director = director; + tmp.push(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; + commit("setMovies", tmp); + commit("setLoading", false); } };