Merge pull request #651 from AkshataKatwal16/reassign-cohorts

Issue #PS-3701 feat:Provide username suggestions If user exist in facilitator App.Integrate username suggestionAPI
tekdi · Jan 28, 2025 · 75e08c5 · 75e08c5
2 parents 83d9968 + 0f75ecd
commit 75e08c5
Show file tree

Hide file tree

Showing 5 changed files with 93 additions and 22 deletions.
diff --git a/public/locales/en/common.json b/public/locales/en/common.json
@@ -597,6 +597,8 @@
     "MARATHI":"Marathi",
     "URDU":"Urdu",
     "DIVORCED/WIDOW":"Divorced/Widow",
+    "AVAILABLE_SUGGESTIONS":"Available suggestions:",
+    "USERNAME_ALREADY_EXIST":"This username already exists",
     "GRADUATE":"Graduate",
     "POST_GRADUATE":"Post Graduate"
   },

diff --git a/src/components/AddLeanerModal.tsx b/src/components/AddLeanerModal.tsx
@@ -19,7 +19,7 @@ import {
 import { telemetryFactory } from '@/utils/telemetry';
 import { IChangeEvent } from '@rjsf/core';
 import { RJSFSchema } from '@rjsf/utils';
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import ReactGA from 'react-ga4';
 import { useTranslation } from 'react-i18next';
 import { tenantId } from '../../app.config';
@@ -298,31 +298,26 @@ const AddLearnerModal: React.FC<AddLearnerModalProps> = ({
     }
   };
 
-  const handleChange = (event: IChangeEvent<any>) => {
+   const handleChange = (event: IChangeEvent<any>) => {
     const { formData } = event;
-
+  
     if (!isEditModal) {
       const { firstName, lastName, username } = formData;
+
       if (firstName && lastName) {
-        const updatedUsername = event.formData.username
-          ? username
-          : firstName && lastName
-            ? (firstName + lastName).toLowerCase()
-            : '';
-
-        const updatedFormData = {
+
+        setCustomFormData({
           ...formData,
-          username: updatedUsername,
-        };
-
-        setCustomFormData(updatedFormData);
+
+        });
       } else {
-        setCustomFormData({ ...event.formData });
+        setCustomFormData({ ...formData });
       }
     } else {
       setCustomFormData({ ...formData });
     }
   };
+
 
   const handleError = (errors: any) => {
     console.log('Form errors:', errors);
@@ -372,6 +367,7 @@ const AddLearnerModal: React.FC<AddLearnerModalProps> = ({
             customFields={customFields}
             formData={customFormData ?? undefined}
             setFormData={setCustomFormData}
+            isEdit={isEditModal}
           >
             <FormButtons
               formData={formData ?? learnerFormData}

diff --git a/src/components/DynamicForm.tsx b/src/components/DynamicForm.tsx
@@ -11,6 +11,7 @@ import MultiSelectCheckboxes from './MultiSelectCheckboxes';
 import MultiSelectDropdown from './MultiSelectDropdown';
 import CustomNumberWidget from './CustomNumberWidget';
 import UsernameWithSuggestions from './UsernameWithSuggestions';
+import { userNameExist } from '@/services/CreateUserService';
 
 const FormWithMaterialUI = withTheme(MaterialUITheme);
 
@@ -37,6 +38,7 @@ interface DynamicFormProps {
     [key: string]: React.FC<RegistryFieldsType<any, RJSFSchema, any>>;
   };
   children?: ReactNode;
+  isEdit?: boolean;
 }
 
 const DynamicForm: React.FC<DynamicFormProps> = ({
@@ -49,6 +51,7 @@ const DynamicForm: React.FC<DynamicFormProps> = ({
   customFields,
   children,
   setFormData,
+  isEdit=false,
 }) => {
   const widgets = {
     MultiSelectCheckboxes: MultiSelectCheckboxes,
@@ -270,17 +273,64 @@ const DynamicForm: React.FC<DynamicFormProps> = ({
       return error;
     });
   }
-
-  function handleChange(event: any) {
+  const validateUsername = async (userData: { firstName: string; lastName: string; username: string }) => {
+    try {
+      const response = await userNameExist(userData);
+      setSuggestions([response?.suggestedUsername]);
+    } catch (error) {
+      setSuggestions([]);
+      console.error('Error validating username:', error);
+    }
+  };
+  const handleChange= async(event: any)=> {
     const sanitizedData = sanitizeFormData(event.formData);
+    if(formData?.username && formData?.firstName && formData?.lastName && formData?.username!== event.formData?.username) 
+    {
+      const userData = {
+        firstName: formData?.firstName,
+        lastName: formData?.lastName,
+        username: event.formData?.username,
+      }
+      //         const response = await userNameExist(userData);
+      // setSuggestions([response?.suggestedUsername]);
+      await validateUsername(userData);
+
+    }
     onChange({ ...event, formData: sanitizedData });
   }
   const handleUsernameBlur = async (username: string) => {
-    if (username) {
+
+    if (username && formData?.firstName && formData?.lastName) {
+      const userData = {
+        firstName: formData?.firstName,
+        lastName: formData?.lastName,
+        username: username,
+      }
+      await validateUsername(userData)     
+    }
+  };
+  const handleFirstLastNameBlur = async (lastName: string) => {
+    if (lastName && !isEdit) {
       try {
-        console.log('Username onblur called');
-        // setSuggestions(["1234"])
+        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(),
+            }));
+            const userData = {
+              firstName: formData?.firstName,
+              lastName: formData?.lastName,
+              username: formData.username ? formData.username: `${formData?.firstName}${formData?.lastName}`.toLowerCase(),
+            }
+            await validateUsername(userData)  
+
+          }
+        }
       } catch (error) {
+        setSuggestions([]);
+
         console.error('Error validating username:', error);
       }
     }
@@ -319,6 +369,9 @@ const DynamicForm: React.FC<DynamicFormProps> = ({
           if (field === 'username') {
             handleUsernameBlur(value);
           }
+          if (field === 'root_lastName' || field === 'root_firstName') {
+            handleFirstLastNameBlur(value);
+          }
         }}
       >
         {children}

diff --git a/src/components/UsernameWithSuggestions.tsx b/src/components/UsernameWithSuggestions.tsx
@@ -6,6 +6,8 @@ import {
   Typography,
 } from '@mui/material';
 import { WidgetProps } from '@rjsf/utils';
+import { useTranslation } from 'next-i18next';
+
 import React from 'react';
 interface UsernameWidgetProps {
   formContext: {
@@ -24,6 +26,7 @@ const UsernameWithSuggestions: React.FC<UsernameWidgetProps> = ({
   ...rest
 }) => {
   const { suggestions, onSuggestionSelect } = formContext;
+  const { t } = useTranslation();
 
   const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {
     if (onBlur) {
@@ -56,8 +59,14 @@ const UsernameWithSuggestions: React.FC<UsernameWidgetProps> = ({
         <div>
           {suggestions?.map((suggestion: any, index: number) => (
             <Box>
-              {/* Availble suggestion :  */}
-              <Typography
+ <Typography variant="h6" color="error" gutterBottom>
+         {t('FORM.USERNAME_ALREADY_EXIST')}
+        </Typography>
+        <Typography variant="h6" color="textSecondary" gutterBottom>
+          {t('FORM.AVAILABLE_SUGGESTIONS')}
+
+        </Typography>             
+         <Typography
                 onClick={() => onSuggestionSelect(suggestion)}
                 sx={{ cursor: 'pointer', color: 'green' }}
               >

diff --git a/src/services/CreateUserService.ts b/src/services/CreateUserService.ts
@@ -27,6 +27,17 @@ export const createUser = async (userData: any): Promise<any> => {
   }
 };
 
+export const userNameExist = async (userData: any): Promise<any> => {
+  const apiUrl: string = `${process.env.NEXT_PUBLIC_MIDDLEWARE_URL}/user/v1/suggestUsername`;
+  try {
+    const response = await post(apiUrl, userData);
+    return response?.data?.result;
+  } catch (error) {
+    console.error('error in getting in userNme exist', error);
+    throw error;
+  }
+};
+
 export const createCohort = async (userData: any): Promise<any> => {
   const apiUrl: string = `${process.env.NEXT_PUBLIC_MIDDLEWARE_URL}/user/v1/cohort/create`;
   try {