add translations for share component

dataesr · Mar 26, 2024 · c867642 · c867642
1 parent 01d1cba
commit c867642
Show file tree

Hide file tree

Showing 4 changed files with 164 additions and 125 deletions.
diff --git a/client/locales.md b/client/locales.md
@@ -25,4 +25,4 @@
 | /components/truncate               |   OK   |  FRED  | FR,EN,ES,DE |
 | /components/websites               |   OK   |  FRED  |       FR,EN |
 | /components/wiki                   |   OK   |  FRED  |       FR,EN |
-| /components/share                  |  TODO  |  FRED  |       FR,EN |
+| /components/share                  |   OK   |  FRED  |       FR,EN |
diff --git a/client/src/components/share/index.tsx b/client/src/components/share/index.tsx
@@ -1,46 +1,21 @@
-import { Link } from "@dataesr/dsfr-plus";
+import { Link, useDSFRConfig } from "@dataesr/dsfr-plus";
 import useConsent from "../../hooks/useConsent";
 import useCopyToClipboard from "../../hooks/useCopyToClipboard";
+import { RawIntlProvider, createIntl } from "react-intl";
 
-const onClickFacebook = (e: { preventDefault: () => void }) => {
-  e.preventDefault();
-  window.open(
-    "https://www.facebook.com/sharer.php",
-    "Partager sur Facebook",
-    "toolbar=no,location=yes,status=no,menubar=no,scrollbars=yes,resizable=yes,width=600,height=450"
-  );
-};
-
-const onClickTwitter = (e: { preventDefault: () => void }) => {
-  e.preventDefault();
-  const currentURL = window.location.href;
-  const text = "#dataEsr #scanR";
-  const twitterShareURL = `https://twitter.com/intent/tweet?url=${encodeURIComponent(
-    currentURL
-  )}&text=${encodeURIComponent(text)}`;
-
-  window.open(
-    twitterShareURL,
-    "Partager sur Twitter",
-    "toolbar=no,location=yes,status=no,menubar=no,scrollbars=yes,resizable=yes,width=600,height=420"
-  );
-};
+const modules = import.meta.glob('./locales/*.json', { eager: true, import: 'default' })
+const messages = Object.keys(modules).reduce((acc, key) => {
+  const locale = key.match(/\.\/locales\/(.+)\.json$/)?.[1];
+  if (locale) {
+    return { ...acc, [locale]: modules[key] }
+  }
+  return acc;
+}, {});
 
