rohskiddo/UMBRA
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Fix review findings: safe date parsing, useCallback discipline, dead class cleanup

Browse Source 
W-01: Wrap handlePrev/handleNext/handleDayClick in useCallback
W-02: Use date-fns parse() instead of new Date() for timezone-safe parsing
W-03: Change default firstDayOfWeek from 1 to 0 to match CalendarPage
S-01: Use format(day, 'yyyy-MM-dd') as React key instead of toISOString()
S-02: Remove dead Tailwind color classes overridden by inline styles
Perf: Guard setSelectedDate with comparison to skip no-op re-renders
Perf: Memoize selectedDateObj via useMemo to avoid re-parsing each render

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Kyle 2026-03-17 19:48:32 +08:00
parent a5ac047b0b
commit b939843249
1 changed files with 25 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
frontend/src/components/calendar/MiniCalendar.tsx
View File

@ -1,8 +1,8 @@
import { useState, useEffect, useMemo, memo } from 'react';
import { useState, useEffect, useMemo, useCallback, memo } from 'react';
import {
startOfMonth, endOfMonth, startOfWeek, endOfWeek,
eachDayOfInterval, format, isSameDay, isSameMonth, isToday,
addMonths, subMonths,
addMonths, subMonths, parse,
} from 'date-fns';
import { ChevronLeft, ChevronRight } from 'lucide-react';
import { Button } from '@/components/ui/button';
@ -30,10 +30,17 @@ function getOrderedLabels(firstDay: number) {
const MiniCalendar = memo(function MiniCalendar({
onDateClick,
currentDate,
firstDayOfWeek = 1,
firstDayOfWeek = 0,
}: MiniCalendarProps) {
const REF_DATE = useMemo(() => new Date(), []);
const parseDate = useCallback(
(dateStr: string) => parse(dateStr, 'yyyy-MM-dd', REF_DATE),
[REF_DATE]
);
const [displayedMonth, setDisplayedMonth] = useState(() =>
currentDate ? startOfMonth(new Date(currentDate)) : startOfMonth(new Date())
currentDate ? startOfMonth(parseDate(currentDate)) : startOfMonth(new Date())
);
const [selectedDate, setSelectedDate] = useState<string | null>(
currentDate ?? null
@ -42,12 +49,12 @@ const MiniCalendar = memo(function MiniCalendar({
// Sync displayed month when main calendar navigates across months
useEffect(() => {
if (!currentDate) return;
const incoming = startOfMonth(new Date(currentDate));
const incoming = startOfMonth(parseDate(currentDate));
setDisplayedMonth((prev) =>
prev.getTime() === incoming.getTime() ? prev : incoming
);
setSelectedDate(currentDate);
}, [currentDate]);
setSelectedDate((prev) => prev === currentDate ? prev : currentDate);
}, [currentDate, parseDate]);
const days = useMemo(
() => buildGrid(displayedMonth, firstDayOfWeek),
@ -59,10 +66,10 @@ const MiniCalendar = memo(function MiniCalendar({
[firstDayOfWeek]
);
const handlePrev = () => setDisplayedMonth((m) => subMonths(m, 1));
const handleNext = () => setDisplayedMonth((m) => addMonths(m, 1));
const handlePrev = useCallback(() => setDisplayedMonth((m) => subMonths(m, 1)), []);
const handleNext = useCallback(() => setDisplayedMonth((m) => addMonths(m, 1)), []);
const handleDayClick = (day: Date) => {
const handleDayClick = useCallback((day: Date) => {
const dateStr = format(day, 'yyyy-MM-dd');
setSelectedDate(dateStr);
// If clicking a day in another month, also shift the displayed month
@ -70,9 +77,12 @@ const MiniCalendar = memo(function MiniCalendar({
setDisplayedMonth(startOfMonth(day));
}
onDateClick(dateStr);
};
}, [displayedMonth, onDateClick]);
const selectedDateObj = selectedDate ? new Date(selectedDate) : null;
const selectedDateObj = useMemo(
() => selectedDate ? parseDate(selectedDate) : null,
[selectedDate, parseDate]
);
return (
<div className="px-3 pt-3 pb-2 max-w-[280px] mx-auto">
@ -120,15 +130,15 @@ const MiniCalendar = memo(function MiniCalendar({
return (
<button
key={day.toISOString()}
key={format(day, 'yyyy-MM-dd')}
type="button"
onClick={() => handleDayClick(day)}
className={[
'h-7 text-xs flex items-center justify-center rounded-md transition-colors duration-100',
isSelected
? 'bg-accent text-accent-foreground font-medium'
? 'font-medium'
: today
? 'bg-accent/20 text-accent font-semibold'
? 'font-semibold'
: isCurrentMonth
? 'text-foreground hover:bg-accent/10'
: 'text-muted-foreground/40 hover:bg-accent/10',