chore: merge branch 'hackathon' into sgunter/calendar-bottom-bar

Author: Samathingamajig

package.json

@@ -24,6 +24,7 @@
         "clsx": "^2.1.0",
         "highcharts": "^11.3.0",
         "highcharts-react-official": "^3.2.1",
+        "html2canvas": "^1.4.1",
         "react": "^18.2.0",
         "react-devtools-core": "^5.0.0",
         "react-dom": "^18.2.0",

pnpm-lock.yaml

@@ -17,7 +17,7 @@ export default function ImportantLinks({ className }: Props) {
             <Text variant='h3'>Important Links</Text>
             <a
                 href='https://utdirect.utexas.edu/apps/registrar/course_schedule/20242/'
-                className='text-ut-burntorange flex items-center gap-0.5'
+                className='flex items-center gap-0.5 text-ut-burntorange'
                 target='_blank'
                 rel='noreferrer'
             >
@@ -26,7 +26,7 @@ export default function ImportantLinks({ className }: Props) {
             </a>
             <a
                 href='https://utdirect.utexas.edu/apps/registrar/course_schedule/20236/'
-                className='text-ut-burntorange flex items-center gap-0.5'
+                className='flex items-center gap-0.5 text-ut-burntorange'
                 target='_blank'
                 rel='noreferrer'
             >
@@ -35,7 +35,7 @@ export default function ImportantLinks({ className }: Props) {
             </a>
             <a
                 href='https://utdirect.utexas.edu/registrar/ris.WBX'
-                className='text-ut-burntorange flex items-center gap-0.5'
+                className='flex items-center gap-0.5 text-ut-burntorange'
                 target='_blank'
                 rel='noreferrer'
             >
@@ -44,7 +44,7 @@ export default function ImportantLinks({ className }: Props) {
             </a>
             <a
                 href='https://utdirect.utexas.edu/registration/chooseSemester.WBX'
-                className='text-ut-burntorange flex items-center gap-0.5'
+                className='flex items-center gap-0.5 text-ut-burntorange'
                 target='_blank'
                 rel='noreferrer'
             >
@@ -53,7 +53,7 @@ export default function ImportantLinks({ className }: Props) {
             </a>
             <a
                 href='https://utdirect.utexas.edu/apps/degree/audits/'
-                className='text-ut-burntorange flex items-center gap-0.5'
+                className='flex items-center gap-0.5 text-ut-burntorange'
                 target='_blank'
                 rel='noreferrer'
             >

src/views/components/ImportantLinks.tsx

@@ -1,4 +1,5 @@
-import React from 'react';
+import React, { useRef } from 'react';
+import html2canvas from 'html2canvas';
 import { DAY_MAP } from 'src/shared/types/CourseMeeting';
 import { CalendarGridCourse } from 'src/views/hooks/useFlattenedCourseSchedule';
 import calIcon from 'src/assets/icons/cal.svg';
@@ -34,11 +35,25 @@ interface Props {
  * @param props
  */
 function CalendarGrid({ courseCells, saturdayClass }: React.PropsWithChildren<Props>): JSX.Element {
+    const calendarRef = useRef(null); // Create a ref for the calendar grid
+
+    const saveAsPNG = () => {
+        if (calendarRef.current) {
+            html2canvas(calendarRef.current).then(canvas => {
+                // Create an a element to trigger download
+                const a = document.createElement('a');
+                a.href = canvas.toDataURL('image/png');
+                a.download = 'calendar.png';
+                a.click();
+            });
+        }
+    };
+
     return (
         <div className={styles.calendar}>
             <div className={styles.dayLabelContainer} />
             {/* Displaying the rest of the calendar */}
-            <div className={styles.timeAndGrid}>
+            <div ref={calendarRef} className={styles.timeAndGrid}>
                 {/* <div className={styles.timeColumn}>
             <div className={styles.timeBlock}></div>
             {hoursOfDay.map((hour) => (
@@ -57,7 +72,9 @@ function CalendarGrid({ courseCells, saturdayClass }: React.PropsWithChildren<Pr
                             {day}
                         </div>
                     ))}
-                    {grid.map(row => row)}
+                    {grid.map((row, index) => (
+                        <React.Fragment key={index}>{row}</React.Fragment>
+                    ))}
                 </div>
             </div>
             {courseCells.map((block: CalendarGridCourse) => (
@@ -82,7 +99,7 @@ function CalendarGrid({ courseCells, saturdayClass }: React.PropsWithChildren<Pr
                     Save as .CAL
                 </button>
                 <div className={styles.divider} /> {/* Second divider */}
-                <button className={styles.calendarButton}>
+                <button onClick={saveAsPNG} className={styles.calendarButton}>
                     <img src={pngIcon} className={styles.buttonIcon} alt='PNG' />
                     Save as .PNG
                 </button>

src/views/components/common/CalendarGrid/CalendarGrid.tsx

@@ -1,7 +1,7 @@
 import { CalendarCourseCellProps } from 'src/views/components/common/CalendarCourseCell/CalendarCourseCell';
 import useSchedules from './useSchedules';
 
-const dayToNumber = {
+const dayToNumber: { [day: string]: number } = {
     Monday: 0,
     Tuesday: 1,
     Wednesday: 2,
@@ -15,18 +15,25 @@ interface CalendarGridPoint {
     endIndex: number;
 }
 
+/**
+ * Return type of useFlattenedCourseSchedule
+ */
 export interface CalendarGridCourse {
     calendarGridPoint?: CalendarGridPoint;
     componentProps: CalendarCourseCellProps;
 }
 
 const convertMinutesToIndex = (minutes: number): number => Math.floor(minutes - 420 / 30);
 
-export function useFlattenedCourseSchedule() {
+/**
+ * Get the active schedule, and convert it to be render-able into a calendar.
+ * @returns CalendarGridCourse
+ */
+export function useFlattenedCourseSchedule(): CalendarGridCourse[] {
     const [activeSchedule] = useSchedules();
     const { courses } = activeSchedule;
 
-    const out = courses.flatMap(course => {
+    return courses.flatMap(course => {
         const {
             status,
             department,
@@ -43,43 +50,38 @@ export function useFlattenedCourseSchedule() {
                         courseDeptAndInstr,
                         status,
                         colors: {
+                            // TODO: figure out colors - these are defaults
                             primaryColor: 'ut-gray',
                             secondaryColor: 'ut-gray',
                         },
                     },
                 },
             ];
         }
+
+        // in-person
         return meetings.flatMap(meeting => {
             const { days, startTime, endTime, location } = meeting;
             const time = meeting.getTimeString({ separator: ' - ', capitalize: true });
             const timeAndLocation = `${time} - ${location ? location.building : 'WB'}`;
 
-            return days.map(d => {
-                const dayIndex = dayToNumber[d];
-                const startIndex = convertMinutesToIndex(startTime);
-                const endIndex = convertMinutesToIndex(endTime);
-                const calendarGridPoint: CalendarGridPoint = {
-                    dayIndex,
-                    startIndex,
-                    endIndex,
-                };
-
-                return {
-                    calendarGridPoint,
-                    componentProps: {
-                        courseDeptAndInstr,
-                        timeAndLocation,
-                        status,
-                        colors: {
-                            primaryColor: 'ut-orange',
-                            secondaryColor: 'ut-orange',
-                        },
+            return days.map(d => ({
+                calendarGridPoint: {
+                    dayIndex: dayToNumber[d],
+                    startIndex: convertMinutesToIndex(startTime),
+                    endIndex: convertMinutesToIndex(endTime),
+                },
+                componentProps: {
+                    courseDeptAndInstr,
+                    timeAndLocation,
+                    status,
+                    colors: {
+                        // TODO: figure out colors - these are defaults
+                        primaryColor: 'ut-orange',
+                        secondaryColor: 'ut-orange',
                     },
-                };
-            });
+                },
+            }));
         });
     });
-
-    return out;
 }