refactor(pages): refine Thematic pages

* add a table of contents (however posts heading are
not included)
* rename posts list section title
* add a useThematic hook to refresh thematic contents
* add a useThematicLists hook to refresh thematics list
* add a `notIn` filter in thematics list fetcher to directly
remove unwanted thematics
* add Cypress tests

6 files changed, 56 insertions, 35 deletions

diff --git a/src/services/graphql/fetchers/thematics/fetch-thematics-list.ts b/src/services/graphql/fetchers/thematics/fetch-thematics-list.ts
index 7e1e582..5dff5e1 100644
--- a/src/services/graphql/fetchers/thematics/fetch-thematics-list.ts
+++ b/src/services/graphql/fetchers/thematics/fetch-thematics-list.ts
@@ -12,13 +12,13 @@ export type ThematicsListResponse = {
   thematics: Nullable<GraphQLConnection<WPThematicPreview>>;
 };
 
-const thematicsListQuery = `query ThematicsList($after: String, $before: String, $first: Int, $last: Int, $orderby: [PostObjectsConnectionOrderbyInput], $search: String, $title: String) {
+const thematicsListQuery = `query ThematicsList($after: String, $before: String, $first: Int, $last: Int, $orderby: [PostObjectsConnectionOrderbyInput], $search: String, $title: String, $notIn: [ID]) {
   thematics(
     after: $after
     before: $before
     first: $first
     last: $last
-    where: {orderby: $orderby, search: $search, title: $title}
+    where: {orderby: $orderby, search: $search, title: $title, notIn: $notIn}
   ) {
     edges {
       cursor
diff --git a/src/services/graphql/fetchers/topics/fetch-topics-list.ts b/src/services/graphql/fetchers/topics/fetch-topics-list.ts
index 2ede721..6f2ab8f 100644
--- a/src/services/graphql/fetchers/topics/fetch-topics-list.ts
+++ b/src/services/graphql/fetchers/topics/fetch-topics-list.ts
@@ -12,13 +12,13 @@ export type TopicsListResponse = {
   topics: Nullable<GraphQLConnection<WPTopicPreview>>;
 };
 
-const topicsListQuery = `query TopicsList($after: String, $before: String, $first: Int, $last: Int, $orderby: [PostObjectsConnectionOrderbyInput], $search: String, $title: String) {
+const topicsListQuery = `query TopicsList($after: String, $before: String, $first: Int, $last: Int, $orderby: [PostObjectsConnectionOrderbyInput], $search: String, $title: String, $notIn: [ID]) {
   topics(
     after: $after
     before: $before
     first: $first
     last: $last
-    where: {orderby: $orderby, search: $search, title: $title}
+    where: {orderby: $orderby, search: $search, title: $title, notIn: $notIn}
   ) {
     edges {
       cursor
diff --git a/src/services/graphql/helpers/convert-wp-thematic-to-thematic.test.ts b/src/services/graphql/helpers/convert-wp-thematic-to-thematic.test.ts
index 435489d..140e165 100644
--- a/src/services/graphql/helpers/convert-wp-thematic-to-thematic.test.ts
+++ b/src/services/graphql/helpers/convert-wp-thematic-to-thematic.test.ts
@@ -34,6 +34,7 @@ describe('convert-wp-thematic-to-thematic', () => {
     const result = convertWPThematicToThematic(thematic);
 
     expect(result.content).toBe(thematic.contentParts.afterMore);
+    expect(result.id).toBe(thematic.databaseId);
     expect(result.intro).toBe(thematic.contentParts.beforeMore);
     expect(result.meta.articles).toBeUndefined();
     expect(result.meta.cover).toBeUndefined();
diff --git a/src/services/graphql/helpers/convert-wp-thematic-to-thematic.ts b/src/services/graphql/helpers/convert-wp-thematic-to-thematic.ts
index 9aa1896..5f8d7fc 100644
--- a/src/services/graphql/helpers/convert-wp-thematic-to-thematic.ts
+++ b/src/services/graphql/helpers/convert-wp-thematic-to-thematic.ts
@@ -8,6 +8,7 @@ import { ROUTES } from '../../../utils/constants';
 import {
   getUniquePageLinks,
   sortPageLinksByName,
+  updateContentTree,
 } from '../../../utils/helpers';
 import { convertPostPreviewToArticlePreview } from './convert-post-preview-to-article-preview';
 import { convertWPTopicPreviewToPageLink } from './convert-taxonomy-to-page-link';
@@ -31,30 +32,39 @@ const getRelatedTopicsFrom = (posts: WPPostPreview[]): PageLink[] => {
   return getUniquePageLinks(topics).sort(sortPageLinksByName);
 };
 
-export const convertWPThematicToThematic = (thematic: WPThematic): Thematic => {
+export const convertWPThematicToThematic = ({
+  acfThematics,
+  contentParts,
+  databaseId,
+  date,
+  featuredImage,
+  modified,
+  seo,
+  slug,
+  title,
+}: WPThematic): Thematic => {
   return {
-    content: thematic.contentParts.afterMore,
-    intro: thematic.contentParts.beforeMore,
+    content: updateContentTree(contentParts.afterMore),
+    id: databaseId,
+    intro: contentParts.beforeMore,
     meta: {
-      articles: thematic.acfThematics?.postsInThematic?.map(
+      articles: acfThematics?.postsInThematic?.map(
         convertPostPreviewToArticlePreview
       ),
-      cover: thematic.featuredImage
-        ? convertWPImgToImg(thematic.featuredImage.node)
-        : undefined,
+      cover: featuredImage ? convertWPImgToImg(featuredImage.node) : undefined,
       dates: {
-        publication: thematic.date,
-        update: thematic.modified,
+        publication: date,
+        update: modified,
       },
       seo: {
-        description: thematic.seo.metaDesc,
-        title: thematic.seo.title,
+        description: seo.metaDesc,
+        title: seo.title,
       },
-      relatedTopics: thematic.acfThematics?.postsInThematic
-        ? getRelatedTopicsFrom(thematic.acfThematics.postsInThematic)
+      relatedTopics: acfThematics?.postsInThematic
+        ? getRelatedTopicsFrom(acfThematics.postsInThematic)
         : undefined,
     },
-    slug: `${ROUTES.THEMATICS}/${thematic.slug}`,
-    title: thematic.title,
+    slug: `${ROUTES.THEMATICS}/${slug}`,
+    title,
   };
 };
diff --git a/src/services/graphql/helpers/convert-wp-topic-to-topic.test.ts b/src/services/graphql/helpers/convert-wp-topic-to-topic.test.ts
index bfe2ba9..145b19d 100644
--- a/src/services/graphql/helpers/convert-wp-topic-to-topic.test.ts
+++ b/src/services/graphql/helpers/convert-wp-topic-to-topic.test.ts
@@ -34,6 +34,7 @@ describe('convert-wp-topic-to-topic', () => {
     const result = convertWPTopicToTopic(topic);
 
     expect(result.content).toBe(topic.contentParts.afterMore);
+    expect(result.id).toBe(topic.databaseId);
     expect(result.intro).toBe(topic.contentParts.beforeMore);
     expect(result.meta.articles).toBeUndefined();
     expect(result.meta.cover).toBeUndefined();
diff --git a/src/services/graphql/helpers/convert-wp-topic-to-topic.ts b/src/services/graphql/helpers/convert-wp-topic-to-topic.ts
index b0136c7..f3ed4a9 100644
--- a/src/services/graphql/helpers/convert-wp-topic-to-topic.ts
+++ b/src/services/graphql/helpers/convert-wp-topic-to-topic.ts
@@ -26,31 +26,40 @@ const getRelatedThematicsFrom = (posts: WPPostPreview[]): PageLink[] => {
   return getUniquePageLinks(thematics).sort(sortPageLinksByName);
 };
 
-export const convertWPTopicToTopic = (topic: WPTopic): Topic => {
+export const convertWPTopicToTopic = ({
+  acfTopics,
+  contentParts,
+  databaseId,
+  date,
+  featuredImage,
+  modified,
+  seo,
+  slug,
+  title,
+}: WPTopic): Topic => {
   return {
-    content: topic.contentParts.afterMore,
-    intro: topic.contentParts.beforeMore,
+    content: contentParts.afterMore,
+    id: databaseId,
+    intro: contentParts.beforeMore,
     meta: {
-      articles: topic.acfTopics?.postsInTopic?.map(
+      articles: acfTopics?.postsInTopic?.map(
         convertPostPreviewToArticlePreview
       ),
-      cover: topic.featuredImage
-        ? convertWPImgToImg(topic.featuredImage.node)
-        : undefined,
+      cover: featuredImage ? convertWPImgToImg(featuredImage.node) : undefined,
       dates: {
-        publication: topic.date,
-        update: topic.modified,
+        publication: date,
+        update: modified,
       },
       seo: {
-        description: topic.seo.metaDesc,
-        title: topic.seo.title,
+        description: seo.metaDesc,
+        title: seo.title,
       },
-      relatedThematics: topic.acfTopics?.postsInTopic
-        ? getRelatedThematicsFrom(topic.acfTopics.postsInTopic)
+      relatedThematics: acfTopics?.postsInTopic
+        ? getRelatedThematicsFrom(acfTopics.postsInTopic)
         : undefined,
-      website: topic.acfTopics?.officialWebsite ?? undefined,
+      website: acfTopics?.officialWebsite ?? undefined,
     },
-    slug: `${ROUTES.TOPICS}/${topic.slug}`,
-    title: topic.title,
+    slug: `${ROUTES.TOPICS}/${slug}`,
+    title,
   };
 };