Refactor using yarn format

frontend/src/components/dialogs/upsert-event-stand-dialog/upsert-event-stand-dialog.tsx

-import {useCallback, useEffect, useMemo, useState} from "react";
-import {Form, Formik} from "formik";
-import {useMutation, useQueryClient} from "react-query";
-import {Button, Group, Select, Stack} from "@mantine/core";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { Form, Formik } from "formik";
+import { useMutation, useQueryClient } from "react-query";
+import { Button, Group, Select, Stack } from "@mantine/core";
 
-import {DialogProps} from "context/dialog/types";
-import {useNotification} from "context/notification/notification-context";
-import {createStand, editStand} from "modules/event/create-update-event-api";
-import {EventStand, EventStandForm} from "../../../modules/event/event-types";
-import {getStandTypes} from "../../../modules/stand-reservation/stand-reservation-api";
-import {StandType} from "../../../models/stand-type";
+import { DialogProps } from "context/dialog/types";
+import { useNotification } from "context/notification/notification-context";
+import { createStand, editStand } from "modules/event/create-update-event-api";
+import { EventStand, EventStandForm } from "../../../modules/event/event-types";
+import { getStandTypes } from "../../../modules/stand-reservation/stand-reservation-api";
+import { StandType } from "../../../models/stand-type";
 
 type FormValues = Omit<EventStandForm, "id">;
 
@@ -73,8 +73,6 @@ export const UpsertEventStandDialog = ({
     }
   );
 
