Add cancel function to user reservations

frontend/src/models/stand-reservation.ts

-export type StandReservation = {
-    standId: string;
-    itemCategories: string[];
-    standTypeName: string;
-    eventName: string;
-    startDate: string;
-}
\ No newline at end of file

frontend/src/models/stand.ts

@@ -6,4 +6,5 @@ export type Stand = {
   itemCategories: string[];
   standType: StandType;
   seller?: User | null;
+  eventId: string;
 };

frontend/src/models/user-stand-reservation.ts

+import { StandType } from "./stand-type";
+import { User } from "./user";
+
+export type UserStandReservation = {
+    id: string;
+    itemCategories: string[];
+    standType: StandType;
+    seller: User;
+    eventId: string;
+    eventName: string;
+    startDate: string;
+}
\ No newline at end of file

frontend/src/modules/stand-reservation/reservation-columns.ts

 import { TableColumn } from "components/table/types";
-import { StandReservation } from "../../models/stand-reservation";
+import { UserStandReservation } from "../../models/user-stand-reservation";
+import {ReservationsActionCell} from "./reservations-action-cell";
 
-export const reservationColumns: TableColumn<StandReservation>[] = [
+export const reservationColumns: TableColumn<UserStandReservation>[] = [
     {
-        key: "standTypeName",
+        key: "standType",
         label: "Stand Type",
-        render: ({standTypeName}) => standTypeName,
+        render: ({standType}) => standType.name,
     },
     {
         key: "itemCategories",
@@ -21,5 +22,10 @@ export const reservationColumns: TableColumn<StandReservation>[] = [
         key: "startDate",
         label: "Start Date",
         render: ({startDate}) => startDate
+    },
+    {
+        key: "actions",
+        label: "Actions",
+        Cell: ReservationsActionCell
     }
 ];
\ No newline at end of file

frontend/src/modules/stand-reservation/reservation-table.tsx

@@ -4,6 +4,7 @@ import { getUserReservations } from "./stand-reservation-api";
 import { Container } from "@mantine/core";
 import { Table } from "components/table/table";
 import { reservationColumns } from "./reservation-columns";
+import {UserStandReservation} from "../../models/user-stand-reservation";
 
 interface Props {
     userId: string;
@@ -12,7 +13,7 @@ interface Props {
 export const ReservationTable = ({ userId }: Props) => {
     const { showNotification } = useNotification();
 
-    const { data, isLoading } = useQuery(["userId", userId], () => getUserReservations(userId), {
+    const { data, isLoading } = useQuery<UserStandReservation[]>(["userReservations", userId], () => getUserReservations(userId), {
         onError: () => {
             showNotification({
                 content: "Reservations failed to load",

frontend/src/modules/stand-reservation/reservations-action-cell.tsx

+import { TableCellProps } from "../../components/table/types";
+import { useNotification } from "../../context/notification/notification-context";
+import { useMutation, useQueryClient } from "react-query";
+import { cancelReservation } from "./stand-reservation-api";
+import { useCallback } from "react";
+import { UserStandReservation } from "../../models/user-stand-reservation";
+import { Stand } from "../../models/stand";
+import { ActionIcon, Group } from "@mantine/core";
+import {Trash} from "tabler-icons-react";
+
+export const ReservationsActionCell = ({ row }: TableCellProps<UserStandReservation>) => {
+    const { showNotification } = useNotification();
+    const queryClient = useQueryClient();
+
+    const cancelMutation = useMutation( cancelReservation, {
+        onError: () => {
+            showNotification({
+                content: "Cancelling reservation failed",
+                variant: "error",
+            });
+        },
+        onSuccess: () => {
+            showNotification({
+                content: "Reservation cancelled",
+                variant: "success",
+            });
+        },
+        onSettled: () => {
+            queryClient.invalidateQueries("userReservations");
+        },
+    });
+
+    const handleCancel = useCallback(() => {
+        const stand: Stand = {
+            id: row.id,
+            standType: row.standType,
+            itemCategories: row.itemCategories.map(category => category.toUpperCase()),
+            seller: undefined,
+            eventId: row.eventId
+        }
+        cancelMutation.mutate(stand)
+    }, [cancelMutation, row]);
+
+    return (
+        <Group spacing="xs">
+            <ActionIcon variant="hover" onClick={handleCancel}>
+                <Trash color="red" />
+            </ActionIcon>
+        </Group>
+    )
+}
\ No newline at end of file

frontend/src/modules/stand-reservation/stand-reservation-api.ts

@@ -2,6 +2,7 @@ import axios from "axios";
 
 import { apiUrl } from "constants/api-url";
 import { Reservation } from "./stand-resevation-type";
+import { Stand } from "../../models/stand";
 
 export const getItemCategories = async () =>
   axios.get(`${apiUrl}/stands/item-categories/list`).then((res) => res.data);
@@ -14,3 +15,6 @@ export const putReservation = ( args: {marketEventId: string, values: Reservatio
 
 export const getUserReservations = async (userId: string) =>
     axios.get(`${apiUrl}/stands/list/user/${userId}`).then((res) => res.data)
+
+export const cancelReservation = async (stand: Stand) =>
+    axios.put(`${apiUrl}/stands/${stand.id}`, stand);