fix(striker-ui): connect StrikerInitForm to back-end endpoint

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>
   );