updated showings to use typescript and composition api

src/components/admin/search.vue

@@ -32,6 +32,7 @@ const movies = defineModel<Movie[]>("movie_list", { default: [] });
 const showModal = (movie: Movie) => {
   emit("show-modal", movie);
 };
+
 const findMovies = async function (e: Event) {
   let config = useRuntimeConfig();
   e.preventDefault();

src/components/admin/showings.vue

@@ -9,31 +9,56 @@
           <li class="pb-2">
             <span class="mb-3">{{ formatDate(showing.showtime) }} </span>
           </li>
-          <button class="btn p-1 rounded" type="button" @click="deleteShowing(showing.id)">Delete</button>
+          <button
+            class="btn p-1 rounded"
+            type="button"
+            @click="deleteShowing(showing.id)"
+          >
+            Delete
+          </button>
         </ul>
       </li>
     </ul>
   </div>
 </template>
 
-<script>
-export default {
-  name: "showings",
-  data: () => ({
-    showings: [],
-    months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
-  }),
-  mounted() {
-    this.getShowings()
-  },
-  methods: {
-    formatDate: function (date_string) {
-      let parsed_date = new Date(Date.parse(date_string));
-      let month = this.months[parsed_date.getMonth()];
+<script lang="ts" setup>
+import type { Showing } from "~/types/showing";
+import { useCookie } from "#app";
+import type { Schedule } from "~/types/schedule";
 
-      return `${month} ${parsed_date.getDate()}, ${parsed_date.getFullYear()}`
-    },
-    deleteShowing: function (showing_id) {
+const showings = defineModel<Showing[]>("showings", { default: [] });
+const previous_showings = defineModel<Showing[]>("previous_showings", {
+  default: [],
+});
+const got_previous = ref(false);
+const months = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December",
+];
+
+onMounted(() => {
+  getShowings();
+});
+
+const formatDate = function (date_string: string) {
+  let parsed_date = new Date(Date.parse(date_string));
+  let month = months[parsed_date.getMonth()];
+
+  return `${month} ${parsed_date.getDate()}, ${parsed_date.getFullYear()}`;
+};
+
+const deleteShowing = function (showing_id: number) {
   let config = useRuntimeConfig();
   let confirmed = confirm("Delete showing?");
 
@@ -41,46 +66,54 @@ export default {
     return false;
   }
 
-      return fetch(`${config.public.apiURL}/schedules/${showing_id}`, {
-        credentials: "include",
+  fetch(`${config.public.apiURL}/showings/${showing_id}/`, {
     method: "DELETE",
     headers: {
       "Content-type": "application/json",
-          "token": useCookie("token").value
-        }
-      })
-          .then(response => response.json())
-          .then(json => {
-            this.showings = this.showings.filter((showing) => {
-              return showing.id !== showing_id
-            })
-          });
+      Authorization: `Token ${useCookie("token").value}`,
     },
-    getShowings: function (previous = false) {
+  })
+    .then((_json) => {
+      showings.value = showings.value.filter((showing) => {
+        return showing.id !== showing_id;
+      });
+    })
+    .catch((err) => console.log(err));
+};
+
+const getShowings = function (previous = false) {
   let config = useRuntimeConfig();
   let params = "";
   if (previous) params = "?previous=true";
 
-      return fetch(`${config.public.apiURL}/schedules/1${params}`, {
+  const { data, error } = useFetch<Schedule>(
+    `${config.public.apiURL}/schedules/1${params}`,
+    {
       method: "GET",
-        headers: {"Content-type": "application/json"}
-      })
-          .then(response => response.json())
-          .then(showings => {
+      headers: {
+        "Content-type": "application/json",
+        Authorization: `Token ${useCookie("token").value}`,
+      },
+    },
+  );
 
-            if (previous) {
-              this.got_previous = true;
-              this.previous_showings = showings;
+  if (error.value) {
+    if (error.value.statusCode === 401) {
+      alert("Unauthorized");
+    }
   } else {
-              this.showings = showings
-            }
-          })
-          .catch(err => console.log(err));
+    if (!data.value) {
+      alert("No showings found for schedule.");
+    } else {
+      if (previous) {
+        got_previous.value = true;
+        previous_showings.value = data.value.showings;
+      } else {
+        showings.value = data.value.showings;
       }
     }
-}
+  }
+};
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>

src/types/showing.ts

@@ -1,8 +1,10 @@
 import type { Movie } from "~/types/movie";
 
 export type Showing = {
+  id: number;
   owner: number;
   public: boolean;
+  title: string;
   movie: Movie;
   showtime: string;
 };