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,7 +55,11 @@ export const Navigation = ({ onClick }: Props) => {
   return (
     <Stack spacing={5}>
       {navItems
-          .filter(item => item.showPermission === showPermission || item.showPermission === "ALL")
+        .filter(
+          (item) =>
+            item.showPermission === showPermission ||
+            item.showPermission === "ALL"
+        )
         .map(({ icon, label, to }) => (
           <Button
             variant="subtle"

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

@@ -9,4 +9,4 @@ export type UserStandReservation = {
   eventId: string;
   eventName: string;
   startDate: string;
-}
\ No newline at end of file
+};

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

@@ -33,7 +33,7 @@ export const getEventStands = (eventId: string) => {
   return axios
     .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,8 +47,7 @@ export const EventStandActionsCell = ({ row }: TableCellProps<EventStand>) => {
     deleteMutation.mutate(row.id);
   }, [deleteMutation, row.id]);
 
-  const openConfirmDialog = useCallback(
-      () => {
+  const openConfirmDialog = useCallback(() => {
     open({
       Content: ConfirmDialog,
       props: {
@@ -66,9 +64,7 @@ export const EventStandActionsCell = ({ row }: TableCellProps<EventStand>) => {
       },
       title: "Delete stand",
     });
-      },
-      [open, handleDelete, showNotification]
-  );
+  }, [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();
@@ -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
+            {user !== undefined && user.userRole === "MANAGER" ? (
+              <Button
                 variant="outline"
                 leftIcon={<Plus />}
                 onClick={() => navigate(`/events/create`)}
               >
                 Add Event
-              </Button> : <th/>}
+              </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>
+  return (
+    <Container>
       <Center>
-            <Text align="center" size="xl" style={{marginTop: 50}}>
+        <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,
+    render: ({ standType }) => standType.name,
   },
   {
     key: "itemCategories",
     label: "Item Categories",
-        render: ({itemCategories}) => itemCategories.join(", ")
+    render: ({ itemCategories }) => itemCategories.join(", "),
   },
   {
     key: "eventName",
     label: "Event",
-        render: ({eventName}) => eventName
+    render: ({ eventName }) => eventName,
   },
   {
     key: "startDate",
     label: "Start Date",
-        render: ({startDate}) => startDate
+    render: ({ startDate }) => startDate,
   },
   {
     key: "actions",
     label: "Actions",
-        Cell: ReservationsActionCell
-    }
+    Cell: ReservationsActionCell,
+  },
 ];

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

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

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

@@ -6,13 +6,15 @@ 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>) => {
+export const ReservationsActionCell = ({
+  row,
+}: TableCellProps<UserStandReservation>) => {
   const { showNotification } = useNotification();
   const queryClient = useQueryClient();
 
-    const cancelMutation = useMutation( cancelReservation, {
+  const cancelMutation = useMutation(cancelReservation, {
     onError: () => {
       showNotification({
         content: "Cancelling reservation failed",
@@ -34,11 +36,13 @@ export const ReservationsActionCell = ({ row }: TableCellProps<UserStandReservat
     const stand: Stand = {
       id: row.id,
       standType: row.standType,
-            itemCategories: row.itemCategories.map(category => category.toUpperCase()),
+      itemCategories: row.itemCategories.map((category) =>
+        category.toUpperCase()
+      ),
       seller: undefined,
-            eventId: row.eventId
-        }
-        cancelMutation.mutate(stand)
+      eventId: row.eventId,
+    };
+    cancelMutation.mutate(stand);
   }, [cancelMutation, row]);
 
   return (
@@ -47,5 +51,5 @@ export const ReservationsActionCell = ({ row }: TableCellProps<UserStandReservat
         <Trash color="red" />
       </ActionIcon>
     </Group>
-    )
-}
\ No newline at end of file
+  );
+};

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

@@ -7,14 +7,22 @@ import { Stand } from "../../models/stand";
 export const getItemCategories = async () =>
   axios.get(`${apiUrl}/stands/item-categories/list`).then((res) => res.data);
 
-export const getStandTypes = async ( marketEventId: string ) =>
-  axios.get(`${apiUrl}/market-events/${marketEventId}/stand-types`).then((res) => res.data);
+export const getStandTypes = async (marketEventId: string) =>
+  axios
+    .get(`${apiUrl}/market-events/${marketEventId}/stand-types`)
+    .then((res) => res.data);
 
-export const putReservation = ( args: {marketEventId: string, values: Reservation} ) =>
-  axios.put(`${apiUrl}/market-events/${args.marketEventId}/reserve-stand`, args.values);
+export const putReservation = (args: {
+  marketEventId: string;
+  values: Reservation;
+}) =>
+  axios.put(
+    `${apiUrl}/market-events/${args.marketEventId}/reserve-stand`,
+    args.values
+  );
 
 export const getUserReservations = async (userId: string) =>
-    axios.get(`${apiUrl}/stands/list/user/${userId}`).then((res) => res.data)
+  axios.get(`${apiUrl}/stands/list/user/${userId}`).then((res) => res.data);
 
 export const cancelReservation = async (stand: Stand) =>
   axios.put(`${apiUrl}/stands/${stand.id}`, stand);

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

@@ -6,6 +6,6 @@ export const UserReservations = () => {
   const { user } = useAuth();
 
   if (user === undefined || user.userRole !== "SELLER")
-        return <NoReservations />
-    else return <ReservationTable userId={user.id} />
-}
\ No newline at end of file
+    return <NoReservations />;
+  else return <ReservationTable userId={user.id} />;
+};