refactor: simplify CalendarPage and CalendarHeader components by removing unused props
- Removed the handleGoToToday function and its associated prop from CalendarPage, streamlining the component's logic. - Eliminated the isLoading and onRefresh props from CalendarHeader, enhancing clarity and reducing complexity. - Updated internationalization messages to remove references to "Today" and "Refresh," aligning with the component changes.
This commit is contained in:
@@ -123,11 +123,6 @@ export function CalendarPage({ isAllowed, initDataRaw }: CalendarPageProps) {
|
|||||||
setSelectedDay(null);
|
setSelectedDay(null);
|
||||||
}, [setSelectedDay]);
|
}, [setSelectedDay]);
|
||||||
|
|
||||||
const handleGoToToday = useCallback(() => {
|
|
||||||
setCurrentMonth(new Date());
|
|
||||||
retry();
|
|
||||||
}, [setCurrentMonth, retry]);
|
|
||||||
|
|
||||||
const readyCalledRef = useRef(false);
|
const readyCalledRef = useRef(false);
|
||||||
// Signal Telegram to hide loading when the first load finishes (loading goes true -> false).
|
// Signal Telegram to hide loading when the first load finishes (loading goes true -> false).
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@@ -145,10 +140,7 @@ export function CalendarPage({ isAllowed, initDataRaw }: CalendarPageProps) {
|
|||||||
>
|
>
|
||||||
<CalendarHeader
|
<CalendarHeader
|
||||||
month={currentMonth}
|
month={currentMonth}
|
||||||
isLoading={false}
|
|
||||||
disabled={navDisabled}
|
disabled={navDisabled}
|
||||||
onGoToToday={handleGoToToday}
|
|
||||||
onRefresh={retry}
|
|
||||||
onPrevMonth={handlePrevMonth}
|
onPrevMonth={handlePrevMonth}
|
||||||
onNextMonth={handleNextMonth}
|
onNextMonth={handleNextMonth}
|
||||||
/>
|
/>
|
||||||
|
|||||||
@@ -11,7 +11,6 @@ import { cn } from "@/lib/utils";
|
|||||||
import {
|
import {
|
||||||
ChevronLeft as ChevronLeftIcon,
|
ChevronLeft as ChevronLeftIcon,
|
||||||
ChevronRight as ChevronRightIcon,
|
ChevronRight as ChevronRightIcon,
|
||||||
RefreshCw as RefreshCwIcon,
|
|
||||||
} from "lucide-react";
|
} from "lucide-react";
|
||||||
|
|
||||||
export interface CalendarHeaderProps {
|
export interface CalendarHeaderProps {
|
||||||
@@ -19,31 +18,14 @@ export interface CalendarHeaderProps {
|
|||||||
month: Date;
|
month: Date;
|
||||||
/** Whether month navigation is disabled (e.g. during loading). */
|
/** Whether month navigation is disabled (e.g. during loading). */
|
||||||
disabled?: boolean;
|
disabled?: boolean;
|
||||||
/** When true, show a compact loading spinner next to the month title (e.g. while fetching new month). */
|
|
||||||
isLoading?: boolean;
|
|
||||||
/** When provided and displayed month is not the current month, show a "Today" control that calls this. */
|
|
||||||
onGoToToday?: () => void;
|
|
||||||
/** When provided, show a refresh icon that calls this (e.g. to refetch month data). */
|
|
||||||
onRefresh?: () => void;
|
|
||||||
onPrevMonth: () => void;
|
onPrevMonth: () => void;
|
||||||
onNextMonth: () => void;
|
onNextMonth: () => void;
|
||||||
className?: string;
|
className?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
function isCurrentMonth(month: Date): boolean {
|
|
||||||
const now = new Date();
|
|
||||||
return (
|
|
||||||
month.getFullYear() === now.getFullYear() &&
|
|
||||||
month.getMonth() === now.getMonth()
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export function CalendarHeader({
|
export function CalendarHeader({
|
||||||
month,
|
month,
|
||||||
disabled = false,
|
disabled = false,
|
||||||
isLoading = false,
|
|
||||||
onGoToToday,
|
|
||||||
onRefresh,
|
|
||||||
onPrevMonth,
|
onPrevMonth,
|
||||||
onNextMonth,
|
onNextMonth,
|
||||||
className,
|
className,
|
||||||
@@ -52,7 +34,6 @@ export function CalendarHeader({
|
|||||||
const year = month.getFullYear();
|
const year = month.getFullYear();
|
||||||
const monthIndex = month.getMonth();
|
const monthIndex = month.getMonth();
|
||||||
const labels = weekdayLabels();
|
const labels = weekdayLabels();
|
||||||
const showToday = Boolean(onGoToToday) && !isCurrentMonth(month);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<header className={cn("flex flex-col", className)}>
|
<header className={cn("flex flex-col", className)}>
|
||||||
@@ -76,44 +57,18 @@ export function CalendarHeader({
|
|||||||
>
|
>
|
||||||
{monthName(monthIndex)} {year}
|
{monthName(monthIndex)} {year}
|
||||||
</h1>
|
</h1>
|
||||||
{showToday && (
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={onGoToToday}
|
|
||||||
disabled={disabled}
|
|
||||||
className="text-[0.8rem] font-medium text-accent hover:underline focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2 disabled:opacity-50"
|
|
||||||
aria-label={t("nav.today")}
|
|
||||||
>
|
|
||||||
{t("nav.today")}
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-1">
|
|
||||||
{onRefresh && (
|
|
||||||
<Button
|
|
||||||
type="button"
|
|
||||||
variant="secondary"
|
|
||||||
size="icon"
|
|
||||||
className="size-10 rounded-[10px] bg-surface text-accent hover:bg-[var(--surface-hover)] focus-visible:outline-accent active:scale-95 disabled:opacity-50"
|
|
||||||
aria-label={t("nav.refresh")}
|
|
||||||
disabled={disabled || isLoading}
|
|
||||||
onClick={onRefresh}
|
|
||||||
>
|
|
||||||
<RefreshCwIcon className="size-5" aria-hidden />
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
<Button
|
|
||||||
type="button"
|
|
||||||
variant="secondary"
|
|
||||||
size="icon"
|
|
||||||
className="size-10 rounded-[10px] bg-surface text-accent hover:bg-[var(--surface-hover)] focus-visible:outline-accent active:scale-95 disabled:opacity-50"
|
|
||||||
aria-label={t("nav.next_month")}
|
|
||||||
disabled={disabled}
|
|
||||||
onClick={onNextMonth}
|
|
||||||
>
|
|
||||||
<ChevronRightIcon className="size-5" aria-hidden />
|
|
||||||
</Button>
|
|
||||||
</div>
|
</div>
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="secondary"
|
||||||
|
size="icon"
|
||||||
|
className="size-10 rounded-[10px] bg-surface text-accent hover:bg-[var(--surface-hover)] focus-visible:outline-accent active:scale-95 disabled:opacity-50"
|
||||||
|
aria-label={t("nav.next_month")}
|
||||||
|
disabled={disabled}
|
||||||
|
onClick={onNextMonth}
|
||||||
|
>
|
||||||
|
<ChevronRightIcon className="size-5" aria-hidden />
|
||||||
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
<div className="grid grid-cols-7 gap-0.5 mb-1.5 text-center text-[0.75rem] text-muted">
|
<div className="grid grid-cols-7 gap-0.5 mb-1.5 text-center text-[0.75rem] text-muted">
|
||||||
{labels.map((label, i) => (
|
{labels.map((label, i) => (
|
||||||
|
|||||||
@@ -16,8 +16,6 @@ export const MESSAGES: Record<Lang, Record<string, string>> = {
|
|||||||
"error.retry": "Retry",
|
"error.retry": "Retry",
|
||||||
"nav.prev_month": "Previous month",
|
"nav.prev_month": "Previous month",
|
||||||
"nav.next_month": "Next month",
|
"nav.next_month": "Next month",
|
||||||
"nav.today": "Today",
|
|
||||||
"nav.refresh": "Refresh",
|
|
||||||
"weekdays.mon": "Mon",
|
"weekdays.mon": "Mon",
|
||||||
"weekdays.tue": "Tue",
|
"weekdays.tue": "Tue",
|
||||||
"weekdays.wed": "Wed",
|
"weekdays.wed": "Wed",
|
||||||
@@ -91,8 +89,6 @@ export const MESSAGES: Record<Lang, Record<string, string>> = {
|
|||||||
"error.retry": "Повторить",
|
"error.retry": "Повторить",
|
||||||
"nav.prev_month": "Предыдущий месяц",
|
"nav.prev_month": "Предыдущий месяц",
|
||||||
"nav.next_month": "Следующий месяц",
|
"nav.next_month": "Следующий месяц",
|
||||||
"nav.today": "Сегодня",
|
|
||||||
"nav.refresh": "Обновить",
|
|
||||||
"weekdays.mon": "Пн",
|
"weekdays.mon": "Пн",
|
||||||
"weekdays.tue": "Вт",
|
"weekdays.tue": "Вт",
|
||||||
"weekdays.wed": "Ср",
|
"weekdays.wed": "Ср",
|
||||||
|
|||||||
Reference in New Issue
Block a user