Proper i18n date/time handling (#17858)

* install date-fns-tz

* add date locale hook

* refactor formatUnixTimestampToDateTime

Use date-fns style instead of using strftime. This requires changing the i18n keys to the way date-fns represents dates (eg: "MMM d, h:mm:ss aaa"  instead of "%b %-d, %H:%M"

* refactor calendar to use new hook

* fix useFormattedTimestamp to use new formatUnixTimestampToDateTime date_format

* change i18n keys to new format

* fix timeline

* fix review

* fix explore

* fix metrics

* fix notifications

* fix face library

* clean up

web/src/components/graph/LineGraph.tsx

@@ -1,4 +1,5 @@
 import { useTheme } from "@/context/theme-provider";
+import { useDateLocale } from "@/hooks/use-date-locale";
 import { FrigateConfig } from "@/types/frigateConfig";
 import { formatUnixTimestampToDateTime } from "@/utils/dateUtil";
 import { useCallback, useEffect, useMemo } from "react";
@@ -24,7 +25,7 @@ export function CameraLineGraph({
   updateTimes,
   data,
 }: CameraLineGraphProps) {
-  const { t } = useTranslation(["views/system"]);
+  const { t } = useTranslation(["views/system", "common"]);
   const { data: config } = useSWR<FrigateConfig>("config", {
     revalidateOnFocus: false,
   });
@@ -43,18 +44,27 @@ export function CameraLineGraph({
 
   const { theme, systemTheme } = useTheme();
 
+  const locale = useDateLocale();
+
+  const timeFormat = config?.ui.time_format === "24hour" ? "24hour" : "12hour";
+  const format = useMemo(() => {
+    return t(`time.formattedTimestampHourMinute.${timeFormat}`, {
+      ns: "common",
+    });
+  }, [t, timeFormat]);
+
   const formatTime = useCallback(
     (val: unknown) => {
       return formatUnixTimestampToDateTime(
         updateTimes[Math.round(val as number)],
         {
           timezone: config?.ui.timezone,
-          strftime_fmt:
-            config?.ui.time_format == "24hour" ? "%H:%M" : "%I:%M %p",
+          date_format: format,
+          locale,
         },
       );
     },
-    [config, updateTimes],
+    [config?.ui.timezone, format, locale, updateTimes],
   );
 
   const options = useMemo(() => {
@@ -170,18 +180,28 @@ export function EventsPerSecondsLineGraph({
     [data],
   );
 
+  const locale = useDateLocale();
+  const { t } = useTranslation(["common"]);
+
+  const timeFormat = config?.ui.time_format === "24hour" ? "24hour" : "12hour";
+  const format = useMemo(() => {
+    return t(`time.formattedTimestampHourMinute.${timeFormat}`, {
+      ns: "common",
+    });
+  }, [t, timeFormat]);
+
   const formatTime = useCallback(
     (val: unknown) => {
       return formatUnixTimestampToDateTime(
         updateTimes[Math.round(val as number) - 1],
         {
           timezone: config?.ui.timezone,
-          strftime_fmt:
-            config?.ui.time_format == "24hour" ? "%H:%M" : "%I:%M %p",
+          date_format: format,
+          locale,
         },
       );
     },
-    [config, updateTimes],
+    [config?.ui.timezone, format, locale, updateTimes],
   );
 
   const options = useMemo(() => {

web/src/components/graph/SystemGraph.tsx

@@ -1,10 +1,12 @@
 import { useTheme } from "@/context/theme-provider";
+import { useDateLocale } from "@/hooks/use-date-locale";
 import { FrigateConfig } from "@/types/frigateConfig";
 import { Threshold } from "@/types/graph";
 import { formatUnixTimestampToDateTime } from "@/utils/dateUtil";
 import { useCallback, useEffect, useMemo } from "react";
 import Chart from "react-apexcharts";
 import { isMobileOnly } from "react-device-detect";
+import { useTranslation } from "react-i18next";
 import useSWR from "swr";
 
 type ThresholdBarGraphProps = {
@@ -45,6 +47,16 @@ export function ThresholdBarGraph({
 
   const { theme, systemTheme } = useTheme();
 
+  const locale = useDateLocale();
+  const { t } = useTranslation(["common"]);
+
+  const timeFormat = config?.ui.time_format === "24hour" ? "24hour" : "12hour";
+  const format = useMemo(() => {
+    return t(`time.formattedTimestampHourMinute.${timeFormat}`, {
+      ns: "common",
+    });
+  }, [t, timeFormat]);
+
   const formatTime = useCallback(
     (val: unknown) => {
       const dateIndex = Math.round(val as number);
@@ -53,17 +65,16 @@ export function ThresholdBarGraph({
       if (dateIndex < 0) {
         timeOffset = 5 * Math.abs(dateIndex);
       }
-
       return formatUnixTimestampToDateTime(
         updateTimes[Math.max(1, dateIndex) - 1] - timeOffset,
         {
           timezone: config?.ui.timezone,
-          strftime_fmt:
-            config?.ui.time_format == "24hour" ? "%H:%M" : "%I:%M %p",
+          date_format: format,
+          locale,
         },
       );
     },
-    [config, updateTimes],
+    [config?.ui.timezone, format, locale, updateTimes],
   );
 
   const options = useMemo(() => {