Commit 1cea9b0a authored by Steven's avatar Steven

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.
parent 704503e5
......@@ -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]);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment