fix: hide enrolled class time when dragging fix #6

src/components/Calendar.tsx

@@ -224,14 +224,18 @@ const CourseTimePlaceholderCard = ({
 	return (
 		<div
 			className={clsx(
-				'z-40 flex h-full w-full items-center justify-center rounded-md text-xs',
+				'z-40 h-full w-full overflow-hidden rounded-md pt-4 text-xs',
 				color.bg,
 				color.text,
 				isDraggedOver ? 'opacity-80 brightness-75' : 'opacity-50',
 			)}
 			ref={ref}
 		>
+			{/* FIXME: Fix grid width to remove this placeholder, and center the location text */}
 			<div className="text-center">{location}</div>
+			<div className="invisible">
+				PLACEHOLDER DO NOT REMOVE ME AND I AM VERY LOOOOOONG
+			</div>
 		</div>
 	);
 };
@@ -246,7 +250,6 @@ const CalendarCourseOtherTimes = ({
 		courseId: course.id,
 		classTypeId: course.classTypeId,
 		currentWeek,
-		currentClassNumber: course.classNumber,
 	});
 
 	if (times.length === 0) return;

src/data/enrolled-courses.ts

@@ -95,6 +95,17 @@ export const useEnrolledCourse = (id: string) => {
 	return { course, updateClass };
 };
 
+export const useEnrolledCourseClassNumber = (
+	courseId: string,
+	classTypeId: string,
+) => {
+	const course = useEnrolledCourses((s) =>
+		s.courses.find((c) => c.id === courseId),
+	);
+	const classType = course?.classes.find((c) => c.id === classTypeId);
+	return classType?.classNumber;
+};
+
 export const useDetailedEnrolledCourses = (): Array<DetailedEnrolledCourse> => {
 	const coursesInfo = useCoursesInfo();
 

src/helpers/calendar.ts

@@ -2,7 +2,10 @@ import { useEffect, useState } from 'react';
 
 import { WEEK_DAYS } from '../constants/week-days';
 import { useGetCourseClasses } from '../data/course-info';
-import { useDetailedEnrolledCourses } from '../data/enrolled-courses';
+import {
+	useDetailedEnrolledCourses,
+	useEnrolledCourseClassNumber,
+} from '../data/enrolled-courses';
 import dayjs from '../lib/dayjs';
 import type {
 	DateTimeRange,
@@ -168,20 +171,21 @@ export const useOtherWeekCourseTimes = ({
 	courseId,
 	classTypeId,
 	currentWeek,
-	// currentClassNumber,
 }: {
 	courseId: string;
 	classTypeId: string;
 	currentWeek: dayjs.Dayjs;
-	currentClassNumber: string;
 }) => {
 	const classes = useGetCourseClasses(courseId, classTypeId);
+	const currentClassNumber = useEnrolledCourseClassNumber(
+		courseId,
+		classTypeId,
+	);
 	if (!classes) return [];
 	const times: OtherWeekCoursesTimes = [[], [], [], [], []];
 	classes.forEach((cl) => {
 		cl.meetings.forEach((m) => {
-			// FIXME: Sometimes this will hide the wrong class #6
-			// if (cl.number === currentClassNumber) return;
+			if (cl.number === currentClassNumber) return;
 			const isMeetingInWeek = checkDateRangeInWeek(currentWeek, m.date);
 			if (!isMeetingInWeek) return;
 			const time = times[WEEK_DAYS.indexOf(m.day)];