feat: events calendar page (#91)

Author: gxnca

bun.lock

@@ -8,7 +8,9 @@
         "@hookform/resolvers": "^5.1.1",
         "@tanstack/react-query": "^5.84.1",
         "@tanstack/react-query-devtools": "^5.84.1",
+        "@types/chroma-js": "^3.1.1",
         "axios": "^1.10.0",
+        "chroma-js": "^3.1.2",
         "clsx": "^2.1.1",
         "jwt-decode": "^4.0.0",
         "mime-types": "^3.0.1",
@@ -441,6 +443,8 @@
 
     "@types/chai": ["@types/[email protected]", "", { "dependencies": { "@types/deep-eql": "*" } }, "sha512-8kB30R7Hwqf40JPiKhVzodJs2Qc1ZJ5zuT3uzw5Hq/dhNCl3G3l83jfpdI1e20BP348+fV7VIL/+FxaXkqBmWg=="],
 
+    "@types/chroma-js": ["@types/[email protected]", "", {}, "sha512-SFCr4edNkZ1bGaLzGz7rgR1bRzVX4MmMxwsIa3/Bh6ose8v+hRpneoizHv0KChdjxaXyjRtaMq7sCuZSzPomQA=="],
+
     "@types/d3-array": ["@types/[email protected]", "", {}, "sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw=="],
 
     "@types/d3-color": ["@types/[email protected]", "", {}, "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A=="],
@@ -637,6 +641,8 @@
 
     "chownr": ["[email protected]", "", {}, "sha512-+IxzY9BZOQd/XuYPRmrvEVjF/nqj5kgT4kEq7VofrDoM1MxoRjEWkrCC3EtLi59TVawxTAn+orJwFQcrqEN1+g=="],
 
+    "chroma-js": ["[email protected]", "", {}, "sha512-IJnETTalXbsLx1eKEgx19d5L6SRM7cH4vINw/99p/M11HCuXGRWL+6YmCm7FWFGIo6dtWuQoQi1dc5yQ7ESIHg=="],
+
     "chromatic": ["[email protected]", "", { "peerDependencies": { "@chromatic-com/cypress": "^0.*.* || ^1.0.0", "@chromatic-com/playwright": "^0.*.* || ^1.0.0" }, "optionalPeers": ["@chromatic-com/cypress", "@chromatic-com/playwright"], "bin": { "chroma": "dist/bin.js", "chromatic": "dist/bin.js", "chromatic-cli": "dist/bin.js" } }, "sha512-GswmBW9ZptAoTns1BMyjbm55Z7EsIJnUvYKdQqXIBZIKbGErmpA+p4c0BYA+nzw5B0M+rb3Iqp1IaH8TFwIQew=="],
 
     "client-only": ["[email protected]", "", {}, "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA=="],

package.json

@@ -17,7 +17,9 @@
     "@hookform/resolvers": "^5.1.1",
     "@tanstack/react-query": "^5.84.1",
     "@tanstack/react-query-devtools": "^5.84.1",
+    "@types/chroma-js": "^3.1.1",
     "axios": "^1.10.0",
+    "chroma-js": "^3.1.2",
     "clsx": "^2.1.1",
     "jwt-decode": "^4.0.0",
     "mime-types": "^3.0.1",

src/app/(app)/page.tsx

@@ -1,11 +1,14 @@
 import EventsCalendar from "@/components/events-calendar";
-import CalendarOptions from "@/components/calendar-options";
+import { EventsProvider } from "@/contexts/events-provider";
+import EventsOptions from "@/components/calendarOptions/events-options";
 
 export default function Home() {
   return (
     <div className="flex h-full flex-col-reverse gap-5 md:flex-row md:gap-8">
-      <CalendarOptions />
-      <EventsCalendar />
+      <EventsProvider>
+        <EventsOptions />
+        <EventsCalendar />
+      </EventsProvider>
     </div>
   );
 }

src/app/(app)/schedule/page.tsx

@@ -1,14 +1,14 @@
 import ScheduleCalendar from "@/components/schedule-calendar";
 import { ScheduleProvider } from "@/contexts/schedule-provider";
-import CalendarOptions from "@/components/calendar-options";
 import { AuthCheck } from "@/components/auth-check";
+import ScheduleOptions from "@/components/calendarOptions/schedule-options";
 
 export default function Schedule() {
   return (
     <AuthCheck userTypes={["student"]}>
       <div className="flex h-full flex-col-reverse gap-5 md:flex-row md:gap-8">
         <ScheduleProvider>
-          <CalendarOptions schedule />
+          <ScheduleOptions />
           <ScheduleCalendar />
         </ScheduleProvider>
       </div>

src/app/globals.css

@@ -291,7 +291,6 @@ input[type="number"] {
   font-weight: 600;
   border-radius: 6px !important;
   overflow: hidden !important;
-  padding: 0px !important;
 }
 
 @media (max-width: 640px) {
@@ -349,6 +348,10 @@ input[type="number"] {
   padding: 0px 4px 0px 4px !important;
 }
 
+.schedule .rbc-event {
+  padding: 0 !important;
+}
+
 .schedule .rbc-event-content {
   padding: 2px !important;
 }

src/components/animated-options-section.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { ScheduleContext } from "@/contexts/schedule-provider";
+import { IEvent, IShift } from "@/lib/types";
 import clsx from "clsx";
 import { motion, AnimatePresence } from "motion/react";
 import {
@@ -12,15 +12,18 @@ import {
   useCallback,
   useMemo,
   Children,
-  useContext,
 } from "react";
 import { twMerge } from "tailwind-merge";
 
-interface IAnimatedOptionsSection {
+interface IAnimatedOptionsSection<T = IShift | IEvent> {
   children: [ReactNode, ReactNode];
   title?: string;
   titleEdit?: string;
   classNameOpenedSection?: string;
+  isEditing: boolean;
+  setIsEditing: (prev: boolean) => void;
+  setEditingItems: (prev: T[]) => void;
+  currentItems: T[];
 }
 
 const useIsMobile = () => {
@@ -41,26 +44,29 @@ const useIsMobile = () => {
   return { isMobile, viewportHeight };
 };
 
-export default function AnimatedOptionsSection({
+export default function AnimatedOptionsSection<T = IShift | IEvent>({
   children,
   title = "Options",
   titleEdit = "Edit Options",
   classNameOpenedSection,
-}: IAnimatedOptionsSection) {
+  isEditing,
+  setIsEditing,
+  setEditingItems,
+  currentItems,
+}: IAnimatedOptionsSection<T>) {
   const [isOpen, setIsOpen] = useState(false);
 
-  const { isEditing, setIsEditing, setEditingShifts, currentSchedule } =
-    useContext(ScheduleContext);
-
   const handleClose = useCallback(() => {
     setIsOpen(false);
     setIsEditing(false);
   }, [setIsEditing]);
 
   const handleEditClick = useCallback(() => {
-    if (isEditing) setEditingShifts([...currentSchedule]);
+    if (isEditing) {
+      setEditingItems([...currentItems]);
+    }
     setIsEditing(!isEditing);
-  }, [isEditing, setIsEditing, setEditingShifts, currentSchedule]);
+  }, [isEditing, setIsEditing, setEditingItems, currentItems]);
 
   const handleMotionClick = useCallback(() => {
     if (!isOpen) {