updated search to use typescript and composition api

src/components/Modal.vue

@@ -1,23 +1,23 @@
 <template>
-  <div id="movie-modal" class="movie-modal movie-card hidden p-5">
+  <div v-show="visible" id="movie-modal" class="movie-modal movie-card p-5">
-    <span class="hover-pointer font-bold w-full block text-right sm:pr-5 pb-3 pt-5" @click="closeModal()">
+    <span
+      class="hover-pointer font-bold w-full block text-right sm:pr-5 pb-3 pt-5"
+      @click="toggleModal()"
+    >
       X
     </span>
     <slot class=""></slot>
   </div>
 </template>
 
-<script>
+<script lang="ts" setup>
-export default {
+const visible = ref(false);
-  name: "Modal",
+
-  methods: {
+const toggleModal = () => {
-    closeModal: function () {
+  visible.value = !visible.value;
-      document.getElementById("movie-modal").classList.add("hidden")
+};
-    },
+
-  },
+defineExpose({ toggleModal });
-}
 </script>
 
-<style scoped>
+<style scoped></style>
-
-</style>

src/components/admin/search.vue

@@ -1,51 +1,70 @@
 <template>
   <form class="py-3 p-sm-0 align-items-center" @submit="findMovies">
-    <label class="px-0 " for="search-field">Search</label>
+    <label class="px-0" for="search-field">Search</label>
     <div class="px-0 mx-0">
-      <input id="search-field" class="p-1" name="search-field" type="text"/>
+      <input id="search-field" class="p-1" name="search-field" type="text" />
       <button class="btn p-1" type="button" @click="findMovies">Submit</button>
     </div>
   </form>
   <ul class="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 gap-4">
     <li v-for="movie in movies" class="p-1 movie-card">
-      <img :src="movie.Poster" alt="movie poster" class="neon-border hover-pointer" @click="$parent.showModal(movie)"/>
+      <img
+        :src="movie.poster"
+        alt="movie poster"
+        class="neon-border hover-pointer"
+        @click="showModal(movie)"
+      />
       <div class="p-2">
-        <h5 class="text-center">{{ movie.Title }} {{ movie.year }}</h5>
+        <h5 class="text-center">{{ movie.title }} ({{ movie.year }})</h5>
       </div>
     </li>
   </ul>
-
 </template>
 
