Refactor RoomJoinForm to support translation (#5212)

* Refactor Room Join form to support translation

* Remove JoinFormHelpers

* Add missing header

---------

Co-authored-by: Ahmad Farhat <ahmad.af.farhat@gmail.com>

app/assets/locales/en.json

@@ -492,6 +492,11 @@
           "min": "Name must be at least 2 characters long"
         }
       },
+      "room_join": {
+        "name": {
+          "required": "Please enter your name."
+        }
+      },
       "url": {
         "invalid": "Invalid URL"
       }
@@ -504,6 +509,21 @@
         }
       }
     },
+    "room_join": {
+      "fields": {
+        "name": {
+            "label": "Name",
+            "placeholder": "Enter your name"
+        },
+        "access_code": {
+          "label": "Access Code",
+          "placeholder": "Enter the access code"
+        },
+        "recording_consent": {
+          "label": "I acknowledge that this session may be recorded. This may include my voice and video if enabled."
+        }
+      }
+    },
     "user": {
       "signup": {
         "fields": {

app/javascript/components/rooms/room/join/RoomJoin.jsx

@@ -25,12 +25,10 @@ import {
 } from 'react-bootstrap';
 import { toast } from 'react-toastify';
 import { useTranslation } from 'react-i18next';
-import { useForm } from 'react-hook-form';
 import usePublicRoom from '../../../../hooks/queries/rooms/usePublicRoom';
 import { useAuth } from '../../../../contexts/auth/AuthProvider';
 import useRoomStatus from '../../../../hooks/mutations/rooms/useRoomStatus';
 import useEnv from '../../../../hooks/queries/env/useEnv';
-import { joinFormConfig, joinFormFields as fields } from '../../../../helpers/forms/JoinFormHelpers';
 import subscribeToRoom from '../../../../channels/rooms_channel';
 import RequireAuthentication from './RequireAuthentication';
 import GGSpinner from '../../../shared_components/utilities/GGSpinner';
@@ -41,6 +39,7 @@ import Form from '../../../shared_components/forms/Form';
 import FormControl from '../../../shared_components/forms/FormControl';
 import FormControlGeneric from '../../../shared_components/forms/FormControlGeneric';
 import RoomJoinPlaceholder from './RoomJoinPlaceholder';
+import useRoomJoinForm from '../../../../hooks/forms/rooms/useRoomJoinForm';
 
 export default function RoomJoin() {
   const { t } = useTranslation();
@@ -53,7 +52,7 @@ export default function RoomJoin() {
 
   const { data: env } = useEnv();
 
-  const methods = useForm(joinFormConfig);
+  const { methods, fields } = useRoomJoinForm();
 
   const location = useLocation();
   const path = encodeURIComponent(location.pathname);

app/javascript/helpers/forms/JoinFormHelpers.jsx → app/javascript/hooks/forms/rooms/useRoomJoinForm.js

@@ -16,43 +16,41 @@
 
 import * as yup from 'yup';
 import { yupResolver } from '@hookform/resolvers/yup';
+import { useTranslation } from 'react-i18next';
+import { useForm } from 'react-hook-form';
+import { useCallback, useMemo } from 'react';
 
-const validationSchema = yup.object({
-  // TODO: amir - Revisit validations.
-  name: yup.string().required('Please enter your full name.'),
+export function useRoomJoinFormValidation() {
+  const { t } = useTranslation();
+  return useMemo(() => (yup.object({
+    name: yup.string().required(t('forms.validations.room_join.name.required')),
     access_code: yup.string(),
     consent: yup.boolean().oneOf([true], ''),
-});
+  })), [t]);
+}
 
-export const joinFormConfig = {
-  mode: 'onSubmit',
-  criteriaMode: 'firstError',
-  defaultValues: {
-    name: '',
-    access_code: '',
-  },
-  resolver: yupResolver(validationSchema),
-};
+export default function useRoomJoinForm({ defaultValues: _defaultValues, ..._config } = {}) {
+  const { t, i18n } = useTranslation();
 
-export const joinFormFields = {
+  const fields = useMemo(() => ({
     name: {
-    label: 'Name',
-    placeHolder: 'Enter your name',
+      label: t('forms.room_join.fields.name.label'),
+      placeHolder: t('forms.room_join.fields.name.placeholder'),
       controlId: 'joinFormName',
       hookForm: {
         id: 'name',
       },
     },
     accessCode: {
-    label: 'Access Code',
-    placeHolder: 'Enter the access code',
+      label: t('forms.room_join.fields.access_code.label'),
+      placeHolder: t('forms.room_join.fields.access_code.placeholder'),
       controlId: 'joinFormCode',
       hookForm: {
         id: 'access_code',
       },
     },
     recordingConsent: {
-    label: 'I acknowledge that this session may be recorded. This may include my voice and video if enabled.',
+      label: t('forms.room_join.fields.recording_consent.label'),
       controlId: 'consentCheck',
       hookForm: {
         id: 'consent',
@@ -61,4 +59,29 @@ export const joinFormFields = {
         },
       },
     },
-};
+  }), [i18n.resolvedLanguage]);
+
+  const validationSchema = useRoomJoinFormValidation();
+
+  const config = useMemo(() => ({
+    ...{
+      mode: 'onSubmit',
+      criteriaMode: 'firstError',
+      defaultValues: {
+        ...{
+          name: '',
+          access_code: '',
+        },
+        ..._defaultValues,
+      },
+      resolver: yupResolver(validationSchema),
+    },
+    ..._config,
+  }), [validationSchema, _defaultValues]);
+
+  const methods = useForm(config);
+
+  const reset = useCallback(() => methods.reset(config.defaultValues), [methods.reset, config.defaultValues]);
+
+  return { methods, fields, reset };
+}