From e4d5b8151802517b2943756fc0d09ffa95e2c4e2 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Sat, 29 Jan 2022 18:21:37 +0100
Subject: chore: replace lingui functions with react-intl

---
 src/components/Widgets/CVPreview/CVPreview.tsx     | 16 ++++++---
 src/components/Widgets/RecentPosts/RecentPosts.tsx | 16 +++++++--
 .../Widgets/RelatedThematics/RelatedThematics.tsx  | 12 +++++--
 .../Widgets/RelatedTopics/RelatedTopics.tsx        | 12 +++++--
 src/components/Widgets/Sharing/Sharing.tsx         | 42 ++++++++++++++++++----
 .../Widgets/ThematicsList/ThematicsList.tsx        | 13 +++++--
 src/components/Widgets/ToC/ToC.tsx                 |  8 +++--
 src/components/Widgets/TopicsList/TopicsList.tsx   | 13 +++++--
 8 files changed, 109 insertions(+), 23 deletions(-)

(limited to 'src/components/Widgets')

diff --git a/src/components/Widgets/CVPreview/CVPreview.tsx b/src/components/Widgets/CVPreview/CVPreview.tsx
index e52a9b2..08a4c72 100644
--- a/src/components/Widgets/CVPreview/CVPreview.tsx
+++ b/src/components/Widgets/CVPreview/CVPreview.tsx
@@ -1,7 +1,7 @@
 import { ExpandableWidget } from '@components/WidgetParts';
-import { Trans } from '@lingui/macro';
 import Image from 'next/image';
 import Link from 'next/link';
