kyle/flxn-app
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

several changes

Browse Source
This commit is contained in:
yohlo
2025-08-27 09:29:42 -05:00
parent 75479be334
commit 1eb621dd34
19 changed files with 140 additions and 330 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
src/app/routes/_authed/admin/tournaments/$id.tsx
View File

@@ -1,21 +1,28 @@
import { createFileRoute } from '@tanstack/react-router'
import { createFileRoute, redirect } from '@tanstack/react-router'
import { tournamentQueries } from '@/features/tournaments/queries'
import { useQuery } from '@tanstack/react-query'
import { useAuth } from '@/contexts/auth-context'
import EditTournament from '@/features/admin/components/edit-tournament'
import Page from '@/components/page'
import { Loader } from '@mantine/core'
import { List } from '@mantine/core'
import ListButton from '@/components/list-button'
import { HardDrivesIcon, PencilLineIcon, UsersThreeIcon } from '@phosphor-icons/react'
import { useSheet } from '@/hooks/use-sheet'
import Sheet from '@/components/sheet/sheet'
import TournamentForm from '@/features/tournaments/components/tournament-form'
export const Route = createFileRoute('/_authed/admin/tournaments/$id')({
beforeLoad: async ({ context, params }) => {
const { queryClient } = context;
await queryClient.ensureQueryData(tournamentQueries.details(params.id))
const tournament = await queryClient.ensureQueryData(tournamentQueries.details(params.id))
if (!tournament) throw redirect({ to: '/admin/tournaments' });
return {
tournament
}
},
loader: () => ({
loader: ({ context }) => ({
header: {
withBackButton: true,
title: 'Edit Tournament',
title: `Manage ${context.tournament.name}`,
},
withPadding: false
}),
component: RouteComponent,
})
@@ -25,9 +32,30 @@ function RouteComponent() {
const { data: tournament } = useQuery(tournamentQueries.details(id))
if (!tournament) throw new Error("Tournament not found.")
const { isOpen: editTournamentOpened, open: openEditTournament, close: closeEditTournament } = useSheet();
return (
<Page>
<EditTournament tournament={tournament} />
</Page>
<>
<List>
<ListButton label="Edit Tournament" Icon={HardDrivesIcon} onClick={openEditTournament} />
<ListButton label="Edit Rules" Icon={PencilLineIcon} onClick={console.log} />
<ListButton label="Edit Enrolled Teams" Icon={UsersThreeIcon} onClick={console.log} />
</List>
<Sheet opened={editTournamentOpened} onChange={closeEditTournament}>
<TournamentForm
tournamentId={tournament.id}
initialValues={{
name: tournament.name,
location: tournament.location,
desc: tournament.desc,
start_time: tournament.start_time,
enroll_time: tournament.enroll_time,
end_time: tournament.end_time,
}}
close={closeEditTournament}
/>
</Sheet>
</>
)
}

4
src/app/routes/_authed/tournaments/index.tsx
View File

@@ -7,7 +7,7 @@ import { useQuery } from '@tanstack/react-query'
import { useAuth } from '@/contexts/auth-context'
import { useSheet } from '@/hooks/use-sheet'
import Sheet from '@/components/sheet/sheet'
import CreateTournament from '@/features/admin/components/create-tournament'
import TournamentForm from '@/features/tournaments/components/tournament-form'
import { PlusIcon } from '@phosphor-icons/react'
import Button from '@/components/button'
@@ -38,7 +38,7 @@ function RouteComponent() {
<>
<Button leftSection={<PlusIcon />} variant='subtle' onClick={sheet.open}>Create Tournament</Button>
<Sheet {...sheet.props} title='Create Tournament'>
<CreateTournament close={sheet.close} />
<TournamentForm close={sheet.close} />
</Sheet>
</>
) : null

4
src/app/routes/api/events.$.ts
View File

@@ -5,7 +5,7 @@ import { superTokensRequestMiddleware } from "@/utils/supertokens";
export const ServerRoute = createServerFileRoute("/api/events/$").middleware([superTokensRequestMiddleware]).methods({
GET: ({ request, context }) => {
logger.info('ServerEvents | New connection', (context as any)?.userAuthId);
logger.info('ServerEvents | New connection', context?.userAuthId);
const stream = new ReadableStream({
start(controller) {
@@ -41,7 +41,7 @@ export const ServerRoute = createServerFileRoute("/api/events/$").middleware([su
serverEvents.off("test", handleEvent);
clearInterval(pingInterval);
try {
logger.info('ServerEvents | Closing connection', (context as any)?.userAuthId);
logger.info('ServerEvents | Closing connection', context?.userAuthId);
controller.close();
} catch (e) {
logger.error('ServerEvents | Error closing controller', e);

78
src/components/date-input.tsx
View File

@@ -1,78 +0,0 @@
import { TextInput, Flex, Box, Button } from "@mantine/core";
import { CalendarIcon } from "@phosphor-icons/react";
import { useSheet } from "@/hooks/use-sheet";
import Sheet from "@/components/sheet/sheet";
import { DateTimePicker } from "../features/admin/components/date-time-picker";
interface DateInputProps {
label: string;
value: string;
onChange: (value: string) => void;
withAsterisk?: boolean;
error?: React.ReactNode;
placeholder?: string;
}
// Date input that opens a sheet with mantine date time picker when clicked
export const DateInputSheet = ({
label,
value,
onChange,
withAsterisk,
error,
placeholder
}: DateInputProps) => {
const sheet = useSheet();
const formatDisplayValue = (dateString: string) => {
if (!dateString) return '';
const date = new Date(dateString);
if (isNaN(date.getTime())) return '';
return date.toLocaleDateString('en-US', {
weekday: 'short',
year: 'numeric',
month: 'short',
day: 'numeric',
hour: 'numeric',
minute: 'numeric',
hour12: true
});
};
const handleDateChange = (newValue: string | null) => {
onChange(newValue || '');
sheet.close();
};
const dateValue = value ? new Date(value) : null;
return (
<>
<TextInput
label={label}
value={formatDisplayValue(value)}
onClick={sheet.open}
readOnly
withAsterisk={withAsterisk}
error={error}
placeholder={placeholder || "Click to select date"}
rightSection={<CalendarIcon size={16} />}
style={{ cursor: 'pointer' }}
/>
<Sheet {...sheet.props} title={`Select ${label}`}>
<Flex gap='xs' direction='column' justify='center' p="md">
<Box mx='auto'>
<DateTimePicker
value={dateValue}
onChange={handleDateChange}
/>
</Box>
<Button onClick={sheet.close} variant="subtle">
Close
</Button>
</Flex>
</Sheet>
</>
);
};

0
src/features/admin/components/date-time-picker.tsx → src/components/date-time-picker.tsx
View File

6
src/components/list-button.tsx
View File

@@ -4,17 +4,17 @@ import { CaretRightIcon, Icon } from "@phosphor-icons/react";
interface ListButtonProps {
label: string;
Icon: Icon;
handleClick: () => void;
onClick: () => void;
}
const ListButton = ({ label, handleClick, Icon }: ListButtonProps) => {
const ListButton = ({ label, onClick, Icon }: ListButtonProps) => {
return (
<>
<UnstyledButton
w='100%'
p='md'
component={'button'}
onClick={handleClick}
onClick={onClick}
>
<Group>
<Icon weight='bold' size={20} />

4
src/components/list-link.tsx
View File

@@ -5,7 +5,7 @@ import { Link, useNavigate } from "@tanstack/react-router";
interface ListLinkProps {
label: string;
to: string;
Icon: Icon;
Icon?: Icon;
}
const ListLink = ({ label, to, Icon }: ListLinkProps) => {
@@ -19,7 +19,7 @@ const ListLink = ({ label, to, Icon }: ListLinkProps) => {
component={'button'}
onClick={() => navigate({ to })}
label={<Text fw={500} size='md'>{label}</Text>}
leftSection={<Icon weight='bold' size={20} />}
leftSection={Icon && <Icon weight='bold' size={20} />}
rightSection={<CaretRightIcon size={20} />}
/>
<Divider />

3
src/contexts/auth-context.tsx
View File

@@ -2,6 +2,7 @@ import { createContext, PropsWithChildren, useCallback, useContext, useMemo } fr
import { MantineColor, MantineColorScheme } from "@mantine/core";
import { useQuery, useQueryClient } from "@tanstack/react-query";
import { fetchMe } from "@/features/players/server";
import { Player } from "@/features/players/types";
const queryKey = ['auth'];
export const authQueryConfig = {
@@ -10,7 +11,7 @@ export const authQueryConfig = {
}
interface AuthData {
user: any;
user: Player | undefined;
metadata: { accentColor: MantineColor; colorScheme: MantineColorScheme };
roles: string[];
}

4
src/features/admin/components/admin-page.tsx
View File

@@ -1,15 +1,17 @@
import { Title, List, Divider } from "@mantine/core";
import ListLink from "@/components/list-link";
import Page from "@/components/page";
import { TrophyIcon, UsersFourIcon, UsersThreeIcon } from "@phosphor-icons/react";
import { DatabaseIcon, TrophyIcon, UsersFourIcon, UsersThreeIcon } from "@phosphor-icons/react";
import ListButton from "@/components/list-button";
const AdminPage = () => {
console.log(process.env.VITE_POCKETBASE_URL!)
return (
<Page noPadding>
<Title pl='sm' order={2} mb="md">Admin</Title>
<List>
<ListLink label="Manage Tournaments" Icon={TrophyIcon} to="/admin/tournaments" />
<ListButton label="Open Pocketbase" Icon={DatabaseIcon} onClick={() => window.location.replace(import.meta.env.VITE_POCKETBASE_URL! + "/_/")} />
</List>
</Page>
);

193
src/features/admin/components/edit-tournament.tsx
View File

@@ -1,193 +0,0 @@
import { Box, FileInput, Group, Stack, TextInput, Textarea, Title } from "@mantine/core";
import { useForm, UseFormInput } from "@mantine/form";
import { LinkIcon } from "@phosphor-icons/react";
import { Tournament, TournamentFormInput } from "@/features/tournaments/types";
import { DateInputSheet } from "../../../components/date-input";
import { isNotEmpty } from "@mantine/form";
import toast from '@/lib/sonner';
import { logger } from "..";
import { useQueryClient, useMutation } from "@tanstack/react-query";
import { tournamentQueries } from "@/features/tournaments/queries";
import { updateTournament } from "@/features/tournaments/server";
import { useRouter } from "@tanstack/react-router";
import Button from "@/components/button";
interface EditTournamentProps {
tournament: Tournament;
}
const EditTournament = ({ tournament }: EditTournamentProps) => {
const router = useRouter();
const queryClient = useQueryClient();
const config: UseFormInput<TournamentFormInput> = {
initialValues: {
name: tournament.name || '',
location: tournament.location || '',
desc: tournament.desc || '',
start_time: tournament.start_time || '',
enroll_time: tournament.enroll_time || '',
end_time: tournament.end_time || '',
rules: tournament.rules || '',
logo: undefined, // Always start with no file selected
},
onSubmitPreventDefault: 'always',
validate: {
name: isNotEmpty('Name is required'),
location: isNotEmpty('Location is required'),
start_time: isNotEmpty('Start time is required'),
enroll_time: isNotEmpty('Enrollment time is required'),
}
};
const form = useForm(config);
const { mutate: editTournament, isPending } = useMutation({
mutationFn: (data: Partial<TournamentFormInput>) =>
updateTournament({ data: { id: tournament.id, updates: data } }),
onSuccess: (updatedTournament) => {
if (updatedTournament) {
queryClient.invalidateQueries({ queryKey: tournamentQueries.list().queryKey });
queryClient.setQueryData(
tournamentQueries.details(updatedTournament.id).queryKey,
updatedTournament
);
}
}
});
const handleSubmit = async (values: TournamentFormInput) => {
const { logo, ...tournamentData } = values;
editTournament(tournamentData, {
onSuccess: async (updatedTournament) => {
if (logo && updatedTournament) {
try {
const formData = new FormData();
formData.append('tournamentId', updatedTournament.id);
formData.append('logo', logo);
const response = await fetch('/api/tournaments/upload-logo', {
method: 'POST',
body: formData,
});
if (!response.ok) {
const error = await response.json();
throw new Error(error.error || 'Failed to upload logo');
}
const result = await response.json();
queryClient.setQueryData(
tournamentQueries.details(result.tournament!.id).queryKey,
result.tournament
);
toast.success('Tournament updated successfully!');
} catch (error: any) {
toast.error(`Tournament updated but logo upload failed: ${error.message}`);
logger.error('Tournament logo upload error', error);
}
} else {
toast.success('Tournament updated successfully!');
}
router.history.back();
},
onError: (error: any) => {
toast.error(`Failed to update tournament: ${error.message}`);
logger.error('Tournament update error', error);
}
});
};
return (
<Box w="100%" maw={600} mx="auto" p="lg">
<Stack gap="lg">
<Title order={2}>Edit Tournament</Title>
<form onSubmit={form.onSubmit(handleSubmit)}>
<Stack gap="md">
<TextInput
label="Name"
withAsterisk
key={form.key('name')}
{...form.getInputProps('name')}
/>
<TextInput
label="Location"
withAsterisk
key={form.key('location')}
{...form.getInputProps('location')}
/>
<Textarea
label="Description"
key={form.key('desc')}
{...form.getInputProps('desc')}
minRows={3}
/>
<Textarea
label="Rules"
key={form.key('rules')}
{...form.getInputProps('rules')}
minRows={4}
/>
<FileInput
key={form.key('logo')}
accept="image/png,image/jpeg,image/gif,image/jpg"
label="Change Logo"
leftSection={<LinkIcon size={16} />}
{...form.getInputProps('logo')}
/>
<DateInputSheet
label="Start Date"
withAsterisk
value={form.values.start_time}
onChange={(value) => form.setFieldValue('start_time', value)}
error={form.errors.start_time}
/>
<DateInputSheet
label="Enrollment Due"
withAsterisk
value={form.values.enroll_time}
onChange={(value) => form.setFieldValue('enroll_time', value)}
error={form.errors.enroll_time}
/>
<DateInputSheet
label="End Date (Optional)"
value={form.values.end_time || ''}
onChange={(value) => form.setFieldValue('end_time', value)}
error={form.errors.end_time}
/>
<Group justify="flex-end" mt="lg">
<Button
variant="light"
onClick={() => router.history.back()}
disabled={isPending}
>
Cancel
</Button>
<Button
type="submit"
loading={isPending}
>
Update Tournament
</Button>
</Group>
</Stack>
</form>
</Stack>
</Box>
);
};
export default EditTournament;

13
src/features/admin/components/manage-tournaments.tsx
View File

@@ -1,21 +1,14 @@
import { List } from "@mantine/core";
import Page from "@/components/page";
import { TrophyIcon, UsersThreeIcon } from "@phosphor-icons/react";
import ListButton from "@/components/list-button";
import { useQuery, useSuspenseQuery } from "@tanstack/react-query";
import { useSuspenseQuery } from "@tanstack/react-query";
import { tournamentQueries } from "@/features/tournaments/queries";
import ListLink from "@/components/list-link";
const ManageTournaments = () => {
const { data: tournaments } = useSuspenseQuery(tournamentQueries.list());
return (
<List>
<ListButton
label="Edit Enrolled Teams"
Icon={UsersThreeIcon}
handleClick={console.log}
/>
{tournaments.map(t => (
<ListButton label={t.name} Icon={TrophyIcon} handleClick={console.log} />
<ListLink label={t.name} to={`/admin/tournaments/${t.id}`} />
))}
</List>
);

2
src/features/admin/index.ts
View File

@@ -2,6 +2,4 @@ import { Logger } from "@/lib/logger";
export const logger = new Logger('Admin');
export { default as CreateTournament } from './components/create-tournament';
export { default as EditTournament } from './components/edit-tournament';
export { default as AdminPage } from './components/admin-page';

6
src/features/players/server.ts
View File

@@ -45,7 +45,7 @@ export const updatePlayer = createServerFn()
.validator(playerUpdateSchema)
.middleware([superTokensFunctionMiddleware])
.handler(async ({ context, data }) => {
const userAuthId = (context as any).userAuthId;
const userAuthId = context.userAuthId;
if (!userAuthId) return;
try {
@@ -78,7 +78,7 @@ export const createPlayer = createServerFn()
.validator(playerInputSchema)
.middleware([superTokensFunctionMiddleware])
.handler(async ({ context, data }) => {
const userAuthId = (context as any).userAuthId;
const userAuthId = context.userAuthId;
if (!userAuthId) return;
try {
@@ -106,7 +106,7 @@ export const associatePlayer = createServerFn()
.validator(z.string())
.middleware([superTokensFunctionMiddleware])
.handler(async ({ context, data }) => {
const userAuthId = (context as any).userAuthId;
const userAuthId = context.userAuthId;
if (!userAuthId) return;
try {

81
src/features/admin/components/create-tournament.tsx → src/features/tournaments/components/tournament-form.tsx
View File

@@ -3,23 +3,33 @@ import { useForm, UseFormInput } from "@mantine/form";
import { LinkIcon } from "@phosphor-icons/react";
import SlidePanel, { SlidePanelField } from "@/components/sheet/slide-panel";
import { TournamentFormInput } from "@/features/tournaments/types";
import { DateTimePicker } from "./date-time-picker";
import { isNotEmpty } from "@mantine/form";
import useCreateTournament from "../hooks/use-create-tournament";
import useUpdateTournament from "../hooks/use-update-tournament";
import toast from '@/lib/sonner';
import { logger } from "..";
import { useQueryClient } from "@tanstack/react-query";
import { tournamentQueries } from "@/features/tournaments/queries";
import { DateTimePicker } from "@mantine/dates";
const CreateTournament = ({ close }: { close: () => void }) => {
interface TournamentFormProps {
close: () => void;
initialValues?: Partial<TournamentFormInput>;
tournamentId?: string;
}
const TournamentForm = ({ close, initialValues, tournamentId }: TournamentFormProps) => {
const isEditMode = !!tournamentId;
const config: UseFormInput<TournamentFormInput> = {
initialValues: { // TODO : Remove fake initial values
name: 'Test Tournament',
location: 'Test Location',
desc: 'Test Description',
start_time: '2025-01-01T00:00:00Z',
enroll_time: '2025-01-01T00:00:00Z',
initialValues: {
name: initialValues?.name || '',
location: initialValues?.location || '',
desc: initialValues?.desc || '',
start_time: initialValues?.start_time || '',
enroll_time: initialValues?.enroll_time || '',
end_time: initialValues?.end_time || '',
logo: undefined,
},
onSubmitPreventDefault: 'always',
validate: {
@@ -33,12 +43,19 @@ const CreateTournament = ({ close }: { close: () => void }) => {
const form = useForm(config);
const queryClient = useQueryClient();
const { mutate: createTournament, isPending } = useCreateTournament();
const { mutate: createTournament, isPending: createPending } = useCreateTournament();
const { mutate: updateTournament, isPending: updatePending } = useUpdateTournament(tournamentId || '');
const isPending = createPending || updatePending;
const handleSubmit = async (values: TournamentFormInput) => {
const { logo, ...tournamentData } = values;
createTournament(tournamentData, {
const mutation = isEditMode ? updateTournament : createTournament;
const successMessage = isEditMode ? 'Tournament updated successfully!' : 'Tournament created successfully!';
const errorMessage = isEditMode ? 'Failed to update tournament' : 'Failed to create tournament';
mutation(tournamentData, {
onSuccess: async (tournament) => {
if (logo && tournament) {
try {
@@ -59,18 +76,28 @@ const CreateTournament = ({ close }: { close: () => void }) => {
const result = await response.json();
queryClient.invalidateQueries({ queryKey: tournamentQueries.list().queryKey });
queryClient.invalidateQueries({ queryKey: tournamentQueries.details(result.tournament!.id).queryKey });
queryClient.setQueryData(
tournamentQueries.details(result.tournament!.id).queryKey,
result.tournament
);
toast.success('Tournament created successfully!');
toast.success(successMessage);
} catch (error: any) {
toast.error(`Tournament created but logo upload failed: ${error.message}`);
const logoErrorMessage = isEditMode
? `Tournament updated but logo upload failed: ${error.message}`
: `Tournament created but logo upload failed: ${error.message}`;
toast.error(logoErrorMessage);
logger.error('Tournament logo upload error', error);
}
} else {
toast.success(successMessage);
}
close();
},
onError: (error: any) => {
toast.error(`${errorMessage}: ${error.message}`);
logger.error(`Tournament ${isEditMode ? 'update' : 'create'} error`, error);
}
});
}
@@ -79,7 +106,7 @@ const CreateTournament = ({ close }: { close: () => void }) => {
<SlidePanel
onSubmit={form.onSubmit(handleSubmit)}
onCancel={close}
submitText="Create Tournament"
submitText={isEditMode ? "Update Tournament" : "Create Tournament"}
cancelText="Cancel"
loading={isPending}
>
@@ -97,16 +124,17 @@ const CreateTournament = ({ close }: { close: () => void }) => {
{...form.getInputProps('location')}
/>
<TextInput
label="Short Description"
<Textarea
label="Description"
key={form.key('desc')}
{...form.getInputProps('desc')}
minRows={3}
/>
<FileInput
key={form.key('logo')}
accept="image/png,image/jpeg,image/gif,image/jpg"
label="Logo"
label={isEditMode ? "Change Logo" : "Logo"}
leftSection={<LinkIcon size={16} />}
{...form.getInputProps('logo')}
/>
@@ -146,9 +174,28 @@ const CreateTournament = ({ close }: { close: () => void }) => {
hour12: true
})}
/>
{isEditMode && (
<SlidePanelField
key={form.key('end_time')}
{...form.getInputProps('end_time')}
Component={DateTimePicker}
title="Select End Date"
label="End Date (Optional)"
formatValue={(date) => date ? new Date(date).toLocaleDateString('en-US', {
weekday: 'short',
year: 'numeric',
month: 'short',
day: 'numeric',
hour: 'numeric',
minute: 'numeric',
hour12: true
}) : 'Not set'}
/>
)}
</Stack>
</SlidePanel>
);
};
export default CreateTournament;
export default TournamentForm;

0
src/features/admin/hooks/use-create-tournament.ts → src/features/tournaments/hooks/use-create-tournament.ts
View File

12
src/features/tournaments/hooks/use-update-tournament.ts Normal file
View File

@@ -0,0 +1,12 @@
import { useMutation } from "@tanstack/react-query";
import { updateTournament } from "@/features/tournaments/server";
import { TournamentFormInput } from "@/features/tournaments/types";
const useUpdateTournament = (tournamentId: string) => {
return useMutation({
mutationFn: (data: Partial<TournamentFormInput>) =>
updateTournament({ data: { id: tournamentId, updates: data } }),
});
};
export default useUpdateTournament;

6
src/utils/supertokens.ts
View File

@@ -114,7 +114,7 @@ export const setUserMetadata = createServerFn({ method: 'POST' })
}).partial())
.middleware([superTokensFunctionMiddleware])
.handler(async ({ context, data }) => {
const { userAuthId, metadata } = context as any;
const { userAuthId, metadata } = context;
if (!userAuthId) return;
await UserMetadata.updateUserMetadata(userAuthId, {
@@ -135,7 +135,7 @@ export const updateUserColorScheme = createServerFn({ method: 'POST' })
.validator((data: string) => data)
.middleware([superTokensFunctionMiddleware])
.handler(async ({ context, data }) => {
const { userAuthId, metadata } = context as any;
const { userAuthId, metadata } = context;
if (!userAuthId) return;
await UserMetadata.updateUserMetadata(userAuthId, {
@@ -154,7 +154,7 @@ export const updateUserAccentColor = createServerFn({ method: 'POST' })
.validator((data: string) => data)
.middleware([superTokensFunctionMiddleware])
.handler(async ({ context, data }) => {
const { userAuthId, metadata } = context as any;
const { userAuthId, metadata } = context;
if (!userAuthId) return;
await UserMetadata.updateUserMetadata(userAuthId, {

2
src/utils/test-event.ts
View File

@@ -7,6 +7,6 @@ export const testEvent = createServerFn()
.handler(async ({ context }) => {
serverEvents.emit('test', {
type: 'test',
userId: (context as any).userAuthId,
userId: context.userAuthId,
});
});

2
tsconfig.json
View File

@@ -1,7 +1,7 @@
{
"include": ["**/*.ts", "**/*.tsx"],
"compilerOptions": {
"strict": false,
"strict": true,
"strictNullChecks": true,
"esModuleInterop": true,
"jsx": "react-jsx",