Merge pull request #29 from HackYourFuture-CPH/navigationbar/eva

Navigationbar/eva

packages/client/src/App.js

@@ -6,6 +6,7 @@ import { LandingPageContainer } from './containers/LandingPage/LandingPage';
 import { CheckinQuestions } from './containers/QuestionPage/CheckinQuestions';
 import { TeamIdContextProvider } from './hooks/contextHook';
 import { ReportPage } from './containers/ReportPage/ReportPage';
+import { PageNotFound } from './containers/PageNotFound/PageNotFound';
 
 function App() {
   return (
@@ -16,7 +17,7 @@ function App() {
             <Route path="/" element={<LandingPageContainer />} />
             <Route path="/dashboard" element={<Dashboard />} />
             <Route path="/questions" element={<CheckinQuestions />} />
-             <Route path="/reportpage" element={<ReportPage />} />
+            <Route path="/reportpage" element={<ReportPage />} />
             <Route path="*" element={<PageNotFound />} />
           </Routes>
         </Router>

packages/client/src/components/Dashboard/NavigationBar.jsx

@@ -1,21 +1,25 @@
 import React from 'react';
-import PropTypes from 'prop-types'; // Import PropTypes for prop validation
+import PropTypes from 'prop-types';
 import { Typography, Button } from '@mui/material';
+import { NavLink } from 'react-router-dom';
 import HomeOutlinedIcon from '@mui/icons-material/HomeOutlined';
 import HelpOutlineOutlinedIcon from '@mui/icons-material/HelpOutlineOutlined';
 import DescriptionOutlinedIcon from '@mui/icons-material/DescriptionOutlined';
 import ExitToAppOutlinedIcon from '@mui/icons-material/ExitToAppOutlined';
 import logo from './logo-dark.svg';
 import './NavigationBar.css';
 
-const NavigationItem = ({ icon, name }) => (
+const NavigationItem = ({ icon, name, to }) => (
   <div style={{ marginBottom: '20px' }}>
     <Button
       className="menu-icon"
-      style={{
+      component={NavLink} // Use NavLink instead of Link
+      to={to} // Navigation path
+      style={({ isActive }) => ({
+        // Function to apply styles conditionally based on active state
         textTransform: 'none',
-        color: name !== 'Dashboard' ? 'rgba(255, 255, 255, 0.5)' : 'white',
-      }}
+        color: isActive ? 'white' : 'rgba(255, 255, 255, 0.5)', // Active item will be white
+      })}
     >
       {icon}
       <Typography variant="body1">{name}</Typography>
@@ -26,38 +30,53 @@ const NavigationItem = ({ icon, name }) => (
 NavigationItem.propTypes = {
   icon: PropTypes.node.isRequired,
   name: PropTypes.string.isRequired,
+  to: PropTypes.string.isRequired,
 };
 
-// LogoutButton component for the logout button
-const LogoutButton = () => (
-  <Button className="menu-icon" style={{ textTransform: 'none' }}>
+const LogoutButton = ({ onClick }) => (
+  <Button
+    className="menu-icon"
+    style={{ textTransform: 'none' }}
+    onClick={onClick}
+  >
     <ExitToAppOutlinedIcon fontSize="large" />
     <Typography variant="body1">Log out</Typography>
   </Button>
 );
 
+LogoutButton.propTypes = {
+  onClick: PropTypes.func.isRequired,
+};
+
 const NavigationBar = () => {
+  const handleLogout = () => {
+    console.log('Logging out...');
+    // Implement logout functionality here
+  };
+
   return (
     <div className="left-nav-bar-container">
       <img className="logo" src={logo} alt="Logo" />
       <div className="left-nav-bar">
         <div className="left-nav-bar-top">
-          {/* Reusing NavigationItem component */}
           <NavigationItem
             icon={<HomeOutlinedIcon fontSize="large" />}
             name="Dashboard"
+            to="/dashboard"
           />
           <NavigationItem
             icon={<HelpOutlineOutlinedIcon fontSize="large" />}
             name="Questions"
+            to="/questions"
           />
           <NavigationItem
             icon={<DescriptionOutlinedIcon fontSize="large" />}
             name="Reports"
+            to="/reportPage"
           />
         </div>
         <div className="left-nav-bar-bottom">
-          <LogoutButton />
+          <LogoutButton onClick={handleLogout} />
         </div>
       </div>
     </div>

packages/client/src/components/Dashboard/TeamMemberListItem.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { IconButton } from '@mui/material';
 import EditIcon from '@mui/icons-material/Edit';
 import DeleteIcon from '@mui/icons-material/Delete';
-import Dashboard from '../../containers/Dashboard/Dashboard';
+//import Dashboard from '../../containers/Dashboard/Dashboard';
 
 const TeamMemberListItem = ({
   member,

packages/client/src/components/Dashboard/TeamMembers.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useCallback } from 'react';
 import { apiURL } from '../../apiURL';
 import { AddTeamMemberModal } from '../../containers/LandingPage/AddTeamMemberModal';
 import { Typography, Button } from '@mui/material';
@@ -16,11 +16,7 @@ const TeamMembers = () => {
   const [newMemberLastName, setNewMemberLastName] = useState('');
   const [showAddModal, setShowAddModal] = useState(false);
 
-  useEffect(() => {
-    fetchTeamMembers();
-  }, []);
-
-  const fetchTeamMembers = async () => {
+  const fetchTeamMembers = useCallback(async () => {
     try {
       const response = await fetch(`${apiURL()}/teamMembers/${teamId}/members`);
       if (!response.ok) {
@@ -31,7 +27,11 @@ const TeamMembers = () => {
     } catch (error) {
       console.error(error);
     }
-  };
+  }, [teamId]); // Include teamId in the dependency array for useCallback
+
+  useEffect(() => {
+    fetchTeamMembers();
+  }, [fetchTeamMembers]); // Include fetchTeamMembers in the dependency array for useEffect
 
   const handleEditMember = (id) => {
     setEditMemberId(id);

packages/client/src/containers/Dashboard/CheckinQuestionsPage/AddCheckinQuestionModal.jsx

@@ -1,42 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-const AddCheckinQuestionModal = ({
-  showAddModal,
-  setShowAddModal,
-  newQuestionText,
-  setNewQuestionText,
-  handleAdd,
-}) => {
-  if (!showAddModal) {
-    return null;
-  }
-
-  return (
-    <div>
-      <h2>Add Checkin Question</h2>
-      <textarea
-        value={newQuestionText}
-        onChange={(e) => setNewQuestionText(e.target.value)}
-        placeholder="Enter the new question..."
-        rows={4}
-      ></textarea>
-      <button type="button" onClick={handleAdd}>
-        Add Question
-      </button>
-      <button type="button" onClick={() => setShowAddModal(false)}>
-        Cancel
-      </button>
-    </div>
-  );
-};
-
-AddCheckinQuestionModal.propTypes = {
-  showAddModal: PropTypes.bool.isRequired,
-  setShowAddModal: PropTypes.func.isRequired,
-  newQuestionText: PropTypes.string.isRequired,
-  setNewQuestionText: PropTypes.func.isRequired,
-  handleAdd: PropTypes.func.isRequired,
-};
-
-export { AddCheckinQuestionModal };