fixed errors in admin

src/components/admin/lists.vue

@@ -3,90 +3,98 @@
     <div id="add-list-container" class="my-5">
       <label class="text-md font-bold" for="add-list">Add List</label>
       <div class="flex">
-        <input id="add-list" class="p-1 rounded-l" placeholder="List Title" type="text" v-on:keyup.enter="addList"/>
+        <input
+          id="add-list"
+          class="p-1 rounded-l"
+          placeholder="List Title"
+          type="text"
+          v-on:keyup.enter="addList"
+        />
 
         <button class="btn p-1 rounded-r" @click="addList">Add</button>
       </div>
     </div>
     <ul class="grid grid-rows gap-2">
       <li v-for="list in lists" class="movie-card p-3 neon-border">
-        <span class="mb-2">{{ list.name }}</span> <br/>
-        <button class="btn mt-2 p-1 rounded" type="button" @click="deleteList(list.id)">Delete</button>
+        <span class="mb-2">{{ list.name }}</span> <br />
+        <button
+          class="btn mt-2 p-1 rounded"
+          type="button"
+          @click="deleteList(list.id)"
+        >
+          Delete
+        </button>
       </li>
     </ul>
   </div>
 </template>
 
-<script>
-export default {
-  name: "lists",
-  data: () => ({
-    lists: [],
-  }),
-  methods: {
-    addList: async function () {
-      let config = useRuntimeConfig();
-      const list_name = document.getElementById("add-list").value;
-      if (!list_name) {
-        alert("Please add list name.");
-        return
-      }
-      let list_json = await fetch(`${config.public.apiURL}/lists`, {
-        method: "POST",
-        body: JSON.stringify({
-          name: list_name,
-          public: false
-        }),
-        headers: {
-          "Content-type": "application/json",
-          "token": useCookie("token").value,
-        }
-      })
-          .then(response => response.json())
-          .then(json => json)
-          .catch(err => console.log(err))
+<script lang="ts" setup>
+import type { MovieList } from "~/types/movielist";
 
-      list_json.list.movie_count = 0;
-      this.lists.push(list_json.list);
-    },
-    deleteList: function (list_id) {
-      const config = useRuntimeConfig();
-      let confirmed = confirm("Delete list?");
+const lists = defineModel<MovieList[]>("lists", { default: [] });
 
-      if (!confirmed) {
-        return false;
-      }
+const addList = async function () {
+  let config = useRuntimeConfig();
+  let list_name = (document.getElementById("add-list") as HTMLInputElement)
+    .value;
 
-      return fetch(`${config.public.apiURL}/lists/${list_id}`, {
-        credentials: "include",
-        method: "DELETE",
-        headers: {
-          "Content-type": "application/json",
-          "token": useCookie("token").value,
-        }
-      })
-          .then(response => response.json())
-          .then(_json => {
-            window.location.reload();
-          });
-    },
-    getLists: function () {
-      const config = useRuntimeConfig();
-      fetch(`${config.public.apiURL}/lists`, {
-        method: "GET",
-        headers: {"Content-type": "application/json"}
-      })
-          .then(response => response.json())
-          .then(json => this.lists = json)
-          .catch(err => console.log(err))
-    },
-  },
-  mounted() {
-    this.getLists();
+  if (!list_name) {
+    alert("Please add list name.");
+    return;
   }
-}
+  await $fetch<MovieList>(`${config.public.apiURL}/lists/`, {
+    method: "POST",
+    body: JSON.stringify({
+      name: list_name,
+      public: false,
+    }),
+    headers: {
+      "Content-type": "application/json",
+      Authorization: `Token ${useCookie("token").value}`,
+    },
+  })
+    .then((data) => {
+      lists.value = [...lists.value, data];
+      (document.getElementById("add-list") as HTMLInputElement).value = "";
+    })
+    .catch((err) => console.log(err));
+};
+const deleteList = function (list_id: number) {
+  const config = useRuntimeConfig();
+  let confirmed = confirm("Delete list?");
+
+  if (!confirmed) {
+    return false;
+  }
+
+  $fetch(`${config.public.apiURL}/lists/${list_id}/`, {
+    method: "DELETE",
+    headers: {
+      "Content-type": "application/json",
+      Authorization: `Token ${useCookie("token").value}`,
+    },
+  })
+    .then(() => {
+      lists.value = lists.value.filter((list) => {
+        return list.id !== list_id;
+      });
+    })
+    .catch((err) => console.log(err));
+};
+const getLists = function () {
+  const config = useRuntimeConfig();
+  $fetch<MovieList[]>(`${config.public.apiURL}/lists`, {
+    method: "GET",
+    headers: { "Content-type": "application/json" },
+  })
+    .then((data) => (lists.value = data))
+    .catch((err) => console.log(err));
+};
+
+onMounted(() => {
+  getLists();
+});
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>

src/components/admin/showings.vue

@@ -26,6 +26,7 @@
 import type { Showing } from "~/types/showing";
 import { useCookie } from "#app";
 import type { Schedule } from "~/types/schedule";
+import { $fetch } from "ofetch";
 
 const showings = defineModel<Showing[]>("showings", { default: [] });
 const previous_showings = defineModel<Showing[]>("previous_showings", {
@@ -86,33 +87,27 @@ const getShowings = function (previous = false) {
   let params = "";
   if (previous) params = "?previous=true";
 
-  const { data, error } = useFetch<Schedule>(
-    `${config.public.apiURL}/schedules/1${params}`,
-    {
-      method: "GET",
-      headers: {
-        "Content-type": "application/json",
-        Authorization: `Token ${useCookie("token").value}`,
-      },
+  $fetch<Schedule>(`${config.public.apiURL}/schedules/1${params}`, {
+    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 showings found for schedule.");
-    } else {
+  })
+    .then((data) => {
       if (previous) {
         got_previous.value = true;
-        previous_showings.value = data.value.showings;
+        previous_showings.value = data.showings;
       } else {
-        showings.value = data.value.showings;
+        showings.value = data.showings;
       }
-    }
-  }
+    })
+    .catch((err) => {
+      if (err.statusCode === 401) {
+        useCookie("token").value = null;
+        navigateTo("/");
+      }
+    });
 };
 </script>