Merge pull request #760 from asuc-octo/gql-catalog

Catalog dashboard page updates
asuc-octo · Jan 26, 2025 · 31ae68f · 31ae68f
2 parents 8bb2ae7 + 43e9d0b
commit 31ae68f
Show file tree

Hide file tree

Showing 17 changed files with 601 additions and 101 deletions.
diff --git a/apps/frontend/src/app/Catalog/Dashboard/Carousel/index.tsx b/apps/frontend/src/app/Catalog/Dashboard/Carousel/index.tsx
diff --git a/apps/frontend/src/app/Catalog/Dashboard/Dashboard.module.scss b/apps/frontend/src/app/Catalog/Dashboard/Dashboard.module.scss
@@ -8,6 +8,13 @@
     border-radius: 8px;
     background-color: var(--foreground-color);
     flex-shrink: 0;
+
+    .error {
+      color: var(--paragraph-color);
+      text-align: center;
+      margin-top: 46px;
+      font-size: 14px;
+    }
   }
 
   .header {

diff --git a/apps/frontend/src/app/Catalog/Dashboard/index.tsx b/apps/frontend/src/app/Catalog/Dashboard/index.tsx
@@ -1,38 +1,82 @@
-import { Dispatch, SetStateAction } from "react";
+import { Dispatch, SetStateAction, useMemo } from "react";
 
 import {
   ArrowSeparateVertical,
   BookmarkSolid,
-  Calendar,
   Collapse,
   Expand,
   Search,
 } from "iconoir-react";
+import moment from "moment";
+import { useNavigate } from "react-router-dom";
 
 import { Button, Container, IconButton, Tooltip } from "@repo/theme";
+import { DropdownMenu } from "@repo/theme";
+
+import Carousel from "@/components/Carousel";
+import { useReadUser } from "@/hooks/api";
+import { ITerm } from "@/lib/api";
+import { getRecentClasses } from "@/lib/recent-classes";
 
-import Carousel from "./Carousel";
 import styles from "./Dashboard.module.scss";
 
 interface DashboardProps {
+  term: ITerm;
+  terms: ITerm[];
   expanded: boolean;
   setExpanded: Dispatch<SetStateAction<boolean>>;
   setOpen: Dispatch<SetStateAction<boolean>>;
 }
 
 export default function Dashboard({
+  term,
+  terms,
   expanded,
   setExpanded,
   setOpen,
 }: DashboardProps) {
+  const navigate = useNavigate();
+  const { data: user, loading: userLoading } = useReadUser();
+
+  const recentClasses = useMemo(
+    () =>
+      getRecentClasses().filter(
+        (recentClass) =>
+          recentClass.semester === term.semester &&
+          recentClass.year === term.year
+      ),
+    [term]
+  );
+
   return (
     <div className={styles.root}>
       <Container size="sm">
         <div className={styles.header}>
-          <Button>
-            <ArrowSeparateVertical />
-            Switch terms
-          </Button>
+          <DropdownMenu.Root>
+            <DropdownMenu.Trigger asChild>
+              <Button>
+                <ArrowSeparateVertical />
+                Switch terms
+              </Button>
+            </DropdownMenu.Trigger>
+            <DropdownMenu.Content sideOffset={5}>
+              {terms
+                .filter(
+                  ({ year, semester }) =>
+                    year !== term.year || semester !== term.semester
+                )
+                .map(({ year, semester }) => {
+                  return (
+                    <DropdownMenu.Item
+                      key={`${semester} ${year}`}
+                      onClick={() => navigate(`/catalog/${year}/${semester}`)}
+                    >
+                      {semester} {year}
+                    </DropdownMenu.Item>
+                  );
+                })}
+            </DropdownMenu.Content>
+          </DropdownMenu.Root>
           <div className={styles.toggle}>
             <Button variant="solid" onClick={() => setOpen(false)}>
               Search
@@ -45,23 +89,67 @@ export default function Dashboard({
             </Tooltip>
           </div>
         </div>
-        <p className={styles.heading}>Summer 2024</p>
-        <p className={styles.paragraph}>March 20th through August 9th</p>
-        <Carousel title="Recently viewed" Icon={<Search />}>
-          <div className={styles.card}></div>
-          <div className={styles.card}></div>
-          <div className={styles.card}></div>
-        </Carousel>
-        <Carousel title="Upcoming events" Icon={<Calendar />} to="/semesters">
-          <div className={styles.card}></div>
-          <div className={styles.card}></div>
-          <div className={styles.card}></div>
-        </Carousel>
-        <Carousel title="Bookmarked" Icon={<BookmarkSolid />} to="/account">
-          <div className={styles.card}></div>
-          <div className={styles.card}></div>
-          <div className={styles.card}></div>
-        </Carousel>
+        <p className={styles.heading}>
+          {term.semester} {term.year}
+        </p>
+        {term.startDate && term.endDate && (
+          <p className={styles.paragraph}>
+            {moment(term.startDate).format("MMMM Do")} through{" "}
+            {moment(term.endDate).format("MMMM Do")}
+          </p>
+        )}
+        <Carousel.Root
+          title="Bookmarked"
+          Icon={<BookmarkSolid />}
+          to="/account"
+        >
+          {userLoading || !user ? (
+            <div className={styles.card}>
+              <div className={styles.error}>Sign in to bookmark classes</div>
+            </div>
+          ) : user?.bookmarkedClasses.length == 0 ? (
+            <div className={styles.card}>
+              <div className={styles.error}>No bookmarked classes</div>
+            </div>
+          ) : (
+            user?.bookmarkedClasses
+              .filter(
+                (bookmarkedClass) =>
+                  bookmarkedClass.year === term.year &&
+                  bookmarkedClass.semester === term.semester
+              )
+              .map((bookmarkedClass, i) => {
+                return (
+                  <Carousel.Class
+                    key={i}
+                    subject={bookmarkedClass.subject}
+                    year={bookmarkedClass.year}
+                    semester={bookmarkedClass.semester}
+                    courseNumber={bookmarkedClass.courseNumber}
+                    number={bookmarkedClass.number}
+                  />
+                );
+              })
+          )}
+        </Carousel.Root>
+        {recentClasses.length !== 0 && (
+          <Carousel.Root title="Recently viewed" Icon={<Search />}>
+            {recentClasses.map(
+              ({ subject, year, semester, courseNumber, number }, i) => {
+                return (
+                  <Carousel.Class
+                    key={i}
+                    subject={subject}
+                    year={year}
+                    semester={semester}
+                    courseNumber={courseNumber}
+                    number={number}
+                  />
+                );
+              }
+            )}
+          </Carousel.Root>
+        )}
       </Container>
     </div>
   );

diff --git a/apps/frontend/src/app/Catalog/index.tsx b/apps/frontend/src/app/Catalog/index.tsx
@@ -102,7 +102,7 @@ export default function Catalog() {
   }
 
   // TODO: Error state
-  if (!term) {
+  if (!terms || !term) {
     return <></>;
   }
 
@@ -144,6 +144,8 @@ export default function Catalog() {
           />
         ) : (
           <Dashboard
+            term={term}
+            terms={terms}
             expanded={expanded}
             setExpanded={setExpanded}
             setOpen={setOpen}

diff --git a/...g/Dashboard/Carousel/Carousel.module.scss → .../components/Carousel/Carousel.module.scss b/...g/Dashboard/Carousel/Carousel.module.scss → .../components/Carousel/Carousel.module.scss
@@ -51,7 +51,9 @@
       overflow: auto;
       padding: 0 24px;
       display: flex;
-      gap: 24px;
+      gap: 16px;
+      scrollbar-width: none;
+      scroll-behavior: smooth;
     }
   }
 

diff --git a/apps/frontend/src/components/Carousel/Class/Class.module.scss b/apps/frontend/src/components/Carousel/Class/Class.module.scss
@@ -0,0 +1,60 @@
+.root {
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  flex-shrink: 0;
+  background-color: var(--foreground-color);
+  padding: 16px;
+  display: flex;
+  width: 320px;
+  gap: 16px;
+  cursor: pointer;
+
+  &:hover .column .icon {
+    color: var(--heading-color);
+  }
+
+  .column {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    flex-shrink: 0;
+
+    .icon {
+      color: var(--paragraph-color);
+      transition: all 100ms ease-in-out;
+    }
+  }
+
+  .text {
+    flex-grow: 1;
+    font-size: 14px;
+    display: flex;
+    flex-direction: column;
+
+    .heading {
+      color: var(--heading-color);
+      margin-bottom: 8px;
+      line-height: 1;
+      font-weight: 660;
+      font-feature-settings:
+        "cv05" on,
+        "cv13" on,
+        "ss07" on,
+        "cv12" on,
+        "cv06" on;
+    }
+
+    .description {
+      color: var(--paragraph-color);
+      line-height: 1.5;
+      flex-grow: 1;
+    }
+
+    .row {
+      display: flex;
+      gap: 12px;
+      margin-top: 12px;
+      align-items: center;
+    }
+  }
+}