-
- setFriendCode(e.target.value)}
- />
-
+
+ setSearchParams({ friendCode })}
+ >
+ {({ FormField }) =>
{data.friendCodeSearchUsers?.map((user) => (
();
- const [newUserId, setNewUserId] = React.useState();
- const navigation = useNavigation();
- const fetcher = useFetcher();
-
return (
-
-
- Note: data on "New user" will be deleted (e.g. builds)
-
-
+
+ {({ FormField }) => (
+ <>
+
);
}
function LinkPlayer() {
- const fetcher = useFetcher();
-
return (
-
-
+
+ {({ FormField }) => (
+ <>
+
);
}
function GiveArtist() {
- const fetcher = useFetcher();
-
return (
-
-
+
+ {({ FormField }) =>
);
}
function GiveVideoAdder() {
- const fetcher = useFetcher();
-
return (
-
-
+
+ {({ FormField }) =>
);
}
function GiveTournamentOrganizer() {
- const fetcher = useFetcher();
-
return (
-
-
+
+ {({ FormField }) =>
);
}
function GiveApiAccess() {
- const fetcher = useFetcher();
-
return (
-
-
+
+ {({ FormField }) =>
);
}
function UpdateFriendCode() {
- const fetcher = useFetcher();
- const id = React.useId();
-
return (
-
-
+
+ {({ FormField }) => (
+ <>
+
);
}
function ForcePatron() {
- const fetcher = useFetcher();
-
return (
-
-
+
+ {({ FormField }) => (
+ <>
+
);
}
function BanUser() {
- const fetcher = useFetcher();
-
return (
-
-
+ Ban user}
+ submitButtonText="Save"
+ >
+ {({ FormField }) => (
+ <>
+
);
}
function UnbanUser() {
- const fetcher = useFetcher();
-
return (
-
-
+ Unban user}
+ submitButtonText="Save"
+ >
+ {({ FormField }) =>
);
}
function RefreshPlusTiers() {
- const fetcher = useFetcher();
-
return (
-
-
- Refresh
-
-
+
+ {null}
+
);
}
diff --git a/app/features/associations/associations-schemas.ts b/app/features/associations/associations-schemas.ts
index 288dde12f..104c53b81 100644
--- a/app/features/associations/associations-schemas.ts
+++ b/app/features/associations/associations-schemas.ts
@@ -1,10 +1,10 @@
import { z } from "zod";
-import { textFieldRequired } from "~/form/fields";
+import { textField } from "~/form/fields";
import { _action, id, inviteCode } from "~/utils/zod";
import { ASSOCIATION } from "./associations-constants";
export const createNewAssociationSchema = z.object({
- name: textFieldRequired({
+ name: textField({
label: "labels.name",
maxLength: 100,
}),
diff --git a/app/features/badges/components/BadgesSelector.tsx b/app/features/badges/components/BadgesSelector.tsx
index 13f312ba3..7fe2ff39d 100644
--- a/app/features/badges/components/BadgesSelector.tsx
+++ b/app/features/badges/components/BadgesSelector.tsx
@@ -12,6 +12,7 @@ export function BadgesSelector({
children,
maxCount,
showSelect = true,
+ disabled,
}: {
options: BadgeDisplayProps["badges"];
selectedBadges: number[];
@@ -20,6 +21,7 @@ export function BadgesSelector({
children?: React.ReactNode;
maxCount?: number;
showSelect?: boolean;
+ disabled?: boolean;
}) {
const { t } = useTranslation(["common"]);
@@ -35,7 +37,7 @@ export function BadgesSelector({
return aIdx - bIdx;
})}
- onChange={onChange}
+ onChange={disabled ? undefined : onChange}
key={selectedBadges.join(",")}
>
{children}
@@ -56,7 +58,9 @@ export function BadgesSelector({
onChange={(e) =>
onChange([...selectedBadges, Number(e.target.value)])
}
- disabled={Boolean(maxCount && selectedBadges.length >= maxCount)}
+ disabled={
+ disabled || Boolean(maxCount && selectedBadges.length >= maxCount)
+ }
data-testid="badges-selector"
>
diff --git a/app/features/calendar/actions/calendar.$id.report-winners.server.ts b/app/features/calendar/actions/calendar.$id.report-winners.server.ts
index d491e4752..f09aaa0c0 100644
--- a/app/features/calendar/actions/calendar.$id.report-winners.server.ts
+++ b/app/features/calendar/actions/calendar.$id.report-winners.server.ts
@@ -2,15 +2,15 @@ import type { ActionFunction } from "react-router";
import { redirect } from "react-router";
import { requireUser } from "~/features/auth/core/user.server";
import * as CalendarRepository from "~/features/calendar/CalendarRepository.server";
+import { parseFormData } from "~/form/parse.server";
import {
errorToastIfFalsy,
notFoundIfNullish,
parseParams,
- safeParseRequestFormData,
} from "~/utils/remix.server";
import { calendarEventPage } from "~/utils/urls";
import { idObject } from "~/utils/zod";
-import { reportWinnersActionSchema } from "../calendar-schemas";
+import { reportWinnersFormSchema } from "../calendar-schemas";
import { canReportCalendarEventWinners } from "../calendar-utils";
export const action: ActionFunction = async (args) => {
@@ -19,15 +19,13 @@ export const action: ActionFunction = async (args) => {
params: args.params,
schema: idObject,
});
- const parsedInput = await safeParseRequestFormData({
+ const result = await parseFormData({
request: args.request,
- schema: reportWinnersActionSchema,
+ schema: reportWinnersFormSchema,
});
- if (!parsedInput.success) {
- return {
- errors: parsedInput.errors,
- };
+ if (!result.success) {
+ return { fieldErrors: result.fieldErrors };
}
const event = notFoundIfNullish(await CalendarRepository.findById(params.id));
@@ -42,15 +40,8 @@ export const action: ActionFunction = async (args) => {
await CalendarRepository.upsertReportedScores({
eventId: params.id,
- participantCount: parsedInput.data.participantCount,
- results: parsedInput.data.team.map((t) => ({
- teamName: t.teamName,
- placement: t.placement,
- players: t.players.map((p) => ({
- userId: typeof p === "string" ? null : p.id,
- name: typeof p === "string" ? p : null,
- })),
- })),
+ participantCount: result.data.participantCount,
+ results: result.data.teams,
});
throw redirect(calendarEventPage(params.id));
diff --git a/app/features/calendar/actions/calendar.tsx b/app/features/calendar/actions/calendar.tsx
index fb88e06a2..cca7513ab 100644
--- a/app/features/calendar/actions/calendar.tsx
+++ b/app/features/calendar/actions/calendar.tsx
@@ -1,21 +1,23 @@
import { type ActionFunctionArgs, redirect } from "react-router";
import { calendarFiltersSearchParamsSchema } from "~/features/calendar/calendar-schemas";
import * as UserRepository from "~/features/user-page/UserRepository.server";
-import {
- parseRequestPayload,
- parseSafeSearchParams,
-} from "~/utils/remix.server";
+import { parseFormData } from "~/form/parse.server";
+import { parseSafeSearchParams } from "~/utils/remix.server";
import { calendarPage } from "~/utils/urls";
import { dayMonthYear } from "~/utils/zod";
export const action = async ({ request }: ActionFunctionArgs) => {
- const data = await parseRequestPayload({
+ const result = await parseFormData({
request,
schema: calendarFiltersSearchParamsSchema,
});
+ if (!result.success) {
+ return { fieldErrors: result.fieldErrors };
+ }
+
await UserRepository.updateOwnPreferences({
- defaultCalendarFilters: data,
+ defaultCalendarFilters: result.data,
});
const parsedSearchParams = parseSafeSearchParams({
diff --git a/app/features/calendar/calendar-constants.ts b/app/features/calendar/calendar-constants.ts
index 65c74de6f..adb183f60 100644
--- a/app/features/calendar/calendar-constants.ts
+++ b/app/features/calendar/calendar-constants.ts
@@ -94,6 +94,8 @@ export const EXCLUDED_TAGS: Array = ["CARDS", "SR"];
export const CALENDAR_EVENT_RESULT = {
MAX_PARTICIPANTS_COUNT: 1000,
+ MAX_TEAMS_COUNT: 100,
+ DEFAULT_PLAYERS_LENGTH: 4,
MAX_PLAYERS_LENGTH: 8,
MAX_TEAM_NAME_LENGTH: 100,
MAX_TEAM_PLACEMENT: 256,
diff --git a/app/features/calendar/calendar-new-schemas.ts b/app/features/calendar/calendar-new-schemas.ts
index 66d86d548..4b332e0c5 100644
--- a/app/features/calendar/calendar-new-schemas.ts
+++ b/app/features/calendar/calendar-new-schemas.ts
@@ -5,16 +5,17 @@ import {
badges,
checkboxGroup,
customField,
+ datetime,
datetimeOptional,
- datetimeRequired,
+ hidden,
idConstantOptional,
image,
numberFieldOptional,
select,
selectDynamicOptional,
textAreaOptional,
+ textField,
textFieldOptional,
- textFieldRequired,
toggle,
} from "~/form/fields";
import { rankedModesShort } from "~/modules/in-game-lists/modes";
@@ -23,7 +24,7 @@ import { bracketProgressionSchema } from "./calendar-schemas";
import { calendarEventMaxDate, calendarEventMinDate } from "./calendar-utils";
/** Single date row of the {@link calendarNewBaseSchema} `date` array (calendar events). */
-const calendarEventDateField = datetimeRequired({
+const calendarEventDateField = datetime({
label: "labels.date",
min: calendarEventMinDate,
max: calendarEventMaxDate,
@@ -31,10 +32,10 @@ const calendarEventDateField = datetimeRequired({
export const calendarNewBaseSchema = z.object({
// discriminates between a calendar event and a tournament; seeded from the loader, no visible control
- toToolsEnabled: customField({ initialValue: false }, z.boolean()),
+ toToolsEnabled: hidden(z.boolean(), false),
eventToEditId: idConstantOptional(),
tournamentToCopyId: idConstantOptional(),
- name: textFieldRequired({
+ name: textField({
label: "labels.name",
minLength: CALENDAR_EVENT.NAME_MIN_LENGTH,
maxLength: CALENDAR_EVENT.NAME_MAX_LENGTH,
diff --git a/app/features/calendar/calendar-schemas.ts b/app/features/calendar/calendar-schemas.ts
index a65b72c5d..5a7d9d8db 100644
--- a/app/features/calendar/calendar-schemas.ts
+++ b/app/features/calendar/calendar-schemas.ts
@@ -9,8 +9,12 @@ import * as Progression from "~/features/tournament-bracket/core/Progression";
import {
array,
checkboxGroup,
+ customField,
+ fieldset,
+ numberField,
numberFieldOptional,
radioGroup,
+ textField,
textFieldOptional,
toggle,
userSearchOptional,
@@ -18,12 +22,10 @@ import {
import { gamesShort, versusShort } from "~/modules/in-game-lists/games";
import { modesShortWithSpecial } from "~/modules/in-game-lists/modes";
import {
- actualNumber,
gamesShortSchema,
id,
modeShortWithSpecial,
safeJSONParse,
- toArray,
} from "~/utils/zod";
import { CALENDAR_EVENT, CALENDAR_EVENT_RESULT } from "./calendar-constants";
import * as CalendarEvent from "./core/CalendarEvent";
@@ -181,67 +183,116 @@ export const calendarFiltersSearchParamsObject = z.object({
.catch(CalendarEvent.defaultFilters()),
});
-const playersSchema = z
- .array(
- z.union([
- z.string().min(1).max(CALENDAR_EVENT_RESULT.MAX_PLAYER_NAME_LENGTH),
- z.object({ id }),
- ]),
- )
- .nonempty({ message: "forms.errors.emptyTeam" })
+const reportedPlayerSchema = z.discriminatedUnion("type", [
+ z.object({ type: z.literal("USER"), id: id.nullable() }),
+ z.object({
+ type: z.literal("NAME"),
+ name: z
+ .string()
+ .max(CALENDAR_EVENT_RESULT.MAX_PLAYER_NAME_LENGTH)
+ .nullable(),
+ }),
+]);
+
+export type ReportedPlayer = z.infer;
+
+export const EMPTY_REPORTED_PLAYER: ReportedPlayer = { type: "USER", id: null };
+
+type StoredReportedPlayer = { userId: number | null; name: string | null };
+
+const reportedPlayersSchema = z
+ .array(reportedPlayerSchema)
.max(CALENDAR_EVENT_RESULT.MAX_PLAYERS_LENGTH)
+ .transform((players) =>
+ players.flatMap((player): Array => {
+ if (player.type === "USER") {
+ return player.id === null ? [] : [{ userId: player.id, name: null }];
+ }
+
+ return player.name ? [{ userId: null, name: player.name }] : [];
+ }),
+ )
+ .refine((players) => players.length > 0, {
+ message: "forms:errors.emptyTeam",
+ })
.refine(
- (val) => {
- const userIds = val.flatMap((user) =>
- typeof user === "string" ? [] : user.id,
- );
+ (players) => {
+ const userIds = players.flatMap((player) => player.userId ?? []);
return userIds.length === new Set(userIds).size;
},
- {
- message: "forms.errors.duplicatePlayer",
- },
+ { message: "forms:errors.duplicatePlayer" },
);
-export const reportWinnersActionSchema = z.object({
- participantCount: z.preprocess(
- actualNumber,
- z
- .number()
- .int()
- .positive()
- .max(CALENDAR_EVENT_RESULT.MAX_PARTICIPANTS_COUNT),
- ),
- team: z.preprocess(
- toArray,
- z
- .array(
- z.preprocess(
- safeJSONParse,
- z.object({
- teamName: z
- .string()
- .min(1)
- .max(CALENDAR_EVENT_RESULT.MAX_TEAM_NAME_LENGTH),
- placement: z.preprocess(
- actualNumber,
- z
- .number()
- .int()
- .positive()
- .max(CALENDAR_EVENT_RESULT.MAX_TEAM_PLACEMENT),
- ),
- players: playersSchema,
- }),
- ),
- )
- .refine(
- (val) => val.length === new Set(val.map((team) => team.teamName)).size,
- { message: "forms.errors.uniqueTeamName" },
- ),
- ),
+const reportedTeamFieldset = fieldset({
+ fields: z.object({
+ teamName: textField({
+ label: "labels.teamName",
+ maxLength: CALENDAR_EVENT_RESULT.MAX_TEAM_NAME_LENGTH,
+ }),
+ placement: numberField({
+ label: "labels.placement",
+ maxLength: String(CALENDAR_EVENT_RESULT.MAX_TEAM_PLACEMENT).length,
+ }),
+ players: customField(
+ {
+ initialValue: new Array(
+ CALENDAR_EVENT_RESULT.DEFAULT_PLAYERS_LENGTH,
+ ).fill(EMPTY_REPORTED_PLAYER),
+ },
+ reportedPlayersSchema,
+ ),
+ }),
});
+export const reportWinnersFormSchema = z
+ .object({
+ participantCount: numberField({
+ label: "labels.participantCount",
+ maxLength: String(CALENDAR_EVENT_RESULT.MAX_PARTICIPANTS_COUNT).length,
+ }),
+ teams: array({
+ label: "labels.teams",
+ min: 1,
+ max: CALENDAR_EVENT_RESULT.MAX_TEAMS_COUNT,
+ field: reportedTeamFieldset,
+ }),
+ })
+ .superRefine((data, ctx) => {
+ if (
+ data.participantCount < 1 ||
+ data.participantCount > CALENDAR_EVENT_RESULT.MAX_PARTICIPANTS_COUNT
+ ) {
+ ctx.addIssue({
+ code: z.ZodIssueCode.custom,
+ message: "forms:errors.numberOutOfRange",
+ path: ["participantCount"],
+ });
+ }
+
+ for (const [index, team] of data.teams.entries()) {
+ if (
+ team.placement < 1 ||
+ team.placement > CALENDAR_EVENT_RESULT.MAX_TEAM_PLACEMENT
+ ) {
+ ctx.addIssue({
+ code: z.ZodIssueCode.custom,
+ message: "forms:errors.numberOutOfRange",
+ path: ["teams", index, "placement"],
+ });
+ }
+ }
+
+ const teamNames = data.teams.map((team) => team.teamName);
+ if (teamNames.length !== new Set(teamNames).size) {
+ ctx.addIssue({
+ code: z.ZodIssueCode.custom,
+ message: "forms:errors.uniqueTeamName",
+ path: ["teams"],
+ });
+ }
+ });
+
export const bracketProgressionSchema = z.preprocess(
safeJSONParse,
z
diff --git a/app/features/calendar/routes/calendar.$id.report-winners.tsx b/app/features/calendar/routes/calendar.$id.report-winners.tsx
index 6f507f4b3..4d0417375 100644
--- a/app/features/calendar/routes/calendar.$id.report-winners.tsx
+++ b/app/features/calendar/routes/calendar.$id.report-winners.tsx
@@ -1,18 +1,26 @@
-import clsx from "clsx";
import * as React from "react";
import { useTranslation } from "react-i18next";
-import { Form, useLoaderData } from "react-router";
+import { useLoaderData } from "react-router";
import { SendouButton } from "~/components/elements/Button";
import { UserSearch } from "~/components/elements/UserSearch";
-import { FormErrors } from "~/components/FormErrors";
import { FormMessage } from "~/components/FormMessage";
import { Label } from "~/components/Label";
import { Main } from "~/components/Main";
+import type { CustomFieldRenderProps } from "~/form/FormField";
+import { useTranslatedTexts } from "~/form/fields/FormFieldWrapper";
+import { SendouForm } from "~/form/SendouForm";
+import type { ArrayItemRenderContext } from "~/form/types";
+import { errorMessageId } from "~/form/utils";
import type { SerializeFrom } from "~/utils/remix";
import type { SendouRouteHandle } from "~/utils/remix.server";
import type { Unpacked } from "~/utils/types";
import { action } from "../actions/calendar.$id.report-winners.server";
import { CALENDAR_EVENT_RESULT } from "../calendar-constants";
+import {
+ EMPTY_REPORTED_PLAYER,
+ type ReportedPlayer,
+ reportWinnersFormSchema,
+} from "../calendar-schemas";
import { loader } from "../loaders/calendar.$id.report-winners.server";
export { action, loader };
@@ -22,290 +30,108 @@ export const handle: SendouRouteHandle = {
};
export default function ReportWinnersPage() {
- const { t } = useTranslation(["common", "calendar"]);
+ const { t } = useTranslation(["calendar"]);
const data = useLoaderData();
return (
-
+ ({
+ teamName: team.teamName,
+ placement: team.placement,
+ players: team.players.map(playerToFormValue),
+ })),
+ }}
+ >
+ {({ FormField }) => (
+ <>
+
+ {t("calendar:forms.reportResultsInfo")}
+
+
+ {({ itemName }: ArrayItemRenderContext) => (
+
+
+ )}
+
);
}
-function ParticipantsCountInput() {
- const { t } = useTranslation("calendar");
- const data = useLoaderData();
+type LoadedPlayer = Unpacked<
+ Unpacked["winners"]>["players"]
+>;
- return (
- ();
- const [amountOfTeams, setAmountOfTeams] = React.useState(
- Math.max(data.winners.length, 1),
- );
+function PlayersFormField({
+ name,
+ value,
+ onChange,
+ error,
+}: CustomFieldRenderProps) {
+ const { t } = useTranslation(["calendar"]);
+ const { translatedError } = useTranslatedTexts({ error });
+ const players = value as Array;
- const handleTeamDelete = () => {
- setAmountOfTeams(amountOfTeams - 1);
+ const handlePlayerChange = (index: number, newPlayer: ReportedPlayer) => {
+ onChange(players.map((player, i) => (i === index ? newPlayer : player)));
};
- return (
- <>
-
- {new Array(amountOfTeams + 1).fill(null).map((_, i) => { - // last team is hidden so we can save its state even if user removes a filled team - const hidden = i === amountOfTeams; - - return ( -
- 1
- ? handleTeamDelete
- : undefined
- }
- hidden={hidden}
- initialPlacement={String(i + 1)}
- initialValues={data.winners[i]}
- />
- {!hidden &&
} -
- );
- })}
- setAmountOfTeams((amountOfTeams) => amountOfTeams + 1)}
- size="small"
- >
- {t("forms.team.add")}
-
-
- );
-}
-
-const NEW_PLAYER = { id: 0 } as const;
-
-interface TeamResults {
- teamName: string;
- placement: string;
- players: Array<
- | {
- id: number;
- }
- | string
- >;
-}
-
-function Team({
- onRemoveTeam,
- hidden,
- initialPlacement,
- initialValues,
-}: {
- onRemoveTeam?: () => void;
- hidden: boolean;
- initialPlacement: string;
- initialValues?: Unpacked["winners"]>;
-}) {
- const { t } = useTranslation("calendar");
- const teamNameId = React.useId();
- const placementId = React.useId();
-
- const [results, setResults] = React.useState({
- teamName: initialValues?.teamName ?? "",
- placement: String(initialValues?.placement ?? initialPlacement),
- players: initialValues?.players
- ? (initialValues.players.map((player) =>
- player.name ? player.name : player,
- ) as TeamResults["players"])
- : [NEW_PLAYER, NEW_PLAYER, NEW_PLAYER, NEW_PLAYER],
- });
-
- const handleTeamNameChange = (e: React.ChangeEvent) => {
- setResults({ ...results, teamName: e.target.value });
- };
-
- const handlePlacementChange = (e: React.ChangeEvent) => {
- setResults({ ...results, placement: e.target.value });
- };
-
- const handleSetPlayers = React.useCallback(
- (action: React.SetStateAction) => {
- setResults((prev) => ({
- ...prev,
- players: typeof action === "function" ? action(prev.players) : action,
- }));
- },
- [],
- );
-
- if (hidden) return null;
-
- return (
- >;
-}) {
- const { t } = useTranslation("calendar");
- const handleAddPlayer = () => {
- setPlayers([...players, NEW_PLAYER]);
- };
-
- const handleRemovePlayer = () => {
- setPlayers(players.slice(0, -1));
- };
-
- const handlePlayerInputTypeChange = (index: number) => {
- const newPlayers = [...players];
- newPlayers[index] = typeof newPlayers[index] === "string" ? NEW_PLAYER : "";
- setPlayers(newPlayers);
- };
-
- const handleInputChange = React.useCallback(
- (index: number, newValue: string | number) => {
- setPlayers((prev) => {
- const newPlayers = [...prev];
- newPlayers[index] =
- typeof newValue === "string" ? newValue : { id: newValue };
- return newPlayers;
- });
- },
- [setPlayers],
- );
-
return (
) => {
- onInputChange(index, e.target.value);
- },
- [index, onInputChange],
- );
+ const { t } = useTranslation(["calendar"]);
+ const id = React.useId();
- const handleUserChange = React.useCallback(
- (newUser: { id: number } | null) => {
- if (!newUser) return;
- onInputChange(index, newUser.id);
- },
- [index, onInputChange],
- );
-
- if (asPlainInput) {
- return (
-
- );
- }
+ const asPlainInput = player.type === "NAME";
+ const label = t("calendar:forms.team.player.header", { number: index + 1 });
return (
-
{({ FormField }) => (
Text Fields
-
+
@@ -2123,7 +2123,7 @@ function FormFieldsSection({ id }: { id: string }) {
Text Areas
-
+
@@ -2173,7 +2173,7 @@ function FormFieldsSection({ id }: { id: string }) {
Date & Time
-
+
@@ -2181,7 +2181,7 @@ function FormFieldsSection({ id }: { id: string }) {
-
+
diff --git a/app/features/lfg/lfg-schemas.ts b/app/features/lfg/lfg-schemas.ts
index 00e68beef..92b1f4a5f 100644
--- a/app/features/lfg/lfg-schemas.ts
+++ b/app/features/lfg/lfg-schemas.ts
@@ -5,7 +5,7 @@ import {
idConstantOptional,
selectDynamic,
selectDynamicOptional,
- textAreaRequired,
+ textArea,
} from "~/form/fields";
import { LFG, TIMEZONES } from "./lfg-constants";
@@ -14,7 +14,7 @@ export const lfgNewSchema = z
postId: idConstantOptional(),
type: selectDynamic({ label: "labels.type" }),
timezone: selectDynamic({ label: "labels.timezone" }),
- postText: textAreaRequired({
+ postText: textArea({
label: "labels.text",
maxLength: LFG.MAX_TEXT_LENGTH,
}),
diff --git a/app/features/plus-suggestions/plus-suggestions-schemas.ts b/app/features/plus-suggestions/plus-suggestions-schemas.ts
index 0a8f4de32..fab49f152 100644
--- a/app/features/plus-suggestions/plus-suggestions-schemas.ts
+++ b/app/features/plus-suggestions/plus-suggestions-schemas.ts
@@ -3,7 +3,7 @@ import {
idConstant,
selectDynamic,
stringConstant,
- textAreaRequired,
+ textArea,
userSearch,
} from "~/form/fields";
import { _action, actualNumber } from "~/utils/zod";
@@ -12,13 +12,13 @@ import { PLUS_TIERS } from "./plus-suggestions-constants";
export const followUpCommentFormSchema = z.object({
tier: idConstant(),
suggestedId: idConstant(),
- comment: textAreaRequired({
+ comment: textArea({
label: "labels.comment",
maxLength: 280,
}),
});
-const suggestionTextFormFieldSchema = textAreaRequired({
+const suggestionTextFormFieldSchema = textArea({
label: "labels.comment",
maxLength: 500,
});
diff --git a/app/features/scrims/actions/scrims.$id.server.ts b/app/features/scrims/actions/scrims.$id.server.ts
index bd1aa7e26..c6b121011 100644
--- a/app/features/scrims/actions/scrims.$id.server.ts
+++ b/app/features/scrims/actions/scrims.$id.server.ts
@@ -1,13 +1,13 @@
import type { ActionFunctionArgs } from "react-router";
import * as ChatSystemMessage from "~/features/chat/ChatSystemMessage.server";
import { notify } from "~/features/notifications/core/notify.server";
+import { parseFormData } from "~/form/parse.server";
import { requirePermission } from "~/modules/permissions/guards.server";
import {
errorToast,
errorToastIfFalsy,
notFoundIfNullish,
parseParams,
- parseRequestPayload,
} from "~/utils/remix.server";
import { assertUnreachable } from "~/utils/types";
import { idObject } from "~/utils/zod";
@@ -26,11 +26,17 @@ export const action = async ({ request, params }: ActionFunctionArgs) => {
const post = notFoundIfNullish(await ScrimPostRepository.findById(id));
const user = requireUser();
- const data = await parseRequestPayload({
+ const result = await parseFormData({
request,
schema: scrimIdActionSchema,
});
+ if (!result.success) {
+ return { fieldErrors: result.fieldErrors };
+ }
+
+ const data = result.data;
+
requirePermission(post, "MANAGE_TRACKING");
switch (data._action) {
diff --git a/app/features/scrims/actions/scrims.server.ts b/app/features/scrims/actions/scrims.server.ts
index 41c32017d..687ac7099 100644
--- a/app/features/scrims/actions/scrims.server.ts
+++ b/app/features/scrims/actions/scrims.server.ts
@@ -8,6 +8,7 @@ import * as ChatSystemMessage from "~/features/chat/ChatSystemMessage.server";
import { datePlaceholder } from "~/features/chat/chat-utils";
import { notify } from "~/features/notifications/core/notify.server";
import * as UserRepository from "~/features/user-page/UserRepository.server";
+import { parseFormData } from "~/form/parse.server";
import { requirePermission } from "~/modules/permissions/guards.server";
import {
databaseTimestampToDate,
@@ -18,29 +19,31 @@ import {
DuplicateEntryError,
} from "~/utils/errors";
import { logger } from "~/utils/logger";
-import {
- actionError,
- errorToast,
- errorToastIfFalsy,
- parseRequestPayload,
-} from "~/utils/remix.server";
+import { errorToast, errorToastIfFalsy } from "~/utils/remix.server";
import { toDBBoolean } from "~/utils/sql";
import { assertUnreachable } from "~/utils/types";
import { navIconUrl, scrimPage, scrimsPage } from "~/utils/urls";
import * as Scrim from "../core/Scrim";
import * as ScrimPostRepository from "../ScrimPostRepository.server";
import { SCRIM } from "../scrims-constants";
-import { type newRequestSchema, scrimsActionSchema } from "../scrims-schemas";
+import { scrimsActionSchema } from "../scrims-schemas";
import { generateTimeOptions } from "../scrims-utils";
import { usersListForPost } from "./scrims.new.server";
export const action = async ({ request }: ActionFunctionArgs) => {
const user = requireUser();
- const data = await parseRequestPayload({
+ const result = await parseFormData({
request,
schema: scrimsActionSchema,
});
+
+ if (!result.success) {
+ return { fieldErrors: result.fieldErrors };
+ }
+
+ const data = result.data;
+
switch (data._action) {
case "DELETE_POST": {
const post = await findPost({
@@ -75,10 +78,9 @@ export const action = async ({ request }: ActionFunctionArgs) => {
}
if (post.rangeEndsAt && !data.at) {
- return actionError({
- msg: "Please select a time for the scrim",
- field: "at",
- });
+ return {
+ fieldErrors: { at: "Please select a time for the scrim" },
+ };
}
if (post.rangeEndsAt && data.at) {
@@ -89,10 +91,11 @@ export const action = async ({ request }: ActionFunctionArgs) => {
const requestTime = data.at.getTime();
if (!validTimeOptions.includes(requestTime)) {
- return actionError({
- msg: "Selected time must be one of the available options",
- field: "at",
- });
+ return {
+ fieldErrors: {
+ at: "Selected time must be one of the available options",
+ },
+ };
}
}
diff --git a/app/features/scrims/routes/scrims.new.tsx b/app/features/scrims/routes/scrims.new.tsx
index 1056859f6..b00b45f87 100644
--- a/app/features/scrims/routes/scrims.new.tsx
+++ b/app/features/scrims/routes/scrims.new.tsx
@@ -4,9 +4,9 @@ import { useTranslation } from "react-i18next";
import { useLoaderData } from "react-router";
import type { z } from "zod";
import { SendouDatePicker } from "~/components/elements/DatePicker";
-import { TournamentSearch } from "~/components/elements/TournamentSearch";
import { Label } from "~/components/Label";
import type { CustomFieldRenderProps } from "~/form";
+import { FormField } from "~/form/FormField";
import { FormFieldWrapper } from "~/form/fields/FormFieldWrapper";
import { SendouForm, useFormFieldContext } from "~/form/SendouForm";
import { errorMessageId } from "~/form/utils";
@@ -90,7 +90,7 @@ export default function NewScrimPage() {
-
- setValue("mapsTournamentId", tournament?.id ?? null)
- }
- />
-
- );
+ return setEditing(false)} />
@@ -408,31 +406,18 @@ function AddPrivateNoteForm({
note?: string | null;
stopEditing: () => void;
}) {
- const fetcher = useFetcher();
- const textareaRef = React.useRef(null);
const { t } = useTranslation(["common"]);
- const [value, setValue] = React.useState(note ?? "");
-
- const newValueLegal = value.length <= SENDOUQ.OWN_PUBLIC_NOTE_MAX_LENGTH;
-
- React.useEffect(() => {
- if (!textareaRef.current) return;
- textareaRef.current.focus();
- textareaRef.current.selectionStart = textareaRef.current.selectionEnd =
- textareaRef.current.value.length;
- }, []);
return (
-
-
Migrate user data
-
-
-
- setOldUserId(newUser?.id)}
- />
-
-
- setNewUserId(newUser?.id)}
- />
-
-
-
- Migrate
-
-
- Link player
-
-
-
-
-
-
-
-
-
-
- Link player
-
-
- Add as artist
-
-
-
-
- Add as artist
-
-
- Give video adder
-
-
-
-
- Add as video adder
-
-
- Give tournament organizer
-
-
- Add as tournament organizer
-
-
- Give API access
-
-
- Grant API access
-
-
- Update friend code
-
-
-
-
-
-
-
-
-
-
- Submit
-
-
- Force patron
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Save
-
-
- Ban user
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Save
-
-
- Unban user
-
-
- Save
-
-
- Refresh Plus Tiers
-
+
+ {(props: CustomFieldRenderProps) => (
+
+
+ )}
+
-
-
-
- );
+function playerToFormValue(player: LoadedPlayer): ReportedPlayer {
+ return typeof player.id === "number"
+ ? { type: "USER", id: player.id }
+ : { type: "NAME", name: player.name };
}
-function TeamInputs() {
- const { t } = useTranslation("calendar");
- const data = useLoaderData- {new Array(amountOfTeams + 1).fill(null).map((_, i) => { - // last team is hidden so we can save its state even if user removes a filled team - const hidden = i === amountOfTeams; - - return ( -
} -
-
- (typeof player === "string" && player !== "") ||
- (typeof player === "object" && player.id !== 0),
- ),
- })}
- />
-
- {t("forms.team.remove")}
-
- )}
-
- );
-}
-
-function Players({
- players,
- setPlayers,
-}: {
- players: TeamResults["players"];
- setPlayers: React.Dispatch
-
-
-
-
-
-
-
-
-
-
- {players.map((player, i) => {
- const formId = `player-${i + 1}`;
- const asPlainInput = typeof player === "string";
-
- return (
-
+ {translatedError}
+
+ ) : null}
onChange([...players, EMPTY_REPORTED_PLAYER])}
isDisabled={
players.length === CALENDAR_EVENT_RESULT.MAX_PLAYERS_LENGTH
}
- variant="outlined"
>
- {t("forms.team.player.add")}
- {" "}
+ {t("calendar:forms.team.player.add")}
+
onChange(players.slice(0, -1))}
isDisabled={players.length === 1}
>
- {t("forms.team.player.remove")}
+ {t("calendar:forms.team.player.remove")}
@@ -313,50 +139,59 @@ function Players({
}
function PlayerInput({
- formId,
- player,
index,
- asPlainInput,
- onInputChange,
+ player,
+ onPlayerChange,
}: {
- formId: string;
- player: TeamResults["players"][number];
index: number;
- asPlainInput: boolean;
- onInputChange: (index: number, newValue: string | number) => void;
+ player: ReportedPlayer;
+ onPlayerChange: (index: number, newPlayer: ReportedPlayer) => void;
}) {
- const handlePlainChange = React.useCallback(
- (e: React.ChangeEvent
-
- );
- })}
+ {players.map((player, i) => (
+
-
- handlePlayerInputTypeChange(i)}
- >
- {asPlainInput
- ? t("forms.team.player.addAsUser")
- : t("forms.team.player.addAsText")}
-
-
-
+
+ onPlayerChange(
+ index,
+ asPlainInput ? EMPTY_REPORTED_PLAYER : { type: "NAME", name: "" },
+ )
+ }
+ >
+ {asPlainInput
+ ? t("calendar:forms.team.player.addAsUser")
+ : t("calendar:forms.team.player.addAsText")}
+
+
);
}
diff --git a/app/features/components-showcase/form-examples-schema.ts b/app/features/components-showcase/form-examples-schema.ts
index dadbc6214..540b3104a 100644
--- a/app/features/components-showcase/form-examples-schema.ts
+++ b/app/features/components-showcase/form-examples-schema.ts
@@ -2,9 +2,9 @@ import { z } from "zod";
import {
checkboxGroup,
customField,
+ datetime,
datetimeOptional,
- datetimeRequired,
- dayMonthYearRequired,
+ dayMonthYear,
dualSelectOptional,
image,
numberFieldOptional,
@@ -13,10 +13,10 @@ import {
selectDynamicOptional,
selectOptional,
stageSelect,
+ textArea,
textAreaOptional,
- textAreaRequired,
+ textField,
textFieldOptional,
- textFieldRequired,
timeRangeOptional,
toggle,
userSearchOptional,
@@ -26,7 +26,7 @@ import {
export const formFieldsShowcaseSchema = z.object({
// Text fields
- requiredText: textFieldRequired({
+ requiredText: textField({
label: "labels.name",
maxLength: 100,
}),
@@ -39,7 +39,7 @@ export const formFieldsShowcaseSchema = z.object({
}),
// Text areas
- requiredTextArea: textAreaRequired({
+ requiredTextArea: textArea({
label: "labels.description",
maxLength: 500,
}),
@@ -119,13 +119,13 @@ export const formFieldsShowcaseSchema = z.object({
}),
// Date & Time
- requiredDatetime: datetimeRequired({
+ requiredDatetime: datetime({
label: "labels.startTime",
}),
optionalDatetime: datetimeOptional({
label: "labels.vodDate",
}),
- birthDate: dayMonthYearRequired({
+ birthDate: dayMonthYear({
label: "labels.banUserExpiresAt",
}),
availableTime: timeRangeOptional({
diff --git a/app/features/components-showcase/routes/components.tsx b/app/features/components-showcase/routes/components.tsx
index b30e6a8f4..a989b7621 100644
--- a/app/features/components-showcase/routes/components.tsx
+++ b/app/features/components-showcase/routes/components.tsx
@@ -2102,14 +2102,14 @@ function FormFieldsSection({ id }: { id: string }) {
+ {player.type === "NAME" ? (
+ <>
+
+
+ onPlayerChange(index, { type: "NAME", name: e.target.value })
+ }
+ maxLength={CALENDAR_EVENT_RESULT.MAX_PLAYER_NAME_LENGTH}
+ />
+
+ ) : (
+
+ onPlayerChange(index, { type: "USER", id: user?.id ?? null })
+ }
+ />
+ )}
+
+