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

1 files changed, 25 insertions, 16 deletions

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,
   };
 };