update hook for preserving form values on language change

Author: raclim

client/common/useSyncFormTranslations.js

@@ -0,0 +1,22 @@
+import { useEffect } from 'react';
+
+// Usage: useSyncFormTranslations(formRef, language)
+// This hook ensures that form values are preserved when the language changes.
+// Pass a ref to the form instance and the current language as arguments.
+const useSyncFormTranslations = (formRef, language) => {
+  useEffect(() => {
+    const form = formRef.current;
+    if (!form) return;
+
+    const { values } = form.getState();
+    form.reset();
+
+    Object.keys(values).forEach((field) => {
+      if (values[field]) {
+        form.change(field, values[field]);
+      }
+    });
+  }, [language]);
+};
+
+export default useSyncFormTranslations;

client/modules/IDE/hooks/custom-hooks.js

@@ -68,22 +68,3 @@ export const useEventListener = (
     document.addEventListener(event, callback, useCapture);
     return () => document.removeEventListener(event, callback, useCapture);
   }, list);
-
-// Usage: usePreserveFormValuesOnLanguageChange(formRef, language)
-// This hook ensures that form values are preserved when the language changes.
-// Pass a ref to the form instance and the current language as arguments.
-export const usePreserveFormValuesOnLanguageChange = (formRef, language) => {
-  useEffect(() => {
-    const form = formRef.current;
-    if (!form) return;
-
-    const { values } = form.getState();
-    form.reset();
-
-    Object.keys(values).forEach((field) => {
-      if (values[field]) {
-        form.change(field, values[field]);
-      }
-    });
-  }, [language]);
-};

client/modules/User/components/LoginForm.jsx

@@ -6,7 +6,7 @@ import { AiOutlineEye, AiOutlineEyeInvisible } from 'react-icons/ai';
 import Button from '../../../common/Button';
 import { validateLogin } from '../../../utils/reduxFormUtils';
 import { validateAndLoginUser } from '../actions';
-import { usePreserveFormValuesOnLanguageChange } from '../../IDE/hooks/custom-hooks';
+import { useSyncFormTranslations } from '../../../common/useSyncFormTranslations';
 
 function LoginForm() {
   const { t, i18n } = useTranslation();
@@ -22,7 +22,7 @@ function LoginForm() {
     setShowPassword(!showPassword);
   };
 
-  usePreserveFormValuesOnLanguageChange(formRef, i18n.language);
+  useSyncFormTranslations(formRef, i18n.language);
 
   return (
     <Form

client/modules/User/components/SignupForm.jsx

@@ -7,7 +7,7 @@ import { validateSignup } from '../../../utils/reduxFormUtils';
 import { validateAndSignUpUser } from '../actions';
 import Button from '../../../common/Button';
 import apiClient from '../../../utils/apiClient';
-import { usePreserveFormValuesOnLanguageChange } from '../../IDE/hooks/custom-hooks';
+import { useSyncFormTranslations } from '../../../common/useSyncFormTranslations';
 
 function asyncValidate(fieldToValidate, value) {
   if (!value || value.trim().length === 0) {
@@ -50,7 +50,7 @@ function SignupForm() {
   const handleConfirmVisibility = () => {
     setShowConfirmPassword(!showConfirmPassword);
   };
-  usePreserveFormValuesOnLanguageChange(formRef, i18n.language);
+  useSyncFormTranslations(formRef, i18n.language);
 
   return (
     <Form