extracted common code into a custom hook,removed commnets

Author: AbhigyanSrivastav

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

@@ -68,3 +68,22 @@ 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

@@ -1,11 +1,12 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Form, Field } from 'react-final-form';
 import { useDispatch } from 'react-redux';
 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';
 
 function LoginForm() {
   const { t, i18n } = useTranslation();
@@ -20,21 +21,8 @@ function LoginForm() {
   const handleVisibility = () => {
     setShowPassword(!showPassword);
   };
-  useEffect(() => {
-    const form = formRef.current;
-    if (!form) return;
 
-    const { values } = form.getState(); // store current form touched values
-    form.reset();
-
-    // Restore prev form values and trigger validation
-    Object.keys(values).forEach((field) => {
-      if (values[field]) {
-        // Only reapply touched values
-        form.change(field, values[field]);
-      }
-    });
-  }, [i18n.language]);
+  usePreserveFormValuesOnLanguageChange(formRef, i18n.language);
 
   return (
     <Form

client/modules/User/components/SignupForm.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Form, Field } from 'react-final-form';
 import { useDispatch } from 'react-redux';
@@ -7,6 +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';
 
 function asyncValidate(fieldToValidate, value) {
   if (!value || value.trim().length === 0) {
@@ -49,21 +50,7 @@ function SignupForm() {
   const handleConfirmVisibility = () => {
     setShowConfirmPassword(!showConfirmPassword);
   };
-  useEffect(() => {
-    const form = formRef.current;
-    if (!form) return;
-
-    const { values } = form.getState(); // store current form touched values
-    form.reset();
-
-    // Restore prev form values and trigger validation
-    Object.keys(values).forEach((field) => {
-      if (values[field]) {
-        // Only reapply touched values
-        form.change(field, values[field]);
-      }
-    });
-  }, [i18n.language]);
+  usePreserveFormValuesOnLanguageChange(formRef, i18n.language);
 
   return (
     <Form