From 1cea9b0a78880734492395e0cbdee05bdabae9c0 Mon Sep 17 00:00:00 2001 From: Steven Date: Mon, 23 Feb 2026 11:04:04 +0800 Subject: [PATCH] fix(web): make MonthNavigator month label reactive to language changes Use useTranslation() hook instead of the static i18n import so that the month label re-computes when the language changes. --- web/src/components/StatisticsView/MonthNavigator.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/web/src/components/StatisticsView/MonthNavigator.tsx b/web/src/components/StatisticsView/MonthNavigator.tsx index f9ac48ab5..bb7910f64 100644 --- a/web/src/components/StatisticsView/MonthNavigator.tsx +++ b/web/src/components/StatisticsView/MonthNavigator.tsx @@ -4,11 +4,12 @@ import { memo, useCallback, useMemo, useState } from "react"; import { YearCalendar } from "@/components/ActivityCalendar"; import { Button } from "@/components/ui/button"; import { Dialog, DialogContent, DialogTitle, DialogTrigger } from "@/components/ui/dialog"; -import i18n from "@/i18n"; +import { useTranslation } from "react-i18next"; import { addMonths, formatMonth, getMonthFromDate, getYearFromDate, setYearAndMonth } from "@/lib/calendar-utils"; import type { MonthNavigatorProps } from "@/types/statistics"; export const MonthNavigator = memo(({ visibleMonth, onMonthChange, activityStats }: MonthNavigatorProps) => { + const { i18n } = useTranslation(); const [isOpen, setIsOpen] = useState(false); const { currentMonth, currentYear, currentMonthNum } = useMemo( @@ -20,7 +21,7 @@ export const MonthNavigator = memo(({ visibleMonth, onMonthChange, activityStats [visibleMonth], ); - const monthLabel = useMemo(() => currentMonth.toLocaleString(i18n.language, { year: "numeric", month: "long" }), [currentMonth]); + const monthLabel = useMemo(() => currentMonth.toLocaleString(i18n.language, { year: "numeric", month: "long" }), [currentMonth, i18n.language]); const handlePrevMonth = useCallback(() => onMonthChange(addMonths(visibleMonth, -1)), [visibleMonth, onMonthChange]); const handleNextMonth = useCallback(() => onMonthChange(addMonths(visibleMonth, 1)), [visibleMonth, onMonthChange]);