diff --git a/packages/api/src/types/Events.ts b/packages/api/src/types/Events.ts index 2ea07899..69fe8a37 100644 --- a/packages/api/src/types/Events.ts +++ b/packages/api/src/types/Events.ts @@ -9,6 +9,7 @@ export type GetEventResponse = { description: string | null; fields: unknown; status: 'OPEN' | 'CLOSED' | 'UPCOMING' | null; + eventDisplayRank: number | null; }; export type GetEventsResponse = GetEventResponse[]; diff --git a/packages/berlin/src/components/cycles/Cycles.tsx b/packages/berlin/src/components/cycles/Cycles.tsx index 926b5f9f..2da49123 100644 --- a/packages/berlin/src/components/cycles/Cycles.tsx +++ b/packages/berlin/src/components/cycles/Cycles.tsx @@ -1,14 +1,20 @@ import { GetCycleResponse } from 'api'; import { Body } from '../typography/Body.styled'; import { useNavigate } from 'react-router-dom'; +import { CalendarX2 } from 'lucide-react'; +import Button from '../button'; type CyclesProps = { cycles: GetCycleResponse[] | undefined; - errorMessage: string; eventId: string | undefined; + fallback: { + message: string; + buttonMessage: string; + buttonOnClick: () => void; + }; }; -function Cycles({ cycles, errorMessage, eventId }: CyclesProps) { +function Cycles({ cycles, eventId, fallback }: CyclesProps) { const navigate = useNavigate(); const formatDate = (date: string) => { @@ -34,7 +40,11 @@ function Cycles({ cycles, errorMessage, eventId }: CyclesProps) { )) ) : ( - {errorMessage} +
+ + {fallback.message} + +
)} ); diff --git a/packages/berlin/src/components/events/Events.tsx b/packages/berlin/src/components/events/Events.tsx index 1e11699b..e2a24d36 100644 --- a/packages/berlin/src/components/events/Events.tsx +++ b/packages/berlin/src/components/events/Events.tsx @@ -2,14 +2,14 @@ import { useNavigate } from 'react-router-dom'; // API -import { GetEventResponse } from 'api'; +import { GetEventsResponse } from 'api'; // Components import { Body } from '../typography/Body.styled'; import { Subtitle } from '../typography/Subtitle.styled'; type EventsProps = { - events: GetEventResponse[] | undefined; + events: GetEventsResponse | null | undefined; errorMessage: string; }; @@ -20,8 +20,14 @@ export default function Events({ events, errorMessage }: EventsProps) { navigate(`/events/${eventId}/cycles`); }; - return events?.length ? ( - events.map((event) => { + const sortedEvents = events?.sort((a, b) => { + const rankA = a.eventDisplayRank ?? Number.MAX_SAFE_INTEGER; + const rankB = b.eventDisplayRank ?? Number.MAX_SAFE_INTEGER; + return rankA - rankB; + }); + + return sortedEvents?.length ? ( + sortedEvents.map((event) => { return (
) : ( - Login + + Login + )} @@ -104,7 +106,7 @@ const HeaderLinks = ({ user }: { user: GetUserResponse }) => { }); const { data: eventNavLinks } = useQuery({ - queryKey: ['eventNavLinks'], + queryKey: ['event', eventId, 'navLinks'], queryFn: () => fetchEventNavLinks({ serverUrl: import.meta.env.VITE_SERVER_URL, eventId: eventId || '' }), enabled: !!user && !!eventId, diff --git a/packages/berlin/src/components/option/Option.tsx b/packages/berlin/src/components/option/Option.tsx index ca7485d6..167c11e6 100644 --- a/packages/berlin/src/components/option/Option.tsx +++ b/packages/berlin/src/components/option/Option.tsx @@ -159,7 +159,7 @@ export default function Option({ {option.subTitle} )} - +
); diff --git a/packages/berlin/src/components/zupass-button/ZupassLoginButton.tsx b/packages/berlin/src/components/zupass-button/ZupassLoginButton.tsx index e7b6f735..50b6d519 100644 --- a/packages/berlin/src/components/zupass-button/ZupassLoginButton.tsx +++ b/packages/berlin/src/components/zupass-button/ZupassLoginButton.tsx @@ -16,6 +16,7 @@ import { useNavigate } from 'react-router-dom'; type ZupassLoginButtonProps = { $variant?: 'contained' | 'link'; children: React.ReactNode; + style?: React.CSSProperties; }; const POPUP_URL = window.location.origin + '/popup'; @@ -81,12 +82,7 @@ function ZupassLoginButton({ children, $variant, ...props }: ZupassLoginButtonPr return ( <> - diff --git a/packages/berlin/src/pages/Event.tsx b/packages/berlin/src/pages/Event.tsx index 26aa5159..aa01079c 100644 --- a/packages/berlin/src/pages/Event.tsx +++ b/packages/berlin/src/pages/Event.tsx @@ -52,8 +52,28 @@ function Event() { const tabNames = ['upcoming', 'past']; const tabs = { - upcoming: , - past: , + upcoming: ( + setActiveTab('past'), + }} + /> + ), + past: ( + setActiveTab('upcoming'), + }} + /> + ), }; return ( diff --git a/packages/berlin/src/pages/Events.tsx b/packages/berlin/src/pages/Events.tsx index 01923e4f..73986f1c 100644 --- a/packages/berlin/src/pages/Events.tsx +++ b/packages/berlin/src/pages/Events.tsx @@ -1,5 +1,4 @@ // React and third-party libraries -import { useMemo, useState } from 'react'; import { useQuery } from '@tanstack/react-query'; // API @@ -11,11 +10,9 @@ import useUser from '../hooks/useUser'; // Components import { FlexColumn } from '../components/containers/FlexColumn.styled'; import { Title } from '../components/typography/Title.styled'; -import * as Tabs from '../components/tabs'; import EventsCards from '../components/events'; function Events() { - const [activeTab, setActiveTab] = useState('upcoming'); const { user } = useUser(); const { data: events } = useQuery({ queryKey: ['events'], @@ -23,26 +20,13 @@ function Events() { enabled: !!user?.id, }); - const openEvents = useMemo(() => events?.filter((event) => event.status === 'OPEN'), [events]); - const closedEvents = useMemo( - () => events?.filter((events) => events.status === 'CLOSED'), - [events], - ); - - const tabNames = ['upcoming', 'past']; - const tabs = { - upcoming: , - past: , - }; - return (
Events -
- +
); diff --git a/packages/berlin/src/pages/Register.tsx b/packages/berlin/src/pages/Register.tsx index 62877670..a6ae0ab2 100644 --- a/packages/berlin/src/pages/Register.tsx +++ b/packages/berlin/src/pages/Register.tsx @@ -226,6 +226,7 @@ const CarouselWrapper = ({ return ( { // query registration to check if it is approved