Commit 32191843 authored by Filip Hujer's avatar Filip Hujer Committed by Michal Čížek
Browse files

Refactor using yarn format

parent 7dce54bc
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]
......
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>
);
};
......@@ -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;
};
......@@ -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>
......
......@@ -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);
......
......@@ -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">
......
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",
......
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>
);
};
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"
......
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
);
};
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,
},
];
......@@ -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
);
};
......@@ -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({
</