+import { FormattedMessage } from 'react-intl';
 import styles from './CVPreview.module.scss';
 
 const CVPreview = ({
@@ -25,9 +25,17 @@ const CVPreview = ({
         />
       </div>
       <p>
-        <Trans>
-          Download <Link href={pdf}>CV in PDF</Link>
-        </Trans>
+        <FormattedMessage
+          defaultMessage="Download <link>CV in PDF</link>"
+          description="CVPreview: download as PDF link"
+          values={{
+            link: (chunks: string) => (
+              <Link href={pdf}>
+                <a>{chunks}</a>
+              </Link>
+            ),
+          }}
+        />
       </p>
     </ExpandableWidget>
   );
diff --git a/src/components/Widgets/RecentPosts/RecentPosts.tsx b/src/components/Widgets/RecentPosts/RecentPosts.tsx
index 8022bff..08ce7e4 100644
--- a/src/components/Widgets/RecentPosts/RecentPosts.tsx
+++ b/src/components/Widgets/RecentPosts/RecentPosts.tsx
@@ -1,16 +1,17 @@
 import Spinner from '@components/Spinner/Spinner';
 import { config } from '@config/website';
-import { t } from '@lingui/macro';
 import { getPublishedPosts } from '@services/graphql/queries';
 import { ArticlePreview } from '@ts/types/articles';
 import { getFormattedDate } from '@utils/helpers/format';
 import Image from 'next/image';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
+import { useIntl } from 'react-intl';
 import useSWR from 'swr';
 import styles from './RecentPosts.module.scss';
 
 const RecentPosts = () => {
+  const intl = useIntl();
   const { data, error } = useSWR('/recent-posts', () =>
     getPublishedPosts({ first: 3 })
   );
@@ -36,7 +37,12 @@ const RecentPosts = () => {
                 )}
               <h3 className={styles.title}>{post.title}</h3>
               <dl className={styles.meta}>
-                <dt>{t`Published on:`}</dt>
+                <dt>
+                  {intl.formatMessage({
+                    defaultMessage: 'Published on:',
+                    description: 'RecentPosts: publication date label',
+                  })}
+                </dt>
                 <dd>
                   <time dateTime={post.dates.publication}>
                     {getFormattedDate(post.dates.publication, locale)}
@@ -51,7 +57,11 @@ const RecentPosts = () => {
   };
 
   const getPostsItems = () => {
-    if (error) return t`Failed to load.`;
+    if (error)
+      return intl.formatMessage({
+        defaultMessage: 'Failed to load.',
+        description: 'RecentPosts: failed to load text',
+      });
     if (!data) return <Spinner />;
 
     return data.posts.map((post) => getPost(post));
diff --git a/src/components/Widgets/RelatedThematics/RelatedThematics.tsx b/src/components/Widgets/RelatedThematics/RelatedThematics.tsx
index afe3460..c6be3ca 100644
--- a/src/components/Widgets/RelatedThematics/RelatedThematics.tsx
+++ b/src/components/Widgets/RelatedThematics/RelatedThematics.tsx
@@ -1,9 +1,10 @@
 import { ExpandableWidget, List } from '@components/WidgetParts';
-import { t } from '@lingui/macro';
 import { ThematicPreview } from '@ts/types/taxonomies';
 import Link from 'next/link';
+import { useIntl } from 'react-intl';
 
 const RelatedThematics = ({ thematics }: { thematics: ThematicPreview[] }) => {
+  const intl = useIntl();
   const sortedThematics = [...thematics].sort((a, b) =>
     a.title.localeCompare(b.title)
   );
@@ -20,7 +21,14 @@ const RelatedThematics = ({ thematics }: { thematics: ThematicPreview[] }) => {
 
   return (
     <ExpandableWidget
-      title={thematics.length > 1 ? t`Related thematics` : t`Related thematic`}
+      title={intl.formatMessage(
+        {
+          defaultMessage:
+            '{thematicsCount, plural, =0 {Related thematics} one {Related thematic} other {Related thematics}}',
+          description: 'RelatedThematics: widget title',
+        },
+        { thematicsCount: thematics.length }
+      )}
       withBorders={true}
     >
       <List items={thematicsList} />
diff --git a/src/components/Widgets/RelatedTopics/RelatedTopics.tsx b/src/components/Widgets/RelatedTopics/RelatedTopics.tsx
index 178e5bc..b9699e2 100644
--- a/src/components/Widgets/RelatedTopics/RelatedTopics.tsx
+++ b/src/components/Widgets/RelatedTopics/RelatedTopics.tsx
@@ -1,9 +1,10 @@
 import { ExpandableWidget, List } from '@components/WidgetParts';
-import { t } from '@lingui/macro';
 import { TopicPreview } from '@ts/types/taxonomies';
 import Link from 'next/link';
+import { useIntl } from 'react-intl';
 
 const RelatedTopics = ({ topics }: { topics: TopicPreview[] }) => {
+  const intl = useIntl();
   const sortedTopics = [...topics].sort((a, b) =>
     a.title.localeCompare(b.title)
   );
@@ -20,7 +21,14 @@ const RelatedTopics = ({ topics }: { topics: TopicPreview[] }) => {
 
   return (
     <ExpandableWidget
-      title={topicsList.length > 1 ? t`Related topics` : t`Related topic`}
+      title={intl.formatMessage(
+        {
+          defaultMessage:
+            '{topicsCount, plural, =0 {Related topics} one {Related topic} other {Related topics}}',
+          description: 'RelatedTopics: widget title',
+        },
+        { topicsCount: topicsList.length }
+      )}
       withBorders={true}
     >
       <List items={topicsList} />
diff --git a/src/components/Widgets/Sharing/Sharing.tsx b/src/components/Widgets/Sharing/Sharing.tsx
index 89b48ca..1025717 100644
--- a/src/components/Widgets/Sharing/Sharing.tsx
+++ b/src/components/Widgets/Sharing/Sharing.tsx
@@ -1,8 +1,8 @@
 import { ExpandableWidget } from '@components/WidgetParts';
 import sharingMedia from '@config/sharing';
-import { t } from '@lingui/macro';
 import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
+import { useIntl } from 'react-intl';
 import styles from './Sharing.module.scss';
 
 type Parameters = {
@@ -20,6 +20,7 @@ type Website = {
 };
 
 const Sharing = ({ excerpt, title }: { excerpt: string; title: string }) => {
+  const intl = useIntl();
   const [pageExcerpt, setPageExcerpt] = useState('');
   const [pageUrl, setPageUrl] = useState('');
   const [domainName, setDomainName] = useState('');
@@ -54,8 +55,14 @@ const Sharing = ({ excerpt, title }: { excerpt: string; title: string }) => {
       switch (key) {
         case 'content':
           if (id === 'email') {
-            const intro = t`Introduction:`;
-            const readMore = t`Read more here:`;
+            const intro = intl.formatMessage({
+              defaultMessage: 'Introduction:',
+              description: 'Sharing: email content prefix',
+            });
+            const readMore = intl.formatMessage({
+              defaultMessage: 'Read more here:',
+              description: 'Sharing: content link prefix',
+            });
             const body = `${intro}\n\n"${pageExcerpt}"\n\n${readMore} ${pageUrl}`;
             sharingUrl += encodeURI(body);
           } else {
@@ -63,7 +70,16 @@ const Sharing = ({ excerpt, title }: { excerpt: string; title: string }) => {
           }
           break;
         case 'title':
-          const prefix = id === 'email' ? t`Seen on ${domainName}:` : '';
+          const prefix =
+            id === 'email'
+              ? intl.formatMessage(
+                  {
+                    defaultMessage: 'Seen on {domainName}:',
+                    description: 'Sharing: seen on text',
+                  },
+                  { domainName }
+                )
+              : '';
           sharingUrl += encodeURI(`${prefix} ${title}`);
           break;
         case 'url':
@@ -94,7 +110,15 @@ const Sharing = ({ excerpt, title }: { excerpt: string; title: string }) => {
             title={name}
             className={`${styles.link} ${styles[linkModifier]}`}
           >
-            <span className="screen-reader-text">{t`Share on ${name}`}</span>
+            <span className="screen-reader-text">
+              {intl.formatMessage(
+                {
+                  defaultMessage: 'Share on {name}',
+                  description: 'Sharing: share on social network text',
+                },
+                { name }
+              )}
+            </span>
           </a>
         </li>
       );
@@ -102,7 +126,13 @@ const Sharing = ({ excerpt, title }: { excerpt: string; title: string }) => {
   };
 
   return (
-    <ExpandableWidget title={t`Share`} expand={true}>
+    <ExpandableWidget
+      title={intl.formatMessage({
+        defaultMessage: 'Share',
+        description: 'Sharing: widget title',
+      })}
+      expand={true}
+    >
       <ul className={`${styles.list} ${styles['list--sharing']}`}>
         {getItems()}
       </ul>
diff --git a/src/components/Widgets/ThematicsList/ThematicsList.tsx b/src/components/Widgets/ThematicsList/ThematicsList.tsx
index e5162b4..9b1f03a 100644
--- a/src/components/Widgets/ThematicsList/ThematicsList.tsx
+++ b/src/components/Widgets/ThematicsList/ThematicsList.tsx
@@ -1,10 +1,10 @@
 import Spinner from '@components/Spinner/Spinner';
 import { ExpandableWidget, List } from '@components/WidgetParts';
-import { t } from '@lingui/macro';
 import { getAllThematics } from '@services/graphql/queries';
 import { TitleLevel } from '@ts/types/app';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
+import { useIntl } from 'react-intl';
 import useSWR from 'swr';
 
 const ThematicsList = ({
@@ -14,6 +14,7 @@ const ThematicsList = ({
   title: string;
   titleLevel?: TitleLevel;
 }) => {
+  const intl = useIntl();
   const router = useRouter();
   const isThematic = () => router.asPath.includes('/thematique/');
   const currentThematicSlug = isThematic()
@@ -23,7 +24,15 @@ const ThematicsList = ({
   const { data, error } = useSWR('/api/thematics', getAllThematics);
 
   const getList = () => {
-    if (error) return <ul>{t`Failed to load.`}</ul>;
+    if (error)
+      return (
+        <ul>
+          {intl.formatMessage({
+            defaultMessage: 'Failed to load.',
+            description: 'ThematicsList: failed to load text',
+          })}
+        </ul>
+      );
     if (!data)
       return (
         <ul>
diff --git a/src/components/Widgets/ToC/ToC.tsx b/src/components/Widgets/ToC/ToC.tsx
index 6010354..c499478 100644
--- a/src/components/Widgets/ToC/ToC.tsx
+++ b/src/components/Widgets/ToC/ToC.tsx
@@ -1,11 +1,15 @@
 import { ExpandableWidget, OrderedList } from '@components/WidgetParts';
-import { t } from '@lingui/macro';
 import { Heading } from '@ts/types/app';
 import useHeadingsTree from '@utils/hooks/useHeadingsTree';
+import { useIntl } from 'react-intl';
 
 const ToC = () => {
+  const intl = useIntl();
   const headingsTree = useHeadingsTree('article');
-  const title = t`Table of contents`;
+  const title = intl.formatMessage({
+    defaultMessage: 'Table of contents',
+    description: 'ToC: widget title',
+  });
 
   const getItems = (headings: Heading[]) => {
     return headings.map((heading) => {
diff --git a/src/components/Widgets/TopicsList/TopicsList.tsx b/src/components/Widgets/TopicsList/TopicsList.tsx
index 5b0c44e..80341c3 100644
--- a/src/components/Widgets/TopicsList/TopicsList.tsx
+++ b/src/components/Widgets/TopicsList/TopicsList.tsx
@@ -1,10 +1,10 @@
 import Spinner from '@components/Spinner/Spinner';
 import { ExpandableWidget, List } from '@components/WidgetParts';
-import { t } from '@lingui/macro';
 import { getAllTopics } from '@services/graphql/queries';
 import { TitleLevel } from '@ts/types/app';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
+import { useIntl } from 'react-intl';
 import useSWR from 'swr';
 
 const TopicsList = ({
@@ -14,6 +14,7 @@ const TopicsList = ({
   title: string;
   titleLevel?: TitleLevel;
 }) => {
+  const intl = useIntl();
   const router = useRouter();
   const isTopic = () => router.asPath.includes('/sujet/');
   const currentTopicSlug = isTopic()
@@ -23,7 +24,15 @@ const TopicsList = ({
   const { data, error } = useSWR('/api/topics', getAllTopics);
 
   const getList = () => {
-    if (error) return <ul>{t`Failed to load.`}</ul>;
+    if (error)
+      return (
+        <ul>
+          {intl.formatMessage({
+            defaultMessage: 'Failed to load.',
+            description: 'TopicsList: failed to load text',
+          })}
+        </ul>
+      );
     if (!data)
       return (
         <ul>
-- 
cgit v1.2.3