Merge pull request 'usefetch-to-fetch' (#4) from usefetch-to-fetch into main

Reviewed-on: #4

.idea/workspace.xml

@@ -6,9 +6,12 @@
   <component name="ChangeListManager">
     <list default="true" id="5e320804-68c9-4504-97d5-d421de3438b2" name="Changes" comment="">
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/components/admin/search.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/admin/search.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/admin/lists.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/admin/lists.vue" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/components/admin/showings.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/admin/showings.vue" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/types/showing.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/types/showing.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/admin/index.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/admin/index.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/lists/[id].vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/lists/[id].vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/lists/index.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/lists/index.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/schedule/index.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/schedule/index.vue" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -57,31 +60,31 @@
     <option name="hideEmptyMiddlePackages" value="true" />
     <option name="showLibraryContents" value="true" />
   </component>
-  <component name="PropertiesComponent">{
+  <component name="PropertiesComponent"><![CDATA[{
-  &quot;keyToString&quot;: {
+  "keyToString": {
-    &quot;RunOnceActivity.OpenProjectViewOnStart&quot;: &quot;true&quot;,
+    "RunOnceActivity.OpenProjectViewOnStart": "true",
-    &quot;RunOnceActivity.ShowReadmeOnStart&quot;: &quot;true&quot;,
+    "RunOnceActivity.ShowReadmeOnStart": "true",
-    &quot;RunOnceActivity.git.unshallow&quot;: &quot;true&quot;,
+    "RunOnceActivity.git.unshallow": "true",
-    &quot;WebServerToolWindowFactoryState&quot;: &quot;false&quot;,
+    "WebServerToolWindowFactoryState": "false",
-    &quot;code.cleanup.on.save&quot;: &quot;true&quot;,
+    "code.cleanup.on.save": "true",
-    &quot;git-widget-placeholder&quot;: &quot;showings-updates&quot;,
+    "git-widget-placeholder": "usefetch-to-fetch",
-    &quot;last_opened_file_path&quot;: &quot;/home/tiradoe/Projects/movie-night/web/src/types&quot;,
+    "last_opened_file_path": "/home/tiradoe/Projects/movie-night/web/src/types",
-    &quot;list.type.of.created.stylesheet&quot;: &quot;CSS&quot;,
+    "list.type.of.created.stylesheet": "CSS",
-    &quot;node.js.detected.package.eslint&quot;: &quot;true&quot;,
+    "node.js.detected.package.eslint": "true",
-    &quot;node.js.detected.package.standard&quot;: &quot;true&quot;,
+    "node.js.detected.package.standard": "true",
-    &quot;node.js.detected.package.tslint&quot;: &quot;true&quot;,
+    "node.js.detected.package.tslint": "true",
-    &quot;node.js.selected.package.eslint&quot;: &quot;(autodetect)&quot;,
+    "node.js.selected.package.eslint": "(autodetect)",
-    &quot;node.js.selected.package.standard&quot;: &quot;&quot;,
+    "node.js.selected.package.standard": "",
-    &quot;node.js.selected.package.tslint&quot;: &quot;(autodetect)&quot;,
+    "node.js.selected.package.tslint": "(autodetect)",
-    &quot;nodejs_package_manager_path&quot;: &quot;npm&quot;,
+    "nodejs_package_manager_path": "npm",
-    &quot;npm.dev.executor&quot;: &quot;Run&quot;,
+    "npm.dev.executor": "Run",
-    &quot;prettierjs.PrettierConfiguration.Package&quot;: &quot;/home/tiradoe/Projects/movie-night/web/src/node_modules/prettier&quot;,
+    "prettierjs.PrettierConfiguration.Package": "/home/tiradoe/Projects/movie-night/web/src/node_modules/prettier",
-    &quot;rearrange.code.on.save&quot;: &quot;true&quot;,
+    "rearrange.code.on.save": "true",
-    &quot;settings.editor.selected.configurable&quot;: &quot;settings.vue&quot;,
+    "settings.editor.selected.configurable": "settings.vue",
-    &quot;ts.external.directory.path&quot;: &quot;/home/tiradoe/Projects/movie-night/web/src/node_modules/typescript/lib&quot;,
+    "ts.external.directory.path": "/home/tiradoe/Projects/movie-night/web/src/node_modules/typescript/lib",
-    &quot;vue.rearranger.settings.migration&quot;: &quot;true&quot;
+    "vue.rearranger.settings.migration": "true"
   }
-}</component>
+}]]></component>
   <component name="RecentsManager">
     <key name="CopyFile.RECENT_KEYS">
       <recent name="$PROJECT_DIR$/src/types" />

src/components/admin/lists.vue

@@ -3,53 +3,64 @@
     <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/>
+        <span class="mb-2">{{ list.name }}</span> <br />
-        <button class="btn mt-2 p-1 rounded" type="button" @click="deleteList(list.id)">Delete</button>
+        <button
+          class="btn mt-2 p-1 rounded"
+          type="button"
+          @click="deleteList(list.id)"
+        >
+          Delete
+        </button>
       </li>
     </ul>
   </div>
 </template>
 
-<script>
+<script lang="ts" setup>
-export default {
+import type { MovieList } from "~/types/movielist";
-  name: "lists",
+
-  data: () => ({
+const lists = defineModel<MovieList[]>("lists", { default: [] });
-    lists: [],
+
-  }),
+const addList = async function () {
-  methods: {
-    addList: async function () {
   let config = useRuntimeConfig();
-      const list_name = document.getElementById("add-list").value;
+  let list_name = (document.getElementById("add-list") as HTMLInputElement)
+    .value;
+
   if (!list_name) {
     alert("Please add list name.");
-        return
+    return;
   }
-      let list_json = await fetch(`${config.public.apiURL}/lists`, {
+  await $fetch<MovieList>(`${config.public.apiURL}/lists/`, {
     method: "POST",
     body: JSON.stringify({
       name: list_name,
-          public: false
+      public: false,
     }),
     headers: {
       "Content-type": "application/json",
-          "token": useCookie("token").value,
+      Authorization: `Token ${useCookie("token").value}`,
-        }
-      })
-          .then(response => response.json())
-          .then(json => json)
-          .catch(err => console.log(err))
-
-      list_json.list.movie_count = 0;
-      this.lists.push(list_json.list);
     },
-    deleteList: function (list_id) {
+  })
+    .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?");
 
@@ -57,36 +68,33 @@ export default {
     return false;
   }
 
-      return fetch(`${config.public.apiURL}/lists/${list_id}`, {
+  $fetch(`${config.public.apiURL}/lists/${list_id}/`, {
-        credentials: "include",
     method: "DELETE",
     headers: {
       "Content-type": "application/json",
-          "token": useCookie("token").value,
+      Authorization: `Token ${useCookie("token").value}`,
-        }
+    },
   })
-          .then(response => response.json())
+    .then(() => {
-          .then(_json => {
+      lists.value = lists.value.filter((list) => {
-            window.location.reload();
+        return list.id !== list_id;
       });
-    },
-    getLists: function () {
-      const config = useRuntimeConfig();
-      fetch(`${config.public.apiURL}/lists`, {
-        method: "GET",
-        headers: {"Content-type": "application/json"}
     })
-          .then(response => response.json())
+    .catch((err) => console.log(err));
-          .then(json => this.lists = json)
+};
-          .catch(err => console.log(err))
+const getLists = function () {
-    },
+  const config = useRuntimeConfig();
-  },
+  $fetch<MovieList[]>(`${config.public.apiURL}/lists`, {
-  mounted() {
+    method: "GET",
-    this.getLists();
+    headers: { "Content-type": "application/json" },
-  }
+  })
-}
+    .then((data) => (lists.value = data))
+    .catch((err) => console.log(err));
+};
+
+onMounted(() => {
+  getLists();
+});
 </script>
 
-<style scoped>
+<style scoped></style>
-
-</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>(
+  $fetch<Schedule>(`${config.public.apiURL}/schedules/1${params}`, {
-    `${config.public.apiURL}/schedules/1${params}`,
-    {
     method: "GET",
     headers: {
       "Content-type": "application/json",
       Authorization: `Token ${useCookie("token").value}`,
     },
-    },
+  })
-  );
+    .then((data) => {
-
-  if (error.value) {
-    if (error.value.statusCode === 401) {
-      alert("Unauthorized");
-    }
-  } else {
-    if (!data.value) {
-      alert("No showings found for schedule.");
-    } else {
       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>
 

src/pages/admin/index.vue

@@ -44,7 +44,7 @@
     </div>
 
     <div id="lists" class="hidden">
-      <lists></lists>
+      <lists />
     </div>
   </div>
 </template>
@@ -54,15 +54,14 @@ 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";
 
-const lists = defineModel<MovieList>("movie-lists", { default: [] });
 const modal_movie = defineModel<Movie>("#movie-modal");
 
 const movie_modal = ref<InstanceType<typeof Modal> | null>(null);
+const current_view = ref("search");
 
 const closeModal = function () {
   movie_modal?.value?.toggleModal();
@@ -72,6 +71,7 @@ const showModal = function (movie: Movie) {
   movie_modal?.value?.toggleModal();
 };
 const toggleDisplay = function (element_id: string) {
+  if (element_id === current_view.value) return;
   let tabs = ["search", "showings", "lists"];
 
   tabs.forEach((value) => {
@@ -80,6 +80,7 @@ const toggleDisplay = function (element_id: string) {
       document
         .getElementById(element_id + "-tab")
         ?.classList.toggle("underline");
+      current_view.value = element_id;
     } else if (!document.getElementById(value)?.classList.contains("hidden")) {
       document.getElementById(value)?.classList.toggle("hidden");
       document.getElementById(value + "-tab")?.classList.toggle("underline");

src/pages/lists/[id].vue

@@ -53,7 +53,7 @@
           <span
             v-if="logged_in"
             class="text-center hover-pointer"
-            @click="removeMovie(movie.id)"
+            @click="removeMovie(movie.imdb_id)"
           >
             X
           </span>
@@ -83,35 +83,27 @@ const hide_scheduled = ref(false);
 
 const getList = async function (list_id: number) {
   let config = useRuntimeConfig();
-  const { data, error } = await useFetch<MovieList>(
+  $fetch<MovieList>(`${config.public.apiURL}/lists/${list_id}`, {
-    `${config.public.apiURL}/lists/${list_id}`,
-    {
     method: "GET",
     headers: {
       "Content-type": "application/json",
       Authorization: `Token ${useCookie("token").value}`,
     },
-    },
+  })
-  );
+    .then((data) => {
-
+      list.value = data;
-  if (error.value) {
+      movies.value = data?.movies || [];
-    if (error.value.statusCode === 401) {
+      filtered_movies.value = movies.value;
+    })
+    .catch((err) => {
+      if (err.statusCode === 401) {
         navigateTo("/");
       }
-    if (error.value.statusCode === 404) {
+      if (err.statusCode === 404) {
         alert("List not found");
         navigateTo("/lists");
       }
-  } else {
+    });
-    if (!data.value) {
-      alert("List not found");
-      navigateTo("/lists");
-    } else {
-      list.value = data.value;
-      movies.value = data.value?.movies || [];
-      filtered_movies.value = movies.value;
-    }
-  }
 };
 
 const hideScheduled = function () {
@@ -127,7 +119,7 @@ const hideScheduled = function () {
   }
 };
 
-const removeMovie = async function (movie_id: number) {
+const removeMovie = async function (movie_id: string) {
   let config = useRuntimeConfig();
   let confirmed = confirm("Remove movie from list?");
 

src/pages/lists/index.vue

@@ -31,21 +31,19 @@ const updateLists = async function () {
     headers["Authorization"] = `Token ${useCookie("token").value}`;
   }
 
-  const { data, error } = await useFetch<MovieList[]>(
+  await $fetch<MovieList[]>(`${config.public.apiURL}/lists`, {
-    `${config.public.apiURL}/lists`,
-    {
     method: "GET",
     headers: headers,
-    },
+  })
-  );
+    .then((data) => {
-
+      lists.value = data || [];
-  if (error.value) {
+    })
-    if (error.value.statusCode === 401) {
+    .catch((err) => {
+      if (err.statusCode === 401) {
+        useCookie("token").value = null;
         navigateTo("/");
       }
-  } else {
+    });
-    lists.value = data.value || [];
-  }
 };
 
 onMounted(() => {

src/pages/schedule/index.vue

@@ -61,6 +61,8 @@
 <script lang="ts" setup>
 import type { Showing } from "~/types/showing";
 import type { Schedule } from "~/types/schedule";
+import { $fetch } from "ofetch";
+import { useCookie } from "#app";
 
 const schedule = defineModel<Schedule>("schedule");
 const past_showings = defineModel<Showing[]>("past_showings", {
@@ -100,39 +102,33 @@ const getSchedule = async function (previous = false) {
   let params = "";
   if (previous) params = "?past_showings=true";
 
-  const { data, error } = await useFetch<Schedule>(
+  await $fetch(`${config.public.apiURL}/schedules/1${params}`, {
-    `${config.public.apiURL}/schedules/1${params}`,
-    {
     method: "GET",
     headers: {
       Accept: "application/json",
       "Content-type": "application/json",
       Authorization: `Token ${useCookie("token").value}`,
     },
-    },
+  })
-  );
+    .then((data) => {
-
-  if (error.value) {
-    if (error.value.statusCode === 401) {
-      navigateTo("/");
-    }
-    if (error.value.statusCode === 404) {
-      alert("Schedule not found");
-      navigateTo("/");
-    }
-  } else {
-    if (!data.value) {
-      alert("Schedule not found");
-      navigateTo("/");
-    } else {
       if (previous) {
-        past_showings.value = data.value.past_showings;
+        past_showings.value = data.past_showings;
       } else {
-        schedule.value = data.value;
+        schedule.value = data;
       }
       document.getElementById("loader")?.classList.toggle("hidden");
+    })
+    .catch((err) => {
+      switch (err.statusCode) {
+        case 401:
+          useCookie("token").value = null;
+          navigateTo("/");
+          break;
+        case 404:
+          alert("Unable to find schedule");
+          break;
       }
-  }
+    });
 
   return schedule;
 };