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"; ...@@ -4,11 +4,12 @@ import { memo, useCallback, useMemo, useState } from "react";
import { YearCalendar } from "@/components/ActivityCalendar"; import { YearCalendar } from "@/components/ActivityCalendar";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Dialog, DialogContent, DialogTitle, DialogTrigger } from "@/components/ui/dialog"; 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 { addMonths, formatMonth, getMonthFromDate, getYearFromDate, setYearAndMonth } from "@/lib/calendar-utils";
import type { MonthNavigatorProps } from "@/types/statistics"; import type { MonthNavigatorProps } from "@/types/statistics";
export const MonthNavigator = memo(({ visibleMonth, onMonthChange, activityStats }: MonthNavigatorProps) => { export const MonthNavigator = memo(({ visibleMonth, onMonthChange, activityStats }: MonthNavigatorProps) => {
const { i18n } = useTranslation();
const [isOpen, setIsOpen] = useState(false); const [isOpen, setIsOpen] = useState(false);
const { currentMonth, currentYear, currentMonthNum } = useMemo( const { currentMonth, currentYear, currentMonthNum } = useMemo(
...@@ -20,7 +21,7 @@ export const MonthNavigator = memo(({ visibleMonth, onMonthChange, activityStats ...@@ -20,7 +21,7 @@ export const MonthNavigator = memo(({ visibleMonth, onMonthChange, activityStats
[visibleMonth], [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 handlePrevMonth = useCallback(() => onMonthChange(addMonths(visibleMonth, -1)), [visibleMonth, onMonthChange]);
const handleNextMonth = 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