From a812feaac374c7b3b66e8a3b6dfa844052a19156 Mon Sep 17 00:00:00 2001
From: "Kalle (Sendou)" <38327916+Sendouc@users.noreply.github.com>
Date: Mon, 6 Dec 2021 21:09:45 +0200
Subject: [PATCH] Add loading state to Check-in button

---
 app/components/MyForm.tsx                           |  6 +++---
 .../tournament/ActionSectionBeforeStartContent.tsx  | 13 ++++++++++---
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/app/components/MyForm.tsx b/app/components/MyForm.tsx
index f911af635..533d4f44a 100644
--- a/app/components/MyForm.tsx
+++ b/app/components/MyForm.tsx
@@ -2,6 +2,7 @@ import { Form, FormProps, useFetcher, useTransition } from "remix";
 
 interface MyFormProps extends FormProps {
   hiddenFields?: Record<string, string>;
+  fetcher?: ReturnType<typeof useFetcher>;
 }
 
 /**
@@ -11,10 +12,9 @@ interface MyFormProps extends FormProps {
  * and disables the form when it's submitting.
  */
 export function MyForm(props: MyFormProps) {
-  const { hiddenFields, children, ...rest } = props;
-  const fetcher = useFetcher();
+  const { hiddenFields, children, fetcher, ...rest } = props;
 
-  const FormComponent = rest.action ? fetcher.Form : Form;
+  const FormComponent = fetcher ? fetcher.Form : Form;
 
   const transition = useTransition();
   return (
diff --git a/app/components/tournament/ActionSectionBeforeStartContent.tsx b/app/components/tournament/ActionSectionBeforeStartContent.tsx
index 61c67c165..fd7d9d269 100644
--- a/app/components/tournament/ActionSectionBeforeStartContent.tsx
+++ b/app/components/tournament/ActionSectionBeforeStartContent.tsx
@@ -1,5 +1,5 @@
 import * as React from "react";
-import { useLoaderData, useLocation } from "remix";
+import { useFetcher, useLoaderData, useLocation } from "remix";
 import {
   checkInClosesDate,
   TOURNAMENT_TEAM_ROSTER_MIN_SIZE,
@@ -18,6 +18,7 @@ export function ActionSectionBeforeStartContent({
 }: {
   ownTeam: Unpacked<FindTournamentByNameForUrlI["teams"]>;
 }) {
+  const fetcher = useFetcher();
   const tournament = useLoaderData<FindTournamentByNameForUrlI>();
   const location = useLocation();
 
@@ -43,7 +44,7 @@ export function ActionSectionBeforeStartContent({
   if (ownTeam.checkedInTime) {
     return (
       <ActionSectionWrapper icon="success">
-        <SuccessIcon /> Your team is succesfully checked in!
+        <SuccessIcon /> Your team is checked in!
       </ActionSectionWrapper>
     );
   }
@@ -110,8 +111,14 @@ export function ActionSectionBeforeStartContent({
             ownTeam.id
           }/check-in`}
           className="tournament__action-section__button-container"
+          fetcher={fetcher}
         >
-          <Button variant="outlined" loadingText="Checking-in..." type="submit">
+          <Button
+            variant="outlined"
+            loadingText="Checking-in..."
+            type="submit"
+            loading={fetcher.state !== "idle"}
+          >
             Check-in
           </Button>
         </MyForm>