From 82702fbe2d0607e7ca8a02c878b2e79a21664b7c Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Tue, 25 Jan 2022 11:45:11 +0100
Subject: chore: display total found posts in page meta

---
 src/components/PostHeader/PostHeader.tsx |  1 +
 src/components/PostMeta/PostMeta.tsx     | 31 ++++++++++++++++++++++---------
 src/pages/blog/index.tsx                 |  9 +++++++--
 src/pages/recherche/index.tsx            |  7 ++++++-
 src/pages/sujet/[slug].tsx               |  1 +
 src/pages/thematique/[slug].tsx          |  1 +
 src/services/graphql/queries.ts          |  1 +
 src/ts/types/app.ts                      |  1 +
 src/ts/types/articles.ts                 |  1 +
 9 files changed, 41 insertions(+), 12 deletions(-)

diff --git a/src/components/PostHeader/PostHeader.tsx b/src/components/PostHeader/PostHeader.tsx
index 7e45bb7..57d20fa 100644
--- a/src/components/PostHeader/PostHeader.tsx
+++ b/src/components/PostHeader/PostHeader.tsx
@@ -21,6 +21,7 @@ const PostHeader = ({
       meta?.author ||
       meta?.commentCount ||
       meta?.dates ||
+      meta?.results ||
       meta?.thematics ||
       meta?.website
     );
diff --git a/src/components/PostMeta/PostMeta.tsx b/src/components/PostMeta/PostMeta.tsx
index 57c2ded..9aa67c7 100644
--- a/src/components/PostMeta/PostMeta.tsx
+++ b/src/components/PostMeta/PostMeta.tsx
@@ -1,4 +1,4 @@
-import { t } from '@lingui/macro';
+import { plural, t } from '@lingui/macro';
 import { ArticleMeta } from '@ts/types/articles';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
@@ -13,7 +13,8 @@ const PostMeta = ({
   meta: ArticleMeta;
   mode?: PostMetaMode;
 }) => {
-  const { author, commentCount, dates, topics, thematics, website } = meta;
+  const { author, commentCount, dates, results, thematics, topics, website } =
+    meta;
   const { asPath, locale } = useRouter();
   const isThematic = () => asPath.includes('/thematique/');
   const isArticle = () => asPath.includes('/article/');
@@ -71,13 +72,13 @@ const PostMeta = ({
     <dl className={wrapperClass}>
       {author && (
         <div className={styles.item}>
-          <dt className={styles.term}>{t`Written by`}</dt>
+          <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>
+          <dt className={styles.term}>{t`Published on:`}</dt>
           <dd className={styles.description}>
             {new Date(dates.publication).toLocaleDateString(
               locale,
@@ -88,16 +89,28 @@ const PostMeta = ({
       )}
       {dates && dates.publication !== dates.update && (
         <div className={styles.item}>
-          <dt className={styles.term}>{t`Updated on`}</dt>
+          <dt className={styles.term}>{t`Updated on:`}</dt>
           <dd className={styles.description}>
             {new Date(dates.update).toLocaleDateString(locale, dateOptions)}
           </dd>
         </div>
       )}
+      {results && (
+        <div className={styles.item}>
+          <dt className={styles.term}>{t`Total: `}</dt>
+          <dd className={styles.description}>
+            {plural(results, {
+              zero: '# articles',
+              one: '# article',
+              other: '# articles',
+            })}
+          </dd>
+        </div>
+      )}
       {!isThematic() && thematics && thematics.length > 0 && (
         <div className={styles.item}>
           <dt className={styles.term}>
-            {thematics.length > 1 ? t`Thematics` : t`Thematic`}
+            {thematics.length > 1 ? t`Thematics:` : t`Thematic:`}
           </dt>
           {getThematics()}
         </div>
@@ -105,14 +118,14 @@ const PostMeta = ({
       {isThematic() && topics && topics.length > 0 && (
         <div className={styles.item}>
           <dt className={styles.term}>
-            {topics.length > 1 ? t`Topics` : t`Topic`}
+            {topics.length > 1 ? t`Topics:` : t`Topic:`}
           </dt>
           {getTopics()}
         </div>
       )}
       {website && (
         <div className={styles.item}>
-          <dt className={styles.term}>{t`Website`}</dt>
+          <dt className={styles.term}>{t`Website:`}</dt>
           <dd className={styles.description}>
             <a href={website}>{website}</a>
           </dd>
@@ -120,7 +133,7 @@ const PostMeta = ({
       )}
       {commentCount !== undefined && (
         <div className={styles.item}>
-          <dt className={styles.term}>{t`Comments`}</dt>
+          <dt className={styles.term}>{t`Comments:`}</dt>
           <dd className={styles.description}>
             {isArticle() ? (
               <a href="#comments">{getCommentsCount()}</a>
diff --git a/src/pages/blog/index.tsx b/src/pages/blog/index.tsx
index 3b3f2c2..bd27c75 100644
--- a/src/pages/blog/index.tsx
+++ b/src/pages/blog/index.tsx
@@ -15,7 +15,7 @@ import PostHeader from '@components/PostHeader/PostHeader';
 import { ThematicsList, TopicsList } from '@components/Widgets';
 import Sidebar from '@components/Sidebar/Sidebar';
 import styles from '@styles/pages/Page.module.scss';
-import { useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import Spinner from '@components/Spinner/Spinner';
 import { Blog as BlogSchema, Graph, WebPage } from 'schema-dts';
 import { useRouter } from 'next/router';
@@ -40,6 +40,11 @@ const Blog: NextPageWithLayout<BlogPageProps> = ({ fallback }) => {
     getPublishedPosts,
     { fallback }
   );
+  const [totalPostsCount, setTotalPostsCount] = useState<number>(0);
+
+  useEffect(() => {
+    if (data) setTotalPostsCount(data[0].pageInfo.total);
+  }, [data]);
 
   const isLoadingInitialData = !data && !error;
   const isLoadingMore: boolean =
@@ -113,7 +118,7 @@ const Blog: NextPageWithLayout<BlogPageProps> = ({ fallback }) => {
         id="blog"
         className={`${styles.article} ${styles['article--no-comments']}`}
       >
-        <PostHeader title={title} />
+        <PostHeader title={title} meta={{ results: totalPostsCount }} />
         <div className={styles.body}>
           {getPostsList()}
           {hasNextPage && (
diff --git a/src/pages/recherche/index.tsx b/src/pages/recherche/index.tsx
index 647d049..771bd3b 100644
--- a/src/pages/recherche/index.tsx
+++ b/src/pages/recherche/index.tsx
@@ -47,6 +47,11 @@ const Search: NextPageWithLayout = () => {
     getKey,
     getPublishedPosts
   );
+  const [totalPostsCount, setTotalPostsCount] = useState<number>(0);
+
+  useEffect(() => {
+    if (data) setTotalPostsCount(data[0].pageInfo.total);
+  }, [data]);
 
   const isLoadingInitialData = !data && !error;
   const isLoadingMore: boolean =
@@ -95,7 +100,7 @@ const Search: NextPageWithLayout = () => {
       <article
         className={`${styles.article} ${styles['article--no-comments']}`}
       >
-        <PostHeader title={title} />
+        <PostHeader title={title} meta={{ results: totalPostsCount }} />
         <div className={styles.body}>
           {getPostsList()}
           {hasNextPage && (
diff --git a/src/pages/sujet/[slug].tsx b/src/pages/sujet/[slug].tsx
index ba65a27..028131b 100644
--- a/src/pages/sujet/[slug].tsx
+++ b/src/pages/sujet/[slug].tsx
@@ -47,6 +47,7 @@ const Topic: NextPageWithLayout<TopicProps> = ({ topic }) => {
 
   const meta: ArticleMeta = {
     dates: topic.dates,
+    results: topic.posts.length,
     website: topic.officialWebsite,
   };
   const topicUrl = `${config.url}${router.asPath}`;
diff --git a/src/pages/thematique/[slug].tsx b/src/pages/thematique/[slug].tsx
index c76831d..75f33ff 100644
--- a/src/pages/thematique/[slug].tsx
+++ b/src/pages/thematique/[slug].tsx
@@ -50,6 +50,7 @@ const Thematic: NextPageWithLayout<ThematicProps> = ({ thematic }) => {
 
   const meta: ArticleMeta = {
     dates: thematic.dates,
+    results: thematic.posts.length,
   };
   const thematicUrl = `${config.url}${router.asPath}`;
 
diff --git a/src/services/graphql/queries.ts b/src/services/graphql/queries.ts
index 7bd6401..e7a76b1 100644
--- a/src/services/graphql/queries.ts
+++ b/src/services/graphql/queries.ts
@@ -96,6 +96,7 @@ export const getPublishedPosts = async ({
         pageInfo {
           endCursor
           hasNextPage
+          total
         }
       }
     }
diff --git a/src/ts/types/app.ts b/src/ts/types/app.ts
index 60dd4b8..a58f710 100644
--- a/src/ts/types/app.ts
+++ b/src/ts/types/app.ts
@@ -101,6 +101,7 @@ export type ProjectMeta = Omit<Meta, 'title'> & {
 export type PageInfo = {
   endCursor: string;
   hasNextPage: boolean;
+  total: number;
 };
 
 export type Project = {
diff --git a/src/ts/types/articles.ts b/src/ts/types/articles.ts
index da86e10..88b79dd 100644
--- a/src/ts/types/articles.ts
+++ b/src/ts/types/articles.ts
@@ -24,6 +24,7 @@ export type ArticleMeta = {
   author?: ArticleAuthor;
   commentCount?: number;
   dates?: Dates;
+  results?: number;
   topics?: TopicPreview[];
   thematics?: ThematicPreview[];
   website?: string;
-- 
cgit v1.2.3