From 24ee2ff099cc7762110de83ef3bef3bb6af07216 Mon Sep 17 00:00:00 2001
From: "Kalle (Sendou)" <38327916+Sendouc@users.noreply.github.com>
Date: Mon, 6 Dec 2021 22:47:08 +0200
Subject: [PATCH] Move api folder to routes root

---
 .../ActionSectionBeforeStartContent.tsx       |  4 +-
 app/components/tournament/TeamRoster.tsx      | 48 ++++++++++++-------
 .../tournament/$teamId}/check-in.ts           |  0
 .../$teamId/remove-player.$playerId.ts        | 17 +++++++
 app/styles/tournament.css                     |  2 +-
 5 files changed, 51 insertions(+), 20 deletions(-)
 rename app/routes/{to/$organization.$tournament/api.$teamId => api/tournament/$teamId}/check-in.ts (100%)
 create mode 100644 app/routes/api/tournament/$teamId/remove-player.$playerId.ts

diff --git a/app/components/tournament/ActionSectionBeforeStartContent.tsx b/app/components/tournament/ActionSectionBeforeStartContent.tsx
index fd7d9d269..3683b146a 100644
--- a/app/components/tournament/ActionSectionBeforeStartContent.tsx
+++ b/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}
         >
diff --git a/app/components/tournament/TeamRoster.tsx b/app/components/tournament/TeamRoster.tsx
index b12e24017..b8b77e26c 100644
--- a/app/components/tournament/TeamRoster.tsx
+++ b/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>
+  );
+}
diff --git a/app/routes/to/$organization.$tournament/api.$teamId/check-in.ts b/app/routes/api/tournament/$teamId/check-in.ts
similarity index 100%
rename from app/routes/to/$organization.$tournament/api.$teamId/check-in.ts
rename to app/routes/api/tournament/$teamId/check-in.ts
diff --git a/app/routes/api/tournament/$teamId/remove-player.$playerId.ts b/app/routes/api/tournament/$teamId/remove-player.$playerId.ts
new file mode 100644
index 000000000..7b6cc9491
--- /dev/null
+++ b/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 });
+};
diff --git a/app/styles/tournament.css b/app/styles/tournament.css
index 62e701db8..aa9439c74 100644
--- a/app/styles/tournament.css
+++ b/app/styles/tournament.css
@@ -7,7 +7,7 @@
 }
 
 .tournament__container__spacer {
-  margin-bottom: var(--s-5);
+  margin-bottom: var(--s-6);
 }
 
 .tournament__action-section {