Feature/smoother collapsing tiles

.github/workflows/build.yml

@@ -32,10 +32,10 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Setup Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: 18
 

.github/workflows/deploy-preview.yml

@@ -18,7 +18,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Neon Database Create Branch Action
         uses: neondatabase/create-branch-action@v4

.github/workflows/format.yml

@@ -13,10 +13,10 @@ jobs:
 
     steps:
       - name: Check out Git repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Set up Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: 18
 

.github/workflows/tests.yml

@@ -70,7 +70,7 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Setup Python3.11
         uses: actions/setup-python@v4
@@ -91,7 +91,7 @@ jobs:
           mongodb-port: 27017
 
       - name: Setup Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: 18
 
@@ -111,10 +111,10 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Setup Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: 18
 

.github/workflows/validator_test.yml

@@ -15,7 +15,7 @@ jobs:
         working-directory: validator
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - uses: actions/setup-python@v4
         with:

.github/workflows/versioning.yml

@@ -12,7 +12,7 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - uses: actions/setup-python@v4
         with:

src/components/planner/Sidebar/RecursiveRequirement.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, Fragment } from 'react';
 import { v4 as uuidv4 } from 'uuid';
 
 import { trpc } from '@/utils/trpc';
@@ -36,15 +36,14 @@ export function RecursiveRequirement({
             >
               <>
                 {req.requirements.map((req2, idx) => (
-                  <>
+                  <Fragment key={req2.metadata.id}>
                     <div className="h-2 px-2 text-sm">Option {idx + 1}</div>
                     <RecursiveRequirement
-                      key={idx}
                       req={req2}
                       courses={courses}
                       validCourses={validCourses}
                     />
-                  </>
+                  </Fragment>
                 ))}
               </>
             </Accordion>
@@ -58,15 +57,13 @@ export function RecursiveRequirement({
               filled={req.filled}
             >
               <>
-                {req.requirements.map((req2, idx) => (
-                  <>
-                    <RecursiveRequirement
-                      key={idx}
-                      req={req2}
-                      courses={courses}
-                      validCourses={validCourses}
-                    />
-                  </>
+                {req.requirements.map((req2) => (
+                  <RecursiveRequirement
+                    key={req2.metadata.id}
+                    req={req2}
+                    courses={courses}
+                    validCourses={validCourses}
+                  />
                 ))}
               </>
             </Accordion>
@@ -85,15 +82,14 @@ export function RecursiveRequirement({
             >
               <>
                 {req.requirements.map((req2, idx) => (
-                  <>
+                  <Fragment key={req2.metadata.id}>
                     <div className="h-2 px-2 text-sm">Option {idx + 1}</div>
                     <RecursiveRequirement
-                      key={idx}
                       req={req2}
                       courses={courses}
                       validCourses={validCourses}
                     />
-                  </>
+                  </Fragment>
                 ))}
               </>
             </Accordion>
@@ -112,15 +108,14 @@ export function RecursiveRequirement({
             >
               <>
                 {req.requirements.map((req2, idx) => (
-                  <>
+                  <Fragment key={req2.metadata.id}>
                     <div className="h-2 px-2 text-sm">Option {idx + 1}</div>
                     <RecursiveRequirement
-                      key={idx}
                       req={req2}
                       courses={courses}
                       validCourses={validCourses}
                     />
-                  </>
+                  </Fragment>
                 ))}
               </>
             </Accordion>
@@ -140,7 +135,7 @@ export function RecursiveRequirement({
               <>
                 {req.prefix_groups.map((req2, idx) => (
                   <RecursiveRequirement
-                    key={idx}
+                    key={req2.metadata.id}
                     req={req2}
                     courses={courses}
                     validCourses={validCourses}
@@ -156,7 +151,7 @@ export function RecursiveRequirement({
         return <div>NOT SUPPORTED</div>;
     }
   };
-  return <>{getRequirement()}</>;
+  return getRequirement();
 }
 
 function CourseRequirementComponent({

src/components/planner/Sidebar/RequirementsContainer.tsx

@@ -155,7 +155,9 @@ const getRequirementGroup = (
                 course: `${c.subject_prefix} ${c.course_number}`,
                 matcher: 'Course',
                 filled: courses.includes(`${c.subject_prefix} ${c.course_number}`),
-                metadata: {},
+                metadata: {
+                  id: `course-${c.id}`,
+                },
               }))
             : [],
         filterFunction: filterFunc,
@@ -200,12 +202,12 @@ const getRequirementGroup = (
 };
 
 export const ProgressComponent2 = ({ value, max }: { value: number; max: number }) => {
-  const heh = `${(value * 100) / max}%`;
+  const width = `${(value * 100) / max}%`;
 
   return (
     <div className="flex w-full flex-col items-center justify-center">
       <div className="mt-2 h-1 w-full overflow-hidden rounded-2xl bg-[#F5F5F5] ">
-        <div style={{ width: heh }} className={`h-full bg-primary`}></div>
+        <div style={{ width }} className={`h-full bg-primary`}></div>
       </div>
     </div>
   );
@@ -220,15 +222,15 @@ export const ProgressComponent = ({
   max: number;
   unit?: string;
 }) => {
-  const heh = `${(value * 100) / max}%`;
+  const width = `${(value * 100) / max}%`;
 
   return (
     <div className="flex w-24 flex-col items-center justify-center">
       <div className="w-max text-[10px]">
         {value}/{max} {unit}
       </div>
       <div className="h-3 w-full overflow-hidden rounded-2xl bg-[#F5F5F5]">
-        <div style={{ width: heh }} className={`h-full bg-primary`}></div>
+        <div style={{ width }} className={`h-full bg-primary`}></div>
       </div>
     </div>
   );

src/components/planner/Sidebar/types.ts

@@ -17,7 +17,7 @@ export type DegreeRequirement = Requirement & {
 
 export interface Requirement {
   matcher: string;
-  metadata: { [key: string]: string };
+  metadata: { id: string; [key: string]: string };
   filled: boolean;
 }
 
@@ -36,7 +36,6 @@ export type AndRequirementGroup = Requirement & {
 
 export type HoursRequirementGroup = Requirement & {
   matcher: 'Hours';
-  metadata: { [key: string]: string };
   required_hours: number;
   fulfilled_hours: number;
   requirements: RequirementTypes[];

src/components/planner/Tiles/SemesterTile.tsx

@@ -1,10 +1,11 @@
 import { UniqueIdentifier, useDroppable } from '@dnd-kit/core';
-import React, { FC, forwardRef, useState, useRef } from 'react';
+import React, { FC, forwardRef, useState, useRef, useImperativeHandle } from 'react';
 
 import AnalyticsWrapper from '@/components/common/AnalyticsWrapper';
 import ChevronIcon from '@/icons/ChevronIcon';
 import LockIcon from '@/icons/LockIcon';
 import UnlockedIcon from '@/icons/UnlockedIcon';
+import useAccordionAnimation from '@/shared/useAccordionAnimation';
 import { displaySemesterCode, getSemesterHourFromCourseCode } from '@/utils/utilFunctions';
 
 import DraggableSemesterCourseItem from './SemesterCourseItem';
@@ -26,11 +27,17 @@ export interface SemesterTileProps {
 export const MemoizedSemesterTile = React.memo(
   forwardRef<HTMLDivElement, SemesterTileProps>(function SemesterTile(
     { semester, getDragId },
-    ref,
+    outerRef,
   ) {
-    const [open, setOpen] = useState(true);
+    const innerRef = useRef<HTMLDivElement>(null);
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    useImperativeHandle(outerRef, () => innerRef.current!, []);
+
     const [hoverOpen, setHoverOpen] = useState(false);
     const hoverTimer = useRef<ReturnType<typeof setTimeout>>();
+    const { toggle, open } = useAccordionAnimation(innerRef, () =>
+      semester.courses.length === 0 ? '140px' : '170px',
+    );
 
     const {
       handleSelectCourses,
@@ -96,8 +103,8 @@ export const MemoizedSemesterTile = React.memo(
     // QUESTION: isValid color?
     return (
       <div
-        ref={ref}
-        className={`tutorial-editor-3 flex h-fit select-none flex-col gap-y-2 overflow-hidden rounded-2xl border border-neutral-300 ${
+        ref={innerRef}
+        className={`tutorial-editor-3 flex h-fit select-none flex-col gap-y-2 overflow-hidden rounded-2xl border border-neutral-300 transition-all duration-700 ease-in-out ${
           semester.locked ? 'bg-neutral-200' : 'bg-white'
         }`}
       >
@@ -110,7 +117,7 @@ export const MemoizedSemesterTile = React.memo(
                   open ? '-rotate-90' : 'rotate-90'
                 } ml-auto h-3 w-3 transform cursor-pointer text-neutral-500 transition-all duration-500`}
                 fontSize="inherit"
-                onClick={() => setOpen(!open)}
+                onClick={toggle}
               />
             </div>
           </article>
@@ -153,8 +160,8 @@ export const MemoizedSemesterTile = React.memo(
             />
           )}
           <article
-            className={`mb-5 flex flex-col gap-y-4 overflow-hidden transition-all duration-700 ${
-              open ? 'max-h-[999px]' : 'max-h-0'
+            className={`mb-5 flex flex-col gap-y-4 overflow-hidden transition-all duration-700 ease-in-out ${
+              open ? 'opacity-100' : 'opacity-0'
             }`}
           >
             {semester.courses.map((course) => (

src/components/planner/TransferBank.tsx

@@ -1,30 +1,33 @@
-import { FC, useState } from 'react';
+import { FC, useRef } from 'react';
 
 import ChevronIcon from '@/icons/ChevronIcon';
+import useAccordionAnimation from '@/shared/useAccordionAnimation';
 
 interface TransferBankProps {
   transferCredits: string[];
 }
 
 const TransferBank: FC<TransferBankProps> = ({ transferCredits }) => {
-  const [open, setOpen] = useState(true);
+  const bankRef = useRef(null);
+  const { toggle, open } = useAccordionAnimation(bankRef, () => '50px');
 
   return (
-    <section className="w-full rounded-2xl border border-neutral-200 bg-generic-white px-5 py-3 shadow-sm">
+    <section
+      ref={bankRef}
+      className="w-full flex-shrink-0 overflow-hidden rounded-2xl border border-neutral-200 bg-generic-white px-5 py-3 shadow-sm transition-all duration-1000 ease-in-out"
+    >
       <article className="flex items-center justify-between">
         <h5 className="text-xl font-semibold text-primary-900">Transfer Credits</h5>
         <ChevronIcon
           className={`${
             open ? '-rotate-90' : 'rotate-90'
           } h-3 w-3 transform cursor-pointer text-neutral-500 transition-all duration-500`}
           fontSize="inherit"
-          onClick={() => setOpen(!open)}
+          onClick={toggle}
         />
       </article>
       <ol
-        className={`mt-4 flex flex-wrap gap-x-10 gap-y-3 overflow-hidden transition-all duration-1000 ${
-          open ? 'max-h-[999px]' : 'max-h-0'
-        }`}
+        className={`mt-4 flex flex-wrap gap-x-10 gap-y-3 transition-all duration-1000 ease-in-out`}
       >
         {transferCredits.map((credit, i) => (
           <li

src/components/template/CustomPlan.tsx

@@ -128,6 +128,7 @@ export default function CustomPlan({ onDismiss }: { onDismiss: () => void }) {
         }
       }
     }
+
     // TODO: Consider whether credit was earned or not before adding to credits list
     const credits: Credit[] = [];
     let isTransfer = true;
@@ -158,6 +159,7 @@ export default function CustomPlan({ onDismiss }: { onDismiss: () => void }) {
         }
       }
     }
+
     const dedupedCredits = credits.reduce((acc, curr) => {
       if (!acc.some((i) => i.courseCode === curr.courseCode)) {
         acc.push(curr);