feat(i18n): replace linguijs with formatjs

1 files changed, 59 insertions, 9 deletions

diff --git a/src/components/ProjectSummary/ProjectSummary.tsx b/src/components/ProjectSummary/ProjectSummary.tsx
index b32c11f..f2d73b6 100644
--- a/src/components/ProjectSummary/ProjectSummary.tsx
+++ b/src/components/ProjectSummary/ProjectSummary.tsx
@@ -1,13 +1,14 @@
 import GithubIcon from '@assets/images/social-media/github.svg';
 import GitlabIcon from '@assets/images/social-media/gitlab.svg';
 import { config } from '@config/website';
-import { t } from '@lingui/macro';
 import { ProjectMeta } from '@ts/types/app';
 import { getFormattedDate } from '@utils/helpers/format';
 import { slugify } from '@utils/helpers/slugify';
 import useGithubApi from '@utils/hooks/useGithubApi';
+import IntlMessageFormat from 'intl-messageformat';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
+import { useIntl } from 'react-intl';
 import styles from './ProjectSummary.module.scss';
 
 const ProjectSummary = ({
@@ -20,6 +21,7 @@ const ProjectSummary = ({
   meta: ProjectMeta;
 }) => {
   const { hasCover, license, repos, technologies } = meta;
+  const intl = useIntl();
   const router = useRouter();
   const locale = router.locale ? router.locale : config.locales.defaultLocale;
   const { data } = useGithubApi(repos?.github ? repos.github : '');
@@ -30,7 +32,10 @@ const ProjectSummary = ({
         <div className={styles.cover}>
           <Image
             src={`/projects/${id}.jpg`}
-            alt={t`${title} preview`}
+            alt={intl.formatMessage({
+              defaultMessage: '{title} preview',
+              description: 'ProjectSummary: cover alt text',
+            })}
             layout="fill"
             objectFit="contain"
           />
@@ -39,7 +44,12 @@ const ProjectSummary = ({
       <dl className={styles.info}>
         {data && (
           <div className={styles.info__item}>
-            <dt>{t`Created on`}</dt>
+            <dt>
+              {intl.formatMessage({
+                defaultMessage: 'Created on:',
+                description: 'ProjectSummary: creation date label',
+              })}
+            </dt>
             <dd>
               <time dateTime={data.created_at}>
                 {getFormattedDate(data.created_at, locale)}
@@ -49,7 +59,12 @@ const ProjectSummary = ({
         )}
         {data && (
           <div className={styles.info__item}>
-            <dt>{t`Last updated on`}</dt>
+            <dt>
+              {intl.formatMessage({
+                defaultMessage: 'Last updated on:',
+                description: 'ProjectSummary: update date label',
+              })}
+            </dt>
             <dd>
               <time dateTime={data.updated_at}>
                 {getFormattedDate(data.updated_at, locale)}
@@ -58,12 +73,26 @@ const ProjectSummary = ({
           </div>
         )}
         <div className={styles.info__item}>
-          <dt>{t`License`}</dt>
+          <dt>
+            {intl.formatMessage({
+              defaultMessage: 'License:',
+              description: 'ProjectSummary: license label',
+            })}
+          </dt>
           <dd>{license}</dd>
         </div>
         {technologies && (
           <div className={styles.info__item}>
-            <dt>{t`Technologies`}</dt>
+            <dt>
+              {intl.formatMessage(
+                {
+                  defaultMessage:
+                    '{count, plural, =0 {Technologies:} one {Technology:} other {Technologies:}}',
+                  description: 'ProjectSummary: technologies list label',
+                },
+                { count: technologies.length }
+              )}
+            </dt>
             {technologies.map((techno) => (
               <dd
                 key={slugify(techno)}
@@ -76,7 +105,16 @@ const ProjectSummary = ({
         )}
         {repos && (
           <div className={styles.info__item}>
-            <dt>{t`Repositories`}</dt>
+            <dt>
+              {intl.formatMessage(
+                {
+                  defaultMessage:
+                    '{count, plural, =0 {Repositories:} one {Repository:} other {Repositories:}}',
+                  description: 'ProjectSummary: repositories list label',
+                },
+                { count: Object.keys(repos).length }
+              )}
+            </dt>
             {repos.github && (
               <dd className={styles['inline-data']}>
                 <a
@@ -103,12 +141,24 @@ const ProjectSummary = ({
         )}
         {data && repos && (
           <div>
-            <dt>{t`Popularity`}</dt>
+            <dt>
+              {intl.formatMessage({
+                defaultMessage: 'Popularity:',
+                description: 'ProjectSummary: popularity label',
+              })}
+            </dt>
             {repos.github && (
               <dd>
                 ⭐&nbsp;
                 <a href={`https://github.com/${repos.github}/stargazers`}>
-                  {t`${data.stargazers_count} stars on Github`}
+                  {intl.formatMessage(
+                    {
+                      defaultMessage:
+                        '{starsCount, plural, =0 {No stars on Github} one {# star on Github} other {# stars on Github}}',
+                      description: 'ProjectPreview: technologies list label',
+                    },
+                    { starsCount: data.stargazers_count }
+                  )}
                 </a>
               </dd>
             )}