From f4c171b44f5503068785d03213b816f1c2ef5841 Mon Sep 17 00:00:00 2001
From: Tsu-ba-me <ynho.li.aa.e@gmail.com>
Date: Tue, 13 Dec 2022 18:10:25 -0500
Subject: [PATCH] fix(striker-ui): record 'using NextRouter query params in API
 request'

---
 striker-ui/components/PrepareNetworkForm.tsx | 118 +++++++++++++++++++
 striker-ui/pages/prepare-network/index.tsx   |  29 +++++
 2 files changed, 147 insertions(+)
 create mode 100644 striker-ui/components/PrepareNetworkForm.tsx
 create mode 100644 striker-ui/pages/prepare-network/index.tsx

diff --git a/striker-ui/components/PrepareNetworkForm.tsx b/striker-ui/components/PrepareNetworkForm.tsx
new file mode 100644
index 00000000..473b3f27
--- /dev/null
+++ b/striker-ui/components/PrepareNetworkForm.tsx
@@ -0,0 +1,118 @@
+import { withRouter } from 'next/router';
+import { useEffect, useMemo } from 'react';
+
+import api from '../lib/api';
+import ContainedButton from './ContainedButton';
+import handleAPIError from '../lib/handleAPIError';
+import FlexBox from './FlexBox';
+import InputWithRef from './InputWithRef';
+import MessageBox, { Message } from './MessageBox';
+import NetworkInitForm from './NetworkInitForm';
+import OutlinedInputWithLabel from './OutlinedInputWithLabel';
+import { Panel, PanelHeader } from './Panels';
+import Spinner from './Spinner';
+import { HeaderText } from './Text';
+import useProtect from '../hooks/useProtect';
+import useProtectedState from '../hooks/useProtectedState';
+
+const PrepareNetworkForm = withRouter(
+  ({
+    router: {
+      isReady,
+      query: { host_uuid: queryHostUUID },
+    },
+  }) => {
+    const { protect } = useProtect();
+
+    const [dataShortHostName, setDataShortHostName] = useProtectedState<
+      string | undefined
+    >(undefined, protect);
+    const [fatalErrorMessage, setFatalErrorMessage] = useProtectedState<
+      Message | undefined
+    >(undefined, protect);
+    const [isLoading, setIsLoading] = useProtectedState<boolean>(true, protect);
+
+    const panelHeaderElement = useMemo(
+      () => (
+        <PanelHeader>
+          <HeaderText>Prepare network on {dataShortHostName}</HeaderText>
+        </PanelHeader>
+      ),
+      [dataShortHostName],
+    );
+    const contentElement = useMemo(() => {
+      let result;
+
+      if (isLoading) {
+        result = <Spinner mt={0} />;
+      } else if (fatalErrorMessage) {
+        result = <MessageBox {...fatalErrorMessage} />;
+      } else {
+        result = (
+          <>
+            {panelHeaderElement}
+            <FlexBox>
+              <InputWithRef
+                input={
+                  <OutlinedInputWithLabel
+                    formControlProps={{ sx: { maxWidth: '20em' } }}
+                    id="prepare-network-host-name"
+                    label="Host name"
+                  />
+                }
+                required
+              />
+              <NetworkInitForm />
+              <FlexBox row justifyContent="flex-end">
+                <ContainedButton>Prepare network</ContainedButton>
+              </FlexBox>
+            </FlexBox>
+          </>
+        );
+      }
+
+      return result;
+    }, [fatalErrorMessage, isLoading, panelHeaderElement]);
+
+    useEffect(() => {
+      if (isReady) {
+        if (queryHostUUID) {
+          api
+            .get<APIHostDetail>(`/host/${queryHostUUID}`)
+            .then(({ data: { shortHostName } }) => {
+              setDataShortHostName(shortHostName);
+            })
+            .catch((error) => {
+              const { children } = handleAPIError(error);
+
+              setFatalErrorMessage({
+                children: `Failed to get target host information; cannot continue. ${children}`,
+                type: 'error',
+              });
+            })
+            .finally(() => {
+              setIsLoading(false);
+            });
+        } else if (!fatalErrorMessage) {
+          setFatalErrorMessage({
+            children: `No host UUID provided; cannot continue.`,
+            type: 'error',
+          });
+
+          setIsLoading(false);
+        }
+      }
+    }, [
+      fatalErrorMessage,
+      isReady,
+      queryHostUUID,
+      setDataShortHostName,
+      setFatalErrorMessage,
+      setIsLoading,
+    ]);
+
+    return <Panel>{contentElement}</Panel>;
+  },
+);
+
+export default PrepareNetworkForm;
diff --git a/striker-ui/pages/prepare-network/index.tsx b/striker-ui/pages/prepare-network/index.tsx
new file mode 100644
index 00000000..853d67b4
--- /dev/null
+++ b/striker-ui/pages/prepare-network/index.tsx
@@ -0,0 +1,29 @@
+import Head from 'next/head';
+import { FC } from 'react';
+
+import Grid from '../../components/Grid';
+import Header from '../../components/Header';
+import PrepareNetworkForm from '../../components/PrepareNetworkForm';
+
+const PrepareNetwork: FC = () => (
+  <>
+    <Head>
+      <title>Prepare Network</title>
+    </Head>
+    <Header />
+    <Grid
+      columns={{ xs: 1, sm: 6, md: 4 }}
+      layout={{
+        'preparehost-left-column': { sm: 1, xs: 0 },
+        'preparehost-center-column': {
+          children: <PrepareNetworkForm />,
+          md: 2,
+          sm: 4,
+          xs: 1,
+        },
+      }}
+    />
+  </>
+);
+
+export default PrepareNetwork;