use FormProvider and FormContext hook to use form methods in nested f… (

#229) * use FormProvider and FormContext hook to use form methods in nested forms so we can drop all of the prop drilling. * fix: browser headers * fix: clear cluster state --------- Co-authored-by: CristhianF7 <[email protected]>
konstructio · Aug 10, 2023 · 0f345d8 · 0f345d8
1 parent 1fc97f8
commit 0f345d8
Show file tree

Hide file tree

Showing 20 changed files with 121 additions and 161 deletions.
diff --git a/components/clusterTable/clusterTable.tsx b/components/clusterTable/clusterTable.tsx
@@ -7,6 +7,7 @@ import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
 import Image from 'next/image';
+import moment from 'moment';
 
 import k3dLogo from '../../assets/k3d_logo.svg';
 import awsLogo from '../../assets/aws_logo.svg';
@@ -105,7 +106,9 @@ const ClusterRow: FunctionComponent<ClusterInfo> = ({
           <StyledCellText variant="body2">{nodeCount}</StyledCellText>
         </StyledTableCell>
         <StyledTableCell>
-          <StyledCellText variant="body2">{creationDate}</StyledCellText>
+          <StyledCellText variant="body2">
+            {moment(new Date(creationDate as string)).format('DD MMM YYYY')}
+          </StyledCellText>
         </StyledTableCell>
         <StyledTableCell>
           <StyledCellText variant="body2">{createdBy}</StyledCellText>

diff --git a/containers/clusterForms/aws/index.tsx b/containers/clusterForms/aws/index.tsx
@@ -2,8 +2,6 @@ import React, { FunctionComponent } from 'react';
 
 import TerminalLogs from '../../terminalLogs';
 import { FormStep } from '../../../constants/installation';
-import { InstallValues } from '../../../types/redux';
-import { FormFlowProps } from '../../../types/provision';
 import AuthForm from '../shared/authForm';
 import ClusterRunning from '../shared/clusterRunning';
 
@@ -16,15 +14,12 @@ const AWS_FORM_FLOW = {
   [FormStep.READY]: ClusterRunning,
 };
 
-export const AwsFormFlow: FunctionComponent<FormFlowProps<InstallValues>> = ({
-  currentStep,
-  ...rest
-}) => {
-  const ActiveFormStep = AWS_FORM_FLOW[currentStep as FormStep];
+export const AwsFormFlow: FunctionComponent<{ currentStep: FormStep }> = ({ currentStep }) => {
+  const ActiveFormStep = AWS_FORM_FLOW[currentStep];
 
   if (!ActiveFormStep) {
     return null;
   }
 
-  return <ActiveFormStep {...rest} currentStep={currentStep} />;
+  return <ActiveFormStep />;
 };
diff --git a/containers/clusterForms/aws/setupForm/index.tsx b/containers/clusterForms/aws/setupForm/index.tsx
@@ -1,15 +1,15 @@
 import React, { FunctionComponent } from 'react';
+import { useFormContext } from 'react-hook-form';
 
 import ControlledAutocomplete from '../../../../components/controlledFields/AutoComplete';
 import ControlledTextField from '../../../../components/controlledFields/TextField';
 // import LearnMore from '../../../../components/learnMore';
 import { useAppDispatch, useAppSelector } from '../../../../redux/store';
 import { getCloudDomains } from '../../../../redux/thunks/api.thunk';
 import { InstallValues } from '../../../../types/redux';
-import { FormFlowProps } from '../../../../types/provision';
 import { EMAIL_REGEX } from '../../../../constants/index';
 
-const AwsSetupForm: FunctionComponent<FormFlowProps<InstallValues>> = ({ control }) => {
+const AwsSetupForm: FunctionComponent = () => {
   const dispatch = useAppDispatch();
   const { cloudDomains, cloudRegions, values } = useAppSelector(({ api, installation }) => ({
     cloudDomains: api.cloudDomains,
@@ -30,6 +30,8 @@ const AwsSetupForm: FunctionComponent<FormFlowProps<InstallValues>> = ({ control
     });
   };
 
+  const { control } = useFormContext<InstallValues>();
+
   return (
     <>
       <ControlledTextField

diff --git a/containers/clusterForms/civo/index.tsx b/containers/clusterForms/civo/index.tsx
@@ -1,9 +1,7 @@
 import React, { FunctionComponent } from 'react';
-import { FormFlowProps } from 'types/provision';
 
 import TerminalLogs from '../../terminalLogs';
 import { FormStep } from '../../../constants/installation';
-import { InstallValues } from '../../../types/redux';
 import AuthForm from '../shared/authForm';
 import ClusterRunning from '../shared/clusterRunning';
 
@@ -16,15 +14,12 @@ const CIVO_FORM_FLOW = {
   [FormStep.READY]: ClusterRunning,
 };
 
-export const CivoFormFlow: FunctionComponent<FormFlowProps<InstallValues>> = ({
-  currentStep,
-  ...rest
-}) => {
-  const ActiveFormStep = CIVO_FORM_FLOW[currentStep as FormStep];
+export const CivoFormFlow: FunctionComponent<{ currentStep: FormStep }> = ({ currentStep }) => {
+  const ActiveFormStep = CIVO_FORM_FLOW[currentStep];
 
   if (!ActiveFormStep) {
     return null;
   }
 
-  return <ActiveFormStep {...rest} currentStep={currentStep} />;
+  return <ActiveFormStep />;
 };
diff --git a/containers/clusterForms/civo/setupForm/index.tsx b/containers/clusterForms/civo/setupForm/index.tsx
@@ -1,5 +1,5 @@
 import React, { FunctionComponent } from 'react';
-import { FormFlowProps } from 'types/provision';
+import { useFormContext } from 'react-hook-form';
 
 import ControlledAutocomplete from '../../../../components/controlledFields/AutoComplete';
 import ControlledTextField from '../../../../components/controlledFields/TextField';
@@ -9,14 +9,16 @@ import { getCloudDomains } from '../../../../redux/thunks/api.thunk';
 import { InstallValues } from '../../../../types/redux';
 import { EMAIL_REGEX } from '../../../../constants';
 
-const CivoSetupForm: FunctionComponent<FormFlowProps<InstallValues>> = ({ control }) => {
+const CivoSetupForm: FunctionComponent = () => {
   const dispatch = useAppDispatch();
   const { cloudDomains, cloudRegions, values } = useAppSelector(({ api, installation }) => ({
     cloudDomains: api.cloudDomains,
     cloudRegions: api.cloudRegions,
     values: installation.values,
   }));
 
+  const { control } = useFormContext<InstallValues>();
+
   const handleRegionOnSelect = async (region: string) => {
     dispatch(getCloudDomains(region));
   };

diff --git a/containers/clusterForms/digitalocean/index.tsx b/containers/clusterForms/digitalocean/index.tsx
@@ -1,9 +1,7 @@
 import React, { FunctionComponent } from 'react';
-import { FormFlowProps } from 'types/provision';
 
 import TerminalLogs from '../../terminalLogs';
 import { FormStep } from '../../../constants/installation';
-import { InstallValues } from '../../../types/redux';
 import AuthForm from '../shared/authForm';
 import ClusterRunning from '../shared/clusterRunning';
 
@@ -16,15 +14,14 @@ const DIGITAL_OCEAN_FORM_FLOW = {
   [FormStep.READY]: ClusterRunning,
 };
 
-export const DigitalOceanFormFlow: FunctionComponent<FormFlowProps<InstallValues>> = ({
+export const DigitalOceanFormFlow: FunctionComponent<{ currentStep: FormStep }> = ({
   currentStep,
-  ...rest
 }) => {
-  const ActiveFormStep = DIGITAL_OCEAN_FORM_FLOW[currentStep as FormStep];
+  const ActiveFormStep = DIGITAL_OCEAN_FORM_FLOW[currentStep];
 
   if (!ActiveFormStep) {
     return null;
   }
 
-  return <ActiveFormStep {...rest} currentStep={currentStep} />;
+  return <ActiveFormStep />;
 };
diff --git a/containers/clusterForms/digitalocean/setupForm/index.tsx b/containers/clusterForms/digitalocean/setupForm/index.tsx
@@ -1,4 +1,5 @@
 import React, { FunctionComponent } from 'react';
+import { useFormContext } from 'react-hook-form';
 
 // import LearnMore from '../../../../components/learnMore';
 import ControlledAutocomplete from '../../../../components/controlledFields/AutoComplete';
@@ -7,16 +8,17 @@ import { useAppDispatch, useAppSelector } from '../../../../redux/store';
 import { getCloudDomains } from '../../../../redux/thunks/api.thunk';
 import { EMAIL_REGEX } from '../../../../constants';
 import { InstallValues } from '../../../../types/redux';
-import { FormFlowProps } from '../../../../types/provision';
 
-const DigitalOceanSetupForm: FunctionComponent<FormFlowProps<InstallValues>> = ({ control }) => {
+const DigitalOceanSetupForm: FunctionComponent = () => {
   const dispatch = useAppDispatch();
   const { cloudDomains, cloudRegions, values } = useAppSelector(({ api, installation }) => ({
     cloudDomains: api.cloudDomains,
     cloudRegions: api.cloudRegions,
     values: installation.values,
   }));
 
+  const { control } = useFormContext<InstallValues>();
+
   const handleRegionOnSelect = async (region: string) => {
     dispatch(getCloudDomains(region));
   };

diff --git a/containers/clusterForms/k3d/index.tsx b/containers/clusterForms/k3d/index.tsx
@@ -3,8 +3,6 @@ import React, { FunctionComponent } from 'react';
 import ClusterRunningMessage from '../shared/clusterRunning';
 import TerminalLogs from '../../terminalLogs';
 import { LocalFormStep } from '../../../constants/installation';
-import { FormFlowProps } from '../../../types/provision';
-import { InstallValues } from '../../../types/redux';
 
 import { LocalSetupForm } from './setupForm';
 import { ContentContainer } from './k3d.styled';
@@ -15,24 +13,18 @@ const K3D_FORM_FLOW = {
   [LocalFormStep.READY]: ClusterRunningMessage,
 };
 
-export const LocalFormFlow: FunctionComponent<FormFlowProps<InstallValues>> = ({
+export const LocalFormFlow: FunctionComponent<{ currentStep: LocalFormStep }> = ({
   currentStep,
-  ...rest
 }) => {
-  const ActiveFormStep = K3D_FORM_FLOW[currentStep as LocalFormStep];
+  const ActiveFormStep = K3D_FORM_FLOW[currentStep];
 
   if (!ActiveFormStep) {
     return null;
   }
 
   return (
     <ContentContainer>
-      <ActiveFormStep
-        {...rest}
-        currentStep={currentStep}
-        clusterName="kubefirst"
-        domainName="kubefirst.dev"
-      />
+      <ActiveFormStep clusterName="kubefirst" domainName="kubefirst.dev" />
     </ContentContainer>
   );
 };
diff --git a/containers/clusterForms/k3d/setupForm/index.tsx b/containers/clusterForms/k3d/setupForm/index.tsx
@@ -1,12 +1,13 @@
 import React, { FunctionComponent } from 'react';
+import { useFormContext } from 'react-hook-form';
 
 import ControlledTextField from '../../../../components/controlledFields/TextField';
 import ControlledPassword from '../../../../components/controlledFields/Password';
 // import LearnMore from '../../../../components/learnMore';
 import { InstallValues } from '../../../../types/redux';
-import { FormFlowProps } from '../../../../types/provision';
 
-export const LocalSetupForm: FunctionComponent<FormFlowProps<InstallValues>> = ({ control }) => {
+export const LocalSetupForm: FunctionComponent = () => {
+  const { control } = useFormContext<InstallValues>();
   return (
     <>
       <ControlledPassword

diff --git a/containers/clusterForms/shared/advancedOptions/index.tsx b/containers/clusterForms/shared/advancedOptions/index.tsx
@@ -1,19 +1,19 @@
 import React, { ChangeEvent, FunctionComponent, useState } from 'react';
-import LearnMore from 'components/learnMore';
+import { useFormContext } from 'react-hook-form';
 
+import LearnMore from '../../../../components/learnMore';
 import Typography from '../../../../components/typography';
 import SwitchComponent from '../../../../components/switch';
 import Checkbox from '../../../../components/controlledFields/Checkbox';
 import ControlledTextField from '../../../../components/controlledFields/TextField';
 import ControlledAutocomplete from '../../../../components/controlledFields/AutoComplete';
 import { useAppSelector } from '../../../../redux/store';
-import { FormFlowProps } from '../../../../types/provision';
 import { InstallValues } from '../../../../types/redux';
 import { EXCLUSIVE_PLUM } from '../../../../constants/colors';
 
 import { CheckboxContainer, Switch } from './advancedOptions.styled';
 
-const AdvancedOptions: FunctionComponent<FormFlowProps<InstallValues>> = ({ control }) => {
+const AdvancedOptions: FunctionComponent = () => {
   const [isAdvancedOptionsEnabled, setIsAdvancedOptionsEnabled] = useState<boolean>(false);
   const [isCloudFlareSelected, setIsCloudFlareSelected] = useState<boolean>(false);
 
@@ -23,6 +23,8 @@ const AdvancedOptions: FunctionComponent<FormFlowProps<InstallValues>> = ({ cont
 
   const { values, installType } = useAppSelector(({ installation }) => installation);
 
+  const { control } = useFormContext<InstallValues>();
+
   return (
     <>
       <Switch>

diff --git a/containers/clusterForms/shared/authForm/index.tsx b/containers/clusterForms/shared/authForm/index.tsx
@@ -1,5 +1,6 @@
 import React, { ChangeEvent, FunctionComponent, useEffect, useMemo, useState } from 'react';
 import debounce from 'lodash/debounce';
+import { useFormContext } from 'react-hook-form';
 
 import { Required } from '../../../../components/textField/textField.styled';
 import GitProviderButton from '../../../../components/gitProviderButton';
@@ -10,7 +11,6 @@ import ControlledPassword from '../../../../components/controlledFields/Password
 import ControlledAutocomplete from '../../../../components/controlledFields/AutoComplete';
 import { useAppDispatch, useAppSelector } from '../../../../redux/store';
 import { GIT_PROVIDERS, GitProvider } from '../../../../types';
-import { FormFlowProps } from '../../../../types/provision';
 import { InstallValues, InstallationType } from '../../../../types/redux/index';
 import { FormStep } from '../../../../constants/installation';
 import { EXCLUSIVE_PLUM } from '../../../../constants/colors';
@@ -34,11 +34,7 @@ import { setGitProvider } from '../../../../redux/slices/installation.slice';
 
 import { FormContainer, GitContainer, GitUserField, GitUserFieldInput } from './authForm.styled';
 
-const AuthForm: FunctionComponent<FormFlowProps<InstallValues>> = ({
-  control,
-  reset,
-  setValue,
-}) => {
+const AuthForm: FunctionComponent = () => {
   const [isGitRequested, setIsGitRequested] = useState<boolean>();
   const [gitUserName, setGitUserName] = useState<string>();
 
@@ -71,6 +67,9 @@ const AuthForm: FunctionComponent<FormFlowProps<InstallValues>> = ({
     gitProvider as GitProvider,
     FormStep.AUTHENTICATION,
   );
+
+  const { control, reset, setValue } = useFormContext<InstallValues>();
+
   const isGitHub = useMemo(() => gitProvider === GitProvider.GITHUB, [gitProvider]);
 
   const validateGitOwner = async (gitOwner: string) => {

diff --git a/containers/clusterForms/shared/clusterRunning/index.tsx b/containers/clusterForms/shared/clusterRunning/index.tsx
@@ -2,24 +2,32 @@ import React, { FunctionComponent } from 'react';
 import { useRouter } from 'next/router';
 
 import { getClusters } from '../../../../redux/thunks/api.thunk';
-import { useAppDispatch } from '../../../../redux/store';
+import { useAppDispatch, useAppSelector } from '../../../../redux/store';
 import ClusterReady from '../../../../components/clusterReady';
 
-export interface ClusterRunning {
+export interface ClusterRunningProps {
   clusterName?: string;
   domainName?: string;
 }
 
-const ClusterRunning: FunctionComponent<ClusterRunning> = (props) => {
+const ClusterRunning: FunctionComponent<ClusterRunningProps> = (props) => {
   const dispatch = useAppDispatch();
+  const installValues = useAppSelector(({ installation }) => installation.values);
   const { push } = useRouter();
 
   const onOpenConsole = () => {
     dispatch(getClusters());
     push('/services');
   };
 
-  return <ClusterReady onOpenConsole={onOpenConsole} {...props} />;
+  return (
+    <ClusterReady
+      onOpenConsole={onOpenConsole}
+      clusterName={installValues?.clusterName}
+      domainName={installValues?.domainName}
+      {...props}
+    />
+  );
 };
 
 export default ClusterRunning;
diff --git a/containers/clusterForms/vultr/index.tsx b/containers/clusterForms/vultr/index.tsx
@@ -1,9 +1,7 @@
 import React, { FunctionComponent } from 'react';
-import { FormFlowProps } from 'types/provision';
 
 import TerminalLogs from '../../terminalLogs';
 import { FormStep } from '../../../constants/installation';
-import { InstallValues } from '../../../types/redux';
 import AuthForm from '../shared/authForm';
 import ClusterRunning from '../shared/clusterRunning';
 
@@ -16,15 +14,15 @@ const VULTR_FORM_FLOW = {
   [FormStep.READY]: ClusterRunning,
 };
 
-export const VultrFormFlow: FunctionComponent<FormFlowProps<InstallValues>> = ({
+export const VultrFormFlow: FunctionComponent<{ currentStep: FormStep }> = ({
   currentStep,
   ...rest
 }) => {
-  const ActiveFormStep = VULTR_FORM_FLOW[currentStep as FormStep];
+  const ActiveFormStep = VULTR_FORM_FLOW[currentStep];
 
   if (!ActiveFormStep) {
     return null;
   }
 
-  return <ActiveFormStep {...rest} currentStep={currentStep} />;
+  return <ActiveFormStep {...rest} />;
 };
diff --git a/containers/clusterForms/vultr/setupForm/index.tsx b/containers/clusterForms/vultr/setupForm/index.tsx
@@ -1,22 +1,24 @@
 import React, { FunctionComponent } from 'react';
+import { useFormContext } from 'react-hook-form';
 
 // import LearnMore from '../../../../components/learnMore';
 import ControlledTextField from '../../../../components/controlledFields/TextField';
 import ControlledAutocomplete from '../../../../components/controlledFields/AutoComplete';
 import { useAppDispatch, useAppSelector } from '../../../../redux/store';
 import { getCloudDomains } from '../../../../redux/thunks/api.thunk';
 import { InstallValues } from '../../../../types/redux';
-import { FormFlowProps } from '../../../../types/provision';
 import { EMAIL_REGEX } from '../../../../constants';
 
-const CivoSetupForm: FunctionComponent<FormFlowProps<InstallValues>> = ({ control }) => {
+const CivoSetupForm: FunctionComponent = () => {
   const dispatch = useAppDispatch();
   const { cloudDomains, cloudRegions, values } = useAppSelector(({ api, installation }) => ({
     cloudDomains: api.cloudDomains,
     cloudRegions: api.cloudRegions,
     values: installation.values,
   }));
 
+  const { control } = useFormContext<InstallValues>();
+
   const handleRegionOnSelect = async (region: string) => {
     dispatch(getCloudDomains(region));
   };