From a65b82d9ee765c8d87b87122a84be3ef6e4160e3 Mon Sep 17 00:00:00 2001
From: Tsu-ba-me <ynho.li.aa.e@gmail.com>
Date: Wed, 10 Aug 2022 14:14:30 -0400
Subject: [PATCH] fix(striker-ui): connect StrikerInitForm to back-end endpoint

---
 striker-ui/components/StrikerInitForm.tsx | 56 ++++++++++++++---------
 1 file changed, 34 insertions(+), 22 deletions(-)

diff --git a/striker-ui/components/StrikerInitForm.tsx b/striker-ui/components/StrikerInitForm.tsx
index 7794d7c1..0fdf8c8b 100644
--- a/striker-ui/components/StrikerInitForm.tsx
+++ b/striker-ui/components/StrikerInitForm.tsx
@@ -1,52 +1,64 @@
-import { FC, useRef, useState } from 'react';
+import { FC, useMemo, useRef, useState } from 'react';
 
 import ContainedButton from './ContainedButton';
 import FlexBox from './FlexBox';
 import GeneralInitForm, {
   GeneralInitFormForwardRefContent,
 } from './GeneralInitForm';
+import mainAxiosInstance from '../lib/singletons/mainAxiosInstance';
 import NetworkInitForm, {
   NetworkInitFormForwardRefContent,
 } from './NetworkInitForm';
 import { Panel, PanelHeader } from './Panels';
-import { BodyText, HeaderText } from './Text';
+import Spinner from './Spinner';
+import { HeaderText } from './Text';
 
 const StrikerInitForm: FC = () => {
-  const [requestBody, setRequestBody] = useState<
-    Record<string, unknown> | undefined
-  >();
+  const [isSubmittingForm, setIsSubmittingForm] = useState<boolean>(false);
 
   const generalInitFormRef = useRef<GeneralInitFormForwardRefContent>({});
   const networkInitFormRef = useRef<NetworkInitFormForwardRefContent>({});
 
-  return (
-    <Panel>
-      <PanelHeader>
-        <HeaderText text="Initialize striker" />
-      </PanelHeader>
-      <FlexBox>
-        <GeneralInitForm ref={generalInitFormRef} />
-        <NetworkInitForm ref={networkInitFormRef} />
+  const buildSubmitSection = useMemo(
+    () =>
+      isSubmittingForm ? (
+        <Spinner />
+      ) : (
         <FlexBox row sx={{ flexDirection: 'row-reverse' }}>
           <ContainedButton
             onClick={() => {
-              setRequestBody({
+              setIsSubmittingForm(true);
+
+              const requestBody: string = JSON.stringify({
                 ...(generalInitFormRef.current.get?.call(null) ?? {}),
                 ...(networkInitFormRef.current.get?.call(null) ?? {}),
               });
+
+              mainAxiosInstance
+                .put('/command/initialize-striker', requestBody, {
+                  headers: { 'Content-Type': 'application/json' },
+                })
+                .then(() => {
+                  setIsSubmittingForm(false);
+                });
             }}
           >
             Initialize
           </ContainedButton>
         </FlexBox>
-        {requestBody && (
-          <pre>
-            <BodyText
-              sx={{ fontSize: '.8em' }}
-              text={JSON.stringify(requestBody, null, 2)}
-            />
-          </pre>
-        )}
+      ),
+    [isSubmittingForm],
+  );
+
+  return (
+    <Panel>
+      <PanelHeader>
+        <HeaderText text="Initialize striker" />
+      </PanelHeader>
+      <FlexBox>
+        <GeneralInitForm ref={generalInitFormRef} />
+        <NetworkInitForm ref={networkInitFormRef} />
+        {buildSubmitSection}
       </FlexBox>
     </Panel>
   );