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 { useCallback, useEffect, useMemo, useState } from "react";
import {Form, Formik} from "formik"; import { Form, Formik } from "formik";
import {useMutation, useQueryClient} from "react-query"; import { useMutation, useQueryClient } from "react-query";
import {Button, Group, Select, Stack} from "@mantine/core"; import { Button, Group, Select, Stack } from "@mantine/core";
import {DialogProps} from "context/dialog/types"; import { DialogProps } from "context/dialog/types";
import {useNotification} from "context/notification/notification-context"; import { useNotification } from "context/notification/notification-context";
import {createStand, editStand} from "modules/event/create-update-event-api"; import { createStand, editStand } from "modules/event/create-update-event-api";
import {EventStand, EventStandForm} from "../../../modules/event/event-types"; import { EventStand, EventStandForm } from "../../../modules/event/event-types";
import {getStandTypes} from "../../../modules/stand-reservation/stand-reservation-api"; import { getStandTypes } from "../../../modules/stand-reservation/stand-reservation-api";
import {StandType} from "../../../models/stand-type"; import { StandType } from "../../../models/stand-type";
type FormValues = Omit<EventStandForm, "id">; type FormValues = Omit<EventStandForm, "id">;
...@@ -73,8 +73,6 @@ export const UpsertEventStandDialog = ({ ...@@ -73,8 +73,6 @@ export const UpsertEventStandDialog = ({
} }
); );
const handleSubmit = useCallback( const handleSubmit = useCallback(
(values: FormValues) => { (values: FormValues) => {
const selectedStandType = standTypes.find((standType) => { const selectedStandType = standTypes.find((standType) => {
...@@ -82,7 +80,11 @@ export const UpsertEventStandDialog = ({ ...@@ -82,7 +80,11 @@ export const UpsertEventStandDialog = ({
}); });
if (selectedStandType != undefined) if (selectedStandType != undefined)
stand stand
? edit({ id: stand.id, standType: selectedStandType, eventId: eventId }) ? edit({
id: stand.id,
standType: selectedStandType,
eventId: eventId,
})
: create({ standType: selectedStandType, eventId: eventId }); : create({ standType: selectedStandType, eventId: eventId });
}, },
[create, edit, eventId, stand, standTypes] [create, edit, eventId, stand, standTypes]
......
import { ReactNode } from "react"; import { ReactNode } from "react";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import { Stack, Button } from "@mantine/core"; import { Stack, Button } from "@mantine/core";
import {BuildingStore, CalendarEvent, Home, Location} from "tabler-icons-react"; import {
import {useAuth} from "../../context/auth/auth-context"; BuildingStore,
CalendarEvent,
Home,
Location,
} from "tabler-icons-react";
import { useAuth } from "../../context/auth/auth-context";
type NavItem = { type NavItem = {
label: string; label: string;
...@@ -16,26 +21,26 @@ const navItems: NavItem[] = [ ...@@ -16,26 +21,26 @@ const navItems: NavItem[] = [
label: "Home", label: "Home",
to: "/", to: "/",
icon: <Home />, icon: <Home />,
showPermission: "ALL" showPermission: "ALL",
}, },
{ {
label: "Events", label: "Events",
to: "/events", to: "/events",
icon: <CalendarEvent />, icon: <CalendarEvent />,
showPermission: "ALL" showPermission: "ALL",
}, },
{ {
label: "Locations", label: "Locations",
to: "/locations", to: "/locations",
icon: <Location />, icon: <Location />,
showPermission: "MANAGER" showPermission: "MANAGER",
}, },
{ {
label: "My reservations", label: "My reservations",
to: "/my-reservations", to: "/my-reservations",
icon: <BuildingStore/>, icon: <BuildingStore />,
showPermission: "SELLER" showPermission: "SELLER",
} },
]; ];
interface Props { interface Props {
...@@ -43,7 +48,6 @@ interface Props { ...@@ -43,7 +48,6 @@ interface Props {
} }
export const Navigation = ({ onClick }: Props) => { export const Navigation = ({ onClick }: Props) => {
const { user } = useAuth(); const { user } = useAuth();
const showPermission = user ? user.userRole : "ALL"; const showPermission = user ? user.userRole : "ALL";
...@@ -51,19 +55,23 @@ export const Navigation = ({ onClick }: Props) => { ...@@ -51,19 +55,23 @@ export const Navigation = ({ onClick }: Props) => {
return ( return (
<Stack spacing={5}> <Stack spacing={5}>
{navItems {navItems
.filter(item => item.showPermission === showPermission || item.showPermission === "ALL") .filter(
.map(({ icon, label, to }) => ( (item) =>
<Button item.showPermission === showPermission ||
variant="subtle" item.showPermission === "ALL"
leftIcon={icon} )
key={to} .map(({ icon, label, to }) => (
component={Link} <Button
to={to} variant="subtle"
onClick={onClick} leftIcon={icon}
> key={to}
{label} component={Link}
</Button> to={to}
))} onClick={onClick}
>
{label}
</Button>
))}
</Stack> </Stack>
); );
}; };
...@@ -2,11 +2,11 @@ import { StandType } from "./stand-type"; ...@@ -2,11 +2,11 @@ import { StandType } from "./stand-type";
import { User } from "./user"; import { User } from "./user";
export type UserStandReservation = { export type UserStandReservation = {
id: string; id: string;
itemCategories: string[]; itemCategories: string[];
standType: StandType; standType: StandType;
seller: User; seller: User;
eventId: string; eventId: string;
eventName: string; eventName: string;
startDate: string; startDate: string;
} };
\ No newline at end of file
...@@ -14,7 +14,7 @@ import { Register } from "./register/register"; ...@@ -14,7 +14,7 @@ import { Register } from "./register/register";
import { Events } from "./events/events"; import { Events } from "./events/events";
import { CreateUpdateEvent } from "./event/create-update-event"; import { CreateUpdateEvent } from "./event/create-update-event";
import { Locations } from "./locations/locations"; import { Locations } from "./locations/locations";
import {EventStands} from "./event/event-stands"; import { EventStands } from "./event/event-stands";
import { UserReservations } from "./stand-reservation/user-reservations"; import { UserReservations } from "./stand-reservation/user-reservations";
export const AppRoutes = () => { export const AppRoutes = () => {
...@@ -49,7 +49,7 @@ export const AppRoutes = () => { ...@@ -49,7 +49,7 @@ export const AppRoutes = () => {
path="/stand-reservation/:id" path="/stand-reservation/:id"
element={<StandReservation />} element={<StandReservation />}
/> />
<Route path="/my-reservations" element={<UserReservations />}/> <Route path="/my-reservations" element={<UserReservations />} />
</Routes> </Routes>
)} )}
</Box> </Box>
......
...@@ -31,9 +31,9 @@ export const putUpdateEvent = ({ ...@@ -31,9 +31,9 @@ export const putUpdateEvent = ({
export const getEventStands = (eventId: string) => { export const getEventStands = (eventId: string) => {
return axios return axios
.get<EventStand[]>(`${apiUrl}/stands/list/events/${eventId}`) .get<EventStand[]>(`${apiUrl}/stands/list/events/${eventId}`)
.then(({ data }) => data); .then(({ data }) => data);
} };
export const deleteStand = (id: string) => export const deleteStand = (id: string) =>
axios.delete<unknown>(`${apiUrl}/stands/${id}`).then(({ data }) => data); axios.delete<unknown>(`${apiUrl}/stands/${id}`).then(({ data }) => data);
......
...@@ -12,7 +12,6 @@ import { UpsertEventStandDialog } from "../../components/dialogs/upsert-event-st ...@@ -12,7 +12,6 @@ import { UpsertEventStandDialog } from "../../components/dialogs/upsert-event-st
import { EventStand } from "./event-types"; import { EventStand } from "./event-types";
import { ConfirmDialog } from "../../components/dialogs/confirm-dialog/confirm-dialog"; import { ConfirmDialog } from "../../components/dialogs/confirm-dialog/confirm-dialog";
export const EventStandActionsCell = ({ row }: TableCellProps<EventStand>) => { export const EventStandActionsCell = ({ row }: TableCellProps<EventStand>) => {
const { showNotification } = useNotification(); const { showNotification } = useNotification();
const { open } = useDialog(); const { open } = useDialog();
...@@ -39,7 +38,7 @@ export const EventStandActionsCell = ({ row }: TableCellProps<EventStand>) => { ...@@ -39,7 +38,7 @@ export const EventStandActionsCell = ({ row }: TableCellProps<EventStand>) => {
const handleEdit = useCallback(() => { const handleEdit = useCallback(() => {
open({ open({
Content: UpsertEventStandDialog, Content: UpsertEventStandDialog,
props: {eventId: row.eventId, stand: row }, props: { eventId: row.eventId, stand: row },
title: "Edit stand", title: "Edit stand",
}); });
}, [open, row]); }, [open, row]);
...@@ -48,27 +47,24 @@ export const EventStandActionsCell = ({ row }: TableCellProps<EventStand>) => { ...@@ -48,27 +47,24 @@ export const EventStandActionsCell = ({ row }: TableCellProps<EventStand>) => {
deleteMutation.mutate(row.id); deleteMutation.mutate(row.id);
}, [deleteMutation, row.id]); }, [deleteMutation, row.id]);
const openConfirmDialog = useCallback( const openConfirmDialog = useCallback(() => {
() => { open({
open({ Content: ConfirmDialog,
Content: ConfirmDialog, props: {
props: { onConfirm: () => {
onConfirm: () => { handleDelete();
handleDelete(); },
}, onCancel: () => {
onCancel: () => { showNotification({
showNotification({ content: "Stand not deleted",
content: "Stand not deleted", variant: "info",
variant: "info", });
}); },
}, prompt: "Are you sure you want to delete this stand?",
prompt: "Are you sure you want to delete this stand?",
},
title: "Delete stand",
});
}, },
[open, handleDelete, showNotification] title: "Delete stand",
); });
}, [open, handleDelete, showNotification]);
return ( return (
<Group spacing="xs"> <Group spacing="xs">
......
import {TableColumn} from "components/table/types"; import { TableColumn } from "components/table/types";
import {EventStandActionsCell} from "./event-stands-action-cell"; import { EventStandActionsCell } from "./event-stands-action-cell";
import {EventStand} from "./event-types"; import { EventStand } from "./event-types";
export const eventStandColumns: TableColumn<EventStand>[] = [ export const eventStandColumns: TableColumn<EventStand>[] = [
{ {
...@@ -11,7 +11,7 @@ export const eventStandColumns: TableColumn<EventStand>[] = [ ...@@ -11,7 +11,7 @@ export const eventStandColumns: TableColumn<EventStand>[] = [
{ {
key: "standTypePrice", key: "standTypePrice",
label: "Stand Type Price", label: "Stand Type Price",
render: ({ standType }) => (standType.priceInCents / 100).toFixed(2) + '', render: ({ standType }) => (standType.priceInCents / 100).toFixed(2) + "",
}, },
{ {
key: "seller", key: "seller",
......
import {Table} from "../../components/table/table"; import { Table } from "../../components/table/table";
import {useQuery} from "react-query"; import { useQuery } from "react-query";
import {Container} from "@mantine/core"; import { Container } from "@mantine/core";
import {useNotification} from "../../context/notification/notification-context"; import { useNotification } from "../../context/notification/notification-context";
import {eventStandColumns} from "./event-stands-columns"; import { eventStandColumns } from "./event-stands-columns";
import {getEventStands} from "./create-update-event-api"; import { getEventStands } from "./create-update-event-api";
import {eventStandsActionFactory} from "./event-stands-actions"; import { eventStandsActionFactory } from "./event-stands-actions";
import {useMemo} from "react"; import { useMemo } from "react";
import {useParams} from "react-router-dom"; import { useParams } from "react-router-dom";
export const EventStands = () => { export const EventStands = () => {
const { id: eventId } = useParams() as { id: string }; const { id: eventId } = useParams() as { id: string };
...@@ -41,5 +41,4 @@ export const EventStands = () => { ...@@ -41,5 +41,4 @@ export const EventStands = () => {
/> />
</Container> </Container>
); );
}; };
import React, {useCallback, useEffect, useMemo, useState} from "react"; import React, { useCallback, useEffect, useMemo, useState } from "react";
import { import {
ActionIcon, ActionIcon,
Button, Button,
...@@ -11,19 +11,28 @@ import { ...@@ -11,19 +11,28 @@ import {
Table, Table,
Text, Text,
TextInput, TextInput,
UnstyledButton UnstyledButton,
} from "@mantine/core"; } from "@mantine/core";
import {deleteEvent, getEvents} from "./event-api"; import { deleteEvent, getEvents } from "./event-api";
import {MarketEvent} from "../../models"; import { MarketEvent } from "../../models";
import {Stand} from "../../models/stand"; import { Stand } from "../../models/stand";
import {useAuth} from "../../context/auth/auth-context"; import { useAuth } from "../../context/auth/auth-context";
import {useNotification} from "../../context/notification/notification-context"; import { useNotification } from "../../context/notification/notification-context";
import {useMutation} from "react-query"; import { useMutation } from "react-query";
import {DeleteValues} from "./event-types"; import { DeleteValues } from "./event-types";
import {useNavigate} from "react-router-dom"; import { useNavigate } from "react-router-dom";
import {useDialog} from "../../context/dialog/dialog-context"; import { useDialog } from "../../context/dialog/dialog-context";
import {ConfirmDialog} from "../../components/dialogs/confirm-dialog/confirm-dialog"; import { ConfirmDialog } from "../../components/dialogs/confirm-dialog/confirm-dialog";
import {BuildingStore, ChevronDown, ChevronUp, Edit, Search, Selector, Trash, Plus} from "tabler-icons-react"; import {
BuildingStore,
ChevronDown,
ChevronUp,
Edit,
Search,
Selector,
Trash,
Plus,
} from "tabler-icons-react";
export const Events = () => { export const Events = () => {
const navigate = useNavigate(); const navigate = useNavigate();
...@@ -242,8 +251,8 @@ export const Events = () => { ...@@ -242,8 +251,8 @@ export const Events = () => {
{user.userRole == "MANAGER" && ( {user.userRole == "MANAGER" && (
<Stack align="center"> <Stack align="center">
<ActionIcon <ActionIcon
variant="hover" variant="hover"
onClick={() => navigate(`/stands/list/events/${row.id}`)} onClick={() => navigate(`/stands/list/events/${row.id}`)}
> >
<BuildingStore color="black" /> <BuildingStore color="black" />
</ActionIcon> </ActionIcon>
...@@ -282,22 +291,32 @@ export const Events = () => { ...@@ -282,22 +291,32 @@ export const Events = () => {
return ( return (
<Container sx={{ height: "100%", marginTop: "1rem" }}> <Container sx={{ height: "100%", marginTop: "1rem" }}>
<ScrollArea> <ScrollArea>
<Container sx={{ display: "flex", flexDirection: "row", justifyContent: 'space-between'}}> <Container
sx={{
display: "flex",
flexDirection: "row",
justifyContent: "space-between",
}}
>
<TextInput <TextInput
sx={{ width: "100%", paddingRight: "1rem"}} sx={{ width: "100%", paddingRight: "1rem" }}
placeholder="Search by any field" placeholder="Search by any field"
mb="md" mb="md"
icon={<Search size={14} />} icon={<Search size={14} />}
value={search} value={search}
onChange={handleSearchChange} onChange={handleSearchChange}
/> />
{user !== undefined && user.userRole === 'MANAGER' ? <Button {user !== undefined && user.userRole === "MANAGER" ? (
variant="outline" <Button
leftIcon={<Plus />} variant="outline"
onClick={() => navigate(`/events/create`)} leftIcon={<Plus />}
onClick={() => navigate(`/events/create`)}
> >
Add Event Add Event
</Button> : <th/>} </Button>
) : (
<th />
)}
</Container> </Container>
<Table <Table
horizontalSpacing="md" horizontalSpacing="md"
......
import {Center, Container, Text} from "@mantine/core"; import { Center, Container, Text } from "@mantine/core";
export const NoReservations = () => { export const NoReservations = () => {
return <Container> return (
<Center> <Container>
<Text align="center" size="xl" style={{marginTop: 50}}> <Center>
You do not have any reservations <Text align="center" size="xl" style={{ marginTop: 50 }}>
</Text> You do not have any reservations
</Center> </Text>
</Center>
</Container> </Container>
} );
\ No newline at end of file };
import { TableColumn } from "components/table/types"; import { TableColumn } from "components/table/types";
import { UserStandReservation } from "../../models/user-stand-reservation"; import { UserStandReservation } from "../../models/user-stand-reservation";
import {ReservationsActionCell} from "./reservations-action-cell"; import { ReservationsActionCell } from "./reservations-action-cell";
export const reservationColumns: TableColumn<UserStandReservation>[] = [ export const reservationColumns: TableColumn<UserStandReservation>[] = [
{ {
key: "standType", key: "standType",
label: "Stand Type", label: "Stand Type",
render: ({standType}) => standType.name, render: ({ standType }) => standType.name,
}, },
{ {
key: "itemCategories", key: "itemCategories",
label: "Item Categories", label: "Item Categories",
render: ({itemCategories}) => itemCategories.join(", ") render: ({ itemCategories }) => itemCategories.join(", "),
}, },
{ {
key: "eventName", key: "eventName",
label: "Event", label: "Event",
render: ({eventName}) => eventName render: ({ eventName }) => eventName,
}, },
{ {
key: "startDate", key: "startDate",
label: "Start Date", label: "Start Date",
render: ({startDate}) => startDate render: ({ startDate }) => startDate,
}, },
{ {
key: "actions", key: "actions",
label: "Actions", label: "Actions",
Cell: ReservationsActionCell Cell: ReservationsActionCell,
} },
]; ];
\ No newline at end of file
...@@ -4,31 +4,36 @@ import { getUserReservations } from "./stand-reservation-api"; ...@@ -4,31 +4,36 @@ import { getUserReservations } from "./stand-reservation-api";
import { Container } from "@mantine/core"; import { Container } from "@mantine/core";