2 files changed, 30 insertions, 227 deletions

diff --git a/src/components/PostMeta/PostMeta.module.scss b/src/components/PostMeta/PostMeta.module.scss
index 6f8e1c2..d438635 100644
--- a/src/components/PostMeta/PostMeta.module.scss
+++ b/src/components/PostMeta/PostMeta.module.scss
@@ -18,7 +18,7 @@
     }
   }
 
-  &--single {
+  &--article {
     flex-flow: column wrap;
     margin: var(--spacing-sm) 0 0;
 
@@ -27,24 +27,5 @@
         font-size: var(--font-size-sm);
       }
     }
-
-    .item {
-      display: flex;
-      flex-flow: row wrap;
-    }
-
-    .term {
-      margin-right: var(--spacing-2xs);
-      color: var(--color-fg-light);
-    }
-
-    .description {
-      &:not(:first-of-type) {
-        &::before {
-          content: "/";
-          margin: 0 var(--spacing-2xs);
-        }
-      }
-    }
   }
 }
diff --git a/src/components/PostMeta/PostMeta.tsx b/src/components/PostMeta/PostMeta.tsx
index b951c44..e89e0e2 100644
--- a/src/components/PostMeta/PostMeta.tsx
+++ b/src/components/PostMeta/PostMeta.tsx
@@ -1,19 +1,24 @@
+import {
+  Author,
+  CommentsCount,
+  Dates,
+  PostsCount,
+  ReadingTime,
+  Thematics,
+  Topics,
+  Website,
+} from '@components/MetaItems';
+import { MetaKind } from '@ts/types/app';
 import { ArticleMeta } from '@ts/types/articles';
-import { settings } from '@utils/config';
-import { getFormattedDate } from '@utils/helpers/format';
-import Link from 'next/link';
 import { useRouter } from 'next/router';
-import { useIntl } from 'react-intl';
 import styles from './PostMeta.module.scss';
 
-type PostMetaMode = 'list' | 'single';
-
 const PostMeta = ({
   meta,
-  mode = 'list',
+  kind = 'list',
 }: {
   meta: ArticleMeta;
-  mode?: PostMetaMode;
+  kind?: MetaKind;
 }) => {
   const {
     author,
@@ -26,217 +31,34 @@ const PostMeta = ({
     website,
     wordsCount,
   } = meta;
-  const intl = useIntl();
-  const router = useRouter();
-  const locale = router.locale ? router.locale : settings.locales.defaultLocale;
-  const isThematic = () => router.asPath.includes('/thematique/');
-  const isArticle = () => router.asPath.includes('/article/');
-
-  const getTopics = () => {
-    return (
-      topics &&
-      topics.map((topic) => {
-        return (
-          <dd key={topic.id} className={styles.description}>
-            <Link href={`/sujet/${topic.slug}`}>
-              <a>{topic.title}</a>
-            </Link>
-          </dd>
-        );
-      })
-    );
-  };
-
-  const getThematics = () => {
-    return (
-      thematics &&
-      thematics.map((thematic) => {
-        return (
-          <dd key={thematic.id} className={styles.description}>
-            <Link href={`/thematique/${thematic.slug}`}>
-              <a>{thematic.title}</a>
-            </Link>
-          </dd>
-        );
-      })
-    );
-  };
-
-  const getCommentsCount = () => {
-    return intl.formatMessage(
-      {
-        defaultMessage:
-          '{commentCount, plural, =0 {No comments} one {# comment} other {# comments}}',
-        description: 'PostMeta: comment count value',
-      },
-      { commentCount }
-    );
-  };
-
-  const getReadingTime = () => {
-    if (!readingTime) return;
-    if (readingTime < 0)
-      return intl.formatMessage({
-        defaultMessage: 'less than 1 minute',
-        description: 'PostMeta: Reading time value',
-      });
-    return intl.formatMessage(
-      {
-        defaultMessage:
-          '{readingTime, plural, =0 {# minutes} one {# minute} other {# minutes}}',
-        description: 'PostMeta: reading time value',
-      },
-      { readingTime }
-    );
-  };
+  const { asPath } = useRouter();
+  const isThematic = () => asPath.includes('/thematique/');
 
-  const getDates = () => {
-    if (!dates) return <></>;
-
-    const publicationDate = getFormattedDate(dates.publication, locale);
-    const updateDate = getFormattedDate(dates.update, locale);
-
-    return (
-      <>
-        <div className={styles.item}>
-          <dt className={styles.term}>
-            {intl.formatMessage({
-              defaultMessage: 'Published on:',
-              description: 'PostMeta: publication date label',
-            })}
-          </dt>
-          <dd className={styles.description}>
-            <time dateTime={dates.publication}>{publicationDate}</time>
-          </dd>
-        </div>
-        {publicationDate !== updateDate && (
-          <div className={styles.item}>
-            <dt className={styles.term}>
-              {intl.formatMessage({
-                defaultMessage: 'Updated on:',
-                description: 'PostMeta: update date label',
-              })}
-            </dt>
-            <dd className={styles.description}>
-              <time dateTime={dates.update}>{updateDate}</time>
-            </dd>
-          </div>
-        )}
-      </>
-    );
-  };
-
-  const wrapperClass = styles[`wrapper--${mode}`];
+  const wrapperClass = styles[`wrapper--${kind}`];
 
   return (
     <dl className={wrapperClass}>
-      {author && (
-        <div className={styles.item}>
-          <dt className={styles.term}>
-            {intl.formatMessage({
-              defaultMessage: 'Written by:',
-              description: 'Article meta',
-            })}
-          </dt>
-          <dd className={styles.description}>{author.name}</dd>
-        </div>
+      {author && <Author name={author.name} kind={kind} />}
+      {dates && (
+        <Dates
+          publication={dates.publication}
+          update={dates.update}
+          kind={kind}
+        />
       )}
-      {getDates()}
       {readingTime !== undefined && wordsCount !== undefined && (
-        <div className={styles.item}>
-          <dt className={styles.term}>
-            {intl.formatMessage({
-              defaultMessage: 'Reading time:',
-              description: 'Article meta',
-            })}
-          </dt>
-          <dd
-            className={styles.description}
-            title={`Approximately ${wordsCount.toLocaleString(locale)} words`}
-          >
-            {getReadingTime()}
-          </dd>
-        </div>
-      )}
-      {results && (
-        <div className={styles.item}>
-          <dt className={styles.term}>
-            {intl.formatMessage({
-              defaultMessage: 'Total:',
-              description: 'Article meta',
-            })}
-          </dt>
-          <dd className={styles.description}>
-            {intl.formatMessage(
-              {
-                defaultMessage:
-                  '{results, plural, =0 {No articles} one {# article} other {# articles}}',
-                description: 'PostMeta: total found articles',
-              },
-              { results }
-            )}
-          </dd>
-        </div>
+        <ReadingTime time={readingTime} words={wordsCount} kind={kind} />
       )}
+      {results && <PostsCount total={results} kind={kind} />}
       {!isThematic() && thematics && thematics.length > 0 && (
-        <div className={styles.item}>
-          <dt className={styles.term}>
-            {intl.formatMessage(
-              {
-                defaultMessage:
-                  '{thematicsCount, plural, =0 {Thematics:} one {Thematic:} other {Thematics:}}',
-                description: 'PostMeta: thematics list label',
-              },
-              { thematicsCount: thematics.length }
-            )}
-          </dt>
-          {getThematics()}
-        </div>
+        <Thematics list={thematics} kind={kind} />
       )}
       {isThematic() && topics && topics.length > 0 && (
-        <div className={styles.item}>
-          <dt className={styles.term}>
-            {intl.formatMessage(
-              {
-                defaultMessage:
-                  '{topicsCount, plural, =0 {Topics:} one {Topic:} other {Topics:}}',
-                description: 'PostMeta: topics list label',
-              },
-              { topicsCount: topics.length }
-            )}
-          </dt>
-          {getTopics()}
-        </div>
-      )}
-      {website && (
-        <div className={styles.item}>
-          <dt className={styles.term}>
-            {intl.formatMessage({
-              defaultMessage: 'Website:',
-              description: 'PostMeta: website label',
-            })}
-          </dt>
-          <dd className={styles.description}>
-            <a href={website}>{website}</a>
-          </dd>
-        </div>
+        <Topics list={topics} kind={kind} />
       )}
+      {website && <Website url={website} kind={kind} />}
       {commentCount !== undefined && (
-        <div className={styles.item}>
-          <dt className={styles.term}>
-            {intl.formatMessage({
-              defaultMessage: 'Comments:',
-              description: 'PostMeta: comment count label',
-            })}
-          </dt>
-          <dd className={styles.description}>
-            {isArticle() ? (
-              <a href="#comments">{getCommentsCount()}</a>
-            ) : (
-              getCommentsCount()
-            )}
-          </dd>
-        </div>
+        <CommentsCount total={commentCount} kind={kind} />
       )}
     </dl>
   );