From 582207d453ab43df2a7f58d604557fa8c36f6d0c Mon Sep 17 00:00:00 2001
From: KevinMidboe <kevin.midboe@gmail.com>
Date: Thu, 26 Dec 2019 01:37:29 +0100
Subject: [PATCH] Error msg on empty response & added search params

- On empty search responses Search page show a error message that there
where no respones.
- For page loads directly to the search page new url query parameters
are checked: adult and media_type. These are then used to fetch updated
tmdb search parameters. Adult = true disables filtering for adult
material and media_type decides if the search is multi, movie, show or
person. (Frontend for filtering media_type is not added yet.)
---
 src/components/Search.vue | 30 +++++++++++++++++++++++++-----
 1 file changed, 25 insertions(+), 5 deletions(-)

diff --git a/src/components/Search.vue b/src/components/Search.vue
index b255c00..c131aff 100644
--- a/src/components/Search.vue
+++ b/src/components/Search.vue
@@ -8,10 +8,26 @@
       <seasoned-button @click="loadMore">load more</seasoned-button>
     </div>
 
-    <loader v-if="!results.length" />
+    <div class="notFound" v-if="results.length == 0 && loading == false">
+      <h1 class="notFound-title">No results for search: <b>{{ query }}</b></h1>
+    </div>
+
+    <loader v-if="loading" />
   </div>
 </template>
 
+<style lang="scss" scoped>
+.notFound {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  &-title {
+    font-weight: 400;
+  }
+}
+</style>
+
 <script>
 import { searchTmdb } from '@/api'
 import ListHeader from '@/components/ListHeader'
@@ -37,6 +53,8 @@ export default {
       query: String,
       title: String,
       page: Number,
+      adult: undefined,
+      mediaType: null,
       totalPages: 0,
       results: [],
       totalResults: []
@@ -50,8 +68,8 @@ export default {
     }
   },
   methods: {
-    search(query=this.query, page=this.page) {
-      searchTmdb(query, page)
+    search(query=this.query, page=this.page, adult=this.adult, mediaType=this.mediaType) {
+      searchTmdb(query, page, adult, mediaType)
         .then(this.parseResponse)
     },
     parseResponse(data) {
@@ -74,14 +92,16 @@ export default {
     }
   },
   created() {
-    const { query, page } = this.$route.query
+    const { query, page, adult, media_type } = this.$route.query
 
     if (!query) {
       // abort
       console.error('abort, no query')
     }
     this.query = decodeURIComponent(query)
-    this.page = page ? page : 1
+    this.page = page || 1
+    this.adult = adult || this.adult
+    this.mediaType = media_type || this.mediaType
     this.title = `Search results: ${this.query}`
 
     this.search()