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;

src/modules/popup.js

@@ -7,6 +7,7 @@ const updateQueryParams = (id = null, type = null) => {
   let params = new URLSearchParams(window.location.search);
   params = removeIncludedQueryParams(params, "movie");
   params = removeIncludedQueryParams(params, "show");
+  params = removeIncludedQueryParams(params, "person");
 
   if (id && type === "movie") {
     params.append("movie", id);
@@ -14,6 +15,9 @@ const updateQueryParams = (id = null, type = null) => {
   if (id && type === "show") {
     params.append("show", id);
   }
+  if (id && type === "person") {
+    params.append("person", id);
+  }
 
   let url = `${window.location.protocol}//${window.location.hostname}${
     window.location.port ? `:${window.location.port}` : ""

src/routes.js

@@ -89,7 +89,12 @@ const hamburgerIsOpen = () => store.getters["hamburger/isOpen"];
 
 router.beforeEach((to, from, next) => {
   store.dispatch("documentTitle/updateTitle", to.name);
-  if (popupIsOpen()) store.dispatch("popup/close");
+  const { movie, show, person } = to.query;
+  if (movie) store.dispatch("popup/open", { id: movie, type: "movie" });
+  else if (show) store.dispatch("popup/open", { id: show, type: "show" });
+  else if (person) store.dispatch("popup/open", { id: person, type: "person" });
+  else store.dispatch("popup/close");
+
   if (hamburgerIsOpen()) store.dispatch("hamburger/close");
 
   // Toggle mobile nav