feat: disable calendar action buttons when meet start/end week

compsci-adl · Sep 24, 2024 · 0ebdf29 · 0ebdf29
1 parent 01027e1
commit 0ebdf29
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 12 deletions.
diff --git a/src/components/Calendar.tsx b/src/components/Calendar.tsx
@@ -67,13 +67,38 @@ const CourseCard = ({ course }: { course: WeekCourse }) => {
 type CalendarHeaderProps = {
 	currentWeek: dayjs.Dayjs;
 	actions: ReturnType<typeof useCalendar>['actions'];
+	status: ReturnType<typeof useCalendar>['status'];
 };
-const CalendarHeader = ({ currentWeek, actions }: CalendarHeaderProps) => {
+const CalendarHeader = ({
+	currentWeek,
+	actions,
+	status,
+}: CalendarHeaderProps) => {
 	const actionButtons = [
-		{ icon: '⏪', description: 'First week', action: actions.goToStartWeek },
-		{ icon: '◀️', description: 'Previous week', action: actions.prevWeek },
-		{ icon: '▶️', description: 'Next week', action: actions.nextWeek },
-		{ icon: '⏩', description: 'Last week', action: actions.goToEndWeek },
+		{
+			icon: '⏪',
+			description: 'First week',
+			action: actions.goToStartWeek,
+			disabled: status.isStartWeek,
+		},
+		{
+			icon: '◀️',
+			description: 'Previous week',
+			action: actions.prevWeek,
+			disabled: status.isStartWeek,
+		},
+		{
+			icon: '▶️',
+			description: 'Next week',
+			action: actions.nextWeek,
+			disabled: status.isEndWeek,
+		},
+		{
+			icon: '⏩',
+			description: 'Last week',
+			action: actions.goToEndWeek,
+			disabled: status.isEndWeek,
+		},
 	];
 	return (
 		<div className="sticky top-0 z-50 flex items-center justify-between bg-white py-1">
@@ -84,11 +109,17 @@ const CalendarHeader = ({ currentWeek, actions }: CalendarHeaderProps) => {
 				</span>
 				<span className="font-light">{YEAR}</span>
 			</h2>
-			<div className="flex *:text-3xl">
-				{actionButtons.map(({ icon, description, action }) => (
-					<Tooltip content={description} key={description}>
-						<Button isIconOnly variant="light" onClick={action}>
-							{icon}
+			<div className="flex">
+				{actionButtons.map((a) => (
+					<Tooltip content={a.description} key={a.description}>
+						<Button
+							isIconOnly
+							variant="light"
+							onClick={a.action}
+							disabled={a.disabled}
+							className="text-3xl disabled:opacity-50"
+						>
+							{a.icon}
 						</Button>
 					</Tooltip>
 				))}
@@ -241,12 +272,16 @@ const CalendarCourseOtherTimes = ({
 };
 
 export const Calendar = () => {
-	const { courses, currentWeek, actions } = useCalendar();
+	const { courses, currentWeek, actions, status } = useCalendar();
 	const isDragging = useDraggingCourse((s) => s.isDragging);
 
 	return (
 		<div>
-			<CalendarHeader currentWeek={currentWeek} actions={actions} />
+			<CalendarHeader
+				currentWeek={currentWeek}
+				actions={actions}
+				status={status}
+			/>
 			<div className="relative">
 				<CalendarBg currentWeek={currentWeek} />
 				<CalendarCourses courses={courses} />

diff --git a/src/helpers/calendar.ts b/src/helpers/calendar.ts
@@ -153,10 +153,14 @@ export const useCalendar = () => {
 
 	const courses = getWeekCourses(currentWeek, enrolledCourses);
 
+	const isStartWeek = currentWeek.isSame(startWeek);
+	const isEndWeek = currentWeek.isSame(endWeek);
+
 	return {
 		courses,
 		currentWeek,
 		actions: { prevWeek, nextWeek, goToStartWeek, goToEndWeek },
+		status: { isStartWeek, isEndWeek },
 	};
 };