Merge pull request #657 from AkshataKatwal16/reassign-cohorts

PS-3722 Username suggestions should retain on learner form for usablitiy
tekdi · Jan 30, 2025 · 17c59ee · 17c59ee
2 parents 419e99d + dbe5e50
commit 17c59ee
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 29 deletions.
diff --git a/src/components/DynamicForm.tsx b/src/components/DynamicForm.tsx
@@ -52,7 +52,7 @@ const DynamicForm: React.FC<DynamicFormProps> = ({
   customFields,
   children,
   setFormData,
-  isEdit=false,
+  isEdit = false,
 }) => {
   const widgets = {
     MultiSelectCheckboxes: MultiSelectCheckboxes,
@@ -65,8 +65,9 @@ const DynamicForm: React.FC<DynamicFormProps> = ({
   };
   const { t } = useTranslation();
   const [suggestions, setSuggestions] = useState<string[]>([]);
-  const [isGetUserName, setIsGetUserName] = useState<boolean>(false);
+  const [storedSuggestions, setStoredSuggestions] = useState<string[]>([]);
 
+  const [isGetUserName, setIsGetUserName] = useState<boolean>(false);
 
   const submittedButtonStatus = useSubmittedButtonStore(
     (state: any) => state.submittedButtonStatus
@@ -75,6 +76,7 @@ const DynamicForm: React.FC<DynamicFormProps> = ({
     (state: any) => state.setSubmittedButtonStatus
   );
 
+
   useEffect(() => {
     setSubmittedButtonStatus(false);
   }, []);
@@ -286,6 +288,7 @@ const DynamicForm: React.FC<DynamicFormProps> = ({
       if (suggestions.length === 0) {
         const response = await userNameExist(userData);
         setSuggestions([response?.suggestedUsername]);
+        setStoredSuggestions([response?.suggestedUsername]);
         setIsGetUserName(false);
       }
     } catch (error) {
@@ -294,42 +297,51 @@ const DynamicForm: React.FC<DynamicFormProps> = ({
       console.error('Error validating username:', error);
     }
   };
-  const handleChange= async(event: any)=> {
+  const handleChange = async (event: any) => {
     const sanitizedData = sanitizeFormData(event.formData);
-    if (event.formData?.username !== formData?.username && formData?.username) {
-      setIsGetUserName(false);
-      setSuggestions([]);
+    if (event.formData?.username !== formData?.username && (formData?.username||formData?.username==="")) {
+      if (event.formData?.username !== '') {
+        setIsGetUserName(false);
+        setSuggestions([]);
+      } else setSuggestions(storedSuggestions);
     }
     onChange({ ...event, formData: sanitizedData });
-  }
+  };
   const handleUsernameBlur = async (username: string) => {
-
-    if (username && formData?.firstName && formData?.lastName &&  !isGetUserName  ) {
+    if (
+      username &&
+      formData?.firstName &&
+      formData?.lastName &&
+      !isGetUserName
+    ) {
       const userData = {
         firstName: formData?.firstName,
         lastName: formData?.lastName,
         username: username,
-      }
-      await validateUsername(userData)     
+      };
+      await validateUsername(userData);
     }
   };
   const handleFirstLastNameBlur = async (lastName: string) => {
     if (lastName && !isEdit && !isGetUserName) {
       try {
-        console.log('Username onblur called' ,formData);
-        if(formData?.firstName && formData?.lastName){
-          if( setFormData){
+        console.log('Username onblur called', formData);
+        if (formData?.firstName && formData?.lastName) {
+          if (setFormData) {
             setFormData((prev: any) => ({
               ...prev,
-              username: formData.username ? formData.username :`${formData?.firstName}${formData?.lastName}`.toLowerCase(),
+              username: formData.username
+                ? formData.username
+                : `${formData?.firstName}${formData?.lastName}`.toLowerCase(),
             }));
             const userData = {
               firstName: formData?.firstName,
               lastName: formData?.lastName,
-              username: formData.username ? formData.username: `${formData?.firstName}${formData?.lastName}`.toLowerCase(),
-            }
-            await validateUsername(userData)  
-
+              username: formData.username
+                ? formData.username
+                : `${formData?.firstName}${formData?.lastName}`.toLowerCase(),
+            };
+            await validateUsername(userData);
           }
         }
       } catch (error) {
@@ -346,7 +358,7 @@ const DynamicForm: React.FC<DynamicFormProps> = ({
         ...prev,
         username: selectedUsername,
       }));
-      setIsGetUserName(true)
+    setIsGetUserName(true);
     setSuggestions([]);
   };
 

diff --git a/src/components/UsernameWithSuggestions.tsx b/src/components/UsernameWithSuggestions.tsx
@@ -25,6 +25,7 @@ const UsernameWithSuggestions: React.FC<UsernameWidgetProps> = ({
   onChange,
   ...rest
 }) => {
+  console.log("value", value);        
   const { suggestions, onSuggestionSelect } = formContext;
   const { t } = useTranslation();
 
@@ -59,16 +60,15 @@ const UsernameWithSuggestions: React.FC<UsernameWidgetProps> = ({
         <div>
           {suggestions?.map((suggestion: any, index: number) => (
             <Box>
- <Typography variant="h6" color="error" gutterBottom>
-         {t('FORM.USERNAME_ALREADY_EXIST')}
-        </Typography>
-        <Typography variant="h6" color="textSecondary" gutterBottom>
-          {t('FORM.AVAILABLE_SUGGESTIONS')}
-
-        </Typography>             
-         <Typography
+              {value!=="" &&(<Typography variant="h6"  sx={{marginLeft:"12px", mt:"2px"}} color="error" gutterBottom>
+                {t('FORM.USERNAME_ALREADY_EXIST')}
+              </Typography>)}
+              <Typography variant="h6" m="2px"  sx={{marginLeft:"12px"}}color="textSecondary" gutterBottom>
+                {t('FORM.AVAILABLE_SUGGESTIONS')}
+              </Typography>
+              <Typography
                 onClick={() => onSuggestionSelect(suggestion)}
-                sx={{ cursor: 'pointer', color: 'green' }}
+                sx={{ cursor: 'pointer', color: 'green', marginLeft:"12px" }}
               >
                 {suggestion}
               </Typography>