Merge pull request #4813 from OneCommunityGlobal/aayush_create_new_page_error

Aayush create new page error

Author: one-community

src/actions/userManagement.js

@@ -369,11 +369,11 @@ export const getUserProfileBasicInfo = ({ userId, source } = {}) => {
   // API request to fetch basic user profile information
   let userProfileBasicInfoPromise;
   if (userId)
-    userProfileBasicInfoPromise = axios.get(`${ENDPOINTS.USER_PROFILE_BASIC_INFO}?userId=${userId}`);
+    userProfileBasicInfoPromise = axios.get(ENDPOINTS.USER_PROFILE(userId));
   else if (source)
     userProfileBasicInfoPromise = axios.get(ENDPOINTS.USER_PROFILE_BASIC_INFO(source));
   else
-    userProfileBasicInfoPromise = axios.get(ENDPOINTS.USER_PROFILE_BASIC_INFO);
+    userProfileBasicInfoPromise = axios.get(ENDPOINTS.USER_PROFILES);
 
   return async dispatch => {
     // Dispatch action indicating the start of the fetch process

src/components/BMDashboard/Team/CreateNewTeam/CreateNewTeam.jsx

@@ -5,6 +5,7 @@ import Joi from 'joi';
 import { boxStyle } from '../../../../styles';
 import styles from './CreateNewTeam.module.css';
 import { getUserProfileBasicInfo } from '../../../../actions/userManagement';
+import { toast } from 'react-toastify';
 
 const initialFormState = {
   teamName: '',
@@ -23,8 +24,8 @@ export default function CreateNewTeam() {
   const [selectedMember, setSelectedMember] = useState('');
   const [selectedTask, setSelectedTask] = useState('');
   const [members, setMembers] = useState([]);
-  // const [tasks, setTasks] = useState([]);
-  const [tasks] = useState([]);
+  const [tasks, setTasks] = useState([]);
+  //const [tasks] = useState([]);
   const [assignedMembers, setAssignedMembers] = useState([]);
   const [assignedTasks, setAssignedTasks] = useState([]);
   const [errorMessage, setErrorMessage] = useState('');
@@ -36,13 +37,26 @@ export default function CreateNewTeam() {
     additionalInformation: false,
   });
 
+  const user = useSelector(state => state.auth.user);
+
+  const dummyTasks = ['Task 1', 'Task 2', 'Task 3', 'Task 4', 'Task 5'];
+
+  const [loadingMembers, setLoadingMembers] = useState(false);
   useEffect(() => {
-    dispatch(getUserProfileBasicInfo());
+    setLoadingMembers(true);
+    const result = dispatch(getUserProfileBasicInfo());
+    // If the action returns a promise (thunk), handle it
+    if (result && typeof result.then === 'function') {
+      result.finally(() => setLoadingMembers(false));
+    } else {
+      setLoadingMembers(false);
+    }
+    tasks.length === 0 && setTasks(dummyTasks);
   }, [dispatch]);
 
   useEffect(() => {
-    setMembers(userProfilesBasicInfo);
-  }, []);
+    setMembers(userProfilesBasicInfo || []);
+  }, [userProfilesBasicInfo]);
 
   const validationObj = {
     additionalInformation: Joi.string()
@@ -63,7 +77,7 @@ export default function CreateNewTeam() {
         errorMessages[detail.path[0]] = detail.message;
       });
     }
