allow admins to delete bookings on front end (#552)

* implement deletion

* add loading indicator for deleting

client/src/components/composite/Admin/AdminBookingView/AdminBookingView.tsx

@@ -42,7 +42,7 @@ interface IAdminBookingView {
    * ]
    * ```
    */
-  rowOperations?: TableRowOperation[]
+  rowOperation?: [TableRowOperation]
 
   /**
    * used to fetch the data once the last page of the table has been reached
@@ -86,7 +86,7 @@ const AsyncWrappedAdminBookingCreationPopup = lazy(
  */
 export const AdminBookingView = ({
   data,
-  rowOperations,
+  rowOperation,
   dateRange,
   handleDateRangeChange,
   isUpdating
@@ -153,10 +153,10 @@ export const AdminBookingView = ({
             </Button>
           </span>
         </span>
-        <Table<BookingMemberColumnFormat, "multiple-operations">
+        <Table<BookingMemberColumnFormat, "single-operation">
           data={data || [defaultData]}
-          operationType="multiple-operations"
-          rowOperations={rowOperations}
+          operationType="single-operation"
+          rowOperations={rowOperation}
           // Make sure that this is smaller than the amount we fetch in the `AdminService` for better UX
           showPerPage={32}
           groupSameRows

client/src/components/composite/Admin/AdminBookingView/WrappedAdminBookingView.tsx

@@ -4,6 +4,8 @@ import { DateUtils } from "components/utils/DateUtils"
 import { AdminBookingViewContext } from "./AdminBookingViewContext"
 import { useContext, useMemo } from "react"
 import { Timestamp } from "firebase/firestore"
+import { TableRowOperation } from "components/generic/ReusableTable/TableUtils"
+import { useDeleteBookingMutation } from "services/Admin/AdminMutations"
 
 /**
  * Should be wrapped the `AdminBookingViewProvider`
@@ -14,7 +16,7 @@ const WrappedAdminBookingView = () => {
     handleSelectedDateChange
   } = useContext(AdminBookingViewContext)
 
-  const { data, isLoading } = useAdminBookingsQuery(
+  const { data, isLoading: isFetchingUsers } = useAdminBookingsQuery(
     Timestamp.fromDate(DateUtils.convertLocalDateToUTCDate(startDate)),
     Timestamp.fromDate(DateUtils.convertLocalDateToUTCDate(endDate))
   )
@@ -24,7 +26,7 @@ const WrappedAdminBookingView = () => {
         const newData: BookingMemberColumnFormat = {
           uid: ""
         }
-        newData.uid = user.uid
+        newData.uid = user.bookingId
         newData.Date = DateUtils.formattedNzDate(
           new Date(DateUtils.timestampMilliseconds(date.date))
         )
@@ -44,10 +46,34 @@ const WrappedAdminBookingView = () => {
       ),
     [dataList]
   )
+
+  const { mutateAsync: deleteBooking, isPending: isDeletingBooking } =
+    useDeleteBookingMutation()
+  const rowOperations: [TableRowOperation] = [
+    {
+      name: "delete booking",
+      handler: (bookingId: string) => {
+        const matchingBooking = sortedData?.find(
+          (data) => data.uid === bookingId
+        )
+        if (
+          confirm(
+            `Are you SURE you want to delete the booking for the user ${matchingBooking?.Email} on the date ${matchingBooking?.Date}?
+             This can NOT be undone!
+            `
+          )
+        ) {
+          deleteBooking(bookingId)
+        }
+      }
+    }
+  ]
+
   return (
     <AdminBookingView
-      isUpdating={isLoading}
+      isUpdating={isFetchingUsers || isDeletingBooking}
       data={sortedData}
+      rowOperation={rowOperations}
       dateRange={{ startDate, endDate }}
       handleDateRangeChange={handleSelectedDateChange}
     />

client/src/components/generic/ReusableTable/Table.tsx

@@ -113,6 +113,7 @@ export const OperationButton = <
         <div className="flex h-full items-center px-2">
           <h5
             data-testid="single-operation-button"
+            className="text-red cursor-pointer font-bold"
             onClick={() => rowOperations && rowOperations[0]?.handler(uid)}
           >
             X

client/src/services/Admin/AdminMutations.ts

@@ -132,3 +132,16 @@ export function useAddUserToBookingMutation() {
     }
   })
 }
+
+export function useDeleteBookingMutation() {
+  return useMutation({
+    mutationKey: ["delete-booking"],
+    retry: false,
+    mutationFn: AdminService.deleteBooking,
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: [ALL_BOOKINGS_BETWEEN_RANGE_QUERY]
+      })
+    }
+  })
+}

client/src/services/Admin/AdminService.ts

@@ -50,7 +50,16 @@ const AdminService = {
     })
     if (!response.ok) throw new Error(`Failed to promote ${uid}`)
   },
-
+  deleteBooking: async function (id: string) {
+    const { response } = await fetchClient.POST("/admin/bookings/delete", {
+      body: {
+        bookingID: id
+      }
+    })
+    if (!response.ok) {
+      throw new Error(`Failed to delete booking with id ${id}`)
+    }
+  },
   getBookingsBetweenDateRange: async function ({
     startDate = Timestamp.fromDate(new Date(Date.now())),
     endDate = Timestamp.fromDate(new Date(Date.now()))

server/src/service-layer/controllers/AdminController.ts

@@ -149,6 +149,7 @@ export class AdminController extends Controller {
   }
 
   @SuccessResponse("200", "Booking deleted successfuly")
+  // TODO: Refactor this to be a DELETE request
   @Post("/bookings/delete")
   public async removeBooking(
     @Body() requestBody: DeleteBookingRequest