-const onClickLinkedin = (e) => {
-  e.preventDefault();
-  const currentURL = encodeURIComponent("www.google.fr");
-  const text = "#dataEsr #scanR";
-  const linkedinShareURL = `https://www.linkedin.com/sharing/share-offsite/?url=${currentURL}&text=${encodeURIComponent(
-    text
-  )}`;
-  window.open(
-    linkedinShareURL,
-    "Partager sur LinkedIn",
-    "toolbar=no,location=yes,status=no,menubar=no,scrollbars=yes,resizable=yes,width=600,height=420"
-  );
-};
 
 export default function Share() {
+  const { locale } = useDSFRConfig();
+  const intl = createIntl({ locale, messages: messages[locale] });
   const url = window.location.href;
   const { consent, dialogId } = useConsent();
   const { copy } = useCopyToClipboard();
@@ -50,93 +25,137 @@ export default function Share() {
     url
   )}`;
 
+  const formating = {
+    authorize: (chunks: any) => (
+      <Link
+        role="button"
+        href={null}
+        data-fr-opened="false"
+        aria-controls={dialogId}
+        title={intl.formatMessage({ id: "share.cookies" })}
+      >
+        {chunks}
+      </Link>
+    ),
+  };
+
+  const onClickFacebook = (e: { preventDefault: () => void }) => {
+    e.preventDefault();
+    window.open(
+      "https://www.facebook.com/sharer.php",
+      intl.formatMessage({ id: "share.facebook" }),
+      "toolbar=no,location=yes,status=no,menubar=no,scrollbars=yes,resizable=yes,width=600,height=450"
+    );
+  };
+
+  const onClickTwitter = (e: { preventDefault: () => void }) => {
+    e.preventDefault();
+    const currentURL = window.location.href;
+    const text = "#dataEsr #scanR";
+    const twitterShareURL = `https://twitter.com/intent/tweet?url=${encodeURIComponent(
+      currentURL
+    )}&text=${encodeURIComponent(text)}`;
+
+    window.open(
+      twitterShareURL,
+      intl.formatMessage({ id: "share.twitter" }),
+      "toolbar=no,location=yes,status=no,menubar=no,scrollbars=yes,resizable=yes,width=600,height=420"
+    );
+  };
+
+  const onClickLinkedin = (e) => {
+    e.preventDefault();
+    const currentURL = encodeURIComponent("www.google.fr");
+    const text = "#dataEsr #scanR";
+    const linkedinShareURL = `https://www.linkedin.com/sharing/share-offsite/?url=${currentURL}&text=${encodeURIComponent(
+      text
+    )}`;
+    window.open(
+      linkedinShareURL,
+      intl.formatMessage({ id: "share.linkedin" }),
+      "toolbar=no,location=yes,status=no,menubar=no,scrollbars=yes,resizable=yes,width=600,height=420"
+    );
+  };
+
   return (
-    <div className="fr-share">
-      {(!twitter || !facebook || !linkedin) && (
-        <p className="fr-share__text">
-          Veuillez{" "}
-          <Link
-            role="button"
-            href={null}
-            data-fr-opened="false"
-            aria-controls={dialogId}
-            title="Personnaliser les cookies"
-          >
-            autoriser le dépot de cookies
-          </Link>{" "}
-          pour partager sur Facebook, Twitter et LinkedIn.
-        </p>
-      )}
-      <ul className="fr-share__group">
-        <li>
-          <a
-            className="fr-share__link fr-share__link--facebook"
-            title={`Partager sur Facebook ${!facebook ? "- désactivé" : null}`}
-            role="link"
-            aria-disabled={!facebook}
-            onClick={onClickFacebook}
-            href={
-              facebook
-                ? `https://www.facebook.com/sharer.php?u=${url}`
-                : undefined
-            }
-          >
-            Partager sur Facebook
-          </a>
-        </li>
-        <li>
-          <a
-            className="fr-share__link fr-share__link--twitter"
-            title={`Partager sur Twitter ${!twitter ? "- désactivé" : null}`}
-            role="link"
-            aria-disabled={!twitter}
-            onClick={onClickTwitter}
-            href={
-              twitter
-                ? `https://twitter.com/intent/tweet?url=${url}`
-                : undefined
-            }
-          >
-            Partager sur Twitter
-          </a>
-        </li>
-        <li>
-          <a
-            className="fr-share__link fr-share__link--linkedin"
-            title={`Partager sur LinkedIn ${!linkedin ? "- désactivé" : null}`}
-            role="link"
-            aria-disabled={!linkedin}
-            onClick={onClickLinkedin}
-            href={
-              linkedin
-                ? `https://www.linkedin.com/shareArticle?url=${url}`
-                : undefined
-            }
-          >
-            Partager sur LinkedIn
-          </a>
-        </li>
-        <li>
-          <a
-            className="fr-share__link fr-share__link--mail"
-            href={mailtoLink}
-            title="Partager par email"
-            target="_blank"
-            rel="noreferrer"
-          >
-            Partager par email
-          </a>
-        </li>
-        <li>
-          <button
-            className="fr-share__link fr-share__link--copy"
-            title="Copier dans le presse-papier"
-            onClick={() => copy(url)}
-          >
-            Copier dans le presse-papier
-          </button>
-        </li>
-      </ul>
-    </div>
+    <RawIntlProvider value={intl}>
+      <div className="fr-share">
+        {(!twitter || !facebook || !linkedin) && (
+          <p className="fr-share__text">
+            {intl.formatMessage({ id: "share.cookies.personalize" }, formating)}
+          </p>
+        )}
+        <ul className="fr-share__group">
+          <li>
+            <a
+              className="fr-share__link fr-share__link--facebook"
+              title={`${intl.formatMessage({ id: "share.facebook" })} ${!facebook ? intl.formatMessage({ id: "share.inactive" }) : ''}`}
+              role="link"
+              aria-disabled={!facebook}
+              onClick={onClickFacebook}
+              href={
+                facebook
+                  ? `https://www.facebook.com/sharer.php?u=${url}`
+                  : undefined
+              }
+            >
+              {intl.formatMessage({ id: "share.facebook" })}
+            </a>
+          </li>
+          <li>
+            <a
+              className="fr-share__link fr-share__link--twitter"
+              title={`${intl.formatMessage({ id: "share.twitter" })} ${!facebook ? intl.formatMessage({ id: "share.inactive" }) : ''}`}
+              role="link"
+              aria-disabled={!twitter}
+              onClick={onClickTwitter}
+              href={
+                twitter
+                  ? `https://twitter.com/intent/tweet?url=${url}`
+                  : undefined
+              }
+            >
+              {intl.formatMessage({ id: "share.twitter" })}
+            </a>
+          </li>
+          <li>
+            <a
+              className="fr-share__link fr-share__link--linkedin"
+              title={`${intl.formatMessage({ id: "share.linkedin" })} ${!facebook ? intl.formatMessage({ id: "share.inactive" }) : ''}`}
+              role="link"
+              aria-disabled={!linkedin}
+              onClick={onClickLinkedin}
+              href={
+                linkedin
+                  ? `https://www.linkedin.com/shareArticle?url=${url}`
+                  : undefined
+              }
+            >
+              {intl.formatMessage({ id: "share.linkedin" })}
+            </a>
+          </li>
+          <li>
+            <a
+              className="fr-share__link fr-share__link--mail"
+              href={mailtoLink}
+              title={intl.formatMessage({ id: "share.email" })}
+              target="_blank"
+              rel="noreferrer"
+            >
+              {intl.formatMessage({ id: "share.email" })}
+            </a>
+          </li>
+          <li>
+            <button
+              className="fr-share__link fr-share__link--copy"
+              title={intl.formatMessage({ id: "share.copy" })}
+              onClick={() => copy(url)}
+            >
+              {intl.formatMessage({ id: "share.copy" })}
+            </button>
+          </li>
+        </ul>
+      </div>
+    </RawIntlProvider>
   );
 }
diff --git a/client/src/components/share/locales/en.json b/client/src/components/share/locales/en.json
@@ -0,0 +1,10 @@
+{
+  "share.facebook": "Share on Facebook",
+  "share.twitter": "Share on Twitter",
+  "share.linkedin": "Share on LinkedIn",
+  "share.email": "Share via email",
+  "share.copy": "Copy to clipboard",
+  "share.inactive": "- inactive",
+  "share.cookies": "Customize cookies",
+  "share.cookies.personalize": "Please <authorize>authorize the use of cookies</authorize> to share on Facebook, Twitter, and LinkedIn."
+}
diff --git a/client/src/components/share/locales/fr.json b/client/src/components/share/locales/fr.json
@@ -0,0 +1,10 @@
+{
+  "share.facebook": "Partager sur Facebook",
+  "share.twitter": "Partager sur Twitter",
+  "share.linkedin": "Partager sur LinkedIn",
+  "share.email": "Partager par email",
+  "share.copy": "Copier dans le presse-papier",
+  "share.inactive": "- désactivé",
+  "share.cookies": "Personnaliser les cookies",
+  "share.cookies.personalize": "Veuillez <authorize>autoriser le dépot de cookies</authorize> pour partager sur Facebook, Twitter et LinkedIn."
+}