client/modules/User/components/LoginForm: update with types & update useSyncFormTranslations to handle null formRef

Author: clairep94

client/common/useSyncFormTranslations.ts

@@ -12,11 +12,11 @@ export interface FormLike {
  * @param language
  */
 export const useSyncFormTranslations = (
-  formRef: MutableRefObject<FormLike>,
+  formRef: MutableRefObject<FormLike | null>,
   language: string
 ) => {
   useEffect(() => {
-    const form = formRef.current;
+    const form = formRef?.current;
     if (!form) return;
 
     const { values } = form.getState();

client/modules/User/components/LoginForm.tsx

@@ -6,17 +6,21 @@ import { AiOutlineEye, AiOutlineEyeInvisible } from 'react-icons/ai';
 import { Button, ButtonTypes } from '../../../common/Button';
 import { validateLogin } from '../../../utils/reduxFormUtils';
 import { validateAndLoginUser } from '../actions';
-import { useSyncFormTranslations } from '../../../common/useSyncFormTranslations';
+import {
+  FormLike,
+  useSyncFormTranslations
+} from '../../../common/useSyncFormTranslations';
+import type { LoginForm as LoginFormType } from '../../../utils/reduxFormUtils';
 
 export function LoginForm() {
   const { t, i18n } = useTranslation();
 
   const dispatch = useDispatch();
-  function onSubmit(formProps) {
+  function onSubmit(formProps: LoginFormType) {
     return dispatch(validateAndLoginUser(formProps));
   }
   const [showPassword, setShowPassword] = useState(false);
-  const formRef = useRef(null);
+  const formRef = useRef<FormLike | null>(null);
 
   const handleVisibility = () => {
     setShowPassword(!showPassword);