Adithya Refactor main dashboard to display real data

src/components/BMDashboard/Projects/ProjectDetails/ProjectDetails.jsx

@@ -1,8 +1,10 @@
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
 import { useParams } from 'react-router-dom';
 import { useSelector, useDispatch } from 'react-redux';
 import { Container, Row, Col } from 'reactstrap';
-import { fetchBMProjects } from '~/actions/bmdashboard/projectActions';
+import { fetchBMProjects } from '../../../../actions/bmdashboard/projectActions';
+import { fetchBMProjectMembers } from '../../../../actions/bmdashboard/projectMemberAction';
+import { getAllUserTeams } from '../../../../actions/allTeamsAction';
 import Loading from '~/components/common/Loading';
 import LogBar from './LogBar';
 import RentedToolsDisplay from './RentedTools/RentedToolsDisplay';
@@ -13,31 +15,30 @@ import styles from './ProjectDetails.module.css';
 function ProjectDetails() {
   const { projectId } = useParams();
   const dispatch = useDispatch();
-  const darkMode = useSelector(state => state.theme.darkMode);
+
   const projects = useSelector(state => state.bmProjects) || [];
-  const [isLoading, setIsLoading] = useState(true);
-  const currProject = projects.find(project => String(project._id) === String(projectId));
+  const darkMode = useSelector(state => state.theme.darkMode);
 
   useEffect(() => {
-    const fetchProjects = async () => {
-      setIsLoading(true);
-      try {
-        await dispatch(fetchBMProjects());
-      } finally {
-        setIsLoading(false);
-      }
-    };
-    fetchProjects();
-  }, [dispatch, projectId]);
+    if (projectId) {
+      dispatch(fetchBMProjectMembers(projectId));
+      dispatch(getAllUserTeams());
+    }
+    if (projects.length === 0) {
+      dispatch(fetchBMProjects());
+    }
+  }, [projectId, dispatch, projects.length]);
 
-  if (isLoading) {
+  if (projects.length === 0) {
     return (
       <Container className={`${styles['project-details']} text-center mt-5`}>
         <Loading align="center" darkMode={darkMode} />
       </Container>
     );
   }
 
+  const currProject = projects.find(project => String(project._id) === String(projectId));
+
   if (!currProject) {
     return (
       <Container className={`${styles['project-details']} text-center mt-5`}>
@@ -50,14 +51,14 @@ function ProjectDetails() {
   return (
     <Container
       fluid
-      className={`${darkMode ? styles['project-details-dark'] : styles['project-details']}  `}
+      className={`${darkMode ? styles['project-details-dark'] : styles['project-details']}`}
     >
       <Row className="justify-content-center">
         <Col xs="12" lg="10">
           <h1
             className={`${
               darkMode ? styles['project-details-title-dark'] : styles['project-details-title']
-            } mb-2 `}
+            } mb-2`}
           >
             {currProject.name} Dashboard{' '}
           </h1>