-    if (assignedMembers.length === 0) {
+    if ((!data.teamMembers || data.teamMembers.length === 0) && assignedMembers.length === 0) {
       errorMessages.assignedMembers = 'You must assign at least one member.';
     } else {
       // Clear the assignedMembers error if members have been added
@@ -118,6 +132,8 @@ export default function CreateNewTeam() {
     // eslint-disable-next-line no-console
     console.log('Form Submitted:', updatedFormData);
 
+    toast.success('Team created successfully!');
+
     setSelectedMember('');
     setAssignedMembers([]);
     setSelectedTask('');
@@ -138,6 +154,7 @@ export default function CreateNewTeam() {
     setAssignedTasks([]);
     setFormData(initialFormState);
     setErrors({});
+    setErrorMessage('');
     setTouchedFields({
       teamName: false,
       assignedMembers: false,
@@ -202,6 +219,7 @@ export default function CreateNewTeam() {
     if (selectedTask && !assignedTasks.includes(selectedTask)) {
       setAssignedTasks([...assignedTasks, selectedTask]);
       setSelectedTask('');
+      setTaskErrorMessage('');
     }
   };
 
@@ -218,7 +236,7 @@ export default function CreateNewTeam() {
       </header>
 
       <Form className={`${styles.addTeamForm} container`} onSubmit={handleSubmit}>
-        <FormGroup>
+        <FormGroup style={{ marginTop: '1.5rem', marginBottom: 0 }}>
           <Label for="teamName">
             Team Name<span className={`${styles.fieldRequired}`}>*</span>
           </Label>
@@ -237,26 +255,36 @@ export default function CreateNewTeam() {
             </Label>
           )}
         </FormGroup>
-        <FormGroup>
+        <FormGroup style={{ marginTop: '1.5rem', marginBottom: 0 }}>
           <Label for="member-select">
             Add Members<span className={`${styles.fieldRequired}`}>*</span>
           </Label>
           <div className={`${styles.selectContainer}`}>
-            <Input
-              id="members-select"
-              type="select"
-              value={selectedMember}
-              onChange={handleMemberChange}
-              className={`${styles.memberDropdown}`}
-            >
-              <option value="">Select a Member</option>
-              {members.map((user, index) => (
-                // eslint-disable-next-line react/no-array-index-key
-                <option key={index} value={user.id}>
-                  {user.firstName} {user.lastName}
-                </option>
-              ))}
-            </Input>
+            {loadingMembers ? (
+              <div style={{ padding: '0.5rem' }}>Loading members...</div>
+            ) : (
+              <Input
+                id="members-select"
+                type="select"
+                value={selectedMember}
+                onChange={handleMemberChange}
+                className={`${styles.memberDropdown}`}
+              >
+                {Array.isArray(members) && members.length > 0 ? (
+                  <>
+                    <option value="">Select a Member</option>
+                    {members.map((user, index) => (
+                      // eslint-disable-next-line react/no-array-index-key
+                      <option key={index} value={user.id}>
+                        {user.firstName} {user.lastName}
+                      </option>
+                    ))}
+                  </>
+                ) : (
+                  <option value="">No members available</option>
+                )}
+              </Input>
+            )}
             <Button
               onClick={handleAddMember}
               // disabled={!selectedMember || isMemberAssigned}
@@ -278,7 +306,9 @@ export default function CreateNewTeam() {
         </FormGroup>
         <div>
           {assignedMembers.length > 0 && (
-            <p className={styles.label}>Currently Assigned Members:</p>
+            <label htmlFor="assigned-members" className={styles.label}>
+              Currently Assigned Members:
+            </label>
           )}
           <div className={`${styles.badgeContainer}`}>
             {assignedMembers.map((member, index) => {
@@ -302,17 +332,23 @@ export default function CreateNewTeam() {
             })}
           </div>
         </div>
-        <FormGroup>
+        <FormGroup style={{ marginTop: '1.5rem', marginBottom: 0 }}>
           <Label for="task-select">Add Main Tasks</Label>
           <div className={`${styles.selectContainer}`}>
             <Input id="tasks-select" type="select" value={selectedTask} onChange={handleTaskChange}>
-              <option value="">Select a Task</option>
-              {tasks.map((task, index) => (
-                // eslint-disable-next-line react/no-array-index-key
-                <option key={index} value={task.id}>
-                  {task}
-                </option>
-              ))}
+              {Array.isArray(tasks) && tasks.length > 0 ? (
+                <>
+                  <option value="">Select a Task</option>
+                  {tasks.map((task, index) => (
+                    // eslint-disable-next-line react/no-array-index-key
+                    <option key={index} value={task.id}>
+                      {task}
+                    </option>
+                  ))}
+                </>
+              ) : (
+                <option value="">No tasks available</option>
+              )}
             </Input>
             <Button
               onClick={handleAddTask}
@@ -322,7 +358,7 @@ export default function CreateNewTeam() {
               Add
             </Button>
           </div>
-          {errorMessage && (
+          {taskErrorMessage && (
             <Label className={`${styles.teamFormError}`} style={{ color: 'red' }}>
               {taskErrorMessage}
             </Label>
@@ -331,7 +367,9 @@ export default function CreateNewTeam() {
 
         <div>
           {assignedTasks.length > 0 && (
-            <label htmlFor="assigned-tasks">Currently Assigned Tasks:</label>
+            <label htmlFor="assigned-tasks" className={styles.label}>
+              Currently Assigned Tasks:
+            </label>
           )}
           <div className={`${styles.badgeContainer}`}>
             {assignedTasks.map((task, index) => {
@@ -342,11 +380,9 @@ export default function CreateNewTeam() {
                   <span
                     role="button"
                     tabIndex={0}
-                    onClick={() => handleRemoveMember(member)}
-                    onKeyDown={e =>
-                      (e.key === 'Enter' || e.key === ' ') && handleRemoveMember(member)
-                    }
-                    aria-label={`Remove member ${member}`}
+                    onClick={() => handleRemoveTask(task)}
+                    onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && handleRemoveTask(task)}
+                    aria-label={`Remove task ${task}`}
                   >
                     X
                   </span>
@@ -355,7 +391,7 @@ export default function CreateNewTeam() {
             })}
           </div>
         </div>
-        <FormGroup>
+        <FormGroup style={{ marginTop: '1.5rem', marginBottom: 0 }}>
           <Label for="additional-information-label">Additional Information</Label>
           <Input
             type="textarea"
@@ -373,10 +409,10 @@ export default function CreateNewTeam() {
           )}
         </FormGroup>
         <div className={`${styles.addTeamButtons}`}>
-          <Button id="cancel-button" outline style={boxStyle} onClick={handleCancelClick}>
+          <Button id="cancel-button" style={boxStyle} onClick={handleCancelClick}>
             Cancel
           </Button>
-          <Button id="submit-button" style={boxStyle}>
+          <Button id="submit-button" style={boxStyle} onClick={handleSubmit}>
             Submit
           </Button>
         </div>

src/components/BMDashboard/Team/CreateNewTeam/CreateNewTeam.module.css

@@ -60,16 +60,17 @@
     border-color: #e53935;
   }
 
-  .teamFormError {
+  .addTeamForm .teamFormError {
     font-weight: 500;
     font-size: 11px !important;
-    color: red;
+    color: red !important;
     display: flex;
     justify-content: flex-start;
+    padding-left: 0;
   }
 
-  .fieldRequired{
-    color: red;
+  .addTeamForm .fieldRequired{
+    color: red !important;
   }
 
   .addTeamContainer{