From aa5aad4689bd3a2b0fc7f4878d3d3da486112a2f Mon Sep 17 00:00:00 2001
From: Tsu-ba-me <ynho.li.aa.e@gmail.com>
Date: Fri, 3 Mar 2023 21:13:40 -0500
Subject: [PATCH] fix(striker-ui): add input validation to AddUpsInputGroup

---
 .../components/ManageUps/AddUpsInputGroup.tsx | 57 +++++++++++++++----
 striker-ui/types/AddUpsInputGroup.d.ts        |  8 ++-
 2 files changed, 52 insertions(+), 13 deletions(-)

diff --git a/striker-ui/components/ManageUps/AddUpsInputGroup.tsx b/striker-ui/components/ManageUps/AddUpsInputGroup.tsx
index a81a4e2f..e0896c23 100644
--- a/striker-ui/components/ManageUps/AddUpsInputGroup.tsx
+++ b/striker-ui/components/ManageUps/AddUpsInputGroup.tsx
@@ -1,23 +1,41 @@
-import { FC, ReactElement, ReactNode, useMemo, useState } from 'react';
+import { ReactElement, ReactNode, useMemo, useState } from 'react';
 
 import { BLACK } from '../../lib/consts/DEFAULT_THEME';
 
-import CommonUpsInputGroup from './CommonUpsInputGroup';
+import CommonUpsInputGroup, {
+  INPUT_ID_UPS_IP,
+  INPUT_ID_UPS_NAME,
+} from './CommonUpsInputGroup';
 import FlexBox from '../FlexBox';
 import Link from '../Link';
 import SelectWithLabel from '../SelectWithLabel';
 import Spinner from '../Spinner';
 import { BodyText } from '../Text';
+import useIsFirstRender from '../../hooks/useIsFirstRender';
 
-const INPUT_ID_UPS_TYPE_ID = 'add-ups-select-ups-type-id';
+const INPUT_ID_UPS_TYPE = 'add-ups-select-ups-type-id';
 
-const AddUpsInputGroup: FC<AddUpsInputGroupProps> = ({
+const INPUT_LABEL_UPS_TYPE = 'UPS type';
+
+const AddUpsInputGroup = <
+  M extends {
+    [K in
+      | typeof INPUT_ID_UPS_IP
+      | typeof INPUT_ID_UPS_NAME
+      | typeof INPUT_ID_UPS_TYPE]: string;
+  },
+>({
+  formUtils,
   loading: isExternalLoading,
   previous = {},
   upsTemplate,
-}) => {
+}: AddUpsInputGroupProps<M>): ReactElement => {
+  const { buildInputFirstRenderFunction, setValidity } = formUtils;
+
   const { upsTypeId: previousUpsTypeId = '' } = previous;
 
+  const isFirstRender = useIsFirstRender();
+
   const [inputUpsTypeIdValue, setInputUpsTypeIdValue] =
     useState<string>(previousUpsTypeId);
 
@@ -75,17 +93,19 @@ const AddUpsInputGroup: FC<AddUpsInputGroupProps> = ({
       upsTemplate && (
         <SelectWithLabel
           formControlProps={{ sx: { marginTop: '.3em' } }}
-          id={INPUT_ID_UPS_TYPE_ID}
-          label="UPS type"
+          id={INPUT_ID_UPS_TYPE}
+          label={INPUT_LABEL_UPS_TYPE}
           onChange={({ target: { value: rawNewValue } }) => {
             const newValue = String(rawNewValue);
 
+            setValidity(INPUT_ID_UPS_TYPE, true);
             setInputUpsTypeIdValue(newValue);
           }}
           required
           selectItems={upsTypeOptions}
           selectProps={{
             onClearIndicatorClick: () => {
+              setValidity(INPUT_ID_UPS_TYPE, false);
               setInputUpsTypeIdValue('');
             },
             renderValue: (rawValue) => {
@@ -98,8 +118,9 @@ const AddUpsInputGroup: FC<AddUpsInputGroupProps> = ({
           value={inputUpsTypeIdValue}
         />
       ),
-    [inputUpsTypeIdValue, upsTypeOptions, upsTemplate],
+    [upsTemplate, upsTypeOptions, inputUpsTypeIdValue, setValidity],
   );
+
   const content = useMemo<ReactElement>(
     () =>
       isExternalLoading ? (
@@ -107,15 +128,29 @@ const AddUpsInputGroup: FC<AddUpsInputGroupProps> = ({
       ) : (
         <FlexBox>
           {pickUpsTypeElement}
-          {inputUpsTypeIdValue && <CommonUpsInputGroup previous={previous} />}
+          {inputUpsTypeIdValue && (
+            <CommonUpsInputGroup formUtils={formUtils} previous={previous} />
+          )}
         </FlexBox>
       ),
-    [inputUpsTypeIdValue, isExternalLoading, pickUpsTypeElement, previous],
+    [
+      formUtils,
+      inputUpsTypeIdValue,
+      isExternalLoading,
+      pickUpsTypeElement,
+      previous,
+    ],
   );
 
+  if (isFirstRender) {
+    buildInputFirstRenderFunction(INPUT_ID_UPS_TYPE)({
+      isValid: Boolean(inputUpsTypeIdValue),
+    });
+  }
+
   return content;
 };
 
-export { INPUT_ID_UPS_TYPE_ID };
+export { INPUT_ID_UPS_TYPE, INPUT_LABEL_UPS_TYPE };
 
 export default AddUpsInputGroup;
diff --git a/striker-ui/types/AddUpsInputGroup.d.ts b/striker-ui/types/AddUpsInputGroup.d.ts
index 76e43636..e053670f 100644
--- a/striker-ui/types/AddUpsInputGroup.d.ts
+++ b/striker-ui/types/AddUpsInputGroup.d.ts
@@ -1,7 +1,11 @@
 type AddUpsInputGroupOptionalProps = {
   loading?: boolean;
-  previous?: CommonUpsInputGroupProps['previous'] & { upsTypeId?: string };
+  previous?: CommonUpsInputGroupOptionalProps['previous'] & {
+    upsTypeId?: string;
+  };
   upsTemplate?: APIUpsTemplate;
 };
 
-type AddUpsInputGroupProps = AddUpsInputGroupOptionalProps;
+type AddUpsInputGroupProps<M extends MapToInputTestID> =
+  AddUpsInputGroupOptionalProps &
+    Pick<CommonUpsInputGroupProps<M>, 'formUtils'>;