fix: pull request feedback corrections

jwplayer · Aug 18, 2023 · 02e4fc7 · 02e4fc7
1 parent a5040a9
commit 02e4fc7
Show file tree

Hide file tree

Showing 14 changed files with 97 additions and 68 deletions.
diff --git a/public/locales/es/user.json b/public/locales/es/user.json
@@ -39,7 +39,7 @@
     "firstname": "Nombre",
     "hide_password": "Ocultar contraseña",
     "lastname": "Apellido",
-    "other_registration_details": "",
+    "other_registration_details": "Otros detalles de registro",
     "password": "Contraseña",
     "save": "Guardar",
     "security": "Contraseña",

diff --git a/src/components/Account/Account.tsx b/src/components/Account/Account.tsx
@@ -193,7 +193,7 @@ const Account = ({ panelClassName, panelHeaderClassName, canUpdateEmail = true }
                   name="firstName"
                   label={t('account.firstname')}
                   value={section.values.firstName || ''}
-                  onChange={section.onChangeEvent}
+                  onChange={section.onChange}
                   error={!!section.errors?.firstName}
                   helperText={section.errors?.firstName}
                   disabled={section.isBusy}
@@ -203,7 +203,7 @@ const Account = ({ panelClassName, panelHeaderClassName, canUpdateEmail = true }
                   name="lastName"
                   label={t('account.lastname')}
                   value={section.values.lastName || ''}
-                  onChange={section.onChangeEvent}
+                  onChange={section.onChange}
                   error={!!section.errors?.lastName}
                   helperText={section.errors?.lastName}
                   disabled={section.isBusy}
@@ -228,7 +228,7 @@ const Account = ({ panelClassName, panelHeaderClassName, canUpdateEmail = true }
                   name="email"
                   label={t('account.email')}
                   value={section.values.email || ''}
-                  onChange={section.onChangeEvent}
+                  onChange={section.onChange}
                   error={!!section.errors?.email}
                   helperText={section.errors?.email}
                   disabled={section.isBusy}
@@ -240,7 +240,7 @@ const Account = ({ panelClassName, panelHeaderClassName, canUpdateEmail = true }
                     name="confirmationPassword"
                     label={t('account.confirm_password')}
                     value={section.values.confirmationPassword}
-                    onChange={section.onChangeEvent}
+                    onChange={section.onChange}
                     error={!!section.errors?.confirmationPassword}
                     helperText={section.errors?.confirmationPassword}
                     type={viewPassword ? 'text' : 'password'}
@@ -271,7 +271,7 @@ const Account = ({ panelClassName, panelHeaderClassName, canUpdateEmail = true }
                     key={index}
                     name={`consentsValues.${consent.name}`}
                     checked={section.values.consentsValues?.[consent.name] === true}
-                    onChange={section.onChangeEvent}
+                    onChange={section.onChange}
                     label={formatConsentLabel(consent.label)}
                     disabled={consent.required || section.isBusy}
                   />
@@ -296,7 +296,7 @@ const Account = ({ panelClassName, panelHeaderClassName, canUpdateEmail = true }
                       placeholder={consent.placeholder}
                       value={section.values.consentsValues[consent.name]}
                       disabled={(consent.type === REGISTER_FIELD_VARIANT.CHECKBOX && consent.required) || section.isBusy}
-                      onChange={(name, value) => section.onChangeValue(name, value)}
+                      onChange={section.onChange}
                     />
                   ))}
                 </div>

diff --git a/src/components/CustomRegisterField/CustomRegisterField.tsx b/src/components/CustomRegisterField/CustomRegisterField.tsx
@@ -1,4 +1,4 @@
-import { type FC, type ChangeEventHandler, type ReactNode, useMemo, useCallback } from 'react';
+import { type FC, type ChangeEventHandler, type ReactNode, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import type { GetRegisterFieldOption } from '@inplayer-org/inplayer.js';
 
@@ -15,7 +15,7 @@ type Props = {
   type: ConsentFieldVariants;
   name: string;
   value: string | boolean;
-  onChange: (name: string, value: string | boolean) => void;
+  onChange: ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
 } & Partial<{
   label: ReactNode;
   placeholder: string;
@@ -28,7 +28,7 @@ type Props = {
 
 export type CustomRegisterFieldCommonProps = Props;
 
-export const CustomRegisterField: FC<Props> = ({ type, name, value = '', onChange, ...props }) => {
+export const CustomRegisterField: FC<Props> = ({ type, value = '', ...props }) => {
   const { t } = useTranslation(type);
 
   const optionsList = useMemo(() => {
@@ -50,29 +50,19 @@ export const CustomRegisterField: FC<Props> = ({ type, name, value = '', onChang
     }
   }, [t, type, props.options]);
 
-  const changeHandler: ChangeEventHandler<HTMLInputElement> = useCallback(
-    ({ currentTarget }) => {
-      const value = type === REGISTER_FIELD_VARIANT.CHECKBOX ? (currentTarget as HTMLInputElement).checked : currentTarget.value;
-      onChange(name, value);
-    },
-    [type, name, onChange],
-  );
-
-  const commonProps = { ...props, name, onChange: changeHandler };
-
   switch (type) {
     case REGISTER_FIELD_VARIANT.CHECKBOX:
-      return <Checkbox {...commonProps} checked={value === true} />;
+      return <Checkbox {...props} checked={value === true} />;
     case REGISTER_FIELD_VARIANT.INPUT:
-      return <TextField {...commonProps} value={value as string} />;
+      return <TextField {...props} value={value as string} />;
     case REGISTER_FIELD_VARIANT.RADIO:
-      return <Radio {...commonProps} values={optionsList} value={value as string} header={props.label} />;
+      return <Radio {...props} values={optionsList} value={value as string} header={props.label} />;
     case REGISTER_FIELD_VARIANT.GENERIC_SELECT:
     case REGISTER_FIELD_VARIANT.COUNTRY_SELECT:
     case REGISTER_FIELD_VARIANT.US_STATE_SELECT:
-      return <Dropdown {...commonProps} options={optionsList} value={value as string} defaultLabel={props.placeholder} fullWidth />;
+      return <Dropdown {...props} options={optionsList} value={value as string} defaultLabel={props.placeholder} fullWidth />;
     case REGISTER_FIELD_VARIANT.DATE_PICKER:
-      return <DateField {...commonProps} value={value as string} onChange={(dateString: string) => onChange(name, dateString)} />;
+      return <DateField {...props} value={value as string} />;
     default:
       return null;
   }

diff --git a/src/components/CustomRegisterField/__snapshots__/CustomRegisterField.test.tsx.snap b/src/components/CustomRegisterField/__snapshots__/CustomRegisterField.test.tsx.snap
@@ -1560,8 +1560,13 @@ exports[`<CustomRegisterField> > renders and matches snapshot <Dropdown type="da
       class="_container_eb6974"
     >
       <input
-        class="_input_eb6974"
+        class="_hiddenInput_eb6974"
         id="text-field_1235_name"
+        name="name"
+      />
+      <input
+        class="_input_eb6974"
+        id="text-field_1235_name-date"
         maxlength="2"
         name="date"
         placeholder="dd"
@@ -1571,7 +1576,7 @@ exports[`<CustomRegisterField> > renders and matches snapshot <Dropdown type="da
        / 
       <input
         class="_input_eb6974"
-        id="text-field_1235_name"
+        id="text-field_1235_name-month"
         maxlength="2"
         name="month"
         placeholder="mm"
@@ -1581,7 +1586,7 @@ exports[`<CustomRegisterField> > renders and matches snapshot <Dropdown type="da
        / 
       <input
         class="_input_eb6974"
-        id="text-field_1235_name"
+        id="text-field_1235_name-year"
         maxlength="4"
         name="year"
         placeholder="yyyy"

diff --git a/src/components/DateField/DateField.module.scss b/src/components/DateField/DateField.module.scss
@@ -99,3 +99,7 @@
     padding-left: 4px;
   }
 }
+
+.hiddenInput {
+  display: none;
+}
diff --git a/src/components/DateField/DateField.tsx b/src/components/DateField/DateField.tsx
@@ -1,4 +1,4 @@
-import React, { useState, type ReactNode } from 'react';
+import React, { useState, type ReactNode, useRef, useEffect } from 'react';
 import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
 
@@ -14,7 +14,7 @@ type Props = {
   name?: string;
   value: string;
   format?: string;
-  onChange?: (dateString: string) => void;
+  onChange?: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
   onFocus?: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
   helperText?: React.ReactNode;
   error?: boolean;
@@ -39,6 +39,8 @@ const DateField: React.FC<Props> = ({ className, label, error, helperText, value
 
   const id = useOpaqueId('text-field', rest.name);
 
+  const hiddenInputRef = useRef<HTMLInputElement>(null);
+
   const DateFieldClassName = classNames(
     styles.dateField,
     {
@@ -105,22 +107,33 @@ const DateField: React.FC<Props> = ({ className, label, error, helperText, value
 
     setValues({ date, month, year });
 
-    if (onChange) {
-      onChange(date && month && year ? format.replace('YYYY', year).replace('MM', month).replace('DD', date) : '');
-    }
-
     if ((nextSibling && name === 'month' && month.length === 2) || (name === 'date' && date.length === 2)) {
       setTimeout(() => nextSibling.focus(), 1);
     }
   };
 
+  useEffect(() => {
+    const nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value')?.set;
+
+    const { date, month, year } = values;
+
+    const newValue = date && month && year ? format.replace('YYYY', year).replace('MM', month).replace('DD', date) : '';
+
+    nativeInputValueSetter?.call(hiddenInputRef.current, newValue);
+
+    const inputEvent = new Event('input', { bubbles: true });
+
+    hiddenInputRef.current?.dispatchEvent(inputEvent);
+  }, [values, format]);
+
   return (
     <div className={DateFieldClassName}>
       <label htmlFor={id} className={styles.label}>
         {label}
         {!rest.required ? <span>{t('optional')}</span> : null}
       </label>
       <div className={styles.container}>
+        <input ref={hiddenInputRef} id={id} className={styles.hiddenInput} name={rest.name} onChange={onChange} />
         <input
           className={styles.input}
           name="date"
@@ -132,7 +145,7 @@ const DateField: React.FC<Props> = ({ className, label, error, helperText, value
           onKeyDown={handleKeyDown}
           maxLength={2}
           type="number"
-          id={id}
+          id={`${id}-date`}
         />
         {' / '}
         <input
@@ -146,7 +159,7 @@ const DateField: React.FC<Props> = ({ className, label, error, helperText, value
           onKeyDown={handleKeyDown}
           maxLength={2}
           type="number"
-          id={id}
+          id={`${id}-month`}
         />
         {' / '}
         <input
@@ -160,7 +173,7 @@ const DateField: React.FC<Props> = ({ className, label, error, helperText, value
           onKeyDown={handleKeyDown}
           maxLength={4}
           type="number"
-          id={id}
+          id={`${id}-year`}
         />
       </div>
       <HelperText error={error}>{helperText}</HelperText>

diff --git a/src/components/Form/FormSection.tsx b/src/components/Form/FormSection.tsx
@@ -12,8 +12,7 @@ export interface FormSectionContentArgs<T extends GenericFormValues, TErrors> {
   values: T;
   isEditing: boolean;
   isBusy: boolean;
-  onChangeEvent: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
-  onChangeValue: (name: string, value: string | boolean) => void;
+  onChange: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
   errors?: TErrors | undefined;
 }
 
@@ -53,8 +52,13 @@ export function FormSection<TData extends GenericFormValues>({
 
   const isEditing = sectionId === activeSectionId;
 
-  const onChangeValue = useCallback(
-    (name: string, value: string | boolean) => {
+  const onChange = useCallback(
+    ({ currentTarget }: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+      if (!currentTarget) return;
+
+      const { name, type } = currentTarget;
+      const value = type === 'checkbox' ? (currentTarget as HTMLInputElement).checked : currentTarget.value;
+
       if (!isEditing) {
         onCancel();
       }
@@ -84,18 +88,6 @@ export function FormSection<TData extends GenericFormValues>({
     [isEditing, onCancel, sectionId, setFormState],
   );
 
-  const onChangeEvent = useCallback(
-    function onChange({ currentTarget }: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>) {
-      if (!currentTarget) return;
-
-      const { name, type } = currentTarget;
-      const value = type === 'checkbox' ? (currentTarget as HTMLInputElement).checked : currentTarget.value;
-
-      onChangeValue(name, value);
-    },
-    [onChangeValue],
-  );
-
   const handleSubmit = useCallback(
     async function handleSubmit(event?: React.FormEvent) {
       event && event.preventDefault();
@@ -163,10 +155,10 @@ export function FormSection<TData extends GenericFormValues>({
       {content &&
         (isEditing ? (
           <form className={styles.flexBox} noValidate onSubmit={(event) => event.preventDefault()}>
-            {content({ values, isEditing, isBusy, onChangeEvent, onChangeValue, errors: formErrors })}
+            {content({ values, isEditing, isBusy, onChange, errors: formErrors })}
           </form>
         ) : (
-          <div className={styles.flexBox}>{content({ values, isEditing, isBusy, onChangeEvent, onChangeValue })}</div>
+          <div className={styles.flexBox}>{content({ values, isEditing, isBusy, onChange })}</div>
         ))}
       {(saveButton || editButton || cancelButton) && (
         <div className={styles.controls}>

diff --git a/src/components/PersonalDetailsForm/PersonalDetailsForm.tsx b/src/components/PersonalDetailsForm/PersonalDetailsForm.tsx
@@ -181,7 +181,7 @@ const PersonalDetailsForm: React.FC<Props> = ({
       {fields.birthDate?.enabled ? (
         <DateField
           value={values.birthDate}
-          onChange={(value) => setValue('birthDate', value)}
+          onChange={(event) => setValue('birthDate', event.currentTarget.value)}
           label={t('personal_details.birth_date')}
           placeholder={t('personal_details.birth_date')}
           error={!!errors.birthDate || !!errors.form}

diff --git a/src/components/PersonalDetailsForm/__snapshots__/PersonalDetailsForm.test.tsx.snap b/src/components/PersonalDetailsForm/__snapshots__/PersonalDetailsForm.test.tsx.snap
@@ -285,8 +285,13 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
         class="_container_eb6974"
       >
         <input
-          class="_input_eb6974"
+          class="_hiddenInput_eb6974"
           id="text-field_1235_birthDate"
+          name="birthDate"
+        />
+        <input
+          class="_input_eb6974"
+          id="text-field_1235_birthDate-date"
           maxlength="2"
           name="date"
           placeholder="dd"
@@ -296,7 +301,7 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
          / 
         <input
           class="_input_eb6974"
-          id="text-field_1235_birthDate"
+          id="text-field_1235_birthDate-month"
           maxlength="2"
           name="month"
           placeholder="mm"
@@ -306,7 +311,7 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
          / 
         <input
           class="_input_eb6974"
-          id="text-field_1235_birthDate"
+          id="text-field_1235_birthDate-year"
           maxlength="4"
           name="year"
           placeholder="yyyy"
@@ -697,8 +702,13 @@ exports[`<PersonalDetailsForm> > Renders without crashing 1`] = `
         class="_container_eb6974"
       >
         <input
-          class="_input_eb6974"
+          class="_hiddenInput_eb6974"
           id="text-field_1235_birthDate"
+          name="birthDate"
+        />
+        <input
+          class="_input_eb6974"
+          id="text-field_1235_birthDate-date"
           maxlength="2"
           name="date"
           placeholder="dd"
@@ -708,7 +718,7 @@ exports[`<PersonalDetailsForm> > Renders without crashing 1`] = `
          / 
         <input
           class="_input_eb6974"
-          id="text-field_1235_birthDate"
+          id="text-field_1235_birthDate-month"
           maxlength="2"
           name="month"
           placeholder="mm"
@@ -718,7 +728,7 @@ exports[`<PersonalDetailsForm> > Renders without crashing 1`] = `
          / 
         <input
           class="_input_eb6974"
-          id="text-field_1235_birthDate"
+          id="text-field_1235_birthDate-year"
           maxlength="4"
           name="year"
           placeholder="yyyy"

diff --git a/src/components/Radio/Radio.tsx b/src/components/Radio/Radio.tsx
@@ -32,7 +32,7 @@ const Radio: React.FC<Props> = ({ name, onChange, header, value, values, helperT
       {values.map(({ value: optionValue, label: optionLabel }, index) => (
         <div className={styles.radio} key={index}>
           <input value={optionValue} name={name} type="radio" id={id + index} onChange={onChange} checked={value === optionValue} required={required} />
-          <label htmlFor={id + index}>{optionLabel ?? optionValue}</label>
+          <label htmlFor={id + index}>{optionLabel}</label>
         </div>
       ))}
       <HelperText error={error}>{helperText}</HelperText>