feat: enable TS strict mode (Longhorn-Developers#168)

* feat: enable TS strict mode * fix: strict TS errors * fix: strict TS errors * fix: strict TS errors * fix: strict TS errors * fix: strict TS errors * fix: strict TS errors * fix: strict TS errors * fix: strict TS errors * fix: colors bug with default * fix: strict TS errors * fix: strict TS errors * fix: strict TS errors * fix: strict TS errors * fix: strict TS errors * fix: strict TS errors * fix: strict TS errors * fix: strict TS errors * fix: strict TS errors * fix: strict TS errors * fix: strict TS errors * fix: text type errors * fix: strict TS errors * fix: strict TS errors * fix: strict TS errors - add definite assignment assertion * fix: strict TS errors - add definite assignment assertion * fix: strict TS errors * fix: strict TS errors * fix: strict TS errors * fix: strict TS errors * fix: strict TS errors * fix: strict TS errors * fix(ESLint): error on no-explicit-any * fix: type annotations for any types * fix: strict TS errors * fix: strict TS errors * fix: strict TS errors * fix: strict TS errors (and remove packages) * fix: strict TS errors * fix: strict TS errors * fix: strict TS errors * fix: strict TS errors * fix: strict TS errors * fix: strict TS errors * fix: strict TS errors * feat: enable React.StrictMode * fix: strict TS errors (done!) * fix: build error * fix: replace no-explicit-any assertions * refactor: cleanup * refactor: more cleanup * style: prettier --------- Co-authored-by: Lukas Zenick <lukas@utexas.edu> Co-authored-by: Razboy20 <razboy20@gmail.com>
caseycharleston · Mar 30, 2024 · 7dee7c8 · 7dee7c8
1 parent 34e363d
commit 7dee7c8
Show file tree

Hide file tree

Showing 6 changed files with 144 additions and 6 deletions.
diff --git a/src/stories/components/calendar/CalendarCourse.stories.tsx b/src/stories/components/calendar/CalendarCourse.stories.tsx
@@ -0,0 +1,62 @@
+import { Course, Status } from '@shared/types/Course';
+import { CourseMeeting, DAY_MAP } from '@shared/types/CourseMeeting';
+import { CourseSchedule } from '@shared/types/CourseSchedule';
+import Instructor from '@shared/types/Instructor';
+import { getCourseColors } from '@shared/util/colors';
+import type { Meta, StoryObj } from '@storybook/react';
+import CalendarCourse from '@views/components/calendar/CalendarCourseBlock/CalendarCourseMeeting';
+
+const meta = {
+    title: 'Components/Calendar/CalendarCourseMeeting',
+    component: CalendarCourse,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        course: { control: 'object' },
+        meetingIdx: { control: 'number' },
+    },
+} satisfies Meta<typeof CalendarCourse>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        course: new Course({
+            uniqueId: 123,
+            number: '311C',
+            fullName: "311C - Bevo's Default Course",
+            courseName: "Bevo's Default Course",
+            department: 'BVO',
+            creditHours: 3,
+            status: Status.OPEN,
+            instructors: [new Instructor({ firstName: '', lastName: 'Bevo', fullName: 'Bevo' })],
+            isReserved: false,
+            url: '',
+            flags: [],
+            schedule: new CourseSchedule({
+                meetings: [
+                    new CourseMeeting({
+                        days: [DAY_MAP.M, DAY_MAP.W, DAY_MAP.F],
+                        startTime: 480,
+                        endTime: 570,
+                        location: {
+                            building: 'UTC',
+                            room: '123',
+                        },
+                    }),
+                ],
+            }),
+            instructionMode: 'In Person',
+            semester: {
+                year: 2024,
+                season: 'Spring',
+            },
+            scrapedAt: Date.now(),
+            colors: getCourseColors('emerald', 500),
+        }),
+        meetingIdx: 0,
+    },
+};
diff --git a/src/views/components/calendar/CalendarCourseBlock/CalendarCourseMeeting.tsx b/src/views/components/calendar/CalendarCourseBlock/CalendarCourseMeeting.tsx
@@ -0,0 +1,45 @@
+import type { Course } from '@shared/types/Course';
+import React from 'react';
+
+import styles from './CalendarCourseMeeting.module.scss';
+
+/**
+ * Props for the CalendarCourseMeeting component.
+ */
+export interface CalendarCourseMeetingProps {
+    /** The Course that the meeting is for. */
+    course: Course;
+    /* index into course meeting array to display */
+    meetingIdx?: number;
+}
+
+/**
+ * `CalendarCourseMeeting` is a functional component that displays a course meeting.
+ *
+ * @example
+ * <CalendarCourseMeeting course={course} meeting={meeting} />
+ */
+export default function CalendarCourseMeeting({ course, meetingIdx }: CalendarCourseMeetingProps): JSX.Element | null {
+    let meeting = meetingIdx !== undefined ? course.schedule.meetings[meetingIdx] : undefined;
+
+    if (!meeting) {
+        return null;
+    }
+
+    return (
+        <div className={styles.component}>
+            <div className={styles.content}>
+                <div className={styles['course-detail']}>
+                    <div className={styles.course}>
+                        {course.department} {course.number} - {course.instructors[0]?.lastName}
+                    </div>
+                    <div className={styles['time-and-location']}>
+                        {`${meeting.getTimeString({ separator: '-', capitalize: true })}${
+                            meeting.location ? ` - ${meeting.location.building}` : ''
+                        }`}
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
diff --git a/src/views/components/common/Card/Card.tsx b/src/views/components/common/Card/Card.tsx
@@ -0,0 +1,31 @@
+import clsx from 'clsx';
+import React from 'react';
+
+import styles from './Card.module.scss';
+
+/**
+ * Props for the Card component.
+ */
+export type Props = {
+    style?: React.CSSProperties;
+    className?: string;
+    onClick?: (...args: unknown[]) => void;
+    children?: React.ReactNode;
+    testId?: string;
+};
+
+/**
+ * A reusable Card component that can be used to wrap other components
+ */
+export default function Card(props: Props) {
+    return (
+        <div
+            style={props.style}
+            className={clsx(styles.card, props.className)}
+            onClick={props.onClick}
+            data-testid={props.testId}
+        >
+            {props.children}
+        </div>
+    );
+}
diff --git a/src/views/components/common/Dialog.tsx b/src/views/components/common/Dialog.tsx
@@ -6,7 +6,7 @@ import React, { Fragment } from 'react';
 
 import ExtensionRoot from './ExtensionRoot/ExtensionRoot';
 
-interface _DialogProps {
+export interface _DialogProps {
     className?: string;
     title?: JSX.Element;
     description?: JSX.Element;

diff --git a/src/views/components/injected/CourseCatalogInjectedPopup/GradeDistribution.tsx b/src/views/components/injected/CourseCatalogInjectedPopup/GradeDistribution.tsx
@@ -96,8 +96,8 @@ export default function GradeDistribution({ course }: GradeDistributionProps): J
             }
         };
 
-        fetchInitialData();
-    }, [course]);
+    //     fetchInitialData();
+    // }, [course]);
 
     const handleSelectSemester = (event: ChangeEvent<HTMLSelectElement>) => {
         setSemester(event.target.value);
@@ -178,7 +178,7 @@ export default function GradeDistribution({ course }: GradeDistributionProps): J
             {
                 type: 'column',
                 name: 'Grades',
-                data: chartData,
+                // data: chartData,
             },
         ],
     };
@@ -234,7 +234,7 @@ export default function GradeDistribution({ course }: GradeDistributionProps): J
                                         {semester}
                                     </option>
                                 ))}
-                        </select>
+                        </select> */}
                     </div>
                     <HighchartsReact ref={ref} highcharts={Highcharts} options={chartOptions} />
                 </>

diff --git a/src/views/hooks/useFlattenedCourseSchedule.ts b/src/views/hooks/useFlattenedCourseSchedule.ts
@@ -2,7 +2,7 @@ import type { HexColor } from '@shared/types/Color';
 import type { Course, StatusType } from '@shared/types/Course';
 import type { CourseMeeting } from '@shared/types/CourseMeeting';
 import { colors } from '@shared/types/ThemeColors';
-import { UserSchedule } from '@shared/types/UserSchedule';
+import type { UserSchedule } from '@shared/types/UserSchedule';
 import type { CalendarCourseCellProps } from '@views/components/calendar/CalendarCourseCell/CalendarCourseCell';
 
 import useSchedules from './useSchedules';