From b9c1953c79688fc3f536b7927692309c9780b5da Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Thu, 6 Jan 2022 17:55:24 +0100
Subject: refactor: reuse PostMeta components on single articles/pages

---
 src/components/PostMeta/PostMeta.module.scss |  51 +++++++++++---
 src/components/PostMeta/PostMeta.tsx         | 102 +++++++++++++++++----------
 2 files changed, 106 insertions(+), 47 deletions(-)

(limited to 'src/components/PostMeta')

diff --git a/src/components/PostMeta/PostMeta.module.scss b/src/components/PostMeta/PostMeta.module.scss
index 3ec7daf..ac25828 100644
--- a/src/components/PostMeta/PostMeta.module.scss
+++ b/src/components/PostMeta/PostMeta.module.scss
@@ -2,17 +2,50 @@
 @use "@styles/abstracts/mixins" as mix;
 
 .wrapper {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  margin-top: var(--spacing-md);
-  font-size: var(--font-size-sm);
+  &--list {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    margin-top: var(--spacing-md);
+    font-size: var(--font-size-sm);
 
-  @include mix.media("screen") {
-    @include mix.dimensions("sm") {
+    @include mix.media("screen") {
+      @include mix.dimensions("sm") {
+        display: flex;
+        flex-flow: column nowrap;
+        margin: 0;
+        composes: meta from "@components/PostPreview/PostPreview.module.scss";
+      }
+    }
+  }
+
+  &--single {
+    flex-flow: column wrap;
+    margin: 0;
+    padding: 0 var(--spacing-md);
+
+    @include mix.media("screen") {
+      @include mix.dimensions("xs") {
+        font-size: var(--font-size-sm);
+      }
+    }
+
+    .item {
       display: flex;
-      flex-flow: column nowrap;
-      margin: 0;
-      composes: meta from "@components/PostPreview/PostPreview.module.scss";
+      flex-flow: row wrap;
+    }
+
+    .term {
+      margin-right: var(--spacing-2xs);
+      color: var(--color-primary-darker);
+    }
+
+    .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 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>
   );
 };
-- 
cgit v1.2.3