Trying to chase missing translations (#3441)

app/components/EventListItem.tsx

@@ -113,7 +113,10 @@ const EventListItem = ({ event, latest, document, ...rest }: Props) => {
         <Time
           dateTime={event.createdAt}
           tooltipDelay={500}
-          format="MMM do, h:mm a"
+          format={{
+            en_US: "MMM do, h:mm a",
+            fr_FR: "'Le 'd MMMM 'à' H:mm",
+          }}
           relative={false}
           addSuffix
           onClick={handleTimeClick}

app/components/LocaleTime.tsx

@@ -2,7 +2,7 @@ import { format as formatDate, formatDistanceToNow } from "date-fns";
 import * as React from "react";
 import Tooltip from "~/components/Tooltip";
 import useUserLocale from "~/hooks/useUserLocale";
-import { dateLocale } from "~/utils/i18n";
+import { dateLocale, locales } from "~/utils/i18n";
 
 let callbacks: (() => void)[] = [];
 
@@ -26,7 +26,7 @@ type Props = {
   addSuffix?: boolean;
   shorten?: boolean;
   relative?: boolean;
-  format?: string;
+  format?: Partial<Record<keyof typeof locales, string>>;
 };
 
 const LocaleTime: React.FC<Props> = ({
@@ -38,7 +38,13 @@ const LocaleTime: React.FC<Props> = ({
   relative,
   tooltipDelay,
 }) => {
-  const userLocale = useUserLocale();
+  const userLocale: string = useUserLocale() || "";
+  const dateFormatLong = {
+    en_US: "MMMM do, yyyy h:mm a",
+    fr_FR: "'Le 'd MMMM yyyy 'à' H:mm",
+  };
+  const formatLocaleLong = dateFormatLong[userLocale];
+  const formatLocale = format ? format[userLocale] : formatLocaleLong;
   const [_, setMinutesMounted] = React.useState(0); // eslint-disable-line @typescript-eslint/no-unused-vars
   const callback = React.useRef<() => void>();
 
@@ -66,17 +72,13 @@ const LocaleTime: React.FC<Props> = ({
       .replace("minute", "min");
   }
 
-  const tooltipContent = formatDate(
-    Date.parse(dateTime),
-    "MMMM do, yyyy h:mm a",
-    {
-      locale,
-    }
-  );
+  const tooltipContent = formatDate(Date.parse(dateTime), formatLocaleLong, {
+    locale,
+  });
   const content =
     relative !== false
       ? relativeContent
-      : formatDate(Date.parse(dateTime), format || "MMMM do, yyyy h:mm a", {
+      : formatDate(Date.parse(dateTime), formatLocale, {
           locale,
         });
 

app/components/Sidebar/components/Version.tsx

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { useTranslation } from "react-i18next";
 import styled from "styled-components";
 import Badge from "~/components/Badge";
 import { version } from "../../../../package.json";
@@ -6,6 +7,7 @@ import SidebarLink from "./SidebarLink";
 
 export default function Version() {
   const [releasesBehind, setReleasesBehind] = React.useState(0);
+  const { t } = useTranslation();
 
   React.useEffect(() => {
     async function loadReleases() {
@@ -37,10 +39,11 @@ export default function Version() {
           <br />
           <LilBadge>
             {releasesBehind === 0
-              ? "Up to date"
-              : `${releasesBehind} version${
-                  releasesBehind === 1 ? "" : "s"
-                } behind`}
+              ? t("Up to date")
+              : t(`{{ releasesBehind }} versions behind`, {
+                  releasesBehind,
+                  count: releasesBehind,
+                })}
           </LilBadge>
         </>
       }