Merge pull request 'pramod_Bug#160 :Unnecessary Multiple profile API Requests call on Page Load' (#166) from pramod_Bug#160 into Issue_May_5W

Reviewed-on: #166

src/components/Project/MapUsers.jsx

@@ -14,9 +14,13 @@ const MapUsers = ({
   assignedLoading,
   setAssignedLoading,
 }) => {
-  const { employeesList, loading: employeeLoading, error } = useAllEmployees(false);
+  const {
+    employeesList,
+    loading: employeeLoading,
+    error,
+  } = useAllEmployees(false);
   const [selectedEmployees, setSelectedEmployees] = useState([]);
-  const [ searchText, setSearchText ] = useState( "" );
+  const [searchText, setSearchText] = useState("");
 
   const handleAllocationData = Array.isArray(allocation) ? allocation : [];
 
@@ -96,9 +100,8 @@ const MapUsers = ({
     });
   };
 
-  const handleSubmit = () =>
-  {
-    setAssignedLoading(true)
+  const handleSubmit = () => {
+    setAssignedLoading(true);
     const selected = selectedEmployees
       .filter((emp) => emp.isSelected)
       .map((emp) => ({ empID: emp.id, jobRoleId: emp.jobRoleId }));
@@ -108,32 +111,33 @@ const MapUsers = ({
     } else {
       showToast("Please select Employee", "error");
     }
-
   };
   return (
     <>
       <div className="modal-dialog modal-dialog-scrollable mx-sm-auto mx-1 modal-lg modal-simple modal-edit-user">
         <div className="modal-content">
-          <div className="modal-header ">
-            <div className="md-2 mb-n5">
-              {(filteredData.length > 0 ||
-                  allocationEmployeesData.length > 0)&& (
-                  <div className="input-group">
-                    <input
-                      type="search"
-                      className="form-control form-control-sm"
-                      placeholder="Search employees..."
-                      onChange={(e) => setSearchQuery(e.target.value)}
-                    />
-                  </div>
-                )}
-            </div>
+          <div className="modal-header text-center">
+            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
+          </button>
           </div>
-          <div className="d-flex justify-content-start align-items-center px-4 mt-6">
-          <h5 className="mb-0 mt-1">
-            <i className=" text-warning me-3"></i> Select Employee
-          </h5>
-        </div>
+          <p className="m-0 fw-semibold fs-5">Assign Employee</p>
+
+          <div className="px-4 mt-4 col-md-4 text-start">
+            {(filteredData.length > 0 ||
+              allocationEmployeesData.length > 0) && (
+              <div className="input-group input-group-sm mb-2">
+                <input
+                  type="search"
+                  className="form-control"
+                  placeholder="Search employees..."
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                />
+              </div>
+            )}
+
+            <p className="mb-0 small text-muted fw-semibold">Select Employee</p>
+          </div>
+
           <div className="modal-body p-sm-4 p-0">
             <table
               className="datatables-users table border-top dataTable no-footer dtr-column "
@@ -141,21 +145,28 @@ const MapUsers = ({
               aria-describedby="DataTables_Table_0_info"
               style={{ width: "100%" }}
             >
-              
               <tbody>
                 {employeeLoading && allocationEmployeesData.length === 0 && (
-                  <p>Loading...</p>
+                  <tr>
+                    <td>Loading..</td>
+                  </tr>
                 )}
 
                 {!employeeLoading &&
                   allocationEmployeesData.length === 0 &&
                   filteredData.length === 0 && (
-                    <p>All employee assigned to Project.</p>
+                    <tr>
+                      <td>All employee assigned to Project.</td>
+                    </tr>
                   )}
 
-                {!employeeLoading && allocationEmployeesData.length > 0 && filteredData.length === 0 && (
-                  <p>No matching employees found.</p>
-                )}
+                {!employeeLoading &&
+                  allocationEmployeesData.length > 0 &&
+                  filteredData.length === 0 && (
+                    <tr>
+                      <td>No matching employees found.</td>
+                    </tr>
+                  )}
 
                 {(filteredData.length > 0 ||
                   allocationEmployeesData.length > 0) &&
@@ -174,14 +185,11 @@ const MapUsers = ({
           </div>
           <div className="modal-footer">
             {(filteredData.length > 0 ||
-                  allocationEmployeesData.length > 0) && (
-                <button
-                  className="btn btn-sm btn-success"
-                  onClick={handleSubmit}
-                >
-                  {assignedLoading ? "Please Wait...":"Assign to Project"}
-                </button>
-              )}
+              allocationEmployeesData.length > 0) && (
+              <button className="btn btn-sm btn-success" onClick={handleSubmit}>
+                {assignedLoading ? "Please Wait..." : "Assign to Project"}
+              </button>
+            )}
 
             <button
               type="button"

src/components/Project/Teams.jsx

@@ -16,7 +16,7 @@ import ConfirmModal from "../common/ConfirmModal";
 
 const Teams = ({ project }) => {
   const dispatch = useDispatch();
-  dispatch(changeMaster("Job Role"));
+
   const { data, loading } = useMaster();
   const [isModalOpen, setIsModelOpen] = useState(false);
   const [error, setError] = useState("");
@@ -43,11 +43,9 @@ const Teams = ({ project }) => {
         .then((response) => {
           setEmployees(response.data);
           setFilteredEmployees( response.data.filter( ( emp ) => emp.isActive ) );
-          console.log(response)
           setEmployeeLoading(false);
         })
         .catch((error) => {
-          console.error(error);
           setError("Failed to fetch data.");
           setEmployeeLoading(false);
         });
@@ -133,6 +131,11 @@ const Teams = ({ project }) => {
     document.body.style.overflow = "auto";
   };
 
+  useEffect(() => {
+  dispatch(changeMaster("Job Role"));
+}, [dispatch]);
+
+
   useEffect(() => {
     fetchEmployees();
   }, []);

src/hooks/useProfile.js

@@ -3,46 +3,40 @@ import AuthRepository from "../repositories/AuthRepository";
 import {cacheProfileData, getCachedProfileData} from "../slices/apiDataManager";
 import {useSelector} from "react-redux";
 
-export const useProfile = () =>
-{
-  const loggedUser = useSelector((store)=>store.globalVariables.loginUser)
-  
-    const [profile, setProfile] = useState(null);
-    const [loading, setLoading] = useState(false);
-    const [error, setError] = useState("");
-  
-   
-  const fetchData = async () =>
-  {
-    try
-    {
-      setLoading( true )
+let hasFetched = false;
+
+export const useProfile = () => {
+  const loggedUser = useSelector( ( store ) => store.globalVariables.loginUser );
+  const [profile, setProfile] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+
+  const fetchData = async () => {
+    try {
+      setLoading(true);
       let response = await AuthRepository.profile();
-      setProfile( response.data )
-      cacheProfileData( response.data )
-      setLoading( false );
-        
-    } catch ( error )
-    {
-      setLoading( false )
-      console.error( error );
-      setError( "Failed to fetch data." );
-    };
-  }
-  
-  
-  useEffect( () => {
-   
-    if (!loggedUser )
-    {
-    fetchData() 
-    } else
-    {
-      setProfile(loggedUser)
+      setProfile(response.data);
+      cacheProfileData(response.data);
+    } catch (error) {
+      setError("Failed to fetch data.");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    if (!hasFetched) {
+      hasFetched = true;
+      if (!loggedUser) {
+        fetchData();
+      } else {
+        setProfile(loggedUser);
+      }
     }
-    
-     },[])
   
-    return  { profile,loading,error}
-    
-  }
+      setProfile(loggedUser);
+  
+  }, [loggedUser]);
+
+  return { profile, loading, error };
+};

src/hooks/useProjects.js

@@ -2,17 +2,18 @@ import { useEffect, useState } from "react";
 import { cacheData, getCachedData } from "../slices/apiDataManager";
 import ProjectRepository from "../repositories/ProjectRepository";
 import { useProfile } from "./useProfile";
-import { useDispatch } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import { setProjectId } from "../slices/localVariablesSlice";
 
 export const useProjects = () => {
-  const { profile } = useProfile();
+
+  const loggedUser = useSelector( ( store ) => store.globalVariables.loginUser )
   const [projects, setProjects] = useState([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState("");
 
   const fetchData = async () => {
-    const projectIds = profile?.projects || [];
+    const projectIds = loggedUser?.projects || [];
 
     const filterProjects = (projectsList) => {
       return projectsList
@@ -43,12 +44,11 @@ export const useProjects = () => {
       }
     }
   };
-
   useEffect(() => {
-    if (profile) {
+    if (loggedUser) {
       fetchData();
     }
-  }, [profile]);
+  }, [loggedUser]);
 
   return { projects, loading, error, refetch: fetchData };
 };