Skip to content

Commit

Permalink
fixed component for when sessions or program DNE
Browse files Browse the repository at this point in the history
  • Loading branch information
@jessieh9
jessieh9 committed Feb 9, 2025
1 parent cabc4b9 commit 042701d
Show file tree
Hide file tree
Showing 3 changed files with 206 additions and 171 deletions.
111 changes: 62 additions & 49 deletions client/src/components/navbar/Navbar.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,67 +1,80 @@
import { Box, Flex, Icon, Link, Text, VStack } from "@chakra-ui/react";
import { Logo } from "../../assets/logo/Logo";
import { MdNotifications } from "react-icons/md";
import { MdSettings } from "react-icons/md";

import { IoMdCalendar } from "react-icons/io";
import { MdNotifications, MdSettings } from "react-icons/md";
import { TbInvoice } from "react-icons/tb";
import './Navbar.css';

import { Logo } from "../../assets/logo/Logo";

import "./Navbar.css";

const Navbar = ({ children }) => {
const menuItems = [
{ name: "Programs", path: "/programs", icon: <IoMdCalendar/>},
{ name: "Invoices", path: "/invoices", icon: <TbInvoice/> },
{ name: "Notifications", path: "/notifications", icon: <MdNotifications/> },
{ name: "Settings", path: "/settings", icon:<MdSettings/> }
{ name: "Programs", path: "/programs", icon: <IoMdCalendar /> },
{ name: "Invoices", path: "/invoices", icon: <TbInvoice /> },
{
name: "Notifications",
path: "/notifications",
icon: <MdNotifications />,
},
{ name: "Settings", path: "/settings", icon: <MdSettings /> },
];

return (
<div id="navbarBody">
<Box
w="18%"
maxW={250}
bg="white"
boxShadow="lg"
bgColor="#F6F6F6"
height="100vh"
position="fixed"
>
<Flex
justify="center"
p={10}
pb={7}
<Box
w="18%"
maxW={250}
bg="white"
boxShadow="lg"
bgColor="#F6F6F6"
height="100vh"
position="fixed"
>
<Logo></Logo>
</Flex>
<Flex
justify="center"
p={10}
pb={7}
>
<Logo></Logo>
</Flex>

<VStack
spacing={2}
align="stretch"
px={4}
>
{menuItems.map((item) => (
<div key={item.name} className="navItem">
<Link
href={item.path}
display="flex"
alignItems="center"
px={4}
py={3}
rounded="lg"
className="navLink"
<VStack
spacing={2}
align="stretch"
px={4}
>
{menuItems.map((item) => (
<div
key={item.name}
className="navItem"
>
<Icon className="navIcon" fontSize="2xl">{item.icon}</Icon>
<Text className="navText">{item.name}</Text>
</Link>
</div>
))}
</VStack>
</Box>
<div style={{width: "100%", marginLeft: "min(18%, 250px)"}}>
{children}
</div>
<Link
href={item.path}
display="flex"
alignItems="center"
px={4}
py={3}
rounded="lg"
className="navLink"
>
<Icon
className="navIcon"
fontSize="2xl"
>
{item.icon}
</Icon>
<Text className="navText">{item.name}</Text>
</Link>
</div>
))}
</VStack>
</Box>
<div style={{ width: "100%", marginLeft: "min(18%, 250px)" }}>
{children}
</div>
</div>
);
};

export default Navbar;
export default Navbar;
85 changes: 41 additions & 44 deletions client/src/components/programs/Program.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,21 @@
import { useState, useEffect } from 'react';
import { useParams } from 'react-router';
import { ProgramSummary, Sessions } from './ProgramComponents';
import Navbar from '../navbar/Navbar';
import {
Box,
Text,
Flex,
} from "@chakra-ui/react"
import { useBackendContext } from '../../contexts/hooks/useBackendContext';
import { useEffect, useState } from "react";

import { Box, Flex, Text } from "@chakra-ui/react";

