ORV2-1394 Remove i18n dependencies from frontend (#682)

bcgov · Oct 19, 2023 · 40f393a · 40f393a
1 parent f139ddf
commit 40f393a
Show file tree

Hide file tree

Showing 11 changed files with 23 additions and 190 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -16,15 +16,13 @@
     "@tanstack/react-query": "^4.29.7",
     "axios": "^1.4.0",
     "dayjs": "^1.11.7",
-    "i18next": "^22.5.0",
     "lottie-web": "^5.12.2",
     "material-react-table": "^1.10.0",
     "mui-nested-menu": "^3.2.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-error-boundary": "^4.0.7",
     "react-hook-form": "^7.43.9",
-    "react-i18next": "^12.2.2",
     "react-modal": "^3.16.1",
     "react-oidc-context": "^2.2.2",
     "react-router-dom": "^6.11.0",

diff --git a/frontend/src/common/components/form/CustomFormComponents.tsx b/frontend/src/common/components/form/CustomFormComponents.tsx
@@ -6,7 +6,6 @@ import {
   RegisterOptions,
   useFormContext,
 } from "react-hook-form";
-import { useTranslation } from "react-i18next";
 import { ORBC_FormTypes } from "../../types/common";
 import { CustomDatePicker } from "./subFormComponents/CustomDatePicker";
 import { CustomOutlinedInput } from "./subFormComponents/CustomOutlinedInput";
@@ -20,7 +19,6 @@ export interface CustomFormComponentProps<T extends FieldValues> {
   type: "input" | "select" | "phone" | "datePicker";
   feature: string;
   options: CustomFormOptionsProps<T>;
-  i18options?: InternationalOptionsProps;
   menuOptions?: JSX.Element[];
   className?: string;
   disabled?: boolean;
@@ -40,15 +38,6 @@ interface CustomFormOptionsProps<T extends FieldValues> {
   inputType?: "number"; // currently only support number, add "date", "email" and other types later
 }
 
-/**
- * Optional Internationalization properties
- */
-interface InternationalOptionsProps {
-  label_i18?: string;
-  inValidMessage_i18?: string;
-  inValidMessage_fieldName_i18?: string;
-}
-
 /**
  * Recursive method to dynamically get the error message of a fieldname that has nested json
  * Example: Field name of primaryContact.provinceCode
@@ -78,10 +67,9 @@ export const getErrorMessage = (errors: any, fieldPath: string): string => {
  * @param options These options are used to customize the component through styles, validation rules, and TanStack React Query integration
  * @param name The name of the field, which is the Unique name of your input.
  * @param rules Validation rules such as required, min, max, etc
- * @param label Text to label the field. Must be identical to the value in i18/translations/en.json if integrating with i18
+ * @param label Text to label the field.
  * @param inputProps MUI component attributes applied to the html input element.
  * @param width Width of the MUI Box container that contains all of the code for the form component. Defaults t0 520px
- * @param i18options Optional Internationalization integration using i18
  * @param customHelperText Non-bold text to appear in parenthesis beside the label
  * @param menuOptions Menu items array for MUI Select component
  *
@@ -99,7 +87,6 @@ export const CustomFormComponent = <T extends ORBC_FormTypes>({
     customHelperText,
     inputType, // currently only used for "input" types, add for "select" types later
   },
-  i18options,
   menuOptions,
   className,
   disabled,
@@ -109,7 +96,6 @@ export const CustomFormComponent = <T extends ORBC_FormTypes>({
     control,
     formState: { errors },
   } = useFormContext();
-  const { t } = useTranslation();
 
   /**
    * Function to check the rules object for either required or required: { value: true}
@@ -190,7 +176,7 @@ export const CustomFormComponent = <T extends ORBC_FormTypes>({
                 id={`${feature}-${name}-label`}
                 sx={{ fontWeight: "bold", marginBottom: "8px" }}
               >
-                {i18options?.label_i18 ? t(i18options?.label_i18) : label}
+                {label}
                 {!isRequired() && (
                   <span style={{ fontWeight: "normal" }}> (optional)</span>
                 )}
@@ -207,11 +193,7 @@ export const CustomFormComponent = <T extends ORBC_FormTypes>({
                   data-testid={`alert-${name}`} 
                   error
                 >
-                  {i18options?.inValidMessage_i18
-                    ? t(i18options?.inValidMessage_i18, {
-                        fieldName: label,
-                      })
-                    : getErrorMessage(errors, name)}
+                  {getErrorMessage(errors, name)}
                 </FormHelperText>
               )}
             </FormControl>

diff --git a/frontend/src/features/manageVehicles/components/dashboard/AddVehicleButton.tsx b/frontend/src/features/manageVehicles/components/dashboard/AddVehicleButton.tsx
@@ -7,7 +7,6 @@ import Popper from "@mui/material/Popper";
 import MenuItem from "@mui/material/MenuItem";
 import MenuList from "@mui/material/MenuList";
 import Stack from "@mui/material/Stack";
-import { useTranslation } from "react-i18next";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faChevronDown } from "@fortawesome/free-solid-svg-icons";
 
@@ -30,16 +29,14 @@ export const AddVehicleButton = () => {
   const [isMenuOpen, setIsMenuOpen] = React.useState(false);
   const anchorRef = React.useRef<HTMLButtonElement>(null);
 
-  const { t } = useTranslation();
-
   const options = [
     {
       vehicleMode: VEHICLE_TYPES_ENUM.POWER_UNIT,
-      translationKey: "vehicle.power-unit",
+      labelValue: "Power Unit"
     },
     {
       vehicleMode: VEHICLE_TYPES_ENUM.TRAILER,
-      translationKey: "vehicle.trailer",
+      labelValue: "Trailer"
     },
   ];
 
@@ -133,15 +130,15 @@ export const AddVehicleButton = () => {
                     onKeyDown={handleListKeyDown}
                   >
                     {options.map((option, index) => {
-                      const { vehicleMode, translationKey } = option;
+                      const { vehicleMode, labelValue } = option;
                       return (
                         <MenuItem
                           key={vehicleMode}
                           onClick={(event) =>
                             handleMenuItemClick(event, index, vehicleMode)
                           }
                         >
-                          {t(translationKey)}
+                          {labelValue}
                         </MenuItem>
                       );
                     })}

diff --git a/frontend/src/features/manageVehicles/components/form/PowerUnitForm.tsx b/frontend/src/features/manageVehicles/components/form/PowerUnitForm.tsx
@@ -149,9 +149,6 @@ export const PowerUnitForm = ({ powerUnit }: PowerUnitFormProps) => {
               label: "Unit #",
               width: formFieldStyle.width,
             }}
-            i18options={{
-              label_i18: "vehicle.power-unit.unit-number",
-            }}
           />
 
           <CustomFormComponent
@@ -166,9 +163,6 @@ export const PowerUnitForm = ({ powerUnit }: PowerUnitFormProps) => {
               label: "Make",
               width: formFieldStyle.width,
             }}
-            i18options={{
-              label_i18: "vehicle.power-unit.make",
-            }}
           />
 
           <CustomFormComponent
@@ -218,9 +212,6 @@ export const PowerUnitForm = ({ powerUnit }: PowerUnitFormProps) => {
               label: "Plate",
               width: formFieldStyle.width,
             }}
-            i18options={{
-              label_i18: "vehicle.power-unit.plate",
-            }}
           />
 
           <CustomFormComponent