feat: refactor calendar

src/views/components/calendar/CalendarGrid/CalendarGrid.tsx

@@ -1,17 +1,16 @@
 import type { Course } from '@shared/types/Course';
-//  import html2canvas from 'html2canvas';
 import { DAY_MAP } from '@shared/types/CourseMeeting';
-/*  import calIcon from 'src/assets/icons/cal.svg';
-import pngIcon from 'src/assets/icons/png.svg';
-*/
 import { getCourseColors } from '@shared/util/colors';
 import CalendarCourseCell from '@views/components/calendar/CalendarCourseCell/CalendarCourseCell';
 import CalendarCell from '@views/components/calendar/CalendarGridCell/CalendarGridCell';
 import type { CalendarGridCourse } from '@views/hooks/useFlattenedCourseSchedule';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect } from 'react';
 
 import styles from './CalendarGrid.module.scss';
 
+const daysOfWeek = Object.keys(DAY_MAP).filter(key => !['S', 'SU'].includes(key));
+const hoursOfDay = Array.from({ length: 14 }, (_, index) => index + 8);
+
 interface Props {
     courseCells?: CalendarGridCourse[];
     saturdayClass?: boolean;
@@ -22,71 +21,41 @@ interface Props {
  * Grid of CalendarGridCell components forming the user's course schedule calendar view
  * @param props
  */
-function CalendarGrid({ courseCells, saturdayClass, setCourse }: React.PropsWithChildren<Props>): JSX.Element {
+export default function CalendarGrid({
+    courseCells,
+    saturdayClass,
+    setCourse,
+}: React.PropsWithChildren<Props>): JSX.Element {
     //  const [grid, setGrid] = useState([]);
-    const calendarRef = useRef(null); // Create a ref for the calendar grid
-
-    const daysOfWeek = Object.keys(DAY_MAP).filter(key => !['S', 'SU'].includes(key));
-    const hoursOfDay = Array.from({ length: 14 }, (_, index) => index + 8);
-
-    /*  const saveAsPNG = () => {
-        htmlToImage
-            .toPng(calendarRef.current, {
-                backgroundColor: 'white',
-                style: {
-                    background: 'white',
-                    marginTop: '20px',
-                    marginBottom: '20px',
-                    marginRight: '20px',
-                    marginLeft: '20px',
-                },
-            })
-            .then(dataUrl => {
-                let img = new Image();
-                img.src = dataUrl;
-                fetch(dataUrl)
-                    .then(response => response.blob())
-                    .then(blob => {
-                        const href = window.URL.createObjectURL(blob);
-                        const link = document.createElement('a');
-                        link.href = href;
-                        link.download = 'my-schedule.png';
-                        document.body.appendChild(link);
-                        link.click();
-                        document.body.removeChild(link);
-                    })
-                    .catch(error => console.error('Error downloading file:', error));
-            })
-            .catch(error => {
-                console.error('oops, something went wrong!', error);
-            });
-    };  */
-
-    // TODO: Change to useMemo hook once we start calculating grid size based on if there's a Saturday class or not
+    // const calendarRef = useRef(null); // Create a ref for the calendar grid
     const grid = [];
-    for (let i = 0; i < 13; i++) {
-        const row = [];
-        let hour = hoursOfDay[i];
-        let styleProp = {
-            gridColumn: '1',
-            gridRow: `${2 * i + 2}`,
-        };
-        row.push(
-            <div key={hour} className={styles.timeBlock} style={styleProp}>
-                <div className={styles.timeLabelContainer}>
-                    <p>{(hour % 12 === 0 ? 12 : hour % 12) + (hour < 12 ? ' AM' : ' PM')}</p>
-                </div>
-            </div>
-        );
-        for (let k = 0; k < 5; k++) {
-            styleProp = {
-                gridColumn: `${k + 2}`,
-                gridRow: `${2 * i + 2} / ${2 * i + 4}`,
+
+    // Run once to create the grid on initial render
+    useEffect(() => {
+        for (let i = 0; i < 13; i++) {
+            const row = [];
+            let hour = hoursOfDay[i];
+            let styleProp = {
+                gridColumn: '1',
+                gridRow: `${2 * i + 2}`,
             };
-            row.push(<CalendarCell key={k} styleProp={styleProp} />);
+            row.push(
+                <div key={hour} className={styles.timeBlock} style={styleProp}>
+                    <div className={styles.timeLabelContainer}>
+                        <p>{(hour % 12 === 0 ? 12 : hour % 12) + (hour < 12 ? ' AM' : ' PM')}</p>
+                    </div>
+                </div>
+            );
+            for (let k = 0; k < 5; k++) {
+                styleProp = {
+                    gridColumn: `${k + 2}`,
+                    gridRow: `${2 * i + 2} / ${2 * i + 4}`,
+                };
+                row.push(<CalendarCell key={k} styleProp={styleProp} />);
+            }
+            grid.push(row);
         }
-        grid.push(row);
-    }
+    });
 
     return (
         <div className={styles.calendarGrid}>
@@ -97,14 +66,12 @@ function CalendarGrid({ courseCells, saturdayClass, setCourse }: React.PropsWith
                     {day}
                 </div>
             ))}
-            {grid.map((row, rowIndex) => row)}
+            {grid.map(row => row)}
             {courseCells ? <AccountForCourseConflicts courseCells={courseCells} setCourse={setCourse} /> : null}
         </div>
     );
 }
 
-export default CalendarGrid;
-
 interface AccountForCourseConflictsProps {
     courseCells: CalendarGridCourse[];
     setCourse: React.Dispatch<React.SetStateAction<Course | null>>;
@@ -178,16 +145,3 @@ function AccountForCourseConflicts({ courseCells, setCourse }: AccountForCourseC
         );
     });
 }
-
-/* <div className={styles.buttonContainer}>
-                <div className={styles.divider} /> 
-                <button className={styles.calendarButton}>
-                    <img src={calIcon} className={styles.buttonIcon} alt='CAL' />
-                    Save as .CAL
-                </button>
-                <div className={styles.divider} />
-                <button onClick={saveAsPNG} className={styles.calendarButton}>
-                    <img src={pngIcon} className={styles.buttonIcon} alt='PNG' />
-                    Save as .PNG
-                </button>
-                        </div>  */