import { useParams } from "react-router";

import { useBackendContext } from "../../contexts/hooks/useBackendContext";
import Navbar from "../navbar/Navbar";
import { ProgramSummary, Sessions } from "./ProgramComponents";

export const Program = () => {
const { id } = useParams();
const { backend } = useBackendContext();
const [ program, setProgram ] = useState(null);
const [ sessions, setSessions ] = useState(null);
const [ roomIds, setRoomIds ] = useState(null);
const [ roomNames, setRoomNames] = useState(null);
const [ nextBookingInfo, setNextBookingInfo ] = useState(null);

const [program, setProgram] = useState(null);
const [sessions, setSessions] = useState(null);
const [roomIds, setRoomIds] = useState(null);
const [roomNames, setRoomNames] = useState(null);
const [nextBookingInfo, setNextBookingInfo] = useState(null);

const getProgram = async () => {
try {
Expand All @@ -29,45 +27,48 @@ export const Program = () => {
}
};



const getNextBookingInfo = async () => {
try {
const nextBooking = {
nextSession: {},
nextRoom: {},
assignments: {},
instructors: [],
payees: []
payees: [],
};


const nextSession = sessions?.find(session => !session.archived);
const nextSession = sessions?.find((session) => !session.archived);

if (!nextSession) {
console.log("No upcoming sessions found");
return;
}

nextBooking.nextSession = nextSession;
const roomResponse = await backend.get(`/rooms/${nextBooking.nextSession.roomId}`);
const roomResponse = await backend.get(
`/rooms/${nextBooking.nextSession.roomId}`
);
nextBooking.nextRoom = roomResponse.data[0];

const assignmentsResponse = await backend.get(`/assignments/event/${program[0].id}`);
const assignmentsResponse = await backend.get(
`/assignments/event/${program[0].id}`
);

nextBooking.assignments = assignmentsResponse.data;

for (const assignment of assignmentsResponse.data) {
const clientResponse = await backend.get(`/clients/${assignment.clientId}`);
const clientResponse = await backend.get(
`/clients/${assignment.clientId}`
);
const assignmentWithClient = {
...assignment,
clientName: clientResponse.data.name,
clientEmail: clientResponse.data.email
clientEmail: clientResponse.data.email,
};

if (assignment.role === 'instructor') {
if (assignment.role === "instructor") {
nextBooking.instructors.push(assignmentWithClient);
} else if (assignment.role === 'payee') {
} else if (assignment.role === "payee") {
nextBooking.payees.push(assignmentWithClient);
}
}
Expand All @@ -84,9 +85,10 @@ export const Program = () => {
const sessionsData = sessionsResponse.data;
setSessions(sessionsData);
// Get set of room ids
const uniqueRoomIds = [...new Set(sessionsData.map(session => session.roomId))];
const uniqueRoomIds = [
...new Set(sessionsData.map((session) => session.roomId)),
];
setRoomIds(uniqueRoomIds);

} catch {
console.log("From getSessions: ", error);
}
Expand All @@ -105,20 +107,16 @@ export const Program = () => {
} catch {
console.log("From getRoomNames: ", error);
}
}
};

useEffect(() => {
getProgram();
getSessions();



}, [id]);

useEffect(() => {
if (roomIds) {
getRoomNames();

}
}, [roomIds]);

Expand All @@ -128,20 +126,19 @@ export const Program = () => {
}
}, [program, sessions]);







return (
<Flex>
<Navbar/>
<Navbar />
<Box>
<ProgramSummary program={program} bookingInfo={nextBookingInfo}/>
<Sessions sessions={sessions} rooms={roomNames}/>
<ProgramSummary
program={program}
bookingInfo={nextBookingInfo}
/>
<Sessions
sessions={sessions}
rooms={roomNames}
/>
</Box>
</Flex>
);
};

Loading

0 comments on commit 042701d

Please sign in to comment.