Move api folder to routes root

app/components/tournament/ActionSectionBeforeStartContent.tsx

@@ -107,9 +107,7 @@ export function ActionSectionBeforeStartContent({
           </>
         )}
         <MyForm
-          action={`${location.pathname.split("/").slice(0, 4).join("/")}/api/${
-            ownTeam.id
-          }/check-in`}
+          action={`/api/tournament/${ownTeam.id}/check-in`}
           className="tournament__action-section__button-container"
           fetcher={fetcher}
         >

app/components/tournament/TeamRoster.tsx

@@ -1,4 +1,5 @@
-import { useIsSubmitting, useUser } from "~/utils/hooks";
+import { useFetcher } from "remix";
+import { useUser } from "~/utils/hooks";
 import { Button } from "../Button";
 import { MyForm } from "../MyForm";
 
@@ -22,7 +23,6 @@ export function TeamRoster({
   deleteMode?: boolean;
 }) {
   const user = useUser();
-  const isSubmitting = useIsSubmitting("DELETE");
 
   const showDeleteButtons = (userToDeleteId: string) => {
     // TODO:
@@ -56,20 +56,10 @@ export function TeamRoster({
                 <div className="teams-tab__member__container__name-button">
                   <div>{member.discordName}</div>
                   {showDeleteButtons(member.id) && (
-                    /* TODO: all buttons say Removing... */
-                    <MyForm
-                      method="delete"
-                      hiddenFields={{ userId: member.id, teamId: team.id }}
-                    >
-                      <Button
-                        variant="destructive"
-                        tiny
-                        loadingText="Removing..."
-                        loading={isSubmitting}
-                      >
-                        Remove
-                      </Button>
-                    </MyForm>
+                    <DeleteFromRosterButton
+                      playerId={member.id}
+                      teamId={team.id}
+                    />
                   )}
                 </div>
               </div>
@@ -79,3 +69,29 @@ export function TeamRoster({
     </div>
   );
 }
+
+function DeleteFromRosterButton({
+  playerId,
+  teamId,
+}: {
+  playerId: string;
+  teamId: string;
+}) {
+  const fetcher = useFetcher();
+  return (
+    <MyForm
+      action={`/api/tournament/${teamId}/remove-player/${playerId}`}
+      method="delete"
+      fetcher={fetcher}
+    >
+      <Button
+        variant="destructive"
+        tiny
+        loadingText="Removing..."
+        loading={fetcher.state !== "idle"}
+      >
+        Remove
+      </Button>
+    </MyForm>
+  );
+}

app/routes/api/tournament/$teamId/remove-player.$playerId.ts

@@ -0,0 +1,17 @@
+import { ActionFunction } from "@remix-run/server-runtime";
+import { removePlayerFromTeam } from "~/services/tournament";
+import { requireUser } from "~/utils";
+
+export const action: ActionFunction = async ({ params, context }) => {
+  const teamId = params.teamId!;
+  const playerId = params.playerId!;
+
+  const user = requireUser(context);
+
+  await removePlayerFromTeam({
+    captainId: user.id,
+    playerId,
+    teamId,
+  });
+  return new Response("Player deleted from team", { status: 200 });
+};

app/styles/tournament.css

@@ -7,7 +7,7 @@
 }
 
 .tournament__container__spacer {
-  margin-bottom: var(--s-5);
+  margin-bottom: var(--s-6);
 }
 
 .tournament__action-section {