-
-
   const handleSubmit = useCallback(
     (values: FormValues) => {
       const selectedStandType = standTypes.find((standType) => {
@@ -82,7 +80,11 @@ export const UpsertEventStandDialog = ({
       });
       if (selectedStandType != undefined)
         stand
-          ? edit({ id: stand.id, standType: selectedStandType, eventId: eventId })
+          ? edit({
+              id: stand.id,
+              standType: selectedStandType,
+              eventId: eventId,
+            })
           : create({ standType: selectedStandType, eventId: eventId });
     },
     [create, edit, eventId, stand, standTypes]

frontend/src/components/header/navigation.tsx

 import { ReactNode } from "react";
 import { Link } from "react-router-dom";
 import { Stack, Button } from "@mantine/core";
-import {BuildingStore, CalendarEvent, Home, Location} from "tabler-icons-react";
-import {useAuth} from "../../context/auth/auth-context";
+import {
+  BuildingStore,
+  CalendarEvent,
+  Home,
+  Location,
+} from "tabler-icons-react";
+import { useAuth } from "../../context/auth/auth-context";
 
 type NavItem = {
   label: string;
@@ -16,26 +21,26 @@ const navItems: NavItem[] = [
     label: "Home",
     to: "/",
     icon: <Home />,
-    showPermission: "ALL"
+    showPermission: "ALL",
   },
   {
     label: "Events",
     to: "/events",
     icon: <CalendarEvent />,
-    showPermission: "ALL"
+    showPermission: "ALL",
   },
   {
     label: "Locations",
     to: "/locations",
     icon: <Location />,
-    showPermission: "MANAGER"
+    showPermission: "MANAGER",
   },
   {
     label: "My reservations",
     to: "/my-reservations",
-    icon: <BuildingStore/>,
-    showPermission: "SELLER"
-  }
+    icon: <BuildingStore />,
+    showPermission: "SELLER",
+  },
 ];
 
 interface Props {
@@ -43,7 +48,6 @@ interface Props {
 }
 
 export const Navigation = ({ onClick }: Props) => {
-
   const { user } = useAuth();
 
   const showPermission = user ? user.userRole : "ALL";
@@ -51,19 +55,23 @@ export const Navigation = ({ onClick }: Props) => {
   return (
     <Stack spacing={5}>
       {navItems
-          .filter(item => item.showPermission === showPermission || item.showPermission === "ALL")
-          .map(({ icon, label, to }) => (
-        <Button
-          variant="subtle"
-          leftIcon={icon}
-          key={to}
-          component={Link}
-          to={to}
-          onClick={onClick}
-        >
-          {label}
-        </Button>
-      ))}
+        .filter(
+          (item) =>
+            item.showPermission === showPermission ||
+            item.showPermission === "ALL"
+        )
+        .map(({ icon, label, to }) => (
+          <Button
+            variant="subtle"
+            leftIcon={icon}
+            key={to}
+            component={Link}
+            to={to}
+            onClick={onClick}
+          >
+            {label}
+          </Button>
+        ))}
     </Stack>
   );
 };

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

@@ -2,11 +2,11 @@ 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
+  id: string;
+  itemCategories: string[];
+  standType: StandType;
+  seller: User;
+  eventId: string;
+  eventName: string;
+  startDate: string;
+};

frontend/src/modules/app-routes.tsx

@@ -14,7 +14,7 @@ import { Register } from "./register/register";
 import { Events } from "./events/events";
 import { CreateUpdateEvent } from "./event/create-update-event";
 import { Locations } from "./locations/locations";
-import {EventStands} from "./event/event-stands";
+import { EventStands } from "./event/event-stands";
 import { UserReservations } from "./stand-reservation/user-reservations";
 
 export const AppRoutes = () => {
@@ -49,7 +49,7 @@ export const AppRoutes = () => {
               path="/stand-reservation/:id"
               element={<StandReservation />}
             />
-            <Route path="/my-reservations" element={<UserReservations />}/>
+            <Route path="/my-reservations" element={<UserReservations />} />
           </Routes>
         )}
       </Box>

frontend/src/modules/event/create-update-event-api.ts

@@ -31,9 +31,9 @@ export const putUpdateEvent = ({
 
 export const getEventStands = (eventId: string) => {
   return axios
-      .get<EventStand[]>(`${apiUrl}/stands/list/events/${eventId}`)
-      .then(({ data }) => data);
-}
+    .get<EventStand[]>(`${apiUrl}/stands/list/events/${eventId}`)
+    .then(({ data }) => data);
+};
 
 export const deleteStand = (id: string) =>
   axios.delete<unknown>(`${apiUrl}/stands/${id}`).then(({ data }) => data);

frontend/src/modules/event/event-stands-action-cell.tsx

@@ -12,7 +12,6 @@ import { UpsertEventStandDialog } from "../../components/dialogs/upsert-event-st
 import { EventStand } from "./event-types";
 import { ConfirmDialog } from "../../components/dialogs/confirm-dialog/confirm-dialog";
 
-
 export const EventStandActionsCell = ({ row }: TableCellProps<EventStand>) => {
   const { showNotification } = useNotification();
   const { open } = useDialog();
@@ -39,7 +38,7 @@ export const EventStandActionsCell = ({ row }: TableCellProps<EventStand>) => {
   const handleEdit = useCallback(() => {
     open({
       Content: UpsertEventStandDialog,
-      props: {eventId: row.eventId, stand: row },
+      props: { eventId: row.eventId, stand: row },
       title: "Edit stand",
     });
   }, [open, row]);
@@ -48,27 +47,24 @@ export const EventStandActionsCell = ({ row }: TableCellProps<EventStand>) => {
     deleteMutation.mutate(row.id);
   }, [deleteMutation, row.id]);
 
-  const openConfirmDialog = useCallback(
-      () => {
-        open({
-          Content: ConfirmDialog,
-          props: {
-            onConfirm: () => {
-              handleDelete();
-            },
-            onCancel: () => {
-              showNotification({
-                content: "Stand not deleted",
-                variant: "info",
-              });
-            },
-            prompt: "Are you sure you want to delete this stand?",
-          },
-          title: "Delete stand",
-        });
+  const openConfirmDialog = useCallback(() => {
+    open({
+      Content: ConfirmDialog,
+      props: {
+        onConfirm: () => {
+          handleDelete();
+        },
+        onCancel: () => {
+          showNotification({
+            content: "Stand not deleted",
+            variant: "info",
+          });
+        },
+        prompt: "Are you sure you want to delete this stand?",
       },
-      [open, handleDelete, showNotification]
-  );
+      title: "Delete stand",
+    });
+  }, [open, handleDelete, showNotification]);
 
   return (
     <Group spacing="xs">

frontend/src/modules/event/event-stands-columns.ts

-import {TableColumn} from "components/table/types";
-import {EventStandActionsCell} from "./event-stands-action-cell";
-import {EventStand} from "./event-types";
+import { TableColumn } from "components/table/types";
+import { EventStandActionsCell } from "./event-stands-action-cell";
+import { EventStand } from "./event-types";
 
 export const eventStandColumns: TableColumn<EventStand>[] = [
   {
@@ -11,7 +11,7 @@ export const eventStandColumns: TableColumn<EventStand>[] = [
   {
     key: "standTypePrice",
     label: "Stand Type Price",
-    render: ({ standType }) => (standType.priceInCents / 100).toFixed(2) + '€',
+    render: ({ standType }) => (standType.priceInCents / 100).toFixed(2) + "€",
   },
   {
     key: "seller",

frontend/src/modules/event/event-stands.tsx

-import {Table} from "../../components/table/table";
-import {useQuery} from "react-query";
-import {Container} from "@mantine/core";
-import {useNotification} from "../../context/notification/notification-context";
-import {eventStandColumns} from "./event-stands-columns";
-import {getEventStands} from "./create-update-event-api";
-import {eventStandsActionFactory} from "./event-stands-actions";
-import {useMemo} from "react";
-import {useParams} from "react-router-dom";
+import { Table } from "../../components/table/table";
+import { useQuery } from "react-query";
+import { Container } from "@mantine/core";
+import { useNotification } from "../../context/notification/notification-context";
+import { eventStandColumns } from "./event-stands-columns";
+import { getEventStands } from "./create-update-event-api";
+import { eventStandsActionFactory } from "./event-stands-actions";
+import { useMemo } from "react";
+import { useParams } from "react-router-dom";
 
 export const EventStands = () => {
   const { id: eventId } = useParams() as { id: string };
@@ -41,5 +41,4 @@ export const EventStands = () => {
       />
     </Container>
   );
-
 };

frontend/src/modules/events/events.tsx

-import React, {useCallback, useEffect, useMemo, useState} from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 import {
   ActionIcon,
   Button,
@@ -11,19 +11,28 @@ import {
   Table,
   Text,
   TextInput,
-  UnstyledButton
+  UnstyledButton,
 } from "@mantine/core";
-import {deleteEvent, getEvents} from "./event-api";
-import {MarketEvent} from "../../models";
-import {Stand} from "../../models/stand";
-import {useAuth} from "../../context/auth/auth-context";
-import {useNotification} from "../../context/notification/notification-context";
-import {useMutation} from "react-query";
-import {DeleteValues} from "./event-types";
-import {useNavigate} from "react-router-dom";
-import {useDialog} from "../../context/dialog/dialog-context";
-import {ConfirmDialog} from "../../components/dialogs/confirm-dialog/confirm-dialog";
-import {BuildingStore, ChevronDown, ChevronUp, Edit, Search, Selector, Trash, Plus} from "tabler-icons-react";
+import { deleteEvent, getEvents } from "./event-api";
+import { MarketEvent } from "../../models";
+import { Stand } from "../../models/stand";
+import { useAuth } from "../../context/auth/auth-context";
+import { useNotification } from "../../context/notification/notification-context";
+import { useMutation } from "react-query";
+import { DeleteValues } from "./event-types";
+import { useNavigate } from "react-router-dom";
+import { useDialog } from "../../context/dialog/dialog-context";
+import { ConfirmDialog } from "../../components/dialogs/confirm-dialog/confirm-dialog";
+import {
+  BuildingStore,
+  ChevronDown,
+  ChevronUp,
+  Edit,
+  Search,
+  Selector,
+  Trash,
+  Plus,
+} from "tabler-icons-react";
 
 export const Events = () => {
   const navigate = useNavigate();
@@ -242,8 +251,8 @@ export const Events = () => {
             {user.userRole == "MANAGER" && (
               <Stack align="center">
                 <ActionIcon
-                    variant="hover"
-                    onClick={() => navigate(`/stands/list/events/${row.id}`)}
+                  variant="hover"
+                  onClick={() => navigate(`/stands/list/events/${row.id}`)}
                 >
                   <BuildingStore color="black" />
                 </ActionIcon>
@@ -282,22 +291,32 @@ export const Events = () => {
     return (
       <Container sx={{ height: "100%", marginTop: "1rem" }}>
         <ScrollArea>
-          <Container sx={{ display: "flex", flexDirection: "row", justifyContent: 'space-between'}}>
+          <Container
+            sx={{
+              display: "flex",
+              flexDirection: "row",
+              justifyContent: "space-between",
+            }}
+          >
             <TextInput
-              sx={{ width: "100%", paddingRight: "1rem"}}
+              sx={{ width: "100%", paddingRight: "1rem" }}
               placeholder="Search by any field"
               mb="md"
               icon={<Search size={14} />}
               value={search}
               onChange={handleSearchChange}
             />
-            {user !== undefined && user.userRole === 'MANAGER' ? <Button
-              variant="outline"
-              leftIcon={<Plus />}
-              onClick={() => navigate(`/events/create`)}
+            {user !== undefined && user.userRole === "MANAGER" ? (
+              <Button
+                variant="outline"
+                leftIcon={<Plus />}
+                onClick={() => navigate(`/events/create`)}
               >
-              Add Event
-              </Button> : <th/>}
+                Add Event
+              </Button>
+            ) : (
+              <th />
+            )}
           </Container>
           <Table
             horizontalSpacing="md"

frontend/src/modules/stand-reservation/no-reservations.tsx

-import {Center, Container, Text} from "@mantine/core";
+import { Center, Container, Text } from "@mantine/core";
 
 export const NoReservations = () => {
-    return <Container>
-        <Center>
-            <Text align="center" size="xl" style={{marginTop: 50}}>
-                You do not have any reservations
-            </Text>
-        </Center>
+  return (
+    <Container>
+      <Center>
+        <Text align="center" size="xl" style={{ marginTop: 50 }}>
+          You do not have any reservations
+        </Text>
+      </Center>
     </Container>
-}
\ No newline at end of file
+  );
+};

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

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

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

@@ -4,31 +4,36 @@ 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";
+import { UserStandReservation } from "../../models/user-stand-reservation";
 
 interface Props {
-    userId: string;
+  userId: string;
 }
 
 export const ReservationTable = ({ userId }: Props) => {
-    const { showNotification } = useNotification();
+  const { showNotification } = useNotification();
 
-    const { data, isLoading } = useQuery<UserStandReservation[]>(["userReservations", userId], () => getUserReservations(userId), {
-        onError: () => {
-            showNotification({
-                content: "Reservations failed to load",
-                variant: "error",
-            });
-        },
-    });
+  const { data, isLoading } = useQuery<UserStandReservation[]>(
+    ["userReservations", userId],
+    () => getUserReservations(userId),
+    {
+      onError: () => {
+        showNotification({
+          content: "Reservations failed to load",
+          variant: "error",
+        });
+      },
+    }
+  );
 
-    return <Container sx={{margin: "2rem auto"}}>
-        <Table
-            title="My reservations"
-            columns={reservationColumns}
-            rows={data}
-            isLoading={isLoading}
-            />
+  return (
+    <Container sx={{ margin: "2rem auto" }}>
+      <Table
+        title="My reservations"
+        columns={reservationColumns}
+        rows={data}
+        isLoading={isLoading}
+      />
     </Container>
-
-}
\ No newline at end of file
+  );
+};

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

@@ -6,46 +6,50 @@ 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";
+import { Trash } from "tabler-icons-react";
 
-export const ReservationsActionCell = ({ row }: TableCellProps<UserStandReservation>) => {
-    const { showNotification } = useNotification();
-    const queryClient = useQueryClient();
+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 cancelMutation = useMutation(cancelReservation, {
+    onError: () => {
+      showNotification({
+        content: "Cancelling reservation failed",
+        variant: "error",
+      });
+    },
+    onSuccess: () => {
+      showNotification({