feat: add academic calendar widget

Closes #169
one-zero-eight · Nov 18, 2024 · e622ee3 · e622ee3
1 parent b855aa7
commit e622ee3
Show file tree

Hide file tree

Showing 4 changed files with 102 additions and 3 deletions.
diff --git a/src/components/dashboard/AcademicCalendarWidget.tsx b/src/components/dashboard/AcademicCalendarWidget.tsx
@@ -0,0 +1,38 @@
+import { $events } from "@/api/events";
+import { findAcademicCalendarByGroups } from "@/lib/events/academic-calendar.tsx";
+
+export function AcademicCalendarWidget() {
+  const { data: eventGroups } = $events.useQuery("get", "/event-groups/");
+  const { data: predefined } = $events.useQuery("get", "/users/me/predefined");
+
+  if (!eventGroups || !predefined) return null;
+
+  const groups = predefined.event_groups
+    .map((v) => eventGroups.event_groups.find((g) => g.id === v)?.name)
+    .filter((v) => v) as string[];
+  const academicCalendar = findAcademicCalendarByGroups(groups);
+
+  if (!academicCalendar) return null;
+
+  return (
+    <div className="group flex flex-row gap-4 rounded-2xl bg-primary-main px-4 py-6">
+      <div className="w-12">
+        <span className="icon-[ph--books] text-5xl text-brand-violet" />
+      </div>
+      <div className="flex flex-col">
+        <div className="text-2xl font-semibold text-text-main">
+          <academicCalendar.Title />
+        </div>
+        <div className="mt-2 whitespace-pre-wrap text-lg text-text-secondary/75">
+          <academicCalendar.Details />
+        </div>
+        <a
+          href="https://eduwiki.innopolis.university/index.php/AcademicCalendar"
+          className="text-base text-text-secondary/75 hover:underline"
+        >
+          *based on <span className="text-brand-violet">Eduwiki</span>.
+        </a>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/dashboard/AccountWidget.tsx b/src/components/dashboard/AccountWidget.tsx
@@ -6,7 +6,7 @@ export function AccountWidget() {
   if (!me) return null;
 
   return (
-    <div className="my-4 flex max-w-full flex-row gap-4 @container/account">
+    <div className="flex max-w-full flex-row gap-4 @container/account">
       <div className="flex h-20 w-20 shrink-0 items-center justify-center overflow-clip rounded-full bg-border text-icon-main/50 @xl/account:h-24 @xl/account:w-24">
         {me.telegram?.photo_url ? (
           <img

diff --git a/src/components/dashboard/DashboardPage.tsx b/src/components/dashboard/DashboardPage.tsx
@@ -3,6 +3,7 @@ import { $events, eventsTypes } from "@/api/events";
 import { Calendar } from "@/components/calendar/Calendar.tsx";
 import { URLType } from "@/components/calendar/CalendarViewer.tsx";
 import { AuthWall } from "@/components/common/AuthWall.tsx";
+import { AcademicCalendarWidget } from "@/components/dashboard/AcademicCalendarWidget.tsx";
 import { AccountWidget } from "@/components/dashboard/AccountWidget.tsx";
 import { SportsWidget } from "@/components/dashboard/SportsWidget.tsx";
 import { GroupCardById } from "@/components/schedule/group-card/GroupCardById.tsx";
@@ -32,8 +33,9 @@ export function DashboardPage() {
 
   return (
     <>
-      <div className="px-4">
+      <div className="flex flex-col gap-4 px-4 py-4">
         <AccountWidget />
+        <AcademicCalendarWidget />
         <SportsWidget />
         <div className="flex flex-col justify-between gap-4 @container/sections @6xl/content:flex-row @6xl/content:gap-8">
           <details className="flex w-full flex-col @container/schedule @6xl/content:w-1/2">
@@ -114,7 +116,7 @@ export function DashboardPage() {
             )}
           </details>
         </div>
-        <h2 className="my-4 text-3xl font-medium">Your calendar</h2>
+        <h2 className="text-3xl font-medium">Your calendar</h2>
       </div>
       <Calendar
         urls={

diff --git a/src/lib/events/academic-calendar.tsx b/src/lib/events/academic-calendar.tsx
@@ -0,0 +1,59 @@
+import { ReactElement } from "react";
+
+export type AcademicCalendar = {
+  groupPrefix: string;
+  Title: () => ReactElement;
+  Details: () => ReactElement;
+};
+
+// prettier-ignore
+export const academicCalendar: AcademicCalendar[] = [{
+    groupPrefix: "B21",
+    Title: () => <p>[B21] Semester F24: <span className="font-normal">Aug 26 - Dec 21</span></p>,
+    Details: () => <>
+      <p><span className="font-semibold">Winter break:</span> Dec 22 - Jan 12</p>
+    </>,
+}, {
+    groupPrefix: "B22",
+    Title: () => <p>[B22] Semester F24: <span className="font-normal">Aug 26 - Dec 20</span></p>,
+    Details: () => <>
+      <p><span className="font-semibold">Exams:</span> Dec 10 - Dec 20</p>
+      <p><span className="font-semibold">Winter break:</span> Dec 21 - Jan 19</p>
+    </>,
+}, {
+    groupPrefix: "B23",
+    Title: () => <p>[B23] Semester F24: <span className="font-normal">Aug 26 - Dec 23</span></p>,
+    Details: () => <>
+      <p><span className="font-semibold">Exams:</span> Dec 10 - Dec 23</p>
+      <p><span className="font-semibold">Winter break:</span> Dec 24 - Jan 19</p>
+    </>,
+}, {
+    groupPrefix: "B24-AI360",
+    Title: () => <p>[B24-AI360] Semester F24: <span className="font-normal">Aug 26 - Dec 28</span></p>,
+    Details: () => <>
+      <p><span className="font-semibold">Exams:</span> Dec 10 - Dec 28</p>
+      <p><span className="font-semibold">Winter break:</span> Dec 29 - Jan 19</p>
+    </>,
+}, {
+    groupPrefix: "B24",
+    Title: () => <p>[B24] Semester F24: <span className="font-normal">Aug 26 - Dec 22</span></p>,
+    Details: () => <>
+      <p><span className="font-semibold">Exams:</span> Dec 10 - Dec 22</p>
+      <p><span className="font-semibold">Winter break:</span> Dec 23 - Jan 19</p>
+    </>,
+}, {
+    groupPrefix: "M24",
+    Title: () => <p>[M24] Semester F24: <span className="font-normal">Aug 26 - Dec 22</span></p>,
+    Details: () => <>
+      <p><span className="font-semibold">Exams:</span> Dec 10 - Dec 22</p>
+      <p><span className="font-semibold">Winter break:</span> Dec 23 - Jan 19</p>
+    </>,
+}];
+
+export function findAcademicCalendarByGroups(
+  groups: string[],
+): AcademicCalendar | undefined {
+  return academicCalendar.find((calendar) =>
+    groups.some((group) => group.startsWith(calendar.groupPrefix)),
+  );
+}