Fix type issues

package.json

@@ -49,7 +49,7 @@
     "sass": "^1.32.8",
     "ts-node": "^9.1.1",
     "type-fest": "^1.0.2",
-    "typescript": "^5.2.2",
+    "typescript": "^4.9.5",
     "xo": "^0.56.0"
   },
   "next-unused": {
@@ -72,7 +72,8 @@
       "@typescript-eslint/naming-convention": "off",
       "n/prefer-global/process": "off",
       "n/prefer-global/buffer": "off",
-      "unicorn/no-await-expression-member": "off"
+      "unicorn/no-await-expression-member": "off",
+      "@typescript-eslint/ban-types": "off"
     },
     "envs": [
       "browser",
@@ -126,8 +127,8 @@
   },
   "dependencies": {
     "@chakra-ui/icons": "^1.1.7",
-    "@chakra-ui/react": "^1.8.6",
-    "@chakra-ui/system": "^1.11.2",
+    "@chakra-ui/react": "^1.8.9",
+    "@chakra-ui/system": "^1.12.1",
     "@chakra-ui/theme-tools": "^1.3.6",
     "@emotion/react": "^11.4.1",
     "@emotion/styled": "^11.3.0",

src/components/basket/export-options/image.tsx

@@ -34,7 +34,7 @@ type ExportImageProps = {
 const ExportImage = ({isOpen, onClose}: ExportImageProps) => {
 	const {allBasketsState: {currentBasket}, apiState} = useStore();
 	const [hasCopied, setHasCopied] = useEphemeralValue(false, 500);
-	const [blob, setBlob] = useState<Blob | undefined>(null);
+	const [blob, setBlob] = useState<Blob>();
 	const [isLoading, setIsLoading] = useState(false);
 	const componentToCaptureRef = useRef<HTMLDivElement>(null);
 
@@ -78,7 +78,7 @@ const ExportImage = ({isOpen, onClose}: ExportImageProps) => {
 
 	const canCopyImage = typeof ClipboardItem !== 'undefined';
 
-	const pngUri = useMemo(() => blob === null ? '' : URL.createObjectURL(blob), [blob]);
+	const pngUri = useMemo(() => blob ? URL.createObjectURL(blob) : '', [blob]);
 
 	return (
 		<>

src/components/basket/index.tsx

@@ -52,7 +52,6 @@ const Basket = observer(() => {
 	const onShowBasketTip = useTip({
 		tip: 'Tap the floating bar at the bottom, then \'Create a new basket\' to enable the add-to-basket buttons on courses and sections.',
 		tipSpecificToUltrawides: 'Tap \'Create a new basket\' to enable the add-to-basket buttons on courses and sections.',
-		duration: null,
 	});
 
 	useTimeout(() => {

src/components/basket/table.tsx

@@ -70,7 +70,7 @@ const SectionRow = observer(({section, isForCapture, handleSearch}: SectionRowPr
 			<Td>
 				<TimeDisplay
 					size='lg'
-					schedule={section.parsedTime}
+					schedule={section.parsedTime ?? undefined}
 					colorScheme={currentBasket?.doesSectionInBasketConflictMap.get(section.id) ? 'red' : undefined}/>
 			</Td>
 			<Td>

src/components/course-stats.tsx

@@ -22,7 +22,7 @@ const CourseStats = (props: StackProps & {data: IPassFailDropRecord[]}) => {
 	const sortedStats = props.data.slice().sort((a, b) => (a.year + SEMESTER_VALUES[a.semester]) - (b.year + SEMESTER_VALUES[b.semester]));
 
 	const lastStat = sortedStats.at(-1);
-	const rangeString = `between ${SEMESTER_DISPLAY_MAPPING[sortedStats[0].semester]} ${sortedStats[0].year} and ${SEMESTER_DISPLAY_MAPPING[lastStat.semester]} ${lastStat.year}`;
+	const rangeString = lastStat ? `between ${SEMESTER_DISPLAY_MAPPING[sortedStats[0].semester]} ${sortedStats[0].year} and ${SEMESTER_DISPLAY_MAPPING[lastStat.semester]} ${lastStat.year}` : 'unknown';
 
 	let totalDropped = 0;
 	let totalFailed = 0;

src/components/sections-table/index.tsx

@@ -42,7 +42,7 @@ const Row = observer(({section}: {section: ISectionFromAPIWithSchedule}) => {
 				<InstructorList instructors={section.instructors}/>
 			</Td>
 			<Td>
-				<TimeDisplay schedule={section.parsedTime}/>
+				<TimeDisplay schedule={section.parsedTime ?? undefined}/>
 			</Td>
 			<Td>
 				<LocationWithPopover

src/lib/api-types.ts

@@ -18,20 +18,20 @@ export type IInstructorFromAPI = {
 	id: number;
 	fullName: string;
 	departments: string[];
-	email: string | undefined;
-	phone: string | undefined;
-	office: string | undefined;
-	websiteURL: string | undefined;
-	photoURL: string | undefined;
-	thumbnailURL: string | undefined;
+	email: string | null;
+	phone: string | null;
+	office: string | null;
+	websiteURL: string | null;
+	photoURL: string | null;
+	thumbnailURL: string | null;
 	interests: string[];
 	occupations: string[];
-	averageDifficultyRating: number | undefined;
-	averageRating: number | undefined;
-	numRatings: number | undefined;
-	rmpId: string | undefined;
+	averageDifficultyRating: number | null;
+	averageRating: number | null;
+	numRatings: number | null;
+	rmpId: string | null;
 	updatedAt: string;
-	deletedAt: string | undefined;
+	deletedAt: string | null;
 };
 
 export type IPassFailDropRecord = {
@@ -68,14 +68,14 @@ export type ISectionFromAPI = {
 		id: number;
 	}>;
 	locationType: ELocationType;
-	buildingName: string | undefined;
-	room: string | undefined;
+	buildingName: string | null;
+	room: string | null;
 	updatedAt: string;
-	deletedAt: string | undefined;
+	deletedAt: string | null;
 };
 
 export type ISectionFromAPIWithSchedule = ISectionFromAPI & {
-	parsedTime: Schedule | undefined;
+	parsedTime: Schedule | null;
 };
 
 export type ICourseFromAPI = {
@@ -85,11 +85,11 @@ export type ICourseFromAPI = {
 	subject: string;
 	crse: string;
 	title: string;
-	description: string | undefined;
-	prereqs: string | undefined;
+	description: string | null;
+	prereqs: string | null;
 	updatedAt: string;
-	deletedAt: string | undefined;
-	offered: string[] | undefined;
+	deletedAt: string | null;
+	offered: string[] | null;
 	minCredits: number;
 	maxCredits: number;
 };

src/lib/arr-map.ts

@@ -16,6 +16,6 @@ export class ArrayMap<T> {
 	}
 
 	get(key: string | number): T[] | undefined {
-		return this.map.get(key) ?? null;
+		return this.map.get(key);
 	}
 }

src/lib/hooks/use-held-key.ts

@@ -4,7 +4,7 @@ type TReturnType = [boolean, (event: KeyboardEvent | React.KeyboardEvent<HTMLInp
 
 const useHeldKey = ({key, minDuration = 512, stopPropagation = true}: {key: string; minDuration?: number; stopPropagation?: boolean}): TReturnType => {
 	const [triggered, setTriggered] = useState(false);
-	const timeoutRef = useRef<NodeJS.Timeout | undefined>(null);
+	const timeoutRef = useRef<NodeJS.Timeout>();
 
 	const handleKeydown = useCallback((event: KeyboardEvent | React.KeyboardEvent<HTMLInputElement>) => {
 		if (event.key === key) {
@@ -27,7 +27,7 @@ const useHeldKey = ({key, minDuration = 512, stopPropagation = true}: {key: stri
 
 			if (timeoutRef.current) {
 				clearTimeout(timeoutRef.current);
-				timeoutRef.current = null;
+				timeoutRef.current = undefined;
 			}
 
 			setTriggered(false);

src/lib/state/api.ts

@@ -51,7 +51,7 @@ export class APIState {
 	transferCourses: ITransferCourseFromAPI[] = [];
 	loading = false;
 	errors: Error[] = [];
-	lastUpdatedAt: Date | undefined = null;
+	lastUpdatedAt: Date | undefined;
 
 	availableTerms: IConcreteTerm[] = [];
 	selectedTerm?: IPotentialFutureTerm;
@@ -165,7 +165,7 @@ export class APIState {
 	}
 
 	get keysLastUpdatedAt(): Record<DATA_KEYS, Date> {
-		const reducer = (array: Array<{updatedAt: string; deletedAt?: string | undefined}>) => array.reduce((maxDate, element) => {
+		const reducer = (array: Array<{updatedAt: string; deletedAt?: string | null}>) => array.reduce((maxDate, element) => {
 			const prospectiveDates = [maxDate, new Date(element.updatedAt)];
 
 			if (element.deletedAt) {
@@ -239,7 +239,6 @@ export class APIState {
 		this.selectedTerm = term;
 		this.courses = [];
 		this.sections = [];
-		this.lastUpdatedAt = null;
 	}
 
 	setSingleFetchEndpoints(endpoints: ENDPOINT[], shouldInvalidateData = false) {
@@ -294,7 +293,7 @@ export class APIState {
 
 				if (semesters && !this.selectedTerm) {
 					const concreteSemesters = semesters.filter(s => !s.isFuture);
-					this.setSelectedTerm(concreteSemesters.at(-2));
+					this.setSelectedTerm(concreteSemesters.at(-2)!);
 				}
 			}
 

src/pages/index.tsx

@@ -14,7 +14,7 @@ const isFirstRender = typeof window === 'undefined';
 
 const MainContent = () => {
 	const [numberOfScrolledColumns, setNumberOfScrolledColumns] = useState(0);
-	const courseTableContainerRef = useRef<HTMLDivElement | undefined>(null);
+	const courseTableContainerRef = useRef<HTMLDivElement>(null);
 
 	const handleScrollToTop = useCallback(() => {
 		if (courseTableContainerRef.current) {

src/pages/transfer-courses.tsx

@@ -12,7 +12,7 @@ const isFirstRender = typeof window === 'undefined';
 
 const TransferCourses = () => {
 	const {transferCoursesState, apiState} = useStore();
-	const searchBarRef = useRef<HTMLDivElement | undefined>(null);
+	const searchBarRef = useRef<HTMLDivElement>(null);
 
 	const handleScrollToTop = useCallback(() => {
 		if (searchBarRef.current) {

tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "es2017",
+    "target": "es2020",
     "lib": [
       "dom",
       "dom.iterable",