From a7fe3bc291cac98139af21da33ba183d116a931c Mon Sep 17 00:00:00 2001 From: Micha de Vries Date: Sun, 14 Apr 2024 23:03:57 +0200 Subject: [PATCH] more breadcrumbs --- .../flow/event-signup/[event]/page.tsx | 84 ++++++++++++++----- .../e/[event]/registration/[id]/page.tsx | 70 ++++++++++++---- 2 files changed, 120 insertions(+), 34 deletions(-) diff --git a/src/app/[locale]/(console)/flow/event-signup/[event]/page.tsx b/src/app/[locale]/(console)/flow/event-signup/[event]/page.tsx index 512f9ef..d8fc0c1 100644 --- a/src/app/[locale]/(console)/flow/event-signup/[event]/page.tsx +++ b/src/app/[locale]/(console)/flow/event-signup/[event]/page.tsx @@ -14,6 +14,14 @@ import { AccordionItem, AccordionTrigger, } from '@/components/ui/accordion'; +import { + Breadcrumb, + BreadcrumbItem, + BreadcrumbLink, + BreadcrumbList, + BreadcrumbPage, + BreadcrumbSeparator, +} from '@/components/ui/breadcrumb'; import { Button, buttonVariants } from '@/components/ui/button'; import { Table, @@ -38,7 +46,13 @@ import { Baby, Clock, Plus, Users } from 'lucide-react'; import { useTranslations } from 'next-intl'; import { useParams } from 'next/navigation'; import { parseAsArrayOf, parseAsString, useQueryState } from 'nuqs'; -import React, { useCallback, useEffect, useMemo, useState } from 'react'; +import React, { + Fragment, + useCallback, + useEffect, + useMemo, + useState, +} from 'react'; import { z } from 'zod'; export default function Page() { @@ -73,7 +87,7 @@ function Render({ }) { const t = useTranslations('pages.console.flow.event-signup'); const [createTeamOpen, setCreateTeamOpen] = useState(false); - const { event, tournament, registration, self_eligable } = data; + const { event, tournament_path, registration, self_eligable } = data; const router = useRouter(); const { user } = useAuth({ authRequired: true }); @@ -251,15 +265,44 @@ function Render({ profile={event} className="absolute z-0 aspect-auto h-full w-full rounded-xl" /> - {tournament && ( -
- + {tournament_path.length > 1 && ( +
+ + + {tournament_path.map((item, i) => + item.id == event.id ? ( + + + {item.name} + + + ) : ( + + + + {i == 0 && ( + + )} + {item.name} + + + + + ) + )} + +
)}
@@ -770,6 +813,9 @@ function Render({ ); } +const TournamentPath = z.array(Event); +type TournamentPath = z.infer; + function useData({ slug }: { slug: string }) { const surreal = useSurreal(); return useQuery({ @@ -779,26 +825,24 @@ function useData({ slug }: { slug: string }) { queryFn: async () => { const result = await surreal.query< [ - null, null, null, Event, - Event | null, Team[], RichAttends | null, boolean, + TournamentPath, ] >( /* surql */ ` LET $event = SELECT * FROM ONLY type::thing('event', $slug); - LET $tournament = $event.tournament.*; LET $teams = SELECT * FROM $auth->plays_in->team WHERE fn::team::eligable_to_play(id, $event.id); $event; - $tournament; $teams; SELECT * FROM ONLY fn::team::find_actor_registration($auth, $event.id) FETCH in, out, players.*; fn::team::eligable_to_play($auth, $event.id); + SELECT * FROM $event.tournament_path ?? []; `, { slug, @@ -806,14 +850,14 @@ function useData({ slug }: { slug: string }) { ); return { - event: Event.parse(result[3]), - tournament: Event.optional().parse(result[4] ?? undefined), - teams: z.array(Team).parse(result[5]), + event: Event.parse(result[2]), + teams: z.array(Team).parse(result[3]), registration: RichAttends.optional().parse( - result[6] ?? undefined + result[4] ?? undefined ), - self_eligable: !!result[7], + self_eligable: !!result[5], event_id: event, + tournament_path: TournamentPath.parse(result[6]), }; }, }); diff --git a/src/app/[locale]/(public)/e/[event]/registration/[id]/page.tsx b/src/app/[locale]/(public)/e/[event]/registration/[id]/page.tsx index 56f2236..c8eb33f 100644 --- a/src/app/[locale]/(public)/e/[event]/registration/[id]/page.tsx +++ b/src/app/[locale]/(public)/e/[event]/registration/[id]/page.tsx @@ -14,6 +14,14 @@ import { DDTitle, DDTrigger, } from '@/components/ui-custom/dd'; +import { + Breadcrumb, + BreadcrumbItem, + BreadcrumbLink, + BreadcrumbList, + BreadcrumbPage, + BreadcrumbSeparator, +} from '@/components/ui/breadcrumb'; import { Button, buttonVariants } from '@/components/ui/button'; import { useSurreal } from '@/lib/Surreal'; import { cn } from '@/lib/utils'; @@ -21,10 +29,12 @@ import { Link } from '@/locales/navigation'; import { Attends, RichAttends } from '@/schema/relations/attends'; import { Event } from '@/schema/resources/event'; import { Organisation } from '@/schema/resources/organisation'; +import { linkToProfile } from '@/schema/resources/profile'; import { User } from '@/schema/resources/user'; import { useMutation, useQuery } from '@tanstack/react-query'; import { useParams, useRouter } from 'next/navigation'; -import React, { useCallback, useMemo } from 'react'; +import React, { Fragment, useCallback, useMemo } from 'react'; +import { z } from 'zod'; export default function Page() { const router = useRouter(); @@ -103,7 +113,7 @@ export default function Page() { if (isPending) return ; if (!data) return ; - const { registration, main_tournament, is_player, can_manage } = data; + const { registration, tournament_path, is_player, can_manage } = data; const { out: event, in: registrant, players } = registration; return ( @@ -114,15 +124,44 @@ export default function Page() { loading={isPending} className="absolute z-0 aspect-auto h-full w-full rounded-xl" /> - {main_tournament && ( -
- + {tournament_path.length > 1 && ( +
+ + + {tournament_path.map((item, i) => + item.id == event.id ? ( + + + {item.name} + + + ) : ( + + + + {i == 0 && ( + + )} + {item.name} + + + + + ) + )} + +
)}
@@ -272,6 +311,9 @@ export default function Page() { ); } +const TournamentPath = z.array(Event); +type TournamentPath = z.infer; + function useData({ slug, regId, @@ -286,7 +328,7 @@ function useData({ throwOnError: true, queryFn: async () => { const result = await surreal.query< - [null, RichAttends | null, Event, boolean, boolean] + [null, RichAttends | null, TournamentPath, boolean, boolean] >( /* surql */ ` LET $registration = SELECT * FROM ONLY type::thing('attends', $regId) @@ -294,7 +336,7 @@ function useData({ FETCH in, out, players.*; $registration; - $registration.out.computed.tournament.*; + SELECT * FROM $registration.out.tournament_path ?? []; $auth IN $registration.players.id; $auth IN $registration.out.organiser.managers[?role IN ['owner', 'administrator', 'event_manager']].user; `, @@ -309,7 +351,7 @@ function useData({ return { registration: RichAttends.parse(result[1]), - main_tournament: Event.optional().parse(result[2] ?? undefined), + tournament_path: TournamentPath.parse(result[2]), is_player: !!result[3], can_manage: !!result[4], };