From a58c1eeab91524e2fcbffaa2e0b93a0a202a01b3 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Sat, 8 Jun 2024 17:48:32 +0200
Subject: [PATCH] Added request cancel on create

This seems to not be always effective on really low connections, as the cancel request doesn't seem to be instantanneous.
---
 assets/main.css                          | 53 ++++++++++++++----------
 components/calendar/form/CreateEvent.vue | 22 ++++++++--
 stores/EventStore.ts                     | 30 ++++++++++++--
 3 files changed, 78 insertions(+), 27 deletions(-)

diff --git a/assets/main.css b/assets/main.css
index 71f25ec..219337f 100644
--- a/assets/main.css
+++ b/assets/main.css
@@ -5,64 +5,64 @@
 :root {
     --background: 0 0% 100%;
     --foreground: 222.2 84% 4.9%;
- 
+
     --muted: 210 40% 96.1%;
     --muted-foreground: 215.4 16.3% 46.9%;
- 
+
     --popover: 0 0% 100%;
     --popover-foreground: 222.2 84% 4.9%;
- 
+
     --card: 0 0% 100%;
     --card-foreground: 222.2 84% 4.9%;
- 
+
     --border: 214.3 31.8% 91.4%;
     --input: 214.3 31.8% 91.4%;
- 
+
     --primary: 222.2 47.4% 11.2%;
     --primary-foreground: 210 40% 98%;
- 
+
     --secondary: 210 40% 96.1%;
     --secondary-foreground: 222.2 47.4% 11.2%;
- 
+
     --accent: 210 40% 96.1%;
     --accent-foreground: 222.2 47.4% 11.2%;
- 
+
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 210 40% 98%;
- 
+
     --ring: 222.2 84% 4.9%;
- 
+
     --radius: 0.5rem;
   }
- 
+
   :root.dark {
     --background: 222.2 84% 4.9%;
     --foreground: 210 40% 98%;
- 
+
     --muted: 217.2 32.6% 17.5%;
     --muted-foreground: 215 20.2% 65.1%;
- 
+
     --popover: 222.2 84% 4.9%;
     --popover-foreground: 210 40% 98%;
- 
+
     --card: 222.2 84% 4.9%;
     --card-foreground: 210 40% 98%;
- 
+
     --border: 217.2 32.6% 17.5%;
     --input: 217.2 32.6% 17.5%;
- 
+
     --primary: 210 40% 98%;
     --primary-foreground: 222.2 47.4% 11.2%;
- 
+
     --secondary: 217.2 32.6% 17.5%;
     --secondary-foreground: 210 40% 98%;
- 
+
     --accent: 217.2 32.6% 17.5%;
     --accent-foreground: 210 40% 98%;
- 
+
     --destructive: 0 62.8% 30.6%;
     --destructive-foreground: 210 40% 98%;
- 
+
     --ring: 212.7 26.8% 83.9%;
 }
 
@@ -73,4 +73,15 @@
   body {
     @apply bg-background text-foreground;
   }
-}
\ No newline at end of file
+}
+
+.fade-cancel-enter-active,
+.fade-cancel-leave-active {
+  transition: all .5s ease 1s;
+}
+
+.fade-cancel-enter-from,
+.fade-cancel-leave-to {
+  opacity: 0;
+  visibility: hidden;
+}
diff --git a/components/calendar/form/CreateEvent.vue b/components/calendar/form/CreateEvent.vue
index 32e5284..71c9483 100644
--- a/components/calendar/form/CreateEvent.vue
+++ b/components/calendar/form/CreateEvent.vue
@@ -4,7 +4,7 @@ import type { RPGDate } from '~/models/Date';
 import { PhAlarm, PhCircleNotch, PhMapPinArea } from '@phosphor-icons/vue'
 
 const { eventSkeleton } = storeToRefs(useCalendarEvents())
-const { resetSkeleton, submitSkeleton } = useCalendarEvents()
+const { resetSkeleton, submitSkeleton, cancelLatestRequest } = useCalendarEvents()
 const popoverOpen = ref(false)
 const isLoading = ref(false)
 
@@ -60,6 +60,14 @@ function handleClosing(e: Event) {
     e.preventDefault()
   }
 }
+
+/**
+ * Click on the cancel button
+ */
+function handleCancel() {
+  cancelLatestRequest()
+  isLoading.value = false
+}
 </script>
 
 <template>
@@ -143,9 +151,17 @@ function handleClosing(e: Event) {
             </span>
           </div>
 
-          <div class="text-right">
+          <div class="flex gap-2 justify-end">
+            <Transition name="fade-cancel">
+              <UiButton v-if="isLoading" type="button" size="sm" variant="destructive" @click.prevent="handleCancel">
+                Annuler
+              </UiButton>
+            </Transition>
+
             <UiButton size="sm" :disabled="isLoading">
-              <PhCircleNotch v-if="isLoading" size="20" class="opacity-50 animate-spin"/>
+              <Transition name="fade-cancel">
+                <PhCircleNotch v-if="isLoading" size="20" class="opacity-50 animate-spin"/>
+              </Transition>
 
               Sauvegarder
             </UiButton>
diff --git a/stores/EventStore.ts b/stores/EventStore.ts
index 454bd24..47c9785 100644
--- a/stores/EventStore.ts
+++ b/stores/EventStore.ts
@@ -187,6 +187,8 @@ export const useCalendarEvents = defineStore('calendar-events', () => {
    * EVENT CREATION FUNCTIONS
    */
   const lastActiveEvent = ref<CalendarEvent | null>()
+  let abortController: AbortController | null = null
+
   /**
    * Dummy event to hold creation data
    */
@@ -205,31 +207,52 @@ export const useCalendarEvents = defineStore('calendar-events', () => {
    * We assume it's been sanitized by the caller
    */
   async function submitSkeleton() {
+    abortController = new AbortController()
+
     try {
-      const res = await $fetch('/api/calendars/events/create', { method: 'POST', body: { event : eventSkeleton.value, calendarId: calendarId.value }})
+      const res = await $fetch('/api/calendars/events/create', { method: 'POST', body: { event : eventSkeleton.value, calendarId: calendarId.value }, signal: abortController.signal })
+
       baseEvents.value.push(res)
     } catch (err) {
       console.log(err)
+    } finally {
+      abortController = null
+    }
+  }
+
+  function cancelLatestRequest() {
+    if (abortController) {
+      abortController.abort()
     }
   }
 
   async function updateEventFromSkeleton() {
+    abortController = new AbortController()
+
     try {
-      const res = await $fetch(`/api/calendars/events/${eventSkeleton.value.id}`, { method: 'PATCH', body: { event : eventSkeleton.value, calendarId: calendarId.value }})
+      const res = await $fetch(`/api/calendars/events/${eventSkeleton.value.id}`, { method: 'PATCH', body: { event : eventSkeleton.value, calendarId: calendarId.value }, signal: abortController.signal })
+
       const eventIndex = baseEvents.value.findIndex(e => e.id === eventSkeleton.value.id)
       baseEvents.value[eventIndex] = res
     } catch (err) {
       console.log(err)
+    } finally {
+      abortController = null
     }
   }
 
   async function deleteEventFromSkeleton() {
+    abortController = new AbortController()
+
     try {
-      await $fetch(`/api/calendars/events/${eventSkeleton.value.id}`, { method: 'DELETE' })
+      await $fetch(`/api/calendars/events/${eventSkeleton.value.id}`, { method: 'DELETE', signal: abortController.signal })
+
       const eventIndex = baseEvents.value.findIndex(e => e.id === eventSkeleton.value.id)
       baseEvents.value.splice(eventIndex, 1)
     } catch (err) {
       console.log(err)
+    } finally {
+      abortController = null
     }
   }
 
@@ -239,6 +262,7 @@ export const useCalendarEvents = defineStore('calendar-events', () => {
     currentEvents,
     getRelativeEventFromDate,
     getRelativeEventFromEvent,
+    cancelLatestRequest,
     eventSkeleton,
     resetSkeleton,
     submitSkeleton,