diff --git a/.github/_workflows/run-checks.yml b/.github/workflows/run-checks.yml
similarity index 74%
rename from .github/_workflows/run-checks.yml
rename to .github/workflows/run-checks.yml
index 1c5d262c..4b8468ca 100644
--- a/.github/_workflows/run-checks.yml
+++ b/.github/workflows/run-checks.yml
@@ -2,9 +2,12 @@ name: Run Checks
on:
push:
- branches: ["main"]
+ # branches: ["main"]
+ branches: ["dev"]
+
pull_request:
- branches: ["main"]
+ # branches: ["main"]
+ branches: ["dev"]
jobs:
run-checks:
@@ -22,7 +25,8 @@ jobs:
- name: Install dependencies
run:
npm exec --workspaces -- npx rimraf node_modules && npx rimraf
- node_modules && yarn install --frozen-lockfile
+ node_modules && yarn install
+ # node_modules && yarn install --frozen-lockfile
- name: Build React project
run: cd client && yarn run build
diff --git a/client/package.json b/client/package.json
index b8d85865..e2741849 100644
--- a/client/package.json
+++ b/client/package.json
@@ -14,6 +14,7 @@
"preview": "vite preview"
},
"dependencies": {
+ "@chakra-ui/icons": "^2.0.0",
"@chakra-ui/react": "^2.8.2",
"@emotion/react": "^11.13.0",
"@emotion/styled": "^11.13.0",
@@ -32,8 +33,8 @@
"react-icons": "^5.3.0",
"react-qr-code": "^2.0.15",
"react-router-dom": "^6.26.1",
- "zod": "^3.23.8",
- "recharts": "^2.7.2"
+ "recharts": "^2.7.2",
+ "zod": "^3.23.8"
},
"devDependencies": {
"@eslint/js": "^9.8.0",
diff --git a/client/public/card_images/ballet.svg b/client/public/card_images/ballet.svg
new file mode 100644
index 00000000..fe10cd6b
--- /dev/null
+++ b/client/public/card_images/ballet.svg
@@ -0,0 +1,38 @@
+
+
+
\ No newline at end of file
diff --git a/client/public/card_images/classical.svg b/client/public/card_images/classical.svg
new file mode 100644
index 00000000..aafd0a33
--- /dev/null
+++ b/client/public/card_images/classical.svg
@@ -0,0 +1,35 @@
+
+
+
\ No newline at end of file
diff --git a/client/public/card_images/pop.svg b/client/public/card_images/pop.svg
new file mode 100644
index 00000000..0b8b9d2a
--- /dev/null
+++ b/client/public/card_images/pop.svg
@@ -0,0 +1,2 @@
+
+
\ No newline at end of file
diff --git a/client/public/card_images/pop2.svg b/client/public/card_images/pop2.svg
new file mode 100644
index 00000000..2b44336a
--- /dev/null
+++ b/client/public/card_images/pop2.svg
@@ -0,0 +1,79 @@
+
+
+
\ No newline at end of file
diff --git a/client/src/components/dashboard/cseLogo.png b/client/public/dashboard/cseLogo.png
similarity index 100%
rename from client/src/components/dashboard/cseLogo.png
rename to client/public/dashboard/cseLogo.png
diff --git a/client/src/components/dashboard/sidebarImgs/classes.svg b/client/public/dashboard/sidebarImgs/classes.svg
similarity index 100%
rename from client/src/components/dashboard/sidebarImgs/classes.svg
rename to client/public/dashboard/sidebarImgs/classes.svg
diff --git a/client/src/components/dashboard/sidebarImgs/dashboard.svg b/client/public/dashboard/sidebarImgs/dashboard.svg
similarity index 100%
rename from client/src/components/dashboard/sidebarImgs/dashboard.svg
rename to client/public/dashboard/sidebarImgs/dashboard.svg
diff --git a/client/src/components/dashboard/sidebarImgs/redirect.svg b/client/public/dashboard/sidebarImgs/redirect.svg
similarity index 100%
rename from client/src/components/dashboard/sidebarImgs/redirect.svg
rename to client/public/dashboard/sidebarImgs/redirect.svg
diff --git a/client/src/components/dashboard/sidebarImgs/settings.svg b/client/public/dashboard/sidebarImgs/settings.svg
similarity index 100%
rename from client/src/components/dashboard/sidebarImgs/settings.svg
rename to client/public/dashboard/sidebarImgs/settings.svg
diff --git a/client/src/components/dashboard/sidebarImgs/students.svg b/client/public/dashboard/sidebarImgs/students.svg
similarity index 100%
rename from client/src/components/dashboard/sidebarImgs/students.svg
rename to client/public/dashboard/sidebarImgs/students.svg
diff --git a/client/src/components/dashboard/sidebarImgs/teachers.svg b/client/public/dashboard/sidebarImgs/teachers.svg
similarity index 100%
rename from client/src/components/dashboard/sidebarImgs/teachers.svg
rename to client/public/dashboard/sidebarImgs/teachers.svg
diff --git a/client/src/components/login/logo.png b/client/public/logo.png
similarity index 100%
rename from client/src/components/login/logo.png
rename to client/public/logo.png
diff --git a/client/src/components/navbar/bookings_img.svg b/client/public/navbar/bookings_img.svg
similarity index 100%
rename from client/src/components/navbar/bookings_img.svg
rename to client/public/navbar/bookings_img.svg
diff --git a/client/src/components/navbar/dashboard_img.svg b/client/public/navbar/dashboard_img.svg
similarity index 100%
rename from client/src/components/navbar/dashboard_img.svg
rename to client/public/navbar/dashboard_img.svg
diff --git a/client/src/components/navbar/discovery_img.svg b/client/public/navbar/discovery_img.svg
similarity index 100%
rename from client/src/components/navbar/discovery_img.svg
rename to client/public/navbar/discovery_img.svg
diff --git a/client/src/components/navbar/profile_img.svg b/client/public/navbar/profile_img.svg
similarity index 100%
rename from client/src/components/navbar/profile_img.svg
rename to client/public/navbar/profile_img.svg
diff --git a/client/src/components/navbar/resources_img.svg b/client/public/navbar/resources_img.svg
similarity index 100%
rename from client/src/components/navbar/resources_img.svg
rename to client/public/navbar/resources_img.svg
diff --git a/client/src/components/profile/arrow.svg b/client/public/profile/arrow.svg
similarity index 100%
rename from client/src/components/profile/arrow.svg
rename to client/public/profile/arrow.svg
diff --git a/client/public/student.png b/client/public/student.png
new file mode 100644
index 00000000..d53038a7
Binary files /dev/null and b/client/public/student.png differ
diff --git a/client/public/teacher.png b/client/public/teacher.png
new file mode 100644
index 00000000..81ceae34
Binary files /dev/null and b/client/public/teacher.png differ
diff --git a/client/src/App.tsx b/client/src/App.tsx
index 862ccc7a..09c3dc38 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -16,8 +16,8 @@ import ClassDashboard, {
OverallClassDashboard,
} from "./components/dashboard/classDashboard/ClassDashboard";
import ClassInfoDashboard from "./components/dashboard/classInfoDashboard/ClassInfoDashboard";
-import EventInfoDashboard from "./components/dashboard/eventInfoDashboard/EventInfoDashboard";
import { Dashboard, DashboardHome } from "./components/dashboard/Dashboard";
+import EventInfoDashboard from "./components/dashboard/eventInfoDashboard/EventInfoDashboard";
import SettingsDashboard from "./components/dashboard/settingsDashboard/SettingsDashboard";
import { StudentDashboard } from "./components/dashboard/studentDashboard/StudentDashboard";
import { StudentInfoDashboard } from "./components/dashboard/studentInfoDashboard/StudentInfoDashboard";
@@ -26,7 +26,6 @@ import { TeacherInfoDashboard } from "./components/dashboard/teacherInfoDashboar
import { Discovery } from "./components/discovery/Discovery";
import { CreateEvent } from "./components/forms/createEvent";
import { Login } from "./components/login/Login";
-import { Landing } from "./components/signup/Landing";
import { L } from "./components/logout/Logout";
import { Playground } from "./components/playground/Playground";
import { Profile } from "./components/profile/Profile";
@@ -34,14 +33,15 @@ import { Settings } from "./components/profile/Settings";
import { ProtectedRoute } from "./components/ProtectedRoute";
import { Resources } from "./components/resources/Resources";
import { Reviews } from "./components/reviews/Reviews";
+import { Landing } from "./components/signup/Landing";
import { Signup } from "./components/signup/Signup";
import Request from "./components/teacher-signup/requests/Request";
import { TeacherSignup } from "./components/teacher-signup/TeacherSignup";
import { AuthProvider } from "./contexts/AuthContext";
import { BackendProvider } from "./contexts/BackendContext";
import { RoleProvider } from "./contexts/RoleContext";
-import { ForgotPasswordConfirmation } from "./utils/auth/ForgotPasswordConfirmation"
import { ForgotPassword } from "./utils/auth/ForgotPassword";
+import { ForgotPasswordConfirmation } from "./utils/auth/ForgotPasswordConfirmation";
const App = () => {
return (
diff --git a/client/src/components/CatchAll.tsx b/client/src/components/CatchAll.tsx
index bea4831f..10a3edb0 100644
--- a/client/src/components/CatchAll.tsx
+++ b/client/src/components/CatchAll.tsx
@@ -6,7 +6,8 @@ export const CatchAll = () => {
const navigate = useNavigate();
useEffect(() => {
- navigate("/dashboard");
+ // navigate("/dashboard");
+ navigate("/profile");
}, [navigate]);
return Route not found... redirecting...
;
diff --git a/client/src/components/ProtectedRoute.tsx b/client/src/components/ProtectedRoute.tsx
index b186c633..70de22c8 100644
--- a/client/src/components/ProtectedRoute.tsx
+++ b/client/src/components/ProtectedRoute.tsx
@@ -20,7 +20,8 @@ export const ProtectedRoute = ({
return currentUser && isValidRole ? (
element
) : currentUser ? (
-
+ //
+
) : (
);
diff --git a/client/src/components/bookings/Bookings.jsx b/client/src/components/bookings/Bookings.jsx
index ae58a7c3..43dcc8fa 100644
--- a/client/src/components/bookings/Bookings.jsx
+++ b/client/src/components/bookings/Bookings.jsx
@@ -1,18 +1,14 @@
-import { memo, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
import {
- Badge,
Box,
- Button,
Card,
CardBody,
CardHeader,
+ Center,
Flex,
Heading,
HStack,
- Input,
- InputGroup,
- InputLeftElement,
Modal,
ModalBody,
ModalContent,
@@ -25,40 +21,40 @@ import {
Tabs,
Text,
useDisclosure,
- useToast,
VStack,
} from "@chakra-ui/react";
-import {
- FaClock,
- FaMapMarkerAlt,
- FaMicrophoneAlt,
- FaMusic,
- FaSearch,
- FaUser,
-} from "react-icons/fa";
-import {
- GiAbstract001,
- GiBallerinaShoes,
- GiBoombox,
- GiCartwheel,
- GiTambourine,
-} from "react-icons/gi";
-import { MdAdd, MdArrowBackIosNew, MdMoreHoriz } from "react-icons/md";
+// import {
+// FaClock,
+// FaMapMarkerAlt,
+// FaMicrophoneAlt,
+// FaMusic,
+// FaSearch,
+// FaUser,
+// } from "react-icons/fa";
+// import {
+// GiAbstract001,
+// GiBallerinaShoes,
+// GiBoombox,
+// GiCartwheel,
+// GiTambourine,
+// } from "react-icons/gi";
+import { MdArrowBackIosNew, MdMoreHoriz } from "react-icons/md";
import { useNavigate } from "react-router-dom";
import { useAuthContext } from "../../contexts/hooks/useAuthContext";
import { useBackendContext } from "../../contexts/hooks/useBackendContext";
-import { formatDate, formatTime } from "../../utils/formatDateTime";
+// import { formatDate, formatTime } from "../../utils/formatDateTime";
import { CreateClassForm } from "../forms/createClasses";
import CreateEvent from "../forms/createEvent";
import { Navbar } from "../navbar/Navbar";
+// import { InfoModal } from "./InfoModal";
import { SearchBar } from "../searchbar/SearchBar";
import { ClassCard } from "../shared/ClassCard";
import { EventCard } from "../shared/EventCard";
import { CancelModal } from "./CancelModal";
+import { ClassTeacherCard } from "./ClassTeacherCard";
import { ConfirmationModal } from "./ConfirmationModal";
-import { InfoModal } from "./InfoModal";
import { TeacherCancelModal } from "./TeacherCancelModal";
import { TeacherConfirmationModal } from "./TeacherConfirmationModal";
import { TeacherEditModal } from "./TeacherEditModal";
@@ -66,12 +62,10 @@ import { TeacherViewModal } from "./TeacherViewModal";
import { ViewModal } from "./ViewModal";
export const Bookings = () => {
- const toast = useToast();
const navigate = useNavigate();
const { isOpen, onOpen, onClose } = useDisclosure();
const { currentUser, role } = useAuthContext();
const { backend } = useBackendContext();
- const [loading, setLoading] = useState(true);
const [currentModal, setCurrentModal] = useState("view");
const [classes, setClasses] = useState([]);
const [events, setEvents] = useState([]);
@@ -89,99 +83,182 @@ export const Bookings = () => {
const [coreqId, setCoreqId] = useState();
const [tags, setTags] = useState([]);
const [tagFilter, setTagFilter] = useState({});
- const [lastToggledTag, setLastToggledTag] = useState(null);
const [classTagsMap, setClassTagsMap] = useState({});
const [eventTagsMap, setEventTagsMap] = useState({});
- const [refresh, setRefresh] = useState(0);
+ const [refresh, setRefresh] = useState(-1);
+ const [magic, setMagic] = useState(-1);
- const isTeacher = role === "teacher";
- const [activeTab, setActiveTab] = useState("classes");
+ const reloadStudentClasses = async () => {
+ try {
+ const [classesRes, classTagsRes] = await Promise.all([
+ backend.get(`/class-enrollments/student/${user_id}`),
+ backend.get(`/class-tags/enrolled-class-tags/${user_id}`),
+ ]);
+ setClasses(classesRes.data);
+ const newClassTagsMap = {};
+ classTagsRes.data.forEach((item) => {
+ newClassTagsMap[item.classId] = item.tagArray;
+ });
+ setClassTagsMap(newClassTagsMap);
+ } catch (error) {
+ console.error("Error reloading student classes:", error);
+ }
+ };
- const toggleClasses = () => {
- setActiveTab("classes");
+ const reloadStudentEvents = async () => {
+ try {
+ const [eventsRes, eventTagsRes] = await Promise.all([
+ backend.get(`/event-enrollments/student/${user_id}`),
+ backend.get(`/event-tags/enrolled-event-tags/${user_id}`),
+ ]);
+ setEvents(eventsRes.data);
+ const newEventTagsMap = {};
+ eventTagsRes.data.forEach((item) => {
+ newEventTagsMap[item.eventId] = item.tagArray;
+ });
+ setEventTagsMap(newEventTagsMap);
+ } catch (error) {
+ console.error("Error reloading student events:", error);
+ }
};
- const toggleEvents = () => {
- setActiveTab("events");
+ const reloadTeacherClasses = async () => {
+ try {
+ const [classesRes, classDraftsRes, classTagsRes] = await Promise.all([
+ backend.get(`/classes/published`),
+ backend.get(`/classes/drafts`),
+ backend.get(`/class-tags/all-class-tags`),
+ ]);
+ setClasses(classesRes.data);
+ setDraftClasses(classDraftsRes.data);
+ const newClassTagsMap = {};
+ classTagsRes.data.forEach((item) => {
+ newClassTagsMap[item.classId] = item.tagArray;
+ });
+ setClassTagsMap(newClassTagsMap);
+ } catch (error) {
+ console.error("Error reloading teacher classes:", error);
+ }
+ };
+
+ const reloadTeacherEvents = async () => {
+ try {
+ const [eventsRes, eventDraftsRes, eventTagsRes] = await Promise.all([
+ backend.get(`/events/published`),
+ backend.get(`/events/drafts`),
+ backend.get(`/event-tags/all-event-tags`),
+ ]);
+ setEvents(eventsRes.data);
+ setDraftEvents(eventDraftsRes.data);
+ const newEventTagsMap = {};
+ eventTagsRes.data.forEach((item) => {
+ newEventTagsMap[item.eventId] = item.tagArray;
+ });
+ setEventTagsMap(newEventTagsMap);
+ } catch (error) {
+ console.error("Error reloading teacher events:", error);
+ }
};
useEffect(() => {
+ if (!role) return;
if (currentUser && role !== "student") {
- backend.get(`/events/published`).then((res) => setEvents(res.data));
- backend.get(`/classes/published`).then((res) => setClasses(res.data));
- backend.get(`/events/drafts`).then((res) => setDraftEvents(res.data));
- backend.get(`/classes/drafts`).then((res) => setDraftClasses(res.data));
- backend.get("/events").then((res) => setAllEvents(res.data));
+ // First get all classes and events
+ const fetchData = async () => {
+ try {
+ // Get all the basic data
+ const [
+ classesRes,
+ eventsRes,
+ draftEventsRes,
+ draftClassesRes,
+ allEventsRes,
+ ] = await Promise.all([
+ backend.get(`/classes/published`),
+ backend.get(`/events/published`),
+ backend.get(`/events/drafts`),
+ backend.get(`/classes/drafts`),
+ backend.get("/events/all"),
+ ]);
+
+ const allClasses = classesRes.data;
+ const allDraftClasses = draftClassesRes.data;
+
+ const newClassTagsMap = {};
+ const classTagsRes = await backend.get("/class-tags/all-class-tags");
+ classTagsRes.data.forEach((item) => {
+ newClassTagsMap[item.classId] = item.tagArray;
+ });
+ // console.log("Class Tags Map:", newClassTagsMap);
+ const newEventTagsMap = {};
+ const eventTagsRes = await backend.get("/event-tags/all-event-tags");
+ eventTagsRes.data.forEach((item) => {
+ newEventTagsMap[item.eventId] = item.tagArray;
+ });
+ // console.log("Event Tags Map:", newEventTagsMap);
+
+ // Set all the state
+ setClassTagsMap(newClassTagsMap);
+ setEventTagsMap(newEventTagsMap);
+ setClasses(allClasses);
+ setEvents(eventsRes.data);
+ setDraftEvents(draftEventsRes.data);
+ setDraftClasses(allDraftClasses);
+ setAllEvents(allEventsRes.data);
+ } catch (error) {
+ console.error("Error fetching data:", error);
+ }
+ };
+
+ fetchData();
} else if (currentUser && role === "student") {
- backend
- .get(`/users/${currentUser.uid}`)
- .then((userRes) => {
+ const fetchData = async () => {
+ try {
+ const userRes = await backend.get(`/users/${currentUser.uid}`);
const userId = userRes.data[0].id;
setUserId(userId);
-
- backend
- .get(`/class-enrollments/student/${userId}`)
- .then(async (res) => {
- const enrolledClasses = res.data;
- setClasses(enrolledClasses);
-
- const tagsPromises = enrolledClasses.map((cls) =>
- backend.get(`/class-tags/tags/${cls.id}`)
- );
-
- const tagsResults = await Promise.all(tagsPromises);
- const newClassTagsMap = {};
-
- enrolledClasses.forEach((cls, index) => {
- newClassTagsMap[cls.id] = tagsResults[index].data.map(
- (tag) => tag.id
- );
- });
-
- setClassTagsMap(newClassTagsMap);
- })
- .catch((err) => {
- console.log("Error fetching class enrollments:", err);
- });
-
- backend
- .get(`/event-enrollments/student/${userId}`)
- .then(async (res) => {
- const enrolledEvents = res.data;
- setEvents(enrolledEvents);
-
- const tagsPromises = enrolledEvents.map((evt) =>
- backend.get(`/event-tags/tags/${evt.id}`)
- );
-
- const tagsResults = await Promise.all(tagsPromises);
- const newEventTagsMap = {};
-
- enrolledEvents.forEach((evt, index) => {
- newEventTagsMap[evt.id] = tagsResults[index].data.map(
- (tag) => tag.id
- );
- });
-
- setEventTagsMap(newEventTagsMap);
- })
- .catch((err) => {
- console.log("Error fetching event enrollments:", err);
- });
- })
- .catch((err) => {
- console.log("Error fetching user:", err);
- });
+ const [enrolledClassesRes, enrolledEventsRes] = await Promise.all([
+ backend.get(`/class-enrollments/student/${userId}`),
+ backend.get(`/event-enrollments/student/${userId}`),
+ ]);
+ const enrolledClasses = enrolledClassesRes.data;
+ const enrolledEvents = enrolledEventsRes.data;
+ setClasses(enrolledClasses);
+ setEvents(enrolledEvents);
+
+ const newClassTagsMap = {};
+ const newEventTagsMap = {};
+ const classTagsRes = await backend.get(
+ `/class-tags/enrolled-class-tags/${userId}`
+ );
+ classTagsRes.data.forEach((item) => {
+ newClassTagsMap[item.classId] = item.tagArray;
+ });
+ // console.log("Student Class Tags Map:", newClassTagsMap);
+ const eventTagsRes = await backend.get(
+ `/event-tags/enrolled-event-tags/${userId}`
+ );
+ eventTagsRes.data.forEach((item) => {
+ newEventTagsMap[item.eventId] = item.tagArray;
+ });
+ // console.log("Student Event Tags Map:", newEventTagsMap);
+ setClassTagsMap(newClassTagsMap);
+ setEventTagsMap(newEventTagsMap);
+ } catch (error) {
+ console.error("Error fetching data:", error);
+ }
+ };
+ fetchData();
}
- }, [backend, currentUser, isTeacher, refresh]);
+ }, [backend, currentUser, refresh, role]);
useEffect(() => {
const attendedClasses = classes.filter((c) => c.attendance !== null);
const attendedEvents = events.filter((e) => e.attendance !== null);
setAttended([...attendedClasses, ...attendedEvents]);
setDrafts([...draftClasses, ...draftEvents]);
- }, [classes, events]);
+ }, [classes, events, draftClasses, draftEvents]);
useEffect(() => {
const fetchTags = async () => {
@@ -197,15 +274,14 @@ export const Bookings = () => {
setTagFilter(initialTagFilter);
setTags(initialTags);
- // console.log(initialTags);
} catch (error) {
console.error("Error fetching tags:", error);
}
};
fetchTags();
- }, []);
+ }, [backend]);
- const handleFilterToggle = (id) => {
+ const handleFilterToggle = (id) => () => {
setTagFilter((prev) => ({
...prev,
[id]: !prev[id],
@@ -222,10 +298,8 @@ export const Bookings = () => {
if (data.length > 0) {
const eventId = data[0].eventId;
- console.log("Fetched coreqId:", eventId);
setCoreqId(eventId);
} else {
- console.log("No corequisite found for class:", selectedCard.id);
setCoreqId(null);
}
} catch (err) {
@@ -238,15 +312,11 @@ export const Bookings = () => {
}, [backend, selectedCard, isOpen]);
const onCloseModal = (type) => {
- setSelectedCard(null);
- setCurrentModal("view");
- onClose();
- reloadClassesAndDrafts();
if (type !== 3) {
toast({
- title: type == 0 ? "Class Published." : "Event Published.", // 0 == "class" || 1 == "event"
+ title: tabIndex === 0 ? "Class Published." : "Event Published.", // 0 == "class" || 1 == "event"
description:
- type == 0
+ type === 0
? "Class is visible to students."
: "Event is visible to students.",
status: "success",
@@ -255,55 +325,162 @@ export const Bookings = () => {
position: "top",
});
}
+ if (tabIndex === 0) {
+ if (role !== "student") {
+ Promise.all([reloadTeacherClasses()]).then(() => {
+ setCurrentModal("view");
+ onClose();
+ });
+ } else {
+ Promise.all([reloadStudentClasses()]).then(() => {
+ setCurrentModal("view");
+ onClose();
+ });
+ }
+ } else if (tabIndex === 1) {
+ if (role !== "student") {
+ Promise.all([reloadTeacherEvents()]).then(() => {
+ setSelectedCard(null);
+ setCurrentModal("view");
+ onClose();
+ });
+ } else {
+ Promise.all([reloadStudentEvents()]).then(() => {
+ setSelectedCard(null);
+ setCurrentModal("view");
+ onClose();
+ });
+ }
+ } else {
+ if (role !== "student") {
+ Promise.all([reloadTeacherClasses(), reloadTeacherEvents()]).then(
+ () => {
+ setSelectedCard(null);
+ setCurrentModal("view");
+ onClose();
+ }
+ );
+ } else {
+ Promise.all([reloadStudentClasses(), reloadStudentEvents()]).then(
+ () => {
+ setSelectedCard(null);
+ setCurrentModal("view");
+ onClose();
+ }
+ );
+ }
+ }
+ console.log(classTagsMap);
};
- const onOpenModal = (data) => {
- setClassData(data);
- onOpen();
- };
-
- const triggerRefresh = () => {
- setRefresh(refresh + 1);
- console.log("Refresh triggered");
- };
- // https://dmitripavlutin.com/how-to-compare-objects-in-javascript/#4-deep-equality
- const deepEquality = (object1, object2) => {
- if (object1 === null || object2 === null) return object1 === object2;
- const keys1 = Object.keys(object1);
- const keys2 = Object.keys(object2);
- if (keys1.length !== keys2.length) {
- return false;
+ const onCloseEditModal = () => {
+ if (tabIndex === 0) {
+ if (role !== "student") {
+ Promise.all([reloadTeacherClasses()]).then(() => {
+ setCurrentModal("view");
+ setMagic((prev) => -1 * prev);
+ });
+ } else {
+ Promise.all([reloadStudentClasses()]).then(() => {
+ setCurrentModal("view");
+ setMagic((prev) => -1 * prev);
+ });
+ }
+ } else if (tabIndex === 1) {
+ if (role !== "student") {
+ Promise.all([reloadTeacherEvents()]).then(() => {
+ setCurrentModal("view");
+ setMagic((prev) => -1 * prev);
+ });
+ } else {
+ Promise.all([reloadStudentEvents()]).then(() => {
+ setCurrentModal("view");
+ setMagic((prev) => -1 * prev);
+ });
+ }
+ } else {
+ if (role !== "student") {
+ Promise.all([reloadTeacherClasses(), reloadTeacherEvents()]).then(
+ () => {
+ setCurrentModal("view");
+ setMagic((prev) => -1 * prev);
+ }
+ );
+ } else {
+ Promise.all([reloadStudentClasses(), reloadStudentEvents()]).then(
+ () => {
+ setCurrentModal("view");
+ setMagic((prev) => -1 * prev);
+ }
+ );
+ }
}
+ };
- for (const key of keys1) {
- const val1 = object1[key];
- const val2 = object2[key];
- const areObjects = typeof val1 === "object" && typeof val2 === "object";
- if (
- (areObjects && !deepEquality(val1, val2)) ||
- (!areObjects && val1 !== val2)
- ) {
- return false;
+ const triggerRefresh = () => {
+ if (tabIndex === 0) {
+ if (role !== "student") {
+ Promise.all([reloadTeacherClasses()]).then(() => {
+ setRefresh((prev) => -1 * prev);
+ });
+ } else {
+ Promise.all([reloadStudentClasses()]).then(() => {
+ setRefresh((prev) => -1 * prev);
+ });
+ }
+ } else if (tabIndex === 1) {
+ if (role !== "student") {
+ Promise.all([reloadTeacherEvents()]).then(() => {
+ setRefresh((prev) => -1 * prev);
+ });
+ } else {
+ Promise.all([reloadStudentEvents()]).then(() => {
+ setRefresh((prev) => -1 * prev);
+ });
+ }
+ } else {
+ if (role !== "student") {
+ Promise.all([reloadTeacherClasses(), reloadTeacherEvents()]).then(
+ () => {
+ setRefresh((prev) => -1 * prev);
+ }
+ );
+ } else {
+ Promise.all([reloadStudentClasses(), reloadStudentEvents()]).then(
+ () => {
+ setRefresh((prev) => -1 * prev);
+ }
+ );
}
}
-
- return true;
};
- const updateModal = (item) => {
- const type =
- classes.some((e) => deepEquality(e, item)) ||
- draftClasses.some((e) => deepEquality(e, item))
- ? "class"
- : "event";
- console.log(
- "update",
- item,
- classes,
- draftClasses,
- type,
- deepEquality(classes[0], item)
- );
+ // https://dmitripavlutin.com/how-to-compare-objects-in-javascript/#4-deep-equality
+ // const deepequality = (object1, object2) => {
+ // if (object1 === null || object2 === null) return object1 === object2;
+ // const keys1 = Object.keys(object1);
+ // const keys2 = Object.keys(object2);
+
+ // if (keys1.length !== keys2.length) {
+ // return false;
+ // }
+
+ // for (const key of keys1) {
+ // const val1 = object1[key];
+ // const val2 = object2[key];
+ // const areObjects = typeof val1 === "object" && typeof val2 === "object";
+ // if (
+ // (areObjects && !deepEquality(val1, val2)) ||
+ // (!areObjects && val1 !== val2)
+ // ) {
+ // return false;
+ // }
+ // }
+
+ // return true;
+ // };
+
+ const updateModal = (item, type = "class") => {
if (type === "class") loadCorequisites(item.id);
setSelectedCard(item);
setCardType(type);
@@ -346,60 +523,84 @@ export const Bookings = () => {
}
};
- // const isFilterActive = Object.values(tagFilter).some(Boolean);
-
const loadCorequisites = async (classId) => {
try {
const response = await backend.get(`classes/corequisites/${classId}`);
if (response.status === 200) {
setCoEvents(response.data);
- console.log(coEvents);
}
} catch (error) {
console.error("Error fetching corequisite enrollment:", error);
}
};
-
const handleClassSearch = async (query) => {
- if (currentUser && role === "student") {
- // For students, search within their enrolled classes
- const enrolledRes = await backend.get(
- `/class-enrollments/student/${user_id}`
- );
- const allEnrolledClasses = enrolledRes.data;
+ try {
+ if (!query || query.trim() === "") {
+ // For empty search, reload the appropriate data based on role
+ if (role === "student") {
+ await reloadStudentClasses();
+ } else {
+ await reloadTeacherClasses();
+ }
+ return;
+ }
- // Client-side search filtering
- const filteredClasses = allEnrolledClasses.filter((cls) =>
- cls.title.toLowerCase().includes(query.toLowerCase())
- );
+ if (currentUser && role === "student") {
+ // For students, search within their enrolled classes
+ const enrolledRes = await backend.get(
+ `/class-enrollments/student/${user_id}`
+ );
+ const allEnrolledClasses = enrolledRes.data;
- setClasses(filteredClasses);
- } else {
- // For teachers/admin, keep the existing server-side search
- const searchRes = await backend.get(`/classes/search/${query}`);
- setClasses(searchRes.data);
+ // Client-side search filtering
+ const filteredClasses = allEnrolledClasses.filter((cls) =>
+ cls.title.toLowerCase().includes(query.trim().toLowerCase())
+ );
+
+ setClasses(filteredClasses);
+ } else {
+ // For teachers/admin, use server-side search
+ const searchRes = await backend.get(`/classes/search/${query.trim()}`);
+ setClasses(searchRes.data);
+ }
+ } catch (error) {
+ console.error("Error searching classes:", error);
}
};
const handleEventSearch = async (query) => {
- if (currentUser && role === "student") {
- // For students, search within their enrolled events
- const enrolledRes = await backend.get(
- `/event-enrollments/student/${user_id}`
- );
- const allEnrolledEvents = enrolledRes.data;
+ try {
+ if (!query || query.trim() === "") {
+ // For empty search, reload the appropriate data based on role
+ if (role === "student") {
+ await reloadStudentEvents();
+ } else {
+ await reloadTeacherEvents();
+ }
+ return;
+ }
- // Client-side search filtering
- const filteredEvents = allEnrolledEvents.filter((evt) =>
- evt.title.toLowerCase().includes(query.toLowerCase())
- );
+ if (currentUser && role === "student") {
+ // For students, search within their enrolled events
+ const enrolledRes = await backend.get(
+ `/event-enrollments/student/${user_id}`
+ );
+ const allEnrolledEvents = enrolledRes.data;
- setEvents(filteredEvents);
- } else {
- // For teachers/admin, keep the existing server-side search
- const searchRes = await backend.get(`/events/search/${query}`);
- setEvents(searchRes.data);
+ // Client-side search filtering
+ const filteredEvents = allEnrolledEvents.filter((evt) =>
+ evt.title.toLowerCase().includes(query.trim().toLowerCase())
+ );
+
+ setEvents(filteredEvents);
+ } else {
+ // For teachers/admin, use server-side search
+ const searchRes = await backend.get(`/events/search/${query.trim()}`);
+ setEvents(searchRes.data);
+ }
+ } catch (error) {
+ console.error("Error searching events:", error);
}
};
@@ -417,164 +618,61 @@ export const Bookings = () => {
setAttended([...attendedClasses, ...attendedEvents]);
setDrafts([...draftClasses, ...draftEvents]);
if (selectedCard) loadCorequisites(selectedCard.id);
+ // console.log(attended);
} catch (error) {
console.error("Error reloading classes:", error);
}
};
- const reloadClasses = async () => {
- await backend.get(`/classes/published`).then((res) => {
- setClasses(res.data);
- });
-
- const attendedClasses = classes.filter((c) => c.attendance !== null);
- const attendedEvents = events.filter((e) => e.attendance !== null);
- setAttended([...attendedClasses, ...attendedEvents]);
-
- if (selectedCard) {
- loadCorequisites(selectedCard.id);
- }
- };
-
- const reloadEvents = async () => {
- await backend.get(`/events/published`).then((res) => {
- setEvents(res.data);
- });
-
- const attendedClasses = classes.filter((c) => c.attendance !== null);
- const attendedEvents = events.filter((e) => e.attendance !== null);
- setAttended([...attendedClasses, ...attendedEvents]);
-
- if (selectedCard) {
- loadCorequisites(selectedCard.id);
- }
- };
-
- // useEffect(() => {
- // console.log("selectedCard", selectedCard);
- // }, [selectedCard]);
-
- const fetchClassData = async () => {
- try {
- const [classesResponse, classDataResponse] = await Promise.all([
- backend.get("/scheduled-classes"),
- backend.get("/classes"),
- ]);
-
- const classDataDict = new Map();
- classDataResponse.data.forEach((cls) => classDataDict.set(cls.id, cls));
-
- console.log("Fetching tags for class:", clsId);
- const response = await backend.get(`/class-tags/tags/${clsId}`);
- console.log("Raw tag data:", response.data);
-
- const formattedData = classesResponse.data
- .map((cls) => {
- const fullData = classDataDict.get(cls.classId);
-
- return fullData
- ? {
- classId: cls.classId,
- date: stringToDate(cls.date),
- startTime: stringToTime(cls.startTime),
- endTime: stringToTime(cls.endTime),
- title: fullData.title,
- description: fullData.description,
- location: fullData.location,
- capacity: fullData.capacity,
- level: fullData.level,
- costume: fullData.costume,
- isDraft: fullData.isDraft,
- }
- : null;
- })
- .filter(Boolean);
-
- setClasses(formattedData);
- } catch (error) {
- console.error("Error fetching class data:", error);
- }
- };
-
- const stringToDate = (date) => {
- return new Date(date);
- };
-
- const stringToTime = (time) => {
- const [hours, minutes] = time.split(":");
- const d = new Date();
- d.setHours(hours, minutes, 0);
-
- return d;
- };
-
return (
-
-
+
setTabIndex(index)}
>
-
-
- Classes
-
-
- Events
-
-
- {role !== "student" ? "Drafts" : "Attended"}
-
-
- {/*
-
-
-
-
- setSearchInput(e.target.value)}
- onKeyDown={handleKeyDown}
- />
-
- */}
+
+
+
+ Classes
+
+
+ Events
+
+
+ {role !== "student" ? "Drafts" : "Attended"}
+
+
+
+
{
>
{role !== "student" && (
{
setSelectedCard(null);
@@ -620,28 +719,43 @@ export const Bookings = () => {
)}
{role !== "student" ? (
classes.length > 0 ? (
- classes.map((classItem, index) => (
-
- ))
+ classes.map((classItem, index) => {
+ const isFilterActive =
+ Object.values(tagFilter).some(Boolean);
+ const classTags = classTagsMap[classItem.id] || [];
+
+ if (
+ !isFilterActive ||
+ classTags.some((tag) => tagFilter[tag.id])
+ ) {
+ return (
+ {
+ updateModal(classItem, "class");
+ }}
+ tags={classTags}
+ />
+ );
+ }
+ return null;
+ })
) : (
No classes available.
)
) : classes.length > 0 ? (
classes.map((classItem) => {
- const isFilterActive =
- Object.values(tagFilter).some(Boolean);
const classTags = classTagsMap[classItem.id] || [];
if (
- !isFilterActive ||
- classTags.some((tagId) => tagFilter[tagId])
+ !Object.values(tagFilter).some(Boolean) ||
+ classTags.some((tag) => tagFilter[tag.id])
) {
return (
{
>
updateModal(classItem)}
+ onClick={() => {
+ updateModal(classItem, "class");
+ }}
triggerRefresh={triggerRefresh}
onCloseModal={onCloseModal}
+ tags={classTags}
/>
);
@@ -683,7 +800,8 @@ export const Bookings = () => {
>
{role !== "student" && (
{
setSelectedCard(null);
@@ -708,24 +826,26 @@ export const Bookings = () => {
- )}
+ )}{" "}
{events.length > 0 ? (
events.map((eventItem) => {
- const isFilterActive =
- Object.values(tagFilter).some(Boolean);
const eventTags = eventTagsMap[eventItem.id] || [];
if (
- !isFilterActive ||
- eventTags.some((tagId) => tagFilter[tagId])
+ !Object.values(tagFilter).some(Boolean) ||
+ eventTags.some((tag) => tagFilter[tag.id])
) {
return (
updateModal(eventItem)}
+ onClick={() => {
+ updateModal(eventItem, "event");
+ }}
+ magic={refresh}
triggerRefresh={triggerRefresh}
onCloseModal={onCloseModal}
+ tags={eventTags}
/>
);
}
@@ -745,56 +865,78 @@ export const Bookings = () => {
mb={20}
justifyContent={"center"}
>
+ {" "}
{role !== "student" ? (
drafts.length > 0 ? (
- drafts.map((item) =>
- !item.callTime ? (
- updateModal(item)}
- />
- ) : (
- updateModal(item)}
- triggerRefresh={triggerRefresh}
- onCloseModal={onCloseModal}
- // setRefresh={reloadClassesAndDrafts}
- />
- )
- )
+ drafts.map((item) => {
+ const classTags = classTagsMap[item.id] || [];
+
+ if (!item.callTime) {
+ return (
+ updateModal(item, "class")}
+ setSelectedCard={setSelectedCard}
+ performance={coEvents}
+ onOpen={updateModal}
+ tags={classTags}
+ />
+ );
+ } else if (item.callTime) {
+ return (
+ {
+ updateModal(item, "event");
+ }}
+ magic={refresh}
+ triggerRefresh={triggerRefresh}
+ onCloseModal={onCloseModal}
+ tags={eventTagsMap[item.id] || []}
+ />
+ );
+ }
+ return null;
+ })
) : (
No draft events or classes
)
) : attended.length > 0 ? (
- attended.map((item) =>
- item.class_id ? (
+ attended.map((item) => {
+ return !item.callTime ? (
updateModal(item)}
+ onClick={() => {
+ updateModal(item, "class");
+ }}
+ tags={classTagsMap[item.id] || []}
/>
) : (
updateModal(item)}
+ onClick={() => {
+ updateModal(item, "event");
+ }}
+ magic={refresh}
triggerRefresh={triggerRefresh}
+ tags={eventTagsMap[item.id] || []}
/>
- )
- )
+ );
+ })
) : (
No attended classes or events.
)}
@@ -802,306 +944,114 @@ export const Bookings = () => {
-
- {role !== "student" ? (
+ {role !== "student" ? (
+ currentModal === "view" ? (
+ // this is always going to be the view for classes
+ // events view modal is handled in the event card component
+
+ ) : currentModal === "confirmation" ? (
+
+ ) : currentModal === "edit" ? (
+
+ ) : currentModal === "create" ? (
+
+
+
+
+
+ onCloseModal(3)} />
+
+ {tabIndex === 0 ? "New Class" : "New Event"}
+ {" "}
+ {/* Will add from prop */}
+
+
+
+
+ {tabIndex === 0 ? (
+
+ ) : (
+
+ )}
+
+
+
+ ) : (
+
+ )
+ ) : // STUDENT VIEW HERE
currentModal === "view" ? (
-
) : currentModal === "confirmation" ? (
-
- ) : currentModal === "edit" ? (
-
- ) : currentModal === "create" ? (
-
-
-
-
-
- onCloseModal(3)} />
-
- {tabIndex === 0 ? "New Class" : "New Event"}
- {" "}
- {/* Will add from prop */}
-
-
-
-
- {tabIndex === 0 ? (
-
- ) : (
-
- )}
-
-
-
) : (
- handleCancelEnrollment(selectedCard.id)}
+ type={cardType}
/>
- )
- ) : // STUDENT VIEW HERE
- currentModal === "view" ? (
-
- ) : currentModal === "confirmation" ? (
-
- ) : (
- handleCancelEnrollment(selectedCard.id)}
- type={cardType}
- />
- )}
+ )}
+
);
};
-
-const ClassTeacherCard = memo(
- ({
- id,
- title,
- location,
- date,
- description,
- capacity,
- level,
- costume,
- performance,
- rsvpCount,
- isDraft,
- recurrencePattern,
- isRecurring,
- startDate,
- endDate,
- startTime,
- endTime,
- navigate,
- setSelectedCard,
- tagId,
- onOpen,
- }) => {
- const formattedDate = date ? formatDate(date) : null;
- const formattedStartTime = startTime ? formatTime(startTime) : null;
- const formattedEndTime = endTime ? formatTime(endTime) : null;
- const getIcon = () => {
- const iconSize = 50;
- switch (tagId) {
- case 1:
- return ;
- case 2:
- return ;
- case 3:
- return ;
- case 4:
- return ;
- case 5:
- return ;
- case 6:
- return ;
- case 7:
- return ;
- default:
- return ;
- }
- };
- return (
-
- {
- const modalData = {
- id,
- title,
- location,
- date,
- description,
- capacity,
- level,
- costume,
- performances: performance,
- isRecurring,
- recurrencePattern,
- startDate,
- endDate,
- isDraft,
- rsvpCount,
- startTime,
- endTime,
- };
- setSelectedCard(modalData);
- onOpen({
- id,
- title,
- location,
- date,
- description,
- capacity,
- isRecurring,
- recurrencePattern,
- startDate,
- endDate,
- level,
- costume,
- isDraft,
- startTime,
- endTime,
- });
- }
- : () => {
- const modalData = {
- id,
- title,
- location,
- date,
- description,
- capacity,
- level,
- costume,
- isRecurring,
- recurrencePattern,
- performances: performance,
- isDraft,
- startDate,
- endDate,
- rsvpCount,
- startTime,
- endTime,
- };
- setSelectedCard(modalData);
- onOpen({
- id,
- title,
- location,
- date,
- description,
- capacity,
- level,
- isRecurring,
- recurrencePattern,
- costume,
- startDate,
- endDate,
- isDraft,
- startTime,
- endTime,
- });
- }
- // : () => navigate(`/dashboard/classes/${classId}`)
- }
- >
-
-
-
- {rsvpCount ?? 0} {(rsvpCount ?? 0) === 1 ? "Person" : "People"}{" "}
- Enrolled
-
-
-
- {getIcon()}
-
-
- {title}
-
-
-
-
- {location ? `${location}` : "No location"}
-
-
-
-
- {formattedDate
- ? `${formattedDate} · ${formattedStartTime} - ${formattedEndTime}`
- : "No date"}
-
-
-
-
-
-
-
- );
- }
-);
diff --git a/client/src/components/bookings/CancelModal.jsx b/client/src/components/bookings/CancelModal.jsx
index 06930e25..bf8d0039 100644
--- a/client/src/components/bookings/CancelModal.jsx
+++ b/client/src/components/bookings/CancelModal.jsx
@@ -1,51 +1,93 @@
-import { Button, Modal, ModalOverlay, ModalHeader, ModalContent, ModalBody, ModalFooter, Flex, Text } from "@chakra-ui/react";
+import {
+ Button,
+ Flex,
+ Modal,
+ ModalBody,
+ ModalContent,
+ ModalFooter,
+ ModalHeader,
+ ModalOverlay,
+ Text,
+} from "@chakra-ui/react";
-export const CancelModal = ({ isOpen, onClose, setCurrentModal, card, handleEvent, type }) => {
- const onGoBack = () => {
- setCurrentModal("view");
- };
- const onConfirm = () => {
- setCurrentModal("confirmation");
- handleEvent(); // sql query is dependent on card type (class or event)
- };
+export const CancelModal = ({
+ isOpen,
+ onClose,
+ setCurrentModal,
+ card,
+ handleEvent,
+ type,
+}) => {
+ const onGoBack = () => {
+ setCurrentModal("view");
+ };
+ const onConfirm = () => {
+ setCurrentModal("confirmation");
+ handleEvent(); // sql query is dependent on card type (class or event)
+ };
- return (
-
-
-
- Delete RSVP?
-
- You're cancelling {card ? card.title : "N/A"}. This action can't be undone.
-
+ return (
+
+
+
+
+ {" "}
+ Delete RSVP?
+
+
+ You're cancelling{" "}
+
+ {card ? card.title : "N/A"}
+
+ . This action can't be undone.
+
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
);
};
diff --git a/client/src/components/bookings/ClassTeacherCard.jsx b/client/src/components/bookings/ClassTeacherCard.jsx
new file mode 100644
index 00000000..bbf0dd29
--- /dev/null
+++ b/client/src/components/bookings/ClassTeacherCard.jsx
@@ -0,0 +1,185 @@
+import { memo, useEffect, useState } from "react";
+
+import {
+ Badge,
+ Box,
+ Card,
+ Flex,
+ Heading,
+ HStack,
+ Image,
+ Text,
+ VStack,
+} from "@chakra-ui/react";
+
+import { FaMicrophoneAlt, FaMusic } from "react-icons/fa";
+import {
+ GiAbstract001,
+ GiBallerinaShoes,
+ GiBoombox,
+ GiCartwheel,
+ GiTambourine,
+} from "react-icons/gi";
+
+import { useAuthContext } from "../../contexts/hooks/useAuthContext";
+import { useBackendContext } from "../../contexts/hooks/useBackendContext";
+import { formatDate, formatTime } from "../../utils/formatDateTime";
+
+export const ClassTeacherCard = memo(
+ ({
+ id,
+ title,
+ location,
+ date,
+ description,
+ capacity,
+ level,
+ costume,
+ performance,
+ attendeeCount = 0,
+ isDraft,
+ recurrencePattern,
+ isRecurring,
+ startDate,
+ endDate,
+ startTime,
+ endTime,
+ navigate,
+ setSelectedCard,
+ tags,
+ onOpen,
+ }) => {
+ const [openTeacherModal, setOpenTeacherModal] = useState(false);
+
+ // const closeTeacherModal = () => {
+ // setOpenTeacherModal(false);
+ // };
+
+ const handleClickModal = () => {
+ const modalData = {
+ id,
+ title,
+ location,
+ date,
+ description,
+ capacity,
+ level,
+ costume,
+ performances: performance,
+ isDraft,
+ recurrencePattern,
+ isRecurring,
+ startDate,
+ endDate,
+ attendeeCount,
+ startTime,
+ endTime,
+ };
+ setOpenTeacherModal(true);
+ setSelectedCard(modalData);
+ onOpen(modalData);
+ };
+
+ const formattedDate = date ? formatDate(date) : null;
+ const formattedStartTime = startTime ? formatTime(startTime) : null;
+ const formattedEndTime = endTime ? formatTime(endTime) : null;
+ const getIcon = () => {
+ const iconSize = 50;
+ switch (tags[0]?.id) {
+ case 1:
+ return ;
+ case 2:
+ return ;
+ case 3:
+ return ;
+ case 4:
+ return ;
+ case 5:
+ return ;
+ case 6:
+ return ;
+ case 7:
+ return ;
+ default:
+ return ;
+ }
+ };
+
+ return (
+
+
+ {attendeeCount} {attendeeCount === 1 ? "Person" : "People"} RSVP'd
+
+
+
+ {getIcon()}
+
+
+
+ {title}
+
+
+ {location}
+
+
+ {formattedDate} · {formattedStartTime} – {formattedEndTime}
+
+
+
+
+ );
+ }
+);
diff --git a/client/src/components/bookings/CompletedIndicator.png b/client/src/components/bookings/CompletedIndicator.png
deleted file mode 100644
index 9310fc72..00000000
Binary files a/client/src/components/bookings/CompletedIndicator.png and /dev/null differ
diff --git a/client/src/components/bookings/ConfirmationModal.jsx b/client/src/components/bookings/ConfirmationModal.jsx
index 38595707..c297b469 100644
--- a/client/src/components/bookings/ConfirmationModal.jsx
+++ b/client/src/components/bookings/ConfirmationModal.jsx
@@ -1,38 +1,68 @@
-import { Button, Modal, ModalOverlay, ModalHeader, ModalContent, ModalCloseButton, ModalBody, ModalFooter, Box, Icon, VStack } from "@chakra-ui/react";
-import CompletedIndicator from "./CompletedIndicator.png"
-
+import {
+ Box,
+ Button,
+ Modal,
+ ModalBody,
+ ModalContent,
+ ModalFooter,
+ ModalOverlay,
+ Text,
+ VStack,
+} from "@chakra-ui/react";
+import { MdCheckCircle } from "react-icons/md";
export const ConfirmationModal = ({ isOpen, onClose, card }) => {
return (
-
-
-
-
-
-
-
- 
-
+ {}}
+ >
+
+
+
+
+
+
+
+
+
+ Sorry to See You Go!
+
+
+ Your RSVP has been removed for {card ? card.title : "N/A"}
+
-
- You've successfully cancelled {card ? card.title : "N/A"}.
-
-
-
-
-
-
+
+
+
+
+
+
);
};
+
+export default ConfirmationModal;
diff --git a/client/src/components/bookings/InfoModal.jsx b/client/src/components/bookings/InfoModal.jsx
index 434ee57b..7e9b79d8 100644
--- a/client/src/components/bookings/InfoModal.jsx
+++ b/client/src/components/bookings/InfoModal.jsx
@@ -12,8 +12,8 @@ import {
ModalOverlay,
Text,
} from "@chakra-ui/react";
-import { formatDate } from "../../utils/formatDateTime";
+import { formatDate } from "../../utils/formatDateTime";
export const InfoModal = ({
isOpen,
diff --git a/client/src/components/bookings/TeacherCancelModal.jsx b/client/src/components/bookings/TeacherCancelModal.jsx
index 9949a6fd..fc23f363 100644
--- a/client/src/components/bookings/TeacherCancelModal.jsx
+++ b/client/src/components/bookings/TeacherCancelModal.jsx
@@ -38,6 +38,7 @@ export const TeacherCancelModal = ({
status: "error",
duration: 4000,
isClosable: true,
+ position: "top",
});
}
};
@@ -51,16 +52,36 @@ export const TeacherCancelModal = ({
Delete class?
- You are deleting {classData.title}. This action can't be undone.
+
+ You are deleting {classData.title}. This action can't be undone.
+
-
-
diff --git a/client/src/components/bookings/TeacherConfirmationModal.jsx b/client/src/components/bookings/TeacherConfirmationModal.jsx
index 8a5cd486..eab021ff 100644
--- a/client/src/components/bookings/TeacherConfirmationModal.jsx
+++ b/client/src/components/bookings/TeacherConfirmationModal.jsx
@@ -1,23 +1,57 @@
-import { Icon, Button, Modal, ModalOverlay, ModalContent, ModalFooter, Flex, Text, VStack } from "@chakra-ui/react";
+import {
+ Button,
+ Flex,
+ Icon,
+ Modal,
+ ModalContent,
+ ModalFooter,
+ ModalOverlay,
+ Text,
+ VStack,
+} from "@chakra-ui/react";
import { BsCheck } from "react-icons/bs";
export const TeacherConfirmationModal = ({ isOpen, onClose }) => {
return (
-
+
-
-
+
+
- Class Deleted
-
-
-
+
+ Class Deleted
+
+
+
+
);
-};
\ No newline at end of file
+};
diff --git a/client/src/components/bookings/TeacherEditModal.jsx b/client/src/components/bookings/TeacherEditModal.jsx
index 57017a61..f3778e06 100644
--- a/client/src/components/bookings/TeacherEditModal.jsx
+++ b/client/src/components/bookings/TeacherEditModal.jsx
@@ -66,6 +66,9 @@ export const TeacherEditModal = ({
performances,
setRefresh,
coreqId,
+ tags = [],
+ magic,
+ setMagic,
}) => {
const { backend } = useBackendContext();
const [isPublishing, setIsPublishing] = useState(false);
@@ -77,24 +80,41 @@ export const TeacherEditModal = ({
classData?.instructor ?? ""
);
const formRef = useRef(null);
- const [tags, setTags] = useState([]);
+ const [tagTypes, setTagTypes] = useState([]);
const toast = useToast();
- const [classType, setClassType] = useState(classData?.classType ?? "1");
+ console.log("type", tags[0]?.id);
+ const [classType, setClassType] = useState(tags[0]?.id ?? "-1");
- useMemo(() => {
- if (backend) {
- backend.get("/tags").then((response) => {
- setTags(response.data);
- });
- backend.get("/teachers/activated").then((response) => {
- setTeachers(response.data);
- });
+ useEffect(() => {
+ if (backend && classData?.id) {
+ Promise.all([
+ backend.get("/tags"),
+ backend.get("/teachers/activated"),
+ backend.get(`/classes-taught/instructor/${classData.id}`),
+ ])
+ .then(
+ ([tagResponse, activatedTeachersResponse, instructorResponse]) => {
+ setTagTypes(tagResponse.data);
+ setTeachers(activatedTeachersResponse.data);
+ const teacher = instructorResponse.data;
+ if (teacher && Array.isArray(teacher) && teacher[0]) {
+ setSelectedInstructor(teacher[0]?.id);
+ } else {
+ setSelectedInstructor("");
+ }
+ }
+ )
+ .catch((error) => {
+ console.log("Error fetching data:", error);
+ });
}
- }, [backend]);
+ }, [backend, classData?.id]);
+
const onBack = () => {
setCurrentModal("view");
};
+
const onSave = async (draft) => {
try {
// PUT request to save class data
@@ -111,26 +131,30 @@ export const TeacherEditModal = ({
is_recurring: recurrencePattern !== "none",
isDraft: draft,
};
- console.log(classData);
+ // console.log(classData);
await backend.put(`/classes/${classData.id}`, updatedData);
- console.log("Updating class", classData.id, updatedData);
+ // console.log("Updating class", classData.id, updatedData);
await backend.delete(`/corequisites/class/${classData.id}`);
- await backend.put(`/classes-taught`, {
- classId: classData.id,
- teacherId: selectedInstructor,
- });
- console.log("Updating instructor", classData.id, selectedInstructor);
- if (performanceId) {
+ if (selectedInstructor && parseInt(selectedInstructor) !== -1) {
+ await backend.put(`/classes-taught`, {
+ classId: classData.id,
+ teacherId: selectedInstructor,
+ });
+ } else {
+ await backend.delete(`/classes-taught/${classData.id}`);
+ }
+ // console.log("Updating instructor", classData.id, selectedInstructor);
+ if (performanceId && parseInt(performanceId) !== -1) {
await backend.put(
`/corequisites/${classData.id}/${performanceId}`,
updatedData
);
- console.log(
- "Updating corequisites",
- classData.id,
- performanceId,
- updatedData
- );
+ // console.log(
+ // "Updating corequisites",
+ // classData.id,
+ // performanceId,
+ // updatedData
+ // );
}
if (recurrencePattern !== "none") {
@@ -140,7 +164,7 @@ export const TeacherEditModal = ({
stringToDate(endDate),
recurrencePattern
);
- console.log("classdates", classDates);
+ // console.log("classdates", classDates);
for (const classDate of classDates) {
if (classDate && startTime && endTime) {
const scheduledClassBody = {
@@ -182,7 +206,14 @@ export const TeacherEditModal = ({
isDraft: draft,
}));
- if (classType !== "") {
+ if (classData?.id && classType !== "-1") {
+ tags.map(async (tag) => {
+ await backend
+ .delete(`/class-tags/${classData.id}/${tag.id}`)
+ .catch((err) => {
+ console.error(err);
+ });
+ });
await backend
.post("/class-tags", {
classId: classData.id,
@@ -230,7 +261,8 @@ export const TeacherEditModal = ({
const [classTitle, setClassTitle] = useState(classData?.title);
const [location, setLocation] = useState(classData?.location);
const [startDate, setStartDate] = useState(
- isDefaultDate(classData?.startDate) || isDefaultDate(classData?.date)
+ (isDefaultDate(classData?.startDate) && !classData?.date) ||
+ (isDefaultDate(classData?.date) && !classData?.startDate)
? ""
: classData?.startDate
? formatDate(classData.startDate)
@@ -270,9 +302,6 @@ export const TeacherEditModal = ({
const onStartTimeChange = (e) => setStartTime(e.target.value);
const onEndTimeChange = (e) => setEndTime(e.target.value);
- useEffect(() => {
- console.log();
- }, []);
return (
setSelectedInstructor(e.target.value)}
maxWidth="300px"
bg="white"
- color="black"
+ color={selectedInstructor === "" ? "gray.400" : "black"}
+ sx={{
+ "& option": {
+ color: "black",
+ backgroundColor: "white",
+ },
+ "& option[disabled]": {
+ color: "gray.400",
+ },
+ }}
>
{teachers.map((teacher) => (
+
+ ClassType
+
+
Performances
);
diff --git a/client/src/components/bookings/teacherView/DeleteConfirmModal.jsx b/client/src/components/bookings/teacherView/DeleteConfirmModal.jsx
index 2a607f5a..4bf1eab6 100644
--- a/client/src/components/bookings/teacherView/DeleteConfirmModal.jsx
+++ b/client/src/components/bookings/teacherView/DeleteConfirmModal.jsx
@@ -1,32 +1,84 @@
-import { Button, Modal, ModalOverlay, ModalHeader, ModalContent, ModalBody, ModalFooter, Flex, Text, useToast } from "@chakra-ui/react";
+import {
+ Button,
+ Flex,
+ Modal,
+ ModalBody,
+ ModalContent,
+ ModalFooter,
+ ModalHeader,
+ ModalOverlay,
+ Text,
+ useToast,
+} from "@chakra-ui/react";
-export const DeleteConfirmModal = ({ isOpen, setIsDeleting, onConfirmDelete, title, id }) => {
+export const DeleteConfirmModal = ({
+ isOpen,
+ setIsDeleting,
+ onConfirmDelete,
+ title,
+ id,
+}) => {
+ const onClose = () => {
+ setIsDeleting(false);
+ };
- const onClose = () => {
- setIsDeleting(false);
- };
+ return (
+
+
+
+
+ Are you sure you want to delete this event?
+
+
+ You're cancelling{" "}
+
+ {title ? title : "N/A"}
+
+ . This action can't be undone.
+
- return (
-
-
-
- Are you sure you want to delete this event?
-
- You're cancelling {title ? title : "N/A"}. This action can't be undone.
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
);
-};
\ No newline at end of file
+};
diff --git a/client/src/components/bookings/teacherView/TeacherEventViewModal.jsx b/client/src/components/bookings/teacherView/TeacherEventViewModal.jsx
index d4c8c76a..4425a88f 100644
--- a/client/src/components/bookings/teacherView/TeacherEventViewModal.jsx
+++ b/client/src/components/bookings/teacherView/TeacherEventViewModal.jsx
@@ -30,7 +30,7 @@ import {
VStack,
} from "@chakra-ui/react";
-import { calcLength } from "framer-motion";
+import { AiOutlineArrowLeft } from "react-icons/ai";
import { BiSolidEdit } from "react-icons/bi";
import { BsChevronLeft } from "react-icons/bs";
import {
@@ -38,9 +38,7 @@ import {
FaCircleExclamation,
FaRegTrashCan,
} from "react-icons/fa6";
-import { MdArrowBackIosNew, MdMoreHoriz } from "react-icons/md";
-import { useNavigate } from "react-router-dom";
-import { createEmitAndSemanticDiagnosticsBuilderProgram } from "typescript";
+import { MdMoreHoriz } from "react-icons/md";
import { useAuthContext } from "../../../contexts/hooks/useAuthContext";
import { useBackendContext } from "../../../contexts/hooks/useBackendContext";
@@ -52,7 +50,6 @@ import { CreateEvent } from "../../forms/createEvent";
import { EventRSVP } from "../../rsvp/eventRsvp";
import { DeleteConfirmModal } from "./DeleteConfirmModal";
import { QRCode } from "./qrcode/QRCode.jsx";
-import { AiOutlineArrowLeft } from "react-icons/ai";
function TeacherEventViewModal({
isOpenProp,
@@ -73,6 +70,8 @@ function TeacherEventViewModal({
corequisites,
triggerRefresh,
handleResolveCoreq = () => {},
+ tags = [],
+ magic,
}) {
const { currentUser, role } = useAuthContext();
const { backend } = useBackendContext();
@@ -85,14 +84,10 @@ function TeacherEventViewModal({
const [openSuccessModal, setOpenSuccessModal] = useState(false);
- // temp for image
- const [imageSrc, setImageSrc] = useState("");
-
const [isEditing, setIsEditing] = useState(false);
const [isDeleting, setIsDeleting] = useState(false);
const [isConfirmDelete, setIsConfirmDelete] = useState(false);
-
// disclosure for rsvp
const { isOpen, onOpen, onClose } = useDisclosure();
@@ -168,6 +163,7 @@ function TeacherEventViewModal({
status: "error",
duration: 5000,
isClosable: true,
+ position: "top",
});
}
};
@@ -178,15 +174,27 @@ function TeacherEventViewModal({
handleClose();
};
- useEffect(() => {
- if (isOpenProp && !imageSrc) {
- fetch("https://dog.ceo/api/breeds/image/random") // for fun
- .then((res) => res.json())
- .then((data) => setImageSrc(data.message));
- }
- }, [imageSrc, isOpenProp]);
+ const fetchTags = async () => {
+ if (!id) return;
+ try {
+ const response = await backend.get(`/event-tags/tags/${id}`);
+ if (response.data && response.data.length > 0) {
+ const responseTags = response.data.map((tagItem) => ({
+ id: tagItem.tag_id,
+ name: tagItem.tag,
+ }));
+ setTagData(responseTags);
+ } else {
+ setTagData([]);
+ }
+ } catch (error) {
+ console.error("Error fetching tags:", error);
+ setTagData([]);
+ }
+ };
+ const tagData = tags;
return (
<>
@@ -220,6 +228,7 @@ function TeacherEventViewModal({
{title}
@@ -240,6 +249,7 @@ function TeacherEventViewModal({
level: level,
capacity: capacity,
date: formFormattedDate,
+ tag: tags[0]?.id,
}}
onClose={handleSaveChanges}
triggerRefresh={triggerRefresh}
@@ -272,14 +282,17 @@ function TeacherEventViewModal({
>
-
+
-
+
- {/*
-
- Location:
- {location ? location : "N/A"}
-
-
- Date:
- {formattedDate ? formattedDate : "N/A"}
-
- */}
-
-
-
-
-
+
+
+
-
+
{" "}
{rsvpnum ? rsvpnum : 0} People Enrolled
- Settings
+ Settings
- */}
+ }
+ size="lg"
+ mt="-2"
+ onClick={onOpen}
+ ref={notifRef}
+ aria-label="Notifications"
+ bg="white"
/>
{
Students
- */}
+ }
+ size="lg"
+ mt="-2"
+ onClick={onOpen}
+ ref={notifRef}
+ aria-label="Notifications"
+ bg="white"
/>
{
{student?.firstName} {student?.lastName}
- */}
+ }
+ size="lg"
+ mt="-2"
+ onClick={onOpen}
+ ref={notifRef}
+ aria-label="Notifications"
+ bg="white"
/>
{
Teachers
- */}
+ }
+ size="lg"
+ mt="-2"
+ onClick={onOpen}
+ ref={notifRef}
+ aria-label="Notifications"
+ bg="white"
/>
{
{teacher?.firstName} {teacher?.lastName}
- */}
+ }
+ size="lg"
+ mt="-2"
+ onClick={onOpen}
+ ref={notifRef}
+ aria-label="Notifications"
+ bg="white"
/>
{},
-}) {
+ tags = [],
+}) => {
const { currentUser, role } = useAuthContext();
const { backend } = useBackendContext();
const [openSuccessModal, setOpenSuccessModal] = useState(false);
- // temp for image
- const [imageSrc, setImageSrc] = useState("");
+ const [teacherName, setTeacherName] = useState("");
+ const [startTime, setStartTime] = useState("");
+ const [endTime, setEndTime] = useState("");
+ const [description, setDescription] = useState("");
+ const [capacity, setCapacity] = useState("");
+ const [level, setLevel] = useState("");
+ const [coClasses, setCoClasses] = useState([]);
+
+ const getTeacherName = async () => {
+ const teacherName = await backend.get(`/classes-taught/instructor/${id}`);
+ setTeacherName(
+ teacherName.data[0].firstName + " " + teacherName.data[0].lastName
+ );
+ };
+
+ const getStartTime = async () => {
+ const data = await backend.get(`/scheduled-classes/${id}`);
+ setStartTime(data.data[0].startTime);
+ setEndTime(data.data[0].endTime);
+ };
const enrollInClass = async () => {
const users = await backend.get(`/users/${currentUser.uid}`);
@@ -80,20 +106,36 @@ function ClassInfoModal({
enrollInClass();
return;
}
+ // if there exisits a coreq and not enrolled in a coreq,
if (corequisites.some((coreq) => !coreq.enrolled)) {
+ // let coReqWarningModal know that it should programatically display an event info modal version
+ setModalIdentity("class");
handleResolveCoreq();
} else {
enrollInClass();
}
};
+ const initClass = async () => {
+ const classData = await backend.get(`/classes/${id}`);
+ setDescription(classData.data[0].description);
+ setCapacity(classData.data[0].capacity);
+ setLevel(classData.data[0].level);
+ };
+
+ const getCoClasses = async () => {
+ const response = await backend.get(`/corequisites/class/${id}`);
+ setCoClasses(response.data);
+ };
+
useEffect(() => {
- if (isOpenProp && !imageSrc) {
- fetch("https://dog.ceo/api/breeds/image/random") // for fun
- .then((res) => res.json())
- .then((data) => setImageSrc(data.message));
+ if (isOpenProp) {
+ getTeacherName();
+ getStartTime();
+ initClass();
+ getCoClasses();
}
- }, [imageSrc, isOpenProp]);
+ }, [isOpenProp]);
return (
<>
@@ -105,121 +147,175 @@ function ClassInfoModal({
/>
-
- {title}
-
+
+
+
+ }
+ onClick={handleClose}
+ aria-label="Back"
+ variant="ghost"
+ fontSize={"2xl"}
+ p={4}
+ ml={-4}
+ />
+
+ {tags.map((tag, index) => (
+
+ {tag.tag}
+
+ ))}
+
+
+ {title}
+
+
+
+ {/* */}
+ Taught by {teacherName ? teacherName : "Unknown"}
+
+ {description
+ ? `Description: ${description}`
+ : "No description available."}
+ {" "}
+
+
+
+ {formatDate(date)} · {formatTime(startTime)} –{" "}
+ {formatTime(endTime)}
+
+ Location: {location}
+
+
+
+ Level
+ {level}
+
+
+ Capacity
+ {capacity}
+
+
+
- {!isCorequisiteSignUp && (
-
-
-
-
-
- Recommended
-
-
- {!corequisites || corequisites.length === 0 ? (
- No corequisites for this class
- ) : (
-
- {corequisites.map((coreq, index) => (
-
-
- {coreq.title}
-
- ))}
-
- )}
-
+
+
+ Recommended Prerequisite(s)
+
+
+ We recommend taking these classes before enrolling in this
+ series.
+
+ {coClasses && coClasses.length > 0 ? (
+
+ {coClasses.map((prerequisite) => (
+
+ {prerequisite.title}
+
+ ))}
-
- )}
-
-
+ ) : (
+
+ No prerequisites for this class
+
+ )}
-
-
- Location
- {location}
-
-
- Date
- {date}
-
-
-
-
-
- Time
- pass in time prop and use it
-
- Description:
- {description}
+
+
+ Performance(s)
+
+
+ At the end of the class period, students will perform in a
+ final performance.
+
+ {corequisites && corequisites.length > 0 ? (
+
+ {corequisites.map((prerequisite) => (
+
+ {prerequisite.title}
+
+ ))}
+
+ ) : (
+
+ No performances for this class
+
+ )}
-
-
-
- Capacity
- {capacity}
-
-
- Level
- {level}
-
-
-
-
-
- Classes
- {costume}
-
-
-
+
{role === "student" && (
)}
@@ -237,6 +333,6 @@ function ClassInfoModal({
);
-}
+};
export default ClassInfoModal;
diff --git a/client/src/components/discovery/CoReqWarningModal.jsx b/client/src/components/discovery/CoReqWarningModal.jsx
index 60ee3703..b7d78ec4 100644
--- a/client/src/components/discovery/CoReqWarningModal.jsx
+++ b/client/src/components/discovery/CoReqWarningModal.jsx
@@ -3,119 +3,192 @@ import { useEffect, useState } from "react";
import {
Box,
Button,
+ Center,
List,
ListItem,
Modal,
ModalBody,
+ ModalCloseButton,
ModalContent,
ModalOverlay,
+ Stack,
Text,
VStack,
} from "@chakra-ui/react";
-import ClassInfoModal from "./ClassInfoModal";
-import EventInfoModal from "./EventInfoModal";
+import { useAuthContext } from "../../contexts/hooks/useAuthContext";
+import { useBackendContext } from "../../contexts/hooks/useBackendContext";
+import SuccessSignupModal from "./SuccessSignupModal";
function CoReqWarningModal({
- origin,
+ title,
+ user,
+ class_id = null,
+ event_id = null,
isOpenProp,
lstCorequisites,
+ modalIdentity,
+ setModalIdentity,
+ filteredCorequisites,
+ setFilteredCorequisites,
+ eventId,
handleClose = () => {},
killModal = () => {},
}) {
- const [openCoreq, setOpenCoreq] = useState(false);
- const [coreq, setCoreq] = useState(null);
+ const { backend } = useBackendContext();
+ const [openSuccessModal, setOpenSuccessModal] = useState(false);
+ const [withCoreqFlag, setWithCoreqFlag] = useState(false);
- const signup = () => {
- setOpenCoreq(true);
+ const enrollInClass = async (id) => {
+ if (user.data[0]) {
+ await backend.post(`/class-enrollments`, {
+ studentId: user.data[0].id,
+ classId: id,
+ attendance: null,
+ });
+ }
+ };
+
+ const enrollInEvent = async (id) => {
+ const currentCheckIn = await backend.get(`/event-enrollments/test`, {
+ params: {
+ student_id: user.data[0].id,
+ event_id: id,
+ },
+ });
+ if (user.data[0] && !currentCheckIn.data.exists) {
+ console.log("Enrolling in event:", id);
+ const req = await backend.post(`/event-enrollments/`, {
+ student_id: user.data[0].id,
+ event_id: id,
+ attendance: null,
+ });
+ if (req.status === 201) {
+ setOpenSuccessModal(true);
+ }
+ } else {
+ console.log("Already signed up for this event!");
+ }
+ };
+
+ const signupWithCoreq = async () => {
+ try {
+ setWithCoreqFlag(true);
+ if (class_id === null) {
+ await enrollInEvent(event_id);
+ for (const coreq of lstCorequisites) {
+ if (coreq.enrolled === false) {
+ await enrollInClass(coreq.id);
+ }
+ }
+ } else {
+ await enrollInClass(class_id);
+ for (const coreq of lstCorequisites) {
+ if (coreq.enrolled === false) {
+ console.log("Enrolling in corequisite class:", coreq.id);
+ await enrollInEvent(coreq.id);
+ }
+ }
+ // lstCorequisites.forEach((coreq) => {
+ // if (coreq.enrolled === false) {
+ // console.log("Enrolling in corequisite class:", coreq.id);
+ // await enrollInEvent(coreq.id);
+ // }
+ // });
+ }
+ setOpenSuccessModal(true);
+ killModal();
+ } catch (error) {
+ console.error("Error during signup:", error);
+ }
+ };
+
+ const signupWithoutCoreq = async () => {
+ // setOpenCoreq(true);
+ setWithCoreqFlag(false);
+ if (class_id === null) {
+ await enrollInEvent(event_id);
+ } else {
+ await enrollInClass(class_id);
+ }
+ setOpenSuccessModal(true);
killModal();
};
const cancelSignUp = () => {
- setOpenCoreq(false);
handleClose();
killModal();
};
- useEffect(() => {
- if (lstCorequisites.length > 0) {
- setCoreq(
- lstCorequisites.find((coreq) => coreq.enrolled === false) || null
- );
- }
- }, [lstCorequisites]);
-
- if (!coreq || !lstCorequisites || lstCorequisites.length === 0) {
+ if (!lstCorequisites || lstCorequisites.length === 0) {
return null;
}
return (
- {origin.toUpperCase() === "CLASS" ? (
-
- ) : (
-
- )}
-
+ setOpenSuccessModal(false)}
+ title={title}
+ corequisites={lstCorequisites}
+ withCoreqFlag={withCoreqFlag}
+ />
{}}
+ onClose={cancelSignUp}
>
+
+
- You still need to sign up for...
-
-
- {lstCorequisites && lstCorequisites.length > 0
- ? coreq?.title
- : ""}
+
+ Performance Participation Required
+
+
+ To enroll in {title}, it is recommended that you participate
+ in the end-of-session performance
+ {lstCorequisites.map((coreq, i) => (
+
+ {coreq.title}
+ {i < lstCorequisites.length - 1 ? ", " : ""}
+
+ ))}
+ Do you agree to take part in the performance?
-
+
diff --git a/client/src/components/discovery/CompletedIndicator.png b/client/src/components/discovery/CompletedIndicator.png
deleted file mode 100644
index 9310fc72..00000000
Binary files a/client/src/components/discovery/CompletedIndicator.png and /dev/null differ
diff --git a/client/src/components/discovery/ConfirmationModal.jsx b/client/src/components/discovery/ConfirmationModal.jsx
index e92ab1b4..c2a0f550 100644
--- a/client/src/components/discovery/ConfirmationModal.jsx
+++ b/client/src/components/discovery/ConfirmationModal.jsx
@@ -1,39 +1,64 @@
-import { Button, Modal, ModalOverlay, ModalHeader, ModalContent, ModalBody, ModalFooter, Box, Icon, VStack } from "@chakra-ui/react";
-import { MdCheck } from "react-icons/md";
+import {
+ Box,
+ Button,
+ Icon,
+ Modal,
+ ModalBody,
+ ModalContent,
+ ModalFooter,
+ ModalHeader,
+ ModalOverlay,
+ VStack,
+} from "@chakra-ui/react";
+import { MdCheck } from "react-icons/md";
export const ConfirmationModal = ({ isOpen, onClose, title }) => {
-
return (
-
-
-
-
-
-
-
-
-
-
-
-
- You've successfully cancelled {title ? title : "N/A"}.
-
+
+
+
+
+
+
+
+
+
+
+ You've successfully cancelled {title ? title : "N/A"}.
+
-
-
-
-
+
+
+
+
);
-};
\ No newline at end of file
+};
diff --git a/client/src/components/discovery/Discovery.jsx b/client/src/components/discovery/Discovery.jsx
index 980ba6f3..d0c99755 100644
--- a/client/src/components/discovery/Discovery.jsx
+++ b/client/src/components/discovery/Discovery.jsx
@@ -1,72 +1,228 @@
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
-import { Box, Button, Flex, Input, InputGroup, InputLeftElement, VStack, Badge } from "@chakra-ui/react";
+import {
+ Box,
+ Button,
+ Center,
+ Flex,
+ Tab,
+ TabList,
+ TabPanel,
+ TabPanels,
+ Tabs,
+ VStack,
+} from "@chakra-ui/react";
+import { useAuthContext } from "../../contexts/hooks/useAuthContext";
import { useBackendContext } from "../../contexts/hooks/useBackendContext";
import { Navbar } from "../navbar/Navbar";
+import { SearchBar } from "../searchbar/SearchBar";
import { ClassCard } from "../shared/ClassCard";
import { EventCard } from "../shared/EventCard";
-import { useAuthContext } from "../../contexts/hooks/useAuthContext";
-import { FaSearch } from "react-icons/fa";
-import { SearchBar } from "../searchbar/SearchBar";
export const Discovery = () => {
// Active Tab Logic
- const [activeTab, setActiveTab] = useState("classes"); // Default to showing classes
+ const [tabIndex, setTabIndex] = useState(0);
const [searchInput, setSearchInput] = useState("");
const [refresh, setRefresh] = useState(0);
const [lastToggledTag, setLastToggledTag] = useState(null);
+ const [classes, setClasses] = useState([]);
+ const [events, setEvents] = useState([]);
+ const [tags, setTags] = useState({});
+ const [tagFilter, setTagFilter] = useState({});
+ const [initialTagFilter, setInitialTagFilter] = useState({});
+ const [classTagsMap, setClassTagsMap] = useState({});
+ const [eventTagsMap, setEventTagsMap] = useState({});
+ const [user, setUser] = useState(null);
- const { currentUser } = useAuthContext();
+ const { currentUser, role } = useAuthContext();
+ const { backend } = useBackendContext();
- const toggleClasses = () => {
- setActiveTab("classes");
- };
+ // API endpoint configuration
+ const getApiEndpoints = useCallback(
+ () => ({
+ events: {
+ published: role === "student" ? "/events/published" : "/events",
+ search:
+ role === "student" ? "/events/search/published" : "/events/search",
+ },
+ classes: {
+ published:
+ role === "student" ? "/classes/published" : "/classes/scheduled",
+ search:
+ role === "student" ? "/classes/search/published" : "/classes/search",
+ },
+ }),
+ [role]
+ );
- const toggleEvents = () => {
- setActiveTab("events");
- };
+ // Fetch functions
+ const fetchAllEvents = useCallback(async () => {
+ try {
+ const endpoints = getApiEndpoints();
+ const res = await backend.get(endpoints.events.published);
+ setEvents(res.data);
+ } catch (error) {
+ console.error("Error fetching all events:", error);
+ }
+ }, [backend, getApiEndpoints]);
- // Fetching Class and Event Data
- const { backend } = useBackendContext();
+ const fetchAllClasses = useCallback(async () => {
+ try {
+ const endpoints = getApiEndpoints();
+ const res = await backend.get(endpoints.classes.published);
+ setClasses(res.data);
+ } catch (error) {
+ console.error("Error fetching all classes:", error);
+ }
+ }, [backend, getApiEndpoints]);
- const [classes, setClasses] = useState([]);
- const [events, setEvents] = useState([]);
+ const fetchEventsByTag = useCallback(
+ async (tagId) => {
+ try {
+ const res = await backend.get(`/event-tags/events/${tagId}`);
+ setEvents(res.data);
+ } catch (error) {
+ console.error("Error fetching events for specified tag:", error);
+ }
+ },
+ [backend]
+ );
- const [tags, setTags] = useState({});
- const [tagFilter, setTagFilter] = useState({});
+ const fetchClassesByTag = useCallback(
+ async (tagId) => {
+ try {
+ const res = await backend.get(`/class-tags/classes/${tagId}`);
+ setClasses(res.data);
+ } catch (error) {
+ console.error("Error fetching classes for specified tag:", error);
+ }
+ },
+ [backend]
+ );
+ // Search functions with proper empty query handling
+ const searchEvents = useCallback(
+ async (query) => {
+ try {
+ if (!query || query.trim() === "") {
+ await fetchAllEvents();
+ return;
+ }
- // this will be an array of users
- const [user, setUser] = useState(null);
- useEffect(() => {
- const fetchUserData = () => {backend.get(`/users/${currentUser.uid}`).then(res => setUser(res))};
- fetchUserData();
- }, [backend, currentUser])
+ const endpoints = getApiEndpoints();
+ const res = await backend.get(
+ `${endpoints.events.search}/${query.trim()}`
+ );
+ setEvents(res.data);
+ } catch (error) {
+ console.error("Error searching events:", error);
+ }
+ },
+ [backend, fetchAllEvents, getApiEndpoints]
+ );
+ const searchClasses = useCallback(
+ async (query) => {
+ try {
+ if (!query || query.trim() === "") {
+ await fetchAllClasses();
+ return;
+ }
+ const endpoints = getApiEndpoints();
+ const res = await backend.get(
+ `${endpoints.classes.search}/${query.trim()}`
+ );
+ setClasses(res.data);
+ } catch (error) {
+ console.error("Error searching classes:", error);
+ }
+ },
+ [backend, fetchAllClasses, getApiEndpoints]
+ );
+
+ // Tag filter handlers
+ const handleFilterToggle = useCallback(
+ (id) => () => {
+ setTagFilter((prev) => ({
+ ...prev,
+ [id]: !prev[id],
+ }));
+ setLastToggledTag(id);
+ },
+ []
+ );
+
+ const handleClassFilterToggle = useCallback(
+ (id) => () => {
+ setTagFilter((prev) => ({
+ ...prev,
+ [id]: !prev[id],
+ }));
+ setLastToggledTag(id);
+ },
+ []
+ );
+
+ // Fetch user data
useEffect(() => {
- const fetchData = async () => {
- // Fetch and Store Classes Information
+ const fetchUserData = async () => {
try {
- const response = await backend.get("/classes/scheduled");
- setClasses(response.data);
+ const res = await backend.get(`/users/${currentUser.uid}`);
+ setUser(res.data);
} catch (error) {
- console.error("Error fetching classes:", error);
+ console.error("Error fetching user data:", error);
}
+ };
+
+ if (currentUser?.uid) {
+ fetchUserData();
+ }
+ }, [backend, currentUser]);
- // Fetch and Store Events Information
+ // Initial data fetch
+ useEffect(() => {
+ const fetchData = async () => {
try {
- const response = await backend.get("/events");
- setEvents(response.data);
+ // Fetch classes with tags
+ const classResponse = await backend.get(
+ role !== "student" ? "/classes/scheduled" : "/classes/published"
+ );
+ setClasses(classResponse.data);
+
+ const classTagsResponse = await backend.get(
+ "/class-tags/all-class-tags"
+ );
+ const classTags = {};
+ classTagsResponse.data.forEach((tag) => {
+ classTags[tag.classId] = tag.tagArray;
+ });
+ setClassTagsMap(classTags);
+
+ // Fetch events with tags
+ const eventResponse = await backend.get(
+ role !== "student" ? "/events" : "/events/published"
+ );
+ setEvents(eventResponse.data);
+
+ const eventTagsResponse = await backend.get(
+ "/event-tags/all-event-tags"
+ );
+ const eventTags = {};
+ eventTagsResponse.data.forEach((tag) => {
+ eventTags[tag.eventId] = tag.tagArray;
+ });
+ setEventTagsMap(eventTags);
} catch (error) {
- console.error("Error fetching events:", error);
+ console.error("Error fetching data:", error);
}
};
fetchData();
- }, [backend]);
+ }, [backend, role]);
+ // Fetch tags
useEffect(() => {
const fetchTags = async () => {
try {
@@ -78,243 +234,194 @@ export const Discovery = () => {
initialTags[tag.id] =
tag.tag.charAt(0).toUpperCase() + tag.tag.slice(1).toLowerCase();
});
-
+
setTagFilter(initialTagFilter);
+ setInitialTagFilter(initialTagFilter);
setTags(initialTags);
} catch (error) {
console.error("Error fetching tags:", error);
}
};
-
- fetchTags();
- }, [backend]); // only run once or when `backend` changes
-
- // take string as search query
- const searchEvents = async (query) => {
- try {
- const res = await backend.get(
- query ? `/events/search/${query}` : "/events"
- );
- setEvents(res.data);
- } catch (error) {
- console.error("Error fetching events:", error);
- }
- };
-
- const searchClasses = async (query) => {
- try {
- const res = await backend.get(
- query ? `/classes/search/${query}` : "/classes/scheduled"
- );
- setClasses(res.data);
- } catch (error) {
- console.error("Error fetching classes:", error);
- }
- };
- const isFilterActive = Object.values(tagFilter).some(Boolean);
-
- const handleFilterToggle = (id) => {
- setTagFilter((prev) => ({
- ...prev,
- [id]: !prev[id],
- }));
- setLastToggledTag(id);
- };
+ fetchTags();
+ }, [backend]);
+ // Tag filtering effect
useEffect(() => {
if (lastToggledTag === null) {
return;
}
-
- const active = tagFilter[lastToggledTag];
-
- if (active) {
- fetchEventsByTag(lastToggledTag);
- } else {
- fetchAllEvents();
- }
- }, [tagFilter, lastToggledTag]);
-
- const handleClassFilterToggle = (id) => () => {
- setTagFilter((prev) => ({
- ...prev,
- [id]: !prev[id],
- }));
- setLastToggledTag(id);
- };
- useEffect(() => {
- if (lastToggledTag === null) {
- return;
- }
-
const active = tagFilter[lastToggledTag];
-
- if (active) {
- fetchClassesByTag(lastToggledTag);
- } else {
- fetchAllClasses();
- }
- }, [tagFilter, lastToggledTag]);
-
- const fetchEventsByTag = async (tagId) => {
- try {
- const res = await backend.get(`/event-tags/events/${tagId}`);
- const events = res.data;
- console.log("Fetched Events for Tag", tagId, res.data);
- setEvents(events);
- } catch (error) {
- console.error("Error fetching events for specified tag:", error);
- }
- };
- const fetchAllEvents = async () => {
- try {
- const res = await backend.get("/events/published");
- setEvents(res.data);
- } catch (error) {
- console.error("Error fetching all events:", error);
- }
- }
-
- const fetchClassesByTag = async (tagId) => {
- try {
- const res = await backend.get(`/class-tags/classes/${tagId}`);
- const classes = res.data;
- setClasses(classes);
- } catch (error) {
- console.error("Error fetching events for specified tag:", error);
- }
- };
-
- const fetchAllClasses = async () => {
- try {
- const res = await backend.get("/classes/published");
- setClasses(res.data);
- } catch (error) {
- console.error("Error fetching all events:", error);
+ if (tabIndex === 1) {
+ if (active) {
+ fetchEventsByTag(lastToggledTag);
+ } else {
+ fetchAllEvents();
+ }
+ } else {
+ if (active) {
+ fetchClassesByTag(lastToggledTag);
+ } else {
+ fetchAllClasses();
+ }
}
- }
+ }, [
+ tagFilter,
+ lastToggledTag,
+ fetchAllEvents,
+ fetchAllClasses,
+ fetchEventsByTag,
+ fetchClassesByTag,
+ tabIndex,
+ ]);
- // console.log(classes)
return (
-
-
-
-
-
-
-
-
-
- {
- if (activeTab === "events") {
- searchEvents(query);
- } else {
- searchClasses(query);
- }
- }}
- tags={tags}
- tagFilter={tagFilter}
- onTag={activeTab === "events" ? handleFilterToggle : handleClassFilterToggle}
- />
-
-
-
-
- {classes.map((classItem, index) => (
-
- ))}
-
-
-
- {events.map((eventItem, index) => (
-
- ))}
-
-
-
-
+ {
+ setTagFilter(initialTagFilter); // Reset tag filter when switching tabs
+ setTabIndex(index);
+ }}
+ >
+
+
+
+ Classes
+
+
+ Events
+
+
+
+
+
+
+ searchClasses(query)}
+ tags={tags}
+ tagFilter={tagFilter}
+ onTag={handleClassFilterToggle}
+ />
+
+ {classes.map((classItem, index) => {
+ const isFilterActive =
+ Object.values(tagFilter).some(Boolean);
+ const classTags = classTagsMap[classItem.id] || [];
+ if (
+ !isFilterActive ||
+ classTags.some((tag) => tagFilter[tag.id])
+ ) {
+ return (
+
+ );
+ }
+ return null;
+ })}
+
+
+
+
+
+ searchEvents(query)}
+ tags={tags}
+ tagFilter={tagFilter}
+ onTag={handleFilterToggle}
+ />
+
+ {events.map((eventItem, index) => {
+ const isFilterActive =
+ Object.values(tagFilter).some(Boolean);
+ const eventTags = eventTagsMap[eventItem.id] || [];
+ if (
+ !isFilterActive ||
+ eventTags.some((tag) => tagFilter[tag.id])
+ ) {
+ return (
+
+ );
+ }
+ return null;
+ })}
+
+
+
+
+
+
+
);
};
diff --git a/client/src/components/discovery/EventInfoModal.jsx b/client/src/components/discovery/EventInfoModal.jsx
index 69f46c74..0f863934 100644
--- a/client/src/components/discovery/EventInfoModal.jsx
+++ b/client/src/components/discovery/EventInfoModal.jsx
@@ -1,11 +1,14 @@
-import { useEffect, useState } from "react";
+import { memo, useEffect, useState } from "react";
+import { ArrowBackIcon } from "@chakra-ui/icons";
import {
Box,
Button,
+ Divider,
+ Flex,
HStack,
+ IconButton,
Image,
- Flex,
List,
ListIcon,
ListItem,
@@ -16,19 +19,20 @@ import {
ModalFooter,
ModalHeader,
ModalOverlay,
+ Tag,
Text,
VStack,
} from "@chakra-ui/react";
-import { FaTimesCircle } from "react-icons/fa";
-import { FaCheckCircle } from "react-icons/fa";
+
+import { FaCheckCircle, FaTimesCircle } from "react-icons/fa";
import { FaCircleCheck, FaCircleExclamation } from "react-icons/fa6";
import { useAuthContext } from "../../contexts/hooks/useAuthContext";
import { useBackendContext } from "../../contexts/hooks/useBackendContext";
-import {formatDate} from "../../utils/formatDateTime";
+import { formatDate, formatTime } from "../../utils/formatDateTime";
import SuccessSignupModal from "./SuccessSignupModal";
-function EventInfoModal({
+const EventInfoModal = ({
user,
isOpenProp,
handleClose,
@@ -39,63 +43,47 @@ function EventInfoModal({
date,
id,
capacity,
- costume,
+ // costume,
isCorequisiteSignUp,
corequisites,
+ // modalIdentity,
+ setModalIdentity,
+ tags = [],
handleResolveCoreq = () => {},
-}) {
+}) => {
const { backend } = useBackendContext();
const [openSuccessModal, setOpenSuccessModal] = useState(false);
- // temp for image
- const [imageSrc, setImageSrc] = useState("");
- // const [enrollmentStatus, setEnrollmentStatus] = useState(false);
-
- // // console.log(user);
-
- // useEffect(() => {
- // const checkEventEnrollment = () => {
- // // Check if already checked into event
- // console.log(user.data[0].id, id);
- // const body = {student_id: user.data[0].id, event_id: id};
- // backend.get(
- // `/event-enrollments/test`, {body}
- // ).then(res => {
- // console.log(res);
- // setEnrollmentStatus(res.data.exists);
- // });
- // };
- // if (user?.data && user?.data[0]) {
- // checkEventEnrollment();
- // } else {
- // setEnrollmentStatus(false);
- // }
- // }, [backend, id, user?.data, isOpenProp]);
+ const [startTime, setStartTime] = useState("");
+ const [endTime, setEndTime] = useState("");
+ const [callTime, setCallTime] = useState("");
+ const getStartTime = async () => {
+ const data = await backend.get(`/events/${id}`);
+ setStartTime(data.data[0].startTime);
+ setEndTime(data.data[0].endTime);
+ setCallTime(data.data[0].callTime);
+ };
const enrollInEvent = async () => {
// Check if already checked into event
- const currentCheckIn = await backend.get(
- `/event-enrollments/test`,
- {
- params:{
- student_id: user.data[0].id,
- event_id: id
- }
- }
- );
+ const currentCheckIn = await backend.get(`/event-enrollments/test`, {
+ params: {
+ student_id: user.data[0].id,
+ event_id: id,
+ },
+ });
if (user.data[0] && !currentCheckIn.data.exists) {
const req = await backend.post(`/event-enrollments/`, {
student_id: user.data[0].id,
event_id: id,
- attendance: null
+ attendance: null,
});
if (req.status === 201) {
setOpenSuccessModal(true);
}
- }
- else {
+ } else {
console.log("Already signed up for this event!");
}
};
@@ -107,6 +95,8 @@ function EventInfoModal({
}
if (corequisites.some((coreq) => !coreq.enrolled)) {
+ // let coReqWarningModal know that it should programatically display an event info modal version
+ setModalIdentity("event");
handleResolveCoreq();
} else {
enrollInEvent();
@@ -118,15 +108,12 @@ function EventInfoModal({
handleClose();
};
-
-
useEffect(() => {
- if (isOpenProp && !imageSrc) {
- fetch("https://dog.ceo/api/breeds/image/random") // for fun
- .then((res) => res.json())
- .then((data) => setImageSrc(data.message));
+ if (!isOpenProp) {
+ return;
}
- }, [imageSrc, isOpenProp]);
+ getStartTime();
+ }, [isOpenProp]);
return (
<>
@@ -145,112 +132,128 @@ function EventInfoModal({
-
- {title}
-
+
+ }
+ onClick={handleClose}
+ aria-label="Back"
+ variant="ghost"
+ fontSize={"2xl"}
+ p={4}
+ ml={-4}
+ />
+
+ {tags.map((tag, index) => (
+
+ {tag.tag}
+
+ ))}
+
+
+ {title}
+
+
-
+
+ {description
+ ? `Description: ${description}`
+ : "No description available."}
+ {" "}
+
+
+
+ {formatDate(date)} · {formatTime(startTime)} –{" "}
+ {formatTime(endTime)}
+
+ Call Time: {formatTime(callTime)}
+ Location: {location}
+
-
- {!isCorequisiteSignUp && (
-
-
- Recommended
-
- {!corequisites || corequisites.length === 0 ? (
- No corequisites for this class
- ) : (
-
- {corequisites.map((coreq, index) => (
-
-
- {coreq.title}
-
- ))}
-
- )}
-
- )}
-
-
-
-
-
-
-
- Location:
- {location}
-
-
- Date
- {formatDate(date)}
-
-
-
-
-
- Time
- need to pass in time prop
-
- Description:
- {description}
-
-
-
- Capacity
- {capacity}
-
-
+
Level
{level}
+
+ Capacity
+ {capacity}
+
-
-
+
+
+
- Classes
- {costume}
+
+ Included Classes
+
+
+ All classes that will be participating in this performance.
+
+
+ {corequisites && corequisites.length > 0 ? (
+
+ {corequisites.map((prerequisite) => (
+
+ {prerequisite.title}
+
+ ))}
+
+ ) : (
+
+ No prerequisites for this class
+
+ )}
-
+
-
+
);
-}
+};
export default EventInfoModal;
diff --git a/client/src/components/discovery/SignUpController.jsx b/client/src/components/discovery/SignUpController.jsx
index 644bf77a..3c90584d 100644
--- a/client/src/components/discovery/SignUpController.jsx
+++ b/client/src/components/discovery/SignUpController.jsx
@@ -17,59 +17,36 @@ function SignUpController({
setOpenRootModal,
class_id = null,
event_id = null,
+ tags = [],
...infoProps
}) {
const { backend } = useBackendContext();
const { currentUser } = useAuthContext();
const [openCoreqModal, setOpenCoreqModal] = useState(false);
const [corequisites, setCorequisites] = useState([]);
+ // Is null as a initial state in this case okay? Semantically it makes sense to me.
+ const [modalIdentity, setModalIdentity] = useState(null);
+ const [coReqResponse, setCoreqResponse] = useState(null);
+ const [filteredCorequisites, setFilteredCorequisites] = useState([]);
+ const [tag, setTags] = useState([]);
+ const [teacherName, setTeacherName] = useState("");
const fetchCorequirements = useCallback(async () => {
- const id = class_id !== null ? class_id : event_id;
- const COREQUESITE_ROUTE =
- class_id !== null
- ? `/classes/corequisites/${id}`
- : `/events/corequisites/${id}`;
-
- const ENROLLMENT_ROUTE =
- class_id === null ? "/class-enrollments" : "/event-enrollments";
-
- const fetchEnrollments = async (coreq) => {
- try {
- const enrollment = await backend
- .get(ENROLLMENT_ROUTE)
- .then((res) => res.data);
-
- const user = await backend
- .get(`/users/${currentUser.uid}`)
- .then((res) => res.data[0]);
-
- const userEnrollments = enrollment
- .filter((event) => event.studentId === user.id)
- .map((event) => {
- if (class_id === null) {
- return event.classId;
- } else {
- return event.eventId;
- }
- });
-
- const corequisitesWithEnrollmentStatus = coreq.map((coreq) => {
- if (userEnrollments.includes(coreq.id)) {
- return { ...coreq, enrolled: true };
- }
- return coreq;
- });
- setCorequisites(corequisitesWithEnrollmentStatus);
- } catch (error) {
- console.error("Error fetching enrolled events or users:", error);
- }
- };
-
- const response = await backend.get(COREQUESITE_ROUTE);
- const coreq = response.data.map((coreq) => ({ ...coreq, enrolled: false }));
- setCorequisites(coreq);
- await fetchEnrollments(coreq);
+ const id = class_id ?? event_id;
+ const userId = user.data[0].id;
+
+ if (class_id !== null) {
+ // For classes, get associated event corequisite (max 1 per class)
+ const classCoReqResponse = await backend.get(
+ `/classes/corequisites/${id}/${userId}`
+ );
+ setCoreqResponse(classCoReqResponse.data);
+ } else {
+ const response = await backend.get(
+ `/events/corequisites/${id}/${userId}`
+ );
+ setCoreqResponse(response.data);
+ }
}, [backend, class_id, event_id, currentUser.uid]);
const toggleRootModal = () => {
@@ -80,15 +57,57 @@ function SignUpController({
setOpenCoreqModal(true);
};
+ useEffect(() => {
+ if (coReqResponse) {
+ // is this check to see an event okay? Will classes get call times in the future?
+ // console.log("CoReqResponse: ", coReqResponse);
+ const coreqs = coReqResponse.map((coreq) => {
+ const userId = user.data[0].id;
+ // No need to check userId anymore, coreq response will only return the rows for studentId
+ if (userId === coreq.studentId) {
+ return {
+ ...coreq,
+ isEvent: coreq.callTime ? true : false,
+ };
+ } else {
+ return {
+ ...coreq,
+ isEvent: coreq.callTime ? true : false,
+ };
+ }
+ });
+
+ // filter out the class associated with the card the user is currently on.
+ const postProcessedCoreqs = coreqs.filter((coreq) => {
+ if (class_id) {
+ return class_id !== coreq.id;
+ }
+
+ if (event_id) {
+ return event_id !== coreq.id;
+ }
+ });
+ // console.log("Filtered Coreqs: ", postProcessedCoreqs);
+ setCorequisites(coreqs);
+ setFilteredCorequisites(postProcessedCoreqs);
+ }
+ }, [coReqResponse]);
+
useEffect(() => {
if (openRootModal) {
fetchCorequirements();
}
}, [fetchCorequirements, openRootModal]);
+ useEffect(() => {
+ // console.log(modalIdentity);
+ }, [modalIdentity]);
+
if (class_id !== null && event_id !== null) {
throw new Error("Cannot have both class_id and event_id");
}
+
+ // console.log("SignUpController Rendered:", infoProps.title, class_id, event_id);
return (
<>
{class_id ? (
@@ -96,31 +115,46 @@ function SignUpController({
isOpenProp={openRootModal}
id={class_id}
{...infoProps}
- corequisites={corequisites}
+ corequisites={filteredCorequisites}
+ filteredCorequisites={filteredCorequisites}
isCorequisiteSignUp={false}
handleClose={toggleRootModal}
handleResolveCoreq={toggleCoreqModal}
user={user}
+ modalIdentity={modalIdentity}
+ setModalIdentity={setModalIdentity}
+ tags={tags}
/>
) : (
)}
setOpenCoreqModal(false)}
+ modalIdentity={modalIdentity}
+ setModalIdentity={setModalIdentity}
+ filteredCorequisites={filteredCorequisites}
/>
{/* */}
diff --git a/client/src/components/discovery/SuccessSignupModal.jsx b/client/src/components/discovery/SuccessSignupModal.jsx
index 2fb16649..7a59d203 100644
--- a/client/src/components/discovery/SuccessSignupModal.jsx
+++ b/client/src/components/discovery/SuccessSignupModal.jsx
@@ -3,33 +3,40 @@ import { useEffect } from "react";
import {
Box,
Button,
+ List,
+ ListItem,
Modal,
ModalBody,
ModalContent,
ModalOverlay,
Text,
+ UnorderedList,
VStack,
} from "@chakra-ui/react";
-import { CiCircleCheck } from "react-icons/ci";
+import { MdCheckCircle } from "react-icons/md";
import { useNavigate } from "react-router-dom";
-import CompletedIndicator from "./CompletedIndicator.png"
-
function SuccessSignupModal({
isOpen,
title,
onClose,
- isCoreq: isCorequisiteSignUp,
+ isCoreq: isCorequisiteSignUp = false,
+ corequisites = [],
+ withCoreqFlag = false,
}) {
const navigate = useNavigate();
+ if (typeof title === "string") {
+ title = [title];
+ }
+
useEffect(() => {
if (isOpen) {
- setTimeout(() => {
- onClose();
- if (!isCorequisiteSignUp) navigate("/bookings");
- }, 2000);
+ // setTimeout(() => {
+ // onClose();
+ // if (!isCorequisiteSignUp) navigate("/bookings");
+ // }, 2000);
}
}, [isCorequisiteSignUp, isOpen, navigate, onClose]);
@@ -45,28 +52,57 @@ function SuccessSignupModal({
display={"flex"}
justifyContent={"center"}
>
-
-
-
+
+
+
+
+
+ You've successfully signed up for...
+
- You've successfully signed up for {title}
+ {title && title.length > 1 ? (
+
+ {title.map((t, index) => (
+ {t}
+ ))}
+
+ ) : (
+
+ {title ? title[0] : "No title detected"}
+
+ )}
+ {withCoreqFlag && corequisites.length > 0 && (
+
+ {corequisites.map((coreq) => (
+
+ {coreq.title}
+
+ ))}
+
+ )}
+
{!isCorequisiteSignUp && (
)}
diff --git a/client/src/components/discovery/confirmationModalStyle.js b/client/src/components/discovery/confirmationModalStyle.js
new file mode 100644
index 00000000..0a12ccd2
--- /dev/null
+++ b/client/src/components/discovery/confirmationModalStyle.js
@@ -0,0 +1,27 @@
+import { modalAnatomy as parts } from "@chakra-ui/anatomy";
+import {
+ createMultiStyleConfigHelpers,
+ defineStyle,
+} from "@chakra-ui/styled-system";
+
+const { definePartsStyle, defineMultiStyleConfig } =
+ createMultiStyleConfigHelpers(parts.keys);
+
+const xl = defineStyle({
+ px: "6",
+ py: "2",
+ fontSize: "xl",
+});
+
+const sm = defineStyle({
+ fontSize: "sm",
+ py: "6",
+});
+
+const sizes = {
+ xl: definePartsStyle({ header: sm, dialog: xl }),
+};
+
+export const modalTheme = defineMultiStyleConfig({
+ sizes,
+});
diff --git a/client/src/components/forms/createClasses.jsx b/client/src/components/forms/createClasses.jsx
index 1966be17..9a9c39d2 100644
--- a/client/src/components/forms/createClasses.jsx
+++ b/client/src/components/forms/createClasses.jsx
@@ -11,11 +11,8 @@ import {
Input,
NumberInput,
NumberInputField,
- Radio,
- RadioGroup,
Select,
Stack,
- Text,
Textarea,
useDisclosure,
useToast,
@@ -51,7 +48,7 @@ export const CreateClassForm = memo(
modalData?.end_date ?? modalData?.date ?? ""
);
const [recurrencePattern, setRecurrencePattern] = useState(
- modalData?.recurrence_pattern ?? "none"
+ modalData?.recurrence_pattern ?? ""
);
const [startTime, setStartTime] = useState(modalData?.startTime ?? "");
const [endTime, setEndTime] = useState(modalData?.endTime ?? "");
@@ -59,8 +56,8 @@ export const CreateClassForm = memo(
modalData?.description ?? ""
);
const [capacity, setCapacity] = useState(modalData?.capacity ?? 0);
- const [level, setLevel] = useState(modalData?.level ?? "beginner");
- const [classType, setClassType] = useState(modalData?.classType ?? "1");
+ const [level, setLevel] = useState(modalData?.level ?? "");
+ const [classType, setClassType] = useState(modalData?.classType ?? "");
const [performance, setPerformance] = useState(
modalData?.performance ?? -1
);
@@ -159,6 +156,12 @@ export const CreateClassForm = memo(
})
.catch((error) => console.log(error));
+ if (parseInt(performance) !== -1) {
+ await backend.put(
+ `/corequisites/${modalData.classId}` + `/${performance}`
+ );
+ }
+
// Add teacher to classes-taught on form post
const res = await backend.post(
`/classes-taught/`,
@@ -254,6 +257,11 @@ export const CreateClassForm = memo(
);
console.log("Added teacher to classes-taught:", res);
+ // Add prerequisite if performance is selected
+ if (parseInt(performance) !== -1) {
+ await backend.put(`/corequisites/${classId}` + `/${performance}`);
+ }
+
for (const classDate of classDates) {
try {
// const response = await backend.post("/classes", classBody);
@@ -292,12 +300,11 @@ export const CreateClassForm = memo(
onConfirmationClose();
onClose();
reloadCallback();
- closeModal(0); // 0 == "class"
};
useMemo(() => {
if (backend) {
- backend.get("/events").then((response) => {
+ backend.get("/events/all").then((response) => {
setEvents(response.data);
});
backend.get("/tags").then((response) => {
@@ -326,256 +333,349 @@ export const CreateClassForm = memo(
return (
-