Merge pull request #27 from HackYourFuture-CPH/frontend-navbar/meraj

done done

packages/client/src/App.js

@@ -1,8 +1,7 @@
 import React from 'react';
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import Dashboard from './containers/Dashboard/Dashboard';
-// TODO: put back comment after the login flow is down
-// import { LandingPageContainer } from './containers/LandingPage/LandingPage';
+import { LandingPageContainer } from './containers/LandingPage/LandingPage';
 import { PageNotFound } from './containers/PageNotFound/PageNotFound';
 import { CheckinQuestions } from './containers/LandingPage/CheckinQuestionsPage/CheckinQuestions';
 import { TeamIdContextProvider } from './hooks/contextHook';
@@ -14,10 +13,10 @@ function App() {
         <Router>
           <Routes>
             {/* TODO: put back comment after the login flow is down */}
-            {/* <Route path="/" element={<LandingPageContainer />} /> */}
+            <Route path="/" element={<LandingPageContainer />} />
             <Route path="/dashboard" element={<Dashboard />} />
             <Route path="/questions" element={<CheckinQuestions />} />
-            <Route path="*" element={<PageNotFound />} />
+            {/* <Route path="*" element={<PageNotFound />} /> */}
           </Routes>
         </Router>
       </TeamIdContextProvider>

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

@@ -3,6 +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';
 
 const TeamMemberListItem = ({
   member,
@@ -11,8 +12,8 @@ const TeamMemberListItem = ({
 }) => {
   return (
     <li key={member.member_id}>
-      <div style={{ display: 'flex', alignItems: 'center' }}>
-        <div style={{ flexGrow: 1 }}>
+      <div className="member-info-container">
+        <div className="member-info">
           {member.first_name} {member.last_name}
         </div>
         <div>

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

@@ -4,8 +4,10 @@ import { AddTeamMemberModal } from '../../containers/LandingPage/AddTeamMemberMo
 import { Typography, Button } from '@mui/material';
 import TeamMemberListItem from './TeamMemberListItem';
 import EditingMember from './EditingMember'; // Import the newly created component
+import { useTeamIdContext } from '../../hooks/contextHook';
 
 const TeamMembers = () => {
+  const { teamId } = useTeamIdContext();
   const [teamMembers, setTeamMembers] = useState([]);
   const [editMemberId, setEditMemberId] = useState(null);
   const [editMemberFirstName, setEditMemberFirstName] = useState('');
@@ -20,7 +22,7 @@ const TeamMembers = () => {
 
   const fetchTeamMembers = async () => {
     try {
-      const response = await fetch(`${apiURL()}/teamMembers`);
+      const response = await fetch(`${apiURL()}/teamMembers/${teamId}/members`);
       if (!response.ok) {
         throw new Error('Failed to fetch team members');
       }
@@ -44,9 +46,12 @@ const TeamMembers = () => {
     );
     if (confirmDelete) {
       try {
-        const response = await fetch(`${apiURL()}/teamMembers/${id}`, {
-          method: 'DELETE',
-        });
+        const response = await fetch(
+          `${apiURL()}/teamMembers/${teamId}/members/${id}`,
+          {
+            method: 'DELETE',
+          },
+        );
         if (!response.ok) {
           throw new Error('Failed to delete team member');
         }
@@ -65,16 +70,19 @@ const TeamMembers = () => {
       return;
     }
     try {
-      const response = await fetch(`${apiURL()}/teamMembers/addMember`, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
+      const response = await fetch(
+        `${apiURL()}/teamMembers/${teamId}/members`,
+        {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({
+            first_name: newMemberFirstName,
+            last_name: newMemberLastName,
+          }),
         },
-        body: JSON.stringify({
-          first_name: newMemberFirstName,
-          last_name: newMemberLastName,
-        }),
-      });
+      );
       if (!response.ok) {
         throw new Error('Failed to add team member');
       }
@@ -89,16 +97,19 @@ const TeamMembers = () => {
 
   const handleEditSave = async () => {
     try {
-      const response = await fetch(`${apiURL()}/teamMembers/${editMemberId}`, {
-        method: 'PATCH',
-        headers: {
-          'Content-Type': 'application/json',
+      const response = await fetch(
+        `${apiURL()}/teamMembers/${teamId}/members/${editMemberId}`,
+        {
+          method: 'PATCH',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({
+            first_name: editMemberFirstName,
+            last_name: editMemberLastName,
+          }),
         },
-        body: JSON.stringify({
-          first_name: editMemberFirstName,
-          last_name: editMemberLastName,
-        }),
-      });
+      );
       if (!response.ok) {
         throw new Error('Failed to edit team member');
       }

packages/client/src/containers/Dashboard/Dashboard.css

@@ -16,7 +16,7 @@
 
 body {
   height: 100vh;
-  background-color: var(--background-color);
+  background-color: #f7f7f7;
 }
 
 .dashboard-container {
@@ -114,7 +114,7 @@ body {
   list-style-type: none; /* Remove default list styles */
   padding: 0; /* Remove default padding */
   background: var(--primary-background-color);
-  padding: 20px 20px 20px 20px;
+  padding: 20px;
 }
 
 .team-members-container ul li {
@@ -151,7 +151,7 @@ body {
   flex-direction: column;
   margin-top: 20px;
   background-color: #fff;
-  padding: 20px 20px;
+  padding: 20px;
   border: #8a8a8a 1px solid;
 }
 
@@ -190,3 +190,12 @@ body {
   display: flex;
   justify-content: flex-end;
 }
+
+.member-info-container {
+  display: flex;
+  align-items: center;
+}
+.member-info {
+  flex-grow: 1;
+  border: none;
+}

packages/client/src/containers/LandingPage/AddTeamMemberModal.css

@@ -4,6 +4,15 @@
   display: flex;
   flex-direction: column;
   align-items: center;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 300px;
+  background-color: white;
+  border: none;
+  box-shadow: 24;
+  padding: 20px;
 }
 
 .add-member {

packages/client/src/containers/LandingPage/AddTeamMemberModal.jsx

@@ -16,26 +16,14 @@ export const AddTeamMemberModal = ({
     return null;
   }
 
-  const style = {
-    position: 'absolute',
-    top: '50%',
-    left: '50%',
-    transform: 'translate(-50%, -50%)',
-    width: 350,
-    bgcolor: 'background.paper',
-    border: `none`,
-    boxShadow: 24,
-    p: 4,
-  };
-
   return (
     <Modal
       open={showAddModal}
       onClose={() => setShowAddModal(false)}
       aria-labelledby="modal-modal-title"
       aria-describedby="modal-modal-description"
     >
-      <Box sx={style} className="modal-container">
+      <Box className="modal-container">
         {' '}
         <Typography id="modal-modal-title" variant="h6" component="h2">
           Add Team Member

packages/client/src/containers/LandingPage/LandingPage.css

@@ -5,19 +5,13 @@
   --text-color: #fffff;
 }
 
-* {
-  padding: 0;
-  margin: 0;
-  box-sizing: border-box;
-}
-
-body {
+.landing-page {
   margin: 0;
   display: flex;
   justify-content: center; /* Horizontally center content */
   align-items: center; /* Vertically center content */
   height: 100vh; /* Set body height to full viewport height */
-  background: var(--background-color);
+  background: #1d4ed8;
 }
 
 .landing-page {