added support for refreshing movie data

src/components/modal-content/ShowMovie.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="sm:m-5 p-10 movie-card neon-border">
     <div>
+      <LoadingIcon v-if="updating" />
       <h2 class="text-xl pb-3 text-center sm:text-left">
         {{ movie.title }} ({{ movie.year }})
       </h2>
@@ -18,6 +19,10 @@
             class="mt-5"
             @close-modal="$emit('close-modal')"
           />
+
+          <button class="my-10 btn p-2 rounded" @click="updateMovie">
+            Refresh movie
+          </button>
         </div>
       </div>
     </div>
@@ -27,10 +32,14 @@
 <script lang="ts" setup>
 import ScheduleMovie from "~/components/forms/ScheduleMovie.vue";
 
-const props = defineProps(["movie"]);
-const emits = defineEmits(["close-modal"]);
+const props = defineProps(["movie", "updating"]);
+const emits = defineEmits(["close-modal", "update-movie"]);
 const logged_in = ref(false);
 
+const updateMovie = function () {
+  emits("update-movie");
+};
+
 onMounted(() => {
   const token = useCookie("token").value;
   if (token) {

src/pages/lists/[id].vue

@@ -5,7 +5,9 @@
       <ShowMovie
         v-if="modal_movie"
         :movie="modal_movie"
+        :updating="updating"
         @close-modal="closeModal"
+        @update-movie="updateMovie(modal_movie)"
       ></ShowMovie>
     </Modal>
     <h2 class="text-xl font-bold pb-5">{{ list.name }}</h2>
@@ -38,7 +40,7 @@
     >
       <li
         v-for="movie in filtered_movies"
-        :key="movie.id"
+        :key="movie.poster"
         class="rounded movie-card neon-border"
       >
         <!-- POSTER -->
@@ -71,6 +73,7 @@ import type { MovieList } from "~/types/movielist";
 import type { Movie } from "~/types/movie";
 import Modal from "~/components/Modal.vue";
 import { useCookie } from "#app";
+import { $fetch } from "ofetch";
 
 const list_id = ref(0);
 const list = defineModel<MovieList>("movie_list", { default: [] });
@@ -168,6 +171,38 @@ const removeMovie = async function (movie_id: string) {
   }
 };
 
+const updating = ref(false);
+const updateMovie = async function (movie: Movie) {
+  let config = useRuntimeConfig();
+  updating.value = true;
+
+  $fetch<Movie>(`${config.public.apiURL}/movies/${movie.id}/`, {
+    method: "PUT",
+    headers: {
+      "Content-type": "application/json",
+      Authorization: `Token ${useCookie("token").value}`,
+    },
+    body: JSON.stringify(movie),
+  })
+    .then((data) => {
+      modal_movie.value = data || [];
+      movies.value = movies.value.map((movie) => {
+        return movie.id === data.id ? data : movie;
+      });
+      filtered_movies.value = movies.value;
+      updating.value = false;
+    })
+    .catch((err) => {
+      if (err.statusCode === 401) {
+        navigateTo("/");
+      }
+      if (err.statusCode === 404) {
+        alert("Unable to update movie");
+      }
+      updating.value = false;
+    });
+};
+
 const filterMovies = function () {
   if (!movie_query) {
     filtered_movies.value = movies.value;