Skip to content

Commit

Permalink
more breadcrumbs
Browse files Browse the repository at this point in the history
  • Loading branch information
@kearfy
kearfy committed Apr 14, 2024
1 parent ea5a9ec commit a7fe3bc
Show file tree
Hide file tree
Showing 2 changed files with 120 additions and 34 deletions.
84 changes: 64 additions & 20 deletions src/app/[locale]/(console)/flow/event-signup/[event]/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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() {
Expand Down Expand Up @@ -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 });

Expand Down Expand Up @@ -251,15 +265,44 @@ function Render({
profile={event}
className="absolute z-0 aspect-auto h-full w-full rounded-xl"
/>
{tournament && (
<div className="absolute left-0 top-0 z-[2] m-5 rounded-lg p-1 pl-2 backdrop-blur-lg">
<Profile
profile={tournament}
size="extra-tiny"
noSub
renderBadge={false}
clickable
/>
{tournament_path.length > 1 && (
<div className="absolute left-0 top-0 z-[2] m-5 rounded-lg bg-white/5 px-2 py-1 backdrop-blur">
<Breadcrumb>
<BreadcrumbList>
{tournament_path.map((item, i) =>
item.id == event.id ? (
<BreadcrumbItem key={item.id}>
<BreadcrumbPage>
{item.name}
</BreadcrumbPage>
</BreadcrumbItem>
) : (
<Fragment key={item.id}>
<BreadcrumbItem>
<BreadcrumbLink
className="flex items-center gap-2"
href={
linkToProfile(
item,
'public'
) ?? ''
}
>
{i == 0 && (
<Avatar
profile={item}
size="extra-tiny"
/>
)}
{item.name}
</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
</Fragment>
)
)}
</BreadcrumbList>
</Breadcrumb>
</div>
)}
<div className="relative z-[1] w-full bg-gradient-to-t from-black to-transparent p-6 pb-8 pt-32">
Expand Down Expand Up @@ -770,6 +813,9 @@ function Render({
);
}

const TournamentPath = z.array(Event);
type TournamentPath = z.infer<typeof TournamentPath>;

function useData({ slug }: { slug: string }) {
const surreal = useSurreal();
return useQuery({
Expand All @@ -779,41 +825,39 @@ 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,
}
);

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]),
};
},
});
Expand Down
70 changes: 56 additions & 14 deletions src/app/[locale]/(public)/e/[event]/registration/[id]/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,17 +14,27 @@ 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';
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();
Expand Down Expand Up @@ -103,7 +113,7 @@ export default function Page() {
if (isPending) return <LoaderOverlay />;
if (!data) return <NotFoundScreen text="Registration not found" />;

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 (
Expand All @@ -114,15 +124,44 @@ export default function Page() {
loading={isPending}
className="absolute z-0 aspect-auto h-full w-full rounded-xl"
/>
{main_tournament && (
<div className="absolute left-0 top-0 z-[2] m-5 rounded-lg p-1 pl-2 backdrop-blur-lg">
<Profile
profile={main_tournament}
size="extra-tiny"
noSub
renderBadge={false}
clickable
/>
{tournament_path.length > 1 && (
<div className="absolute left-0 top-0 z-[2] m-5 rounded-lg bg-white/5 px-2 py-1 backdrop-blur">
<Breadcrumb>
<BreadcrumbList>
{tournament_path.map((item, i) =>
item.id == event.id ? (
<BreadcrumbItem key={item.id}>
<BreadcrumbPage>
{item.name}
</BreadcrumbPage>
</BreadcrumbItem>
) : (
<Fragment key={item.id}>
<BreadcrumbItem>
<BreadcrumbLink
className="flex items-center gap-2"
href={
linkToProfile(
item,
'public'
) ?? ''
}
>
{i == 0 && (
<Avatar
profile={item}
size="extra-tiny"
/>
)}
{item.name}
</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
</Fragment>
)
)}
</BreadcrumbList>
</Breadcrumb>
</div>
)}
<div className="relative z-[1] flex w-full flex-wrap items-center justify-between gap-8 bg-gradient-to-t from-black to-transparent p-6 pb-8 pt-36">
Expand Down Expand Up @@ -272,6 +311,9 @@ export default function Page() {
);
}

const TournamentPath = z.array(Event);
type TournamentPath = z.infer<typeof TournamentPath>;

function useData({
slug,
regId,
Expand All @@ -286,15 +328,15 @@ 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)
WHERE out = type::thing('event', $slug)
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;
`,
Expand All @@ -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],
};
Expand Down

0 comments on commit a7fe3bc

Please sign in to comment.