Commit ca5ab344 authored by Lucia Lopuchova's avatar Lucia Lopuchova Committed by cizek
Browse files

Add My reservations to navigation and add show permission to nav items

parent 39fd6818
import { ReactNode } from "react";
import { Link } from "react-router-dom";
import { Stack, Button } from "@mantine/core";
import { CalendarEvent, Home, Location } from "tabler-icons-react";
import {BuildingStore, CalendarEvent, Home, Location} from "tabler-icons-react";
import {useAuth} from "../../context/auth/auth-context";
type NavItem = {
label: string;
to: string;
icon: ReactNode;
showPermission: string;
};
const navItems: NavItem[] = [
......@@ -14,17 +16,26 @@ const navItems: NavItem[] = [
label: "Home",
to: "/",
icon: <Home />,
showPermission: "ALL"
},
{
label: "Events",
to: "/events",
icon: <CalendarEvent />,
showPermission: "ALL"
},
{
label: "Locations",
to: "/locations",
icon: <Location />,
showPermission: "ALL"
},
{
label: "My reservations",
to: "/my-reservations",
icon: <BuildingStore/>,
showPermission: "SELLER"
}
];
interface Props {
......@@ -32,9 +43,16 @@ interface Props {
}
export const Navigation = ({ onClick }: Props) => {
const { user } = useAuth();
const showPermission = user ? user.userRole : "ALL";
return (
<Stack spacing={5}>
{navItems.map(({ icon, label, to }) => (
{navItems
.filter(item => item.showPermission === showPermission || item.showPermission === "ALL")
.map(({ icon, label, to }) => (
<Button
variant="subtle"
leftIcon={icon}
......
......@@ -14,6 +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 { UserReservations } from "./stand-reservation/user-reservations";
export const AppRoutes = () => {
const { isFetchedAfterMount } = useAuth();
......@@ -46,6 +47,7 @@ export const AppRoutes = () => {
path="/stand-reservation/:id"
element={<StandReservation />}
/>
<Route path="/my-reservations" element={<UserReservations />}/>
</Routes>
)}
</Box>
......
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>
</Container>
}
\ No newline at end of file
......@@ -6,16 +6,11 @@ import { Reservation } from "./stand-resevation-type";
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}/list/user/${userId}`).then((res) => res.data)
import { useAuth } from "../../context/auth/auth-context";
import { NoReservations } from "./no-reservations";
export const UserReservations = () => {
const { user } = useAuth();
if (user === undefined || user.userRole !== "SELLER")
return <NoReservations />
else return <></>
}
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment