Merge pull request #1323 from Gary-Community-Ventures/refactor/prefer…

…red-lang Refactor/preferred lang
Gary-Community-Ventures · Oct 3, 2024 · 5ef8bc1 · 5ef8bc1
2 parents 5733ab8 + e469a29
commit 5ef8bc1
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 38 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -12,7 +12,7 @@ import HouseholdDataBlock from './Components/HouseholdDataBlock/HouseholdDataBlo
 import ProgressBar from './Components/ProgressBar/ProgressBar';
 import JeffcoLandingPage from './Components/JeffcoComponents/JeffcoLandingPage/JeffcoLandingPage';
 import LoadingPage from './Components/LoadingPage/LoadingPage.tsx';
-import SelectLanguagePage from './Components/SelectLanguagePage/SelectLanguagePage.tsx';
+import SelectLanguagePage from './Components/Steps/SelectLanguagePage.tsx';
 import { updateScreen, updateUser } from './Assets/updateScreen.ts';
 import { getStepDirectory, STARTING_QUESTION_NUMBER, getStepNumber } from './Assets/stepDirectory';
 import Box from '@mui/material/Box';

diff --git a/src/Components/ContinueButton/FormContinueButton.tsx b/src/Components/ContinueButton/FormContinueButton.tsx
@@ -0,0 +1,13 @@
+import { Button } from '@mui/material';
+import { PropsWithChildren } from 'react';
+import { FormattedMessage } from 'react-intl';
+
+const FormContinueButton = ({ children }: PropsWithChildren) => {
+  return (
+    <Button variant="contained" type="submit">
+      {children ?? <FormattedMessage id="continueButton" defaultMessage="Continue" />}
+    </Button>
+  );
+};
+
+export default FormContinueButton;
diff --git a/src/Components/PrevAndContinueButtons/PrevAndContinueButtons.tsx b/src/Components/PrevAndContinueButtons/PrevAndContinueButtons.tsx
@@ -1,6 +1,6 @@
 import PreviousButton from '../PreviousButton/PreviousButton';
-import { Button } from '@mui/material';
-import { FormattedMessage } from 'react-intl';
+import FormContinueButton from '../ContinueButton/FormContinueButton';
+import { FormattedMessageType } from '../../Types/Questions';
 
 type PrevAndContinueButtonsProps = {
   backNavigationFunction: () => void;
@@ -10,9 +10,7 @@ const PrevAndContinueButtons = ({ backNavigationFunction }: PrevAndContinueButto
   return (
     <div className="question-buttons">
       <PreviousButton navFunction={backNavigationFunction} />
-      <Button variant="contained" type="submit">
-        <FormattedMessage id="continueButton" defaultMessage="Continue" />
-      </Button>
+      <FormContinueButton />
     </div>
   );
 };

diff --git a/...SelectLanguagePage/SelectLanguagePage.tsx → src/Components/Steps/SelectLanguagePage.tsx b/...SelectLanguagePage/SelectLanguagePage.tsx → src/Components/Steps/SelectLanguagePage.tsx
@@ -1,11 +1,12 @@
 import { useConfig } from '../Config/configHook.tsx';
-import { FormControl, Select, InputLabel, MenuItem, SelectChangeEvent, Button, Box } from '@mui/material';
+import { FormControl, Select, InputLabel, MenuItem, SelectChangeEvent } from '@mui/material';
 import { FormattedMessage } from 'react-intl';
 import { Context } from '../Wrapper/Wrapper.tsx';
 import { useContext, useEffect } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
-import QuestionHeader from '../QuestionComponents/QuestionHeader';
-import { useQueryString } from '../QuestionComponents/questionHooks';
+import QuestionHeader from '../QuestionComponents/QuestionHeader.tsx';
+import { useQueryString } from '../QuestionComponents/questionHooks.ts';
+import FormContinueButton from '../ContinueButton/FormContinueButton.tsx';
 
 const SelectLanguagePage = () => {
   const { locale, selectLanguage } = useContext(Context);
@@ -46,6 +47,14 @@ const SelectLanguagePage = () => {
     };
   });
 
+  const handleSubmit = () => {
+    if (uuid !== undefined) {
+      navigate(`/${uuid}/step-2${queryString}`);
+      return;
+    }
+    navigate(`/step-2${queryString}`);
+  };
+
   return (
     <main className="benefits-form">
       <QuestionHeader>
@@ -54,35 +63,28 @@ const SelectLanguagePage = () => {
       <h2 className="sub-header-language-select">
         <FormattedMessage id="selectLanguage.subHeader" defaultMessage="What is your preferred language?" />
       </h2>
-      <FormControl sx={{ width: '150px' }}>
-        <InputLabel id="language-select-label">
-          <FormattedMessage id="selectLang.text" defaultMessage="Language" />
-        </InputLabel>
-        <Select
-          labelId="language-select-label"
-          id="language-select"
-          value={locale}
-          label={<FormattedMessage id="selectLang.text" defaultMessage="Language" />}
-          //@ts-ignore
-          onChange={(event: SelectChangeEvent<string>) => selectLanguage(event)}
-        >
-          {createMenuItems(languageOptions, 'selectLang.disabledSelectMenuItemText', 'Select a language')}
-        </Select>
-      </FormControl>
-      <Box sx={{ mt: '1rem' }}>
-        <Button
-          variant="contained"
-          onClick={() => {
-            if (uuid !== undefined) {
-              navigate(`/${uuid}/step-2${queryString}`);
-              return;
-            }
-            navigate(`/step-2${queryString}`);
-          }}
-        >
-          <FormattedMessage id="continueButton-getStarted" defaultMessage="Get Started" />
-        </Button>
-      </Box>
+      <form onSubmit={handleSubmit}>
+        <FormControl sx={{ width: '150px' }}>
+          <InputLabel id="language-select-label">
+            <FormattedMessage id="selectLang.text" defaultMessage="Language" />
+          </InputLabel>
+          <Select
+            labelId="language-select-label"
+            id="language-select"
+            value={locale}
+            label={<FormattedMessage id="selectLang.text" defaultMessage="Language" />}
+            //@ts-ignore
+            onChange={(event: SelectChangeEvent<string>) => selectLanguage(event)}
+          >
+            {createMenuItems(languageOptions, 'selectLang.disabledSelectMenuItemText', 'Select a language')}
+          </Select>
+        </FormControl>
+        <div style={{ marginTop: '1rem' }}>
+          <FormContinueButton>
+            <FormattedMessage id="continueButton-getStarted" defaultMessage="Get Started" />
+          </FormContinueButton>
+        </div>
+      </form>
     </main>
   );
 };