-<script>
+<script lang="ts" setup>
-export default {
+import type { Movie } from "~/types/movie";
-  name: "search",
-  data: () => ({
-    movies: [],
-  }),
-  methods: {
-    findMovies: function (e) {
-      let config = useRuntimeConfig();
-      e.preventDefault();
-      let searchTerm = document.getElementById('search-field').value
 
-      return fetch(`${config.public.apiURL}/movies/search/${searchTerm}`, {
+const emit = defineEmits<{
-        method: "GET",
+  (e: "show-modal", movie: Movie): void;
-        headers: {
+}>();
-          "Content-type": "application/json",
+const movies = defineModel<Movie[]>("movie_list", { default: [] });
-          "token": useCookie("token").value,
+
-        },
+const showModal = (movie: Movie) => {
-      })
+  emit("show-modal", movie);
-          .then(response => response.json())
+};
-          .then(json => {
+const findMovies = async function (e: Event) {
-            this.movies = json;
+  let config = useRuntimeConfig();
-          })
+  e.preventDefault();
-          .catch(err => console.log(err))
+  let searchTerm = (document.getElementById("search-field") as HTMLInputElement)
-    },
+    ?.value;
+
+  if (!searchTerm) {
+    return;
   }
-}
+
+  const { data, error } = await useFetch<Movie[]>(
+    `${config.public.apiURL}/movies/search?q=${searchTerm}`,
+    {
+      method: "GET",
+      headers: {
+        "Content-type": "application/json",
+        Authorization: `Token ${useCookie("token").value}`,
+      },
+    },
+  );
+
+  if (error.value) {
+    if (error.value.statusCode === 401) {
+      alert("Unauthorized");
+    }
+  } else {
+    if (!data.value) {
+      alert("No movies found.");
+    } else {
+      movies.value = data.value || [];
+    }
+  }
+};
 </script>
 
-<style scoped>
+<style scoped></style>
-
-</style>

src/components/modal-content/AddMovie.vue

@@ -1,75 +1,87 @@
 <template>
-  <div v-if="movie != null" class="sm:m-5 p-10 movie-card neon-border">
+  <div v-if="props.movie != null" class="sm:m-5 p-10 movie-card neon-border">
     <div>
       <h2 id="modal-title" class="row pb-3">
-        {{ movie.Title }} ({{ movie.Year }})
+        {{ movie.title }} ({{ movie.year }})
       </h2>
 
       <div class="grid sm:grid-cols-2">
         <!-- MODAL POSTER -->
         <div class="text-end">
-          <img id="modal-poster" :src="movie.Poster" alt="poster" class="pt-5"/>
+          <img
+            id="modal-poster"
+            :src="movie.poster"
+            alt="poster"
+            class="pt-5"
+          />
         </div>
 
         <div class="pt-5">
-          <label class="" for="list-picker">Add To List</label><br/>
+          <label class="" for="list-picker">Add To List</label><br />
           <select id="list-picker" v-model="list_id" class="p-1 text-black">
-            <option v-for="list in lists" :value="list.id">{{ list.name }}</option>
+            <option v-for="list in lists" :value="list.id">
+              {{ list.name }}
+            </option>
           </select>
-          <button class="modal-poster btn p-1" type="button" @click="addMovie(movie.imdbID)">
+          <button
+            class="modal-poster btn p-1"
+            type="button"
+            @click="addMovie(movie.imdb_id)"
+          >
             Submit
           </button>
         </div>
       </div>
     </div>
   </div>
-
 </template>
 
-<script>
+<script lang="ts" setup>
-export default {
+import type { MovieList } from "~/types/movielist";
-  name: "AddMovie",
-  data: () => ({
-    list_id: 0,
-    lists: {}
-  }),
-  methods: {
-    addMovie: function (imdb_id) {
-      let config = useRuntimeConfig()
-      let list = parseInt(this.list_id)
 
-      return fetch(`${config.public.apiURL}/lists/movie`, {
+const props = defineProps(["movie"]);
-        method: "POST",
+const list_id = ref(0);
-        body: JSON.stringify({imdb_id: imdb_id, list_id: list}),
+const lists = defineModel<MovieList[]>("lists", { default: [] });
-        headers: {
+const emit = defineEmits<{
-          "Content-type": "application/json",
+  (e: "close-modal"): void;
-          "token": useCookie("token").value,
+}>();
-        }
+
-      })
+const addMovie = function (imdb_id: string) {
-          .then(response => response.json())
+  if (typeof imdb_id === "undefined") {
-          .then(_json => {
+    console.log("No imdb id");
-            this.$parent.closeModal()
+  }
-          })
+  let config = useRuntimeConfig();
-          .catch(err => console.log(err))
+
+  return fetch(
+    `${config.public.apiURL}/lists/${list_id.value}/movie/${imdb_id}/`,
+    {
+      method: "PUT",
+      body: `{ imdb_id: ${imdb_id}, list_id: ${list_id}}`,
+      headers: {
+        "Content-type": "application/json",
+        Authorization: `Token ${useCookie("token").value}`,
+      },
     },
-    getLists: function () {
+  )
-      let config = useRuntimeConfig()
+    .then((response) => response.json())
-      fetch(`${config.public.apiURL}/lists`, {
+    .then((_json) => {
-        method: "GET",
+      emit("close-modal");
-        headers: {"Content-type": "application/json",}
+    })
-      })
+    .catch((err) => console.log(err));
-          .then(response => response.json())
+};
-          .then(json => this.lists = json)
+const getLists = function () {
-          .catch(err => console.log(err))
+  let config = useRuntimeConfig();
-    },
+  fetch(`${config.public.apiURL}/lists`, {
-  },
+    method: "GET",
-  mounted() {
+    headers: { "Content-type": "application/json" },
-    this.getLists();
+  })
-  },
+    .then((response) => response.json())
-  props: ['movie']
+    .then((json) => (lists.value = json))
-}
+    .catch((err) => console.log(err));
+};
+onMounted(() => {
+  getLists();
+});
 </script>
 
-<style scoped>
+<style scoped></style>
-
-</style>

src/pages/admin/index.vue

@@ -1,24 +1,46 @@
 <template>
   <div class="p-5 sm:p-0">
-    <Modal>
+    <Modal ref="movie_modal">
-      <AddMovie v-if="modal_movie" :movie="modal_movie"></AddMovie>
+      <AddMovie
+        v-if="modal_movie"
+        :movie="modal_movie"
+        @close-modal="closeModal"
+      ></AddMovie>
     </Modal>
 
     <div class="text-center sm:text-left">
       <ul class="inline-flex space-x-5 pb-3">
-        <li id="search-tab" class="hover-pointer me-3 underline" @click="toggleDisplay('search')">Search</li>
+        <li
-        <li id="showings-tab" class="hover-pointer me-3" @click="toggleDisplay('showings')">Showings</li>
+          id="search-tab"
-        <li id="lists-tab" class="hover-pointer" @click="toggleDisplay('lists')">Lists</li>
+          class="hover-pointer me-3 underline"
+          @click="toggleDisplay('search')"
+        >
+          Search
+        </li>
+        <li
+          id="showings-tab"
+          class="hover-pointer me-3"
+          @click="toggleDisplay('showings')"
+        >
+          Showings
+        </li>
+        <li
+          id="lists-tab"
+          class="hover-pointer"
+          @click="toggleDisplay('lists')"
+        >
+          Lists
+        </li>
         <li id="logout" class="hover-pointer" @click="logout">Logout</li>
       </ul>
     </div>
 
     <div id="search">
-      <search/>
+      <search @show-modal="showModal" />
     </div>
 
     <div id="showings" class="hidden">
-      <showings/>
+      <showings />
     </div>
 
     <div id="lists" class="hidden">
@@ -27,62 +49,67 @@
   </div>
 </template>
 
-<script>
+<script lang="ts" setup>
 import AddMovie from "~/components/modal-content/AddMovie.vue";
 import Search from "~/components/admin/search.vue";
 import Showings from "~/components/admin/showings.vue";
 import Lists from "~/components/admin/lists.vue";
+import type { MovieList } from "~/types/movielist";
+import { useCookie } from "#app";
+import type { Movie } from "~/types/movie";
+import Modal from "~/components/Modal.vue";
 
-export default {
+const lists = defineModel<MovieList>("movie-lists", { default: [] });
-  name: "index",
+const modal_movie = defineModel<Movie>("#movie-modal");
-  components: {Lists, Showings, Search, AddMovie},
-  data: () => ({
-    lists: [],
-    modal_movie: null,
-  }),
-  methods: {
-    showModal: function (movie) {
-      this.modal_movie = movie;
-      document.getElementById("movie-modal").classList.remove("hidden");
-    },
-    toggleDisplay: function (id) {
-      let tabs = ["search", "showings", "lists"];
 
-      tabs.forEach((value) => {
+const movie_modal = ref<InstanceType<typeof Modal> | null>(null);
-        if (value === id) {
+
-          document.getElementById(id).classList.toggle("hidden");
+const closeModal = function () {
-          document.getElementById(id + "-tab").classList.toggle("underline");
+  movie_modal?.value?.toggleModal();
-        } else if (!document.getElementById(value).classList.contains("hidden")) {
+};
-          document.getElementById(value).classList.toggle("hidden");
+const showModal = function (movie: Movie) {
-          document.getElementById(value + "-tab").classList.toggle("underline");
+  modal_movie.value = movie;
-        }
+  movie_modal?.value?.toggleModal();
-      })
+};
+const toggleDisplay = function (element_id: string) {
+  let tabs = ["search", "showings", "lists"];
+
+  tabs.forEach((value) => {
+    if (value === element_id) {
+      document.getElementById(element_id)?.classList.toggle("hidden");
+      document
+        .getElementById(element_id + "-tab")
+        ?.classList.toggle("underline");
+    } else if (!document.getElementById(value)?.classList.contains("hidden")) {
+      document.getElementById(value)?.classList.toggle("hidden");
+      document.getElementById(value + "-tab")?.classList.toggle("underline");
+    }
+  });
+};
+const logout = () => {
+  let config = useRuntimeConfig();
+  fetch(`${config.public.apiURL}/auth/logout/`, {
+    method: "POST",
+    headers: {
+      "Content-type": "application/json",
+      Authorization: `Token ${useCookie("token").value}`,
     },
-    logout: () => {
+  })
-      let config = useRuntimeConfig()
+    .then((response) => response)
-      let token = useCookie("token").value;
+    .then((_json) => {
-      fetch(`${config.public.apiURL}/logout`, {
+      let token = useCookie("token");
-        method: "PUT",
+      token.value = null;
-        headers: {"Content-type": "application/json", "token": token},
+      navigateTo("/");
-      })
+    })
-          .then(response => response.json())
+    .catch((err) => console.log(err));
-          .then(_json => {
+};
-            let token = useCookie("token");
+
-            token.value = null;
+onMounted(() => {
-            window.location = "/";
+  const token = useCookie("token").value;
-          })
+  if (!token) {
-          .catch(err => console.log(err))
+    navigateTo("/");
-    }
-  },
-  mounted() {
-    const token = useCookie("token").value;
-    if (!token) {
-      navigateTo("/")
-    }
   }
-}
+});
 </script>
 
-<style scoped>
+<style scoped></style>
-
-</style>

src/pages/lists/[id].vue

@@ -1,6 +1,6 @@
 <template>
   <div v-if="list_id !== 0" class="p-5 sm:p-0">
-    <Modal>
+    <Modal ref="movie_modal">
       <ShowMovie v-if="modal_movie" :movie="modal_movie"></ShowMovie>
     </Modal>
     <h2 class="text-xl font-bold pb-5">{{ list.name }}</h2>
@@ -64,6 +64,9 @@ import ShowMovie from "~/components/modal-content/ShowMovie.vue";
 import "lazysizes";
 import type { MovieList } from "~/types/movielist";
 import type { Movie } from "~/types/movie";
+import Modal from "~/components/Modal.vue";
+
+const movie_modal = ref<InstanceType<typeof Modal> | null>(null);
 
 const list_id = ref(0);
 const list = defineModel<MovieList>("movie_list", { default: [] });
@@ -176,7 +179,7 @@ const filterMovies = function () {
 
 const showModal = function (movie: Movie) {
   modal_movie.value = movie;
-  document.getElementById("movie-modal")?.classList.remove("hidden");
+  movie_modal.value?.toggleModal();
 };
 
 onMounted(() => {

src/pages/lists/index.vue

@@ -18,18 +18,24 @@
 
 <script lang="ts" setup>
 import type { MovieList } from "~/types/movielist";
+import { useCookie } from "#app";
 
 const lists = defineModel<MovieList[]>("movie_list", { default: [] });
 const updateLists = async function () {
   let config = useRuntimeConfig();
+  let headers: any = {
+    "Content-type": "application/json",
+  };
+
+  if (typeof useCookie("token").value !== "undefined") {
+    headers["Authorization"] = `Token ${useCookie("token").value}`;
+  }
+
   const { data, error } = await useFetch<MovieList[]>(
     `${config.public.apiURL}/lists`,
     {
       method: "GET",
-      headers: {
+      headers: headers,
-        "Content-type": "application/json",
-        Authorization: `Token ${useCookie("token").value}`,
-      },
     },
   );