Use time ago to displat latest version

codegouvfr · Apr 10, 2023 · 457385c · 457385c
1 parent 1fba075
commit 457385c
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 18 deletions.
diff --git a/src/ui/i18n.tsx b/src/ui/i18n.tsx
@@ -272,8 +272,7 @@ const {
                 "best_match": "Best match"
             },
             "SoftwareCatalogCard": {
-                "last version": "Last version",
-                "last version date": ({ date }) => `in (${date})`,
+                "latest version": ({ fromNowText }) => `Latest version ${fromNowText}`,
                 "declare oneself referent": "Declare yourself referent / user",
                 "isDesktop": "This software can be installed on desktop",
                 "isFromFrenchPublicService":
@@ -654,8 +653,7 @@ const {
                     "Décrivez en quelques mots à qui l'offre de service est proposée"
             },
             "SoftwareCatalogCard": {
-                "last version": "Dernière version",
-                "last version date": ({ date }) => `en (${date})`,
+                "latest version": ({ fromNowText }) => `Dernière version ${fromNowText}`,
                 "declare oneself referent": "Se déclarer référent / utilisateur",
                 "isDesktop": "Ce logiciel s'installe sur ordinateur",
                 "isFromFrenchPublicService":

diff --git a/src/ui/pages/softwareCatalog/SoftwareCatalogCard.tsx b/src/ui/pages/softwareCatalog/SoftwareCatalogCard.tsx
@@ -1,10 +1,10 @@
-import React, { memo } from "react";
+import { memo } from "react";
 import { declareComponentKeys } from "i18nifty";
-import { useTranslation, useResolveLocalizedString, useLang } from "ui/i18n";
+import { useTranslation, useResolveLocalizedString } from "ui/i18n";
 import type { Link } from "type-route";
 import { fr } from "@codegouvfr/react-dsfr";
 import { makeStyles } from "@codegouvfr/react-dsfr/tss";
-import { shortEndMonthDate } from "ui/useMoment";
+import { useFromNow } from "ui/useMoment";
 import { assert } from "tsafe/assert";
 import type { Equals } from "tsafe";
 import Tooltip from "@mui/material/Tooltip";
@@ -57,7 +57,7 @@ export const SoftwareCatalogCard = memo((props: Props) => {
     const { t } = useTranslation({ SoftwareCatalogCard });
     const { resolveLocalizedString } = useResolveLocalizedString();
     const { classes, cx } = useStyles();
-    const { lang } = useLang();
+    const { fromNowText } = useFromNow({ "dateTime": latestVersion?.publicationTime });
 
     return (
         <div className={cx(fr.cx("fr-card"), classes.root, className)}>
@@ -104,7 +104,7 @@ export const SoftwareCatalogCard = memo((props: Props) => {
                                         classes.softwareVersionContainer
                                     )}
                                 >
-                                    {t("last version")} :
+                                    {t("latest version", { fromNowText })}
                                     <span
                                         className={cx(
                                             fr.cx(
@@ -118,12 +118,6 @@ export const SoftwareCatalogCard = memo((props: Props) => {
                                     >
                                         {latestVersion.semVer}
                                     </span>
-                                    {t("last version date", {
-                                        "date": shortEndMonthDate({
-                                            "time": latestVersion.publicationTime,
-                                            lang
-                                        })
-                                    })}
                                 </p>
                             )}
                         </div>
@@ -294,8 +288,7 @@ const useStyles = makeStyles({
 }));
 
 export const { i18n } = declareComponentKeys<
-    | "last version"
-    | { K: "last version date"; P: { date: string } }
+    | { K: "latest version"; P: { fromNowText: string } }
     | "declare oneself referent"
     | "isDesktop"
     | "isPresentInSupportMarket"

diff --git a/src/ui/useMoment.ts b/src/ui/useMoment.ts
@@ -355,9 +355,11 @@ export const { fromNow } = (() => {
 })();
 
 export const { useFromNow } = (() => {
-    function useFromNow(params: { dateTime: number }) {
+    function useFromNow(params: { dateTime: number | undefined }) {
         const { dateTime } = params;
 
+        if (dateTime === undefined) return { "fromNowText": "" };
+
         const [trigger, forceUpdate] = useReducer(n => n + 1, 0);
 
         useEffect(() => {