From cdd59b139d056ef367f18d3011ad2e2df6d84a2c Mon Sep 17 00:00:00 2001 From: "Kalle (Sendou)" <38327916+Sendouc@users.noreply.github.com> Date: Sat, 11 Dec 2021 10:38:15 +0200 Subject: [PATCH] Remove MyForm component --- README.md | 2 +- app/components/MyForm.tsx | 31 ------------------- .../ActionSectionBeforeStartContent.tsx | 7 ++--- .../tournament/AdminTeamControls.tsx | 15 +++++---- app/components/tournament/TeamRoster.tsx | 8 ++--- .../$organization.$tournament/join-team.tsx | 18 +++++------ .../manage-roster.tsx | 8 ++--- .../to/$organization.$tournament/register.tsx | 7 +++-- 8 files changed, 31 insertions(+), 65 deletions(-) delete mode 100644 app/components/MyForm.tsx diff --git a/README.md b/README.md index dee030d38..c687d2f71 100644 --- a/README.md +++ b/README.md @@ -50,7 +50,7 @@ You can give a variation as a flag to the seeding script changing what exactly i - [x] Captain can remove players from roster - [x] Add info about architecture to README -- [ ] Move away from MyForm +- [x] Move away from MyForm - [x] Make description mandatory + overview tab - [x] Captain can check in - [x] Admin can check teams in / out diff --git a/app/components/MyForm.tsx b/app/components/MyForm.tsx deleted file mode 100644 index 533d4f44a..000000000 --- a/app/components/MyForm.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import { Form, FormProps, useFetcher, useTransition } from "remix"; - -interface MyFormProps extends FormProps { - hiddenFields?: Record; - fetcher?: ReturnType; -} - -/** - * Wrapper around Remix's Form that has default method of "post", - * creates elements for each key/value pair in hiddenFields, - * automatically uses fetcher.Form when action is provided - * and disables the form when it's submitting. - */ -export function MyForm(props: MyFormProps) { - const { hiddenFields, children, fetcher, ...rest } = props; - - const FormComponent = fetcher ? fetcher.Form : Form; - - const transition = useTransition(); - return ( - -
- {hiddenFields && - Object.entries(hiddenFields).map(([key, value]) => ( - - ))} - {children} -
- - ); -} diff --git a/app/components/tournament/ActionSectionBeforeStartContent.tsx b/app/components/tournament/ActionSectionBeforeStartContent.tsx index fab3c67fa..a81ebbcc1 100644 --- a/app/components/tournament/ActionSectionBeforeStartContent.tsx +++ b/app/components/tournament/ActionSectionBeforeStartContent.tsx @@ -10,7 +10,6 @@ import { Button } from "../Button"; import { AlertIcon } from "../icons/Alert"; import { ErrorIcon } from "../icons/Error"; import { SuccessIcon } from "../icons/Success"; -import { MyForm } from "../MyForm"; import { ActionSectionWrapper } from "./ActionSectionWrapper"; export function ActionSectionBeforeStartContent({ @@ -109,10 +108,10 @@ export function ActionSectionBeforeStartContent({ Check-in closes in less than a minute )} - - + ); } diff --git a/app/components/tournament/AdminTeamControls.tsx b/app/components/tournament/AdminTeamControls.tsx index 5c3730bee..707e97c3e 100644 --- a/app/components/tournament/AdminTeamControls.tsx +++ b/app/components/tournament/AdminTeamControls.tsx @@ -19,7 +19,6 @@ import * as React from "react"; import { useFetcher, useMatches } from "remix"; import { Alert } from "~/components/Alert"; import { Button } from "~/components/Button"; -import { MyForm } from "~/components/MyForm"; import { TOURNAMENT_TEAM_ROSTER_MIN_SIZE } from "~/constants"; import { checkInHasStarted } from "~/core/tournament/utils"; import type { FindTournamentByNameForUrlI } from "~/services/tournament"; @@ -27,7 +26,7 @@ import type { Unpacked } from "~/utils"; import { useTimeoutState } from "~/utils/hooks"; // TODO: https://docs.dndkit.com/presets/sortable#drag-overlay -// TODO: what if returns error? check other APIs too +// TODO: what if returns error? check other APIs too -> add Cypress test export function AdminTeamControls() { const seedsFetcher = useFetcher(); const [, parentRoute] = useMatches(); @@ -224,10 +223,10 @@ function SortableRow({ function CheckOutButton({ teamId }: { teamId: string }) { const fetcher = useFetcher(); return ( - - + ); } function CheckInButton({ teamId }: { teamId: string }) { const fetcher = useFetcher(); return ( - - + ); } diff --git a/app/components/tournament/TeamRoster.tsx b/app/components/tournament/TeamRoster.tsx index 2d0bc0f0c..db8960ec7 100644 --- a/app/components/tournament/TeamRoster.tsx +++ b/app/components/tournament/TeamRoster.tsx @@ -1,7 +1,6 @@ import { useFetcher } from "remix"; import { useUser } from "~/utils/hooks"; import { Button } from "../Button"; -import { MyForm } from "../MyForm"; export function TeamRoster({ team, @@ -79,10 +78,9 @@ function DeleteFromRosterButton({ }) { const fetcher = useFetcher(); return ( - - + ); } diff --git a/app/routes/to/$organization.$tournament/join-team.tsx b/app/routes/to/$organization.$tournament/join-team.tsx index 5aaac60f9..e13f0d1f2 100644 --- a/app/routes/to/$organization.$tournament/join-team.tsx +++ b/app/routes/to/$organization.$tournament/join-team.tsx @@ -1,4 +1,4 @@ -import type { ActionFunction, LinksFunction, LoaderFunction } from "remix"; +import { ActionFunction, Form, LinksFunction, LoaderFunction } from "remix"; import { json, redirect, @@ -9,7 +9,6 @@ import { } from "remix"; import invariant from "tiny-invariant"; import { Button } from "~/components/Button"; -import { MyForm } from "~/components/MyForm"; import { FindTournamentByNameForUrlI, findTournamentWithInviteCodes, @@ -169,12 +168,13 @@ function Contents({ data }: { data: Data }) {
{data.inviterName} invited you to join {data.teamName} for this tournament. Accept invite? - +
+ +
- +
); default: diff --git a/app/routes/to/$organization.$tournament/manage-roster.tsx b/app/routes/to/$organization.$tournament/manage-roster.tsx index 23f534f3b..0d4b5dfe0 100644 --- a/app/routes/to/$organization.$tournament/manage-roster.tsx +++ b/app/routes/to/$organization.$tournament/manage-roster.tsx @@ -1,7 +1,7 @@ import { Prisma } from ".prisma/client"; -import * as React from "react"; import { ActionFunction, + Form, json, LinksFunction, LoaderFunction, @@ -13,7 +13,6 @@ import invariant from "tiny-invariant"; import { Alert } from "~/components/Alert"; import { Button } from "~/components/Button"; import ErrorMessage from "~/components/ErrorMessage"; -import { MyForm } from "~/components/MyForm"; import { TeamRoster } from "~/components/tournament/TeamRoster"; import { TOURNAMENT_TEAM_ROSTER_MAX_SIZE } from "~/constants"; import { @@ -157,7 +156,8 @@ export default function ManageRosterPage() { {trustingUsers.length > 0 && (
- +
+ @@ -182,7 +182,7 @@ export default function ManageRosterPage() { > Add to roster - +
)} diff --git a/app/routes/to/$organization.$tournament/register.tsx b/app/routes/to/$organization.$tournament/register.tsx index f0a13d64c..1e3b66e9d 100644 --- a/app/routes/to/$organization.$tournament/register.tsx +++ b/app/routes/to/$organization.$tournament/register.tsx @@ -1,6 +1,7 @@ import { Prisma } from ".prisma/client"; import { ActionFunction, + Form, LinksFunction, redirect, useActionData, @@ -12,7 +13,6 @@ import { import invariant from "tiny-invariant"; import { Button } from "~/components/Button"; import ErrorMessage from "~/components/ErrorMessage"; -import { MyForm } from "~/components/MyForm"; import { createTournamentTeam, FindTournamentByNameForUrlI, @@ -120,7 +120,8 @@ export default function RegisterPage() {

Register now

- +
+ )}
- +
);