Popup now handles person. Updated all dependencies.

src/components/MoviePopup.vue

@@ -1,7 +1,8 @@
 <template>
   <div v-if="isOpen" class="movie-popup" @click="close">
     <div class="movie-popup__box" @click.stop>
-      <movie :id="id" :type="type"></movie>
+      <person v-if="type === 'person'" :id="id" type="person" />
+      <movie v-else :id="id" :type="type"></movie>
       <button class="movie-popup__close" @click="close"></button>
     </div>
     <i class="loader"></i>
@@ -11,9 +12,10 @@
 <script>
 import { mapActions, mapGetters } from "vuex";
 import Movie from "./Movie";
+import Person from "./Person";
 
 export default {
-  components: { Movie },
+  components: { Movie, Person },
   computed: {
     ...mapGetters("popup", ["isOpen", "id", "type"])
   },
@@ -43,6 +45,9 @@ export default {
     } else if (params.has("show")) {
       id = Number(params.get("show"));
       type = "show";
+    } else if (params.has("person")) {
+      id = Number(params.get("person"));
+      type = "person";
     }
 
     if (id && type) {

src/components/SearchPage.vue

@@ -5,7 +5,7 @@
         <span>Search filter:</span>
 
         <toggle-button
-          :options="['All', 'movie', 'show']"
+          :options="['All', 'movie', 'show', 'person']"
           :selected="mediaType"
           @change="toggleChanged"
         />
@@ -44,7 +44,7 @@ export default {
         return searchTmdb(this.query, page, this.adult, this.mediaType);
     },
     toggleChanged(value) {
-      if (["movie", "show"].includes(value.toLowerCase())) {
+      if (["movie", "show", "person"].includes(value.toLowerCase())) {
         this.mediaType = value.toLowerCase();
       } else {
         this.mediaType = null;