feat: add swiping gestures on calendar and timetable page (#545)

package.json

@@ -114,8 +114,8 @@
     "qrcode.react": "^3.1.0",
     "query-string": "^8.1.0",
     "react": "18.3.1",
-    "react-color": "^2.19.3",
     "react-barcode": "^1.5.3",
+    "react-color": "^2.19.3",
     "react-cookie": "^7.1.0",
     "react-day-picker": "^8.10.1",
     "react-dom": "18.3.1",
@@ -125,6 +125,7 @@
     "react-instantsearch-nextjs": "^0.2.4",
     "react-leaflet": "^4.2.1",
     "react-resizable-panels": "^2.0.11",
+    "react-swipeable": "^7.0.1",
     "react-transition-group": "^4.4.5",
     "recharts": "^2.12.7",
     "rxdb": "^15.11.1",

src/app/[lang]/(mods-pages)/timetable/page.tsx

@@ -8,6 +8,8 @@ import { createTimetableFromCourses } from "@/helpers/timetable";
 import { MinimalCourse } from "@/types/courses";
 import { renderTimetableSlot } from "@/helpers/timetable_course";
 import TimetableSidebar from "@/components/Timetable/TimetableSidebar";
+import { useSwipeable } from "react-swipeable";
+import { semesterInfo } from "@/const/semester";
 
 const TimetablePage: NextPage = () => {
   const { getSemesterCourses, semester, setSemester, colorMap } =
@@ -19,13 +21,32 @@ const TimetablePage: NextPage = () => {
     colorMap,
   );
 
+  const handlers = useSwipeable({
+    onSwipedLeft: (eventData) => {
+      const currentSemesterIndex = semesterInfo.findIndex(
+        (semObj) => semObj.id === semester,
+      );
+      if (currentSemesterIndex < semesterInfo.length - 1) {
+        setSemester(semesterInfo[currentSemesterIndex + 1].id);
+      }
+    },
+    onSwipedRight: (eventData) => {
+      const currentSemesterIndex = semesterInfo.findIndex(
+        (semObj) => semObj.id === semester,
+      );
+      if (currentSemesterIndex > 0) {
+        setSemester(semesterInfo[currentSemesterIndex - 1].id);
+      }
+    },
+  });
+
   return (
     <div className="flex flex-col w-full h-full">
       <SemesterSwitcher semester={semester} setSemester={setSemester} />
       <div
         className={`grid grid-cols-1 md:grid-rows-1 ${!vertical ? "" : "md:grid-cols-[3fr_2fr]"} px-1 py-4 md:p-4 gap-4 md:gap-2`}
       >
-        <div className="w-full h-full">
+        <div className="w-full h-full" {...handlers}>
           <Timetable
             timetableData={timetableData}
             vertical={vertical}

src/components/Calendar/Calendar.tsx

@@ -29,6 +29,8 @@ import {
   ErrorBoundary,
   ErrorComponent,
 } from "next/dist/client/components/error-boundary";
+import { useSwipeable } from "react-swipeable";
+import { semesterInfo } from "@/const/semester";
 
 const CalendarError: ErrorComponent = ({ error, reset }) => {
   return <div className="text-red-500">An error occurred: {error.message}</div>;
@@ -132,6 +134,15 @@ const Calendar = () => {
     }
   };
 
+  const handlers = useSwipeable({
+    onSwipedLeft: (eventData) => {
+      moveForward();
+    },
+    onSwipedRight: (eventData) => {
+      moveBackward();
+    },
+  });
+
   const syncTimetable = () => {
     // for each course, convert to timetable event
     const timetableCourses: CourseTimeslotData[][] = [];
@@ -209,7 +220,7 @@ const Calendar = () => {
             </TabsTrigger>
           </TabsList>
         </Tabs>
-        <div className="w-full h-[80dvh]">
+        <div className="w-full h-[80dvh]" {...handlers}>
           {displayMode == "week" && (
             <CalendarWeekContainer displayWeek={displayDates} />
           )}