From e29985ecfcec21ac0518912ebf584bf084c139d2 Mon Sep 17 00:00:00 2001
From: ImJustChew <chewtzihwee@gmail.com>
Date: Sat, 28 Sep 2024 16:31:43 +0900
Subject: [PATCH 1/2] feat: added swiping to timetable page

---
 package-lock.json                             | 10 ++++++++
 package.json                                  |  3 ++-
 .../[lang]/(mods-pages)/timetable/page.tsx    | 23 ++++++++++++++++++-
 3 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index f2bf1e4a..9d4c1dd7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -111,6 +111,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",
@@ -15097,6 +15098,15 @@
         }
       }
     },
+    "node_modules/react-swipeable": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/react-swipeable/-/react-swipeable-7.0.1.tgz",
+      "integrity": "sha512-RKB17JdQzvECfnVj9yDZsiYn3vH0eyva/ZbrCZXZR0qp66PBRhtg4F9yJcJTWYT5Adadi+x4NoG53BxKHwIYLQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.3 || ^17 || ^18"
+      }
+    },
     "node_modules/react-transition-group": {
       "version": "4.4.5",
       "license": "BSD-3-Clause",
diff --git a/package.json b/package.json
index f9090a7e..0a1fde61 100644
--- a/package.json
+++ b/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",
diff --git a/src/app/[lang]/(mods-pages)/timetable/page.tsx b/src/app/[lang]/(mods-pages)/timetable/page.tsx
index b02be5ac..e6ec0fec 100644
--- a/src/app/[lang]/(mods-pages)/timetable/page.tsx
+++ b/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}

From 8e57e22481514eaf6f483667ac33e22a3eff8717 Mon Sep 17 00:00:00 2001
From: ImJustChew <chewtzihwee@gmail.com>
Date: Sat, 28 Sep 2024 16:36:40 +0900
Subject: [PATCH 2/2] feat: added swipe on calendar page

---
 src/components/Calendar/Calendar.tsx | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/components/Calendar/Calendar.tsx b/src/components/Calendar/Calendar.tsx
index 4a91f83d..64f6d8d5 100644
--- a/src/components/Calendar/Calendar.tsx
+++ b/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} />
           )}