refactor: reuse PostMeta components on single articles/pages

1 files changed, 64 insertions, 38 deletions

diff --git a/src/components/PostMeta/PostMeta.tsx b/src/components/PostMeta/PostMeta.tsx
index 776d912..6d40048 100644
--- a/src/components/PostMeta/PostMeta.tsx
+++ b/src/components/PostMeta/PostMeta.tsx
@@ -1,20 +1,19 @@
 import { t } from '@lingui/macro';
-import { ThematicPreview } from '@ts/types/taxonomies';
+import { ArticleMeta } from '@ts/types/articles';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import styles from './PostMeta.module.scss';
 
+type PostMetaMode = 'list' | 'single';
+
 const PostMeta = ({
-  commentCount,
-  publicationDate,
-  updateDate,
-  thematics,
+  meta,
+  mode = 'list',
 }: {
-  commentCount: number | null;
-  publicationDate: string;
-  updateDate: string;
-  thematics: ThematicPreview[];
+  meta: ArticleMeta;
+  mode?: PostMetaMode;
 }) => {
+  const { author, commentCount, dates, thematics, website } = meta;
   const { locale } = useRouter();
   const dateOptions: Intl.DateTimeFormatOptions = {
     day: 'numeric',
@@ -23,20 +22,22 @@ const PostMeta = ({
   };
 
   const getThematics = () => {
-    return thematics.map((thematic) => {
-      return (
-        <dd key={thematic.id}>
-          <Link href={`/thematique/${thematic.slug}`}>
-            <a>{thematic.title}</a>
-          </Link>
-        </dd>
-      );
-    });
+    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 = () => {
     switch (commentCount) {
-      case null:
       case 0:
         return t`No comments`;
       case 1:
@@ -46,32 +47,57 @@ const PostMeta = ({
     }
   };
 
+  const wrapperClass = styles[`wrapper--${mode}`];
+
   return (
-    <dl className={styles.wrapper}>
-      <div>
-        <dt>{t`Published on`}</dt>
-        <dd>
-          {new Date(publicationDate).toLocaleDateString(locale, dateOptions)}
-        </dd>
-      </div>
-      {publicationDate !== updateDate && (
-        <div>
-          <dt>{t`Updated on`}</dt>
-          <dd>
-            {new Date(updateDate).toLocaleDateString(locale, dateOptions)}
+    <dl className={wrapperClass}>
+      {author && (
+        <div className={styles.item}>
+          <dt className={styles.term}>{t`Written by`}</dt>
+          <dd className={styles.description}>{author.name}</dd>
+        </div>
+      )}
+      {dates && (
+        <div className={styles.item}>
+          <dt className={styles.term}>{t`Published on`}</dt>
+          <dd className={styles.description}>
+            {new Date(dates.publication).toLocaleDateString(
+              locale,
+              dateOptions
+            )}
           </dd>
         </div>
       )}
-      {thematics.length > 0 && (
-        <div>
-          <dt>{thematics.length > 1 ? t`Thematics` : t`Thematic`}</dt>
+      {dates && dates.publication !== dates.update && (
+        <div className={styles.item}>
+          <dt className={styles.term}>{t`Updated on`}</dt>
+          <dd className={styles.description}>
+            {new Date(dates.update).toLocaleDateString(locale, dateOptions)}
+          </dd>
+        </div>
+      )}
+      {thematics && thematics.length > 0 && (
+        <div className={styles.item}>
+          <dt className={styles.term}>
+            {thematics.length > 1 ? t`Thematics` : t`Thematic`}
+          </dt>
           {getThematics()}
         </div>
       )}
-      <div>
-        <dt>{t`Comments`}</dt>
-        {getCommentsCount()}
-      </div>
+      {website && (
+        <div className={styles.item}>
+          <dt className={styles.term}>{t`Website`}</dt>
+          <dd className={styles.description}>
+            <a href={website}>{website}</a>
+          </dd>
+        </div>
+      )}
+      {commentCount !== undefined && (
+        <div className={styles.item}>
+          <dt className={styles.term}>{t`Comments`}</dt>
+          {getCommentsCount()}
+        </div>
+      )}
     </dl>
   );
 };