From 889c1a28bf2065056e1af6a237bfb3a6f3908cd4 Mon Sep 17 00:00:00 2001
From: Ethan Chew <chew_ming_hong_ethan@s2019.ssts.edu.sg>
Date: Thu, 28 Sep 2023 10:37:03 +0800
Subject: [PATCH] fix: use useMutation

---
 components/admin/home/create-event-popup.vue | 65 +++++++++-----------
 components/admin/home/delete-event-popup.vue | 32 ++++------
 components/admin/home/events-table.vue       | 14 ++---
 components/admin/home/update-event-popup.vue | 17 +----
 4 files changed, 51 insertions(+), 77 deletions(-)

diff --git a/components/admin/home/create-event-popup.vue b/components/admin/home/create-event-popup.vue
index 64f84c0e..83f5918e 100644
--- a/components/admin/home/create-event-popup.vue
+++ b/components/admin/home/create-event-popup.vue
@@ -1,5 +1,8 @@
 <script setup lang="ts">
 import { f7Button, f7Link, f7List, f7ListInput, f7NavRight, f7Navbar, f7Page, f7Popup } from 'framework7-vue'
+import { useMutation } from '@tanstack/vue-query'
+import type { Event } from '~/shared/types'
+import { ref } from 'vue'
 
 const event = reactive({
   name: '',
@@ -10,38 +13,28 @@ const event = reactive({
   endDateTime: '',
 })
 
-const state = reactive({
-  pending: false,
-  isCreated: false,
-  isError: false,
-  newEventId: '',
+const mutation = useMutation({
+  mutationFn: (newEvent: Omit<Event, 'id'>) => $api("/api/event", {
+    method: "POST",
+    body: {
+      ...newEvent
+    }
+  })
 })
 
+const newEventId = ref("")
+
 async function createEvent() {
-  state.pending = true
-  try {
-    event.startDateTime = new Date(event.startDateTime).toISOString()
-    event.endDateTime = new Date(event.endDateTime).toISOString()
-    const res = await $api('/api/event/', {
-      method: 'POST',
-      body: {
-        ...event,
-      },
-    })
+  event.startDateTime = new Date(event.startDateTime).toISOString()
+  event.endDateTime = new Date(event.endDateTime).toISOString()
+  const res = await mutation.mutateAsync(event)
 
-    state.newEventId = res.id
-    state.isCreated = true
-  }
-  catch (err) {
-    state.isError = true
-  }
+  newEventId.value = res.id
 }
 
 function resetRefs() {
-  state.pending = false
-  state.isCreated = false
-  state.isError = false
-  state.newEventId = ''
+  newEventId.value = ''
+  mutation.reset
 }
 </script>
 
@@ -57,24 +50,24 @@ function resetRefs() {
       </f7Navbar>
       <f7Page>
         <f7List form @submit.prevent="createEvent">
-          <f7ListInput v-model:value="event.name" label="Name" placeholder="What is your event called?" required :disabled="state.isCreated" />
-          <f7ListInput v-model:value="event.description" label="Description" placeholder="Short description of your event" required :disabled="state.isCreated" />
-          <f7ListInput v-model:value="event.location" label="Location" placeholder="Where is it held?" required :disabled="state.isCreated" />
-          <f7ListInput v-model:value="event.badgeImage" type="url" label="Image URL" placeholder="https://example.com" required validate :disabled="state.isCreated" />
-          <f7ListInput v-model:value="event.startDateTime" type="datetime-local" label="Start Date and Time" placeholder="When does your event start" required :disabled="state.isCreated" />
-          <f7ListInput v-model:value="event.endDateTime" type="datetime-local" label="End Date and Time" placeholder="When does your event end" required :disabled="state.isCreated" />
+          <f7ListInput v-model:value="event.name" label="Name" placeholder="What is your event called?" required :disabled="mutation.isSuccess.value" />
+          <f7ListInput v-model:value="event.description" label="Description" placeholder="Short description of your event" required :disabled="mutation.isSuccess.value" />
+          <f7ListInput v-model:value="event.location" label="Location" placeholder="Where is it held?" required :disabled="mutation.isSuccess.value" />
+          <f7ListInput v-model:value="event.badgeImage" type="url" label="Image URL" placeholder="https://example.com" required validate :disabled="mutation.isSuccess.value" />
+          <f7ListInput v-model:value="event.startDateTime" type="datetime-local" label="Start Date and Time" placeholder="When does your event start" required :disabled="mutation.isSuccess.value" />
+          <f7ListInput v-model:value="event.endDateTime" type="datetime-local" label="End Date and Time" placeholder="When does your event end" required :disabled="mutation.isSuccess.value" />
 
           <f7List inset>
-            <f7Button v-if="!state.isCreated" fill type="submit" preloader :loading="state.pending" :disabled="state.pending">
+            <f7Button v-if="!mutation.isSuccess.value" fill type="submit" preloader :loading="mutation.isLoading.value" :disabled="mutation.isLoading.value">
               Done
             </f7Button>
-            <f7Button v-if="state.isCreated || state.isError" fill popup-close @click="resetRefs">
+            <f7Button v-if="mutation.isSuccess.value || mutation.isError.value" fill popup-close @click="resetRefs">
               Close
             </f7Button>
-            <p v-if="state.isCreated" class="text-center">
-              Successfully created event with ID <b>{{ state.newEventId }}</b>! You may now close the popup.
+            <p v-if="mutation.isSuccess.value" class="text-center">
+              Successfully created event with ID <b>{{ newEventId }}</b>! You may now close the popup.
             </p>
-            <p v-if="state.isError" class="text-center">
+            <p v-if="mutation.isError.value" class="text-center">
               Something went wrong... Please try again later.
             </p>
           </f7List>
diff --git a/components/admin/home/delete-event-popup.vue b/components/admin/home/delete-event-popup.vue
index fd942166..7623ac2d 100644
--- a/components/admin/home/delete-event-popup.vue
+++ b/components/admin/home/delete-event-popup.vue
@@ -1,36 +1,28 @@
 <script setup lang="ts">
 import { f7Block, f7BlockTitle, f7Button, f7Link, f7List, f7ListInput, f7NavRight, f7Navbar, f7Page, f7Popup } from 'framework7-vue'
+import { useMutation } from '@tanstack/vue-query'
 
 const props = defineProps(['event'])
 
 const state = reactive({
-  pending: false,
   verification: '',
   msg: '',
-  isDeleted: false,
 })
 
-async function deleteEvent() {
-  state.pending = true
-
-  try {
-    await $api(`/api/event/${props.event.id}`, {
+const mutation = useMutation({
+  mutationFn: (id) => $api(`/api/event/${id}`, {
       method: 'DELETE',
-    })
-  }
-  catch (err) {
-    console.error(`Deleting Event (${props.event.name}) failed.`)
-  }
+  })
+})
 
-  state.pending = false
-  state.isDeleted = true
+async function deleteEvent() {
+  await mutation.mutateAsync(props.event.id)
 }
 
 function resetRefs() {
-  state.pending = false
   state.verification = ''
   state.msg = ''
-  state.isDeleted = false
+  mutation.reset
 }
 </script>
 
@@ -54,16 +46,16 @@ function resetRefs() {
           </p>
         </f7Block>
         <f7List form @submit.prevent="deleteEvent">
-          <f7ListInput v-model:value="state.verification" :label="`To verify, type the Event Name (${props.event.name}) in the field below:`" :placeholder="props.event.name" required validate :pattern="props.event.name" :disabled="state.isDeleted" />
+          <f7ListInput v-model:value="state.verification" :label="`To verify, type the Event Name (${props.event.name}) in the field below:`" :placeholder="props.event.name" required validate :pattern="props.event.name" :disabled="mutation.isSuccess.value" />
 
           <f7List inset>
-            <f7Button v-if="!state.isDeleted" fill type="submit" preloader :loading="state.pending" :disabled="state.pending">
+            <f7Button v-if="!mutation.isSuccess.value" fill type="submit" preloader :loading="mutation.isLoading.value" :disabled="mutation.isLoading.value">
               Continue
             </f7Button>
-            <f7Button v-if="state.isDeleted" fill popup-close @click="resetRefs">
+            <f7Button v-if="mutation.isSuccess.value" fill popup-close @click="resetRefs">
               Close
             </f7Button>
-            <p v-if="state.isDeleted" class="text-center">
+            <p v-if="mutation.isSuccess.value" class="text-center">
               Delete successful! You can close this popup now.
             </p>
           </f7List>
diff --git a/components/admin/home/events-table.vue b/components/admin/home/events-table.vue
index bf485a22..c864ac8e 100644
--- a/components/admin/home/events-table.vue
+++ b/components/admin/home/events-table.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import dayjs from 'dayjs'
-import { f7, f7Button, f7Card, f7CardContent, f7CardFooter, f7CardHeader, f7Chip } from 'framework7-vue'
+import { f7, f7Button, f7Card, f7CardContent, f7CardFooter, f7CardHeader, f7Chip, f7Icon } from 'framework7-vue'
 import { ref } from 'vue'
 import type { EventWithAttendees } from '~/shared/types'
 
@@ -30,7 +30,7 @@ function showDetails(event: EventWithAttendees) {
       <f7Card v-for="event in events" :key="event.id">
         <f7CardHeader>
           <div class="flex flex-col items-start space-y-4">
-            <f7Chip outline :text="`0 / ${event.attendees !== undefined ? event.attendees.length : ''}`" />
+            <f7Chip outline :text="`0 / ${event.attendees.length}`" />
             <span>
               {{ event.name }}
             </span>
@@ -40,10 +40,10 @@ function showDetails(event: EventWithAttendees) {
           {{ event.description }}
         </f7CardContent>
         <f7CardFooter>
-          <f7Button tonal @click="() => selectedEvent = event">
+          <f7Button tonal @click="selectedEvent = event">
             Open
           </f7Button>
-          <f7Button tonal color="red" class="popup-open" data-popup=".delete-event-popup" @click="() => selectedEvent = event">
+          <f7Button tonal color="red" class="popup-open" data-popup=".delete-event-popup" @click="selectedEvent = event">
             Delete
           </f7Button>
         </f7CardFooter>
@@ -59,7 +59,7 @@ function showDetails(event: EventWithAttendees) {
           <div />
           <div class="data-table-actions">
             <a class="button popup-open icon-only" data-popup=".create-event-popup">
-              <i class="icon f7-icons"> plus_circle </i>
+              <f7Icon icon="plus_circle"></f7Icon>
             </a>
           </div>
         </div>
@@ -96,10 +96,10 @@ function showDetails(event: EventWithAttendees) {
               </td>
               <td>
                 <div class="flex-inline space-x-3">
-                  <f7Button tonal class="popup-open" data-popup=".update-event-popup" @click="() => selectedEvent = event">
+                  <f7Button tonal class="popup-open" data-popup=".update-event-popup" @click="selectedEvent = event">
                     Update
                   </f7Button>
-                  <f7Button tonal color="red" class="popup-open" data-popup=".delete-event-popup" @click="() => selectedEvent = event">
+                  <f7Button tonal color="red" class="popup-open" data-popup=".delete-event-popup" @click="selectedEvent = event">
                     Delete
                   </f7Button>
                 </div>
diff --git a/components/admin/home/update-event-popup.vue b/components/admin/home/update-event-popup.vue
index 2042e4f7..84fc2387 100644
--- a/components/admin/home/update-event-popup.vue
+++ b/components/admin/home/update-event-popup.vue
@@ -1,27 +1,16 @@
 <script setup lang="ts">
+import dayjs from 'dayjs';
 import { f7Block, f7BlockTitle, f7Link, f7List, f7ListInput, f7NavRight, f7Navbar, f7Page, f7Popup } from 'framework7-vue'
 
 const props = defineProps(['event'])
 
-function epochToISO(epochTime: number) {
-  const date = new Date(epochTime * 1000)
-
-  const year = date.getFullYear()
-  const month = String(date.getMonth() + 1).padStart(2, '0')
-  const day = String(date.getDate()).padStart(2, '0')
-  const hours = String(date.getHours()).padStart(2, '0')
-  const minutes = String(date.getMinutes()).padStart(2, '0')
-
-  return `${year}-${month}-${day}T${hours}:${minutes}`
-}
-
 const updatedValues = reactive({
   name: props.event.name,
   description: props.event.description,
   location: props.event.location,
   badgeImage: props.event.badgeImage,
-  startDateTime: epochToISO(props.event.startDateTime),
-  endDateTime: epochToISO(props.event.endDateTime),
+  startDateTime:  dayjs(props.event.startDateTime * 1000).format("YYYY-MM-DDTHH:mm"),
+  endDateTime: dayjs(props.event.endDateTime * 1000).format("YYYY-MM-DDTHH:mm"),
 })
 
 // const state = reactive({