From f111685c5886f3e77edfd3621c98d8ac1b9bcce4 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Fri, 24 Nov 2023 20:00:08 +0100
Subject: refactor(services, types): reorganize GraphQL fetchers and data types

The Typescript mapped types was useful for autocompletion in fetchers
but their are harder to maintain. I think it's better to keep each
query close to its fetcher to have a better understanding of the
fetched data. So I:
* colocate queries with their own fetcher
* colocate mutations with their own mutator
* remove Typescript mapped types for queries and mutations
* move data convertors inside graphql services
* rename most of data types and fetchers
---
 src/pages/recherche/index.tsx | 57 +++++++++++++++++++++----------------------
 1 file changed, 28 insertions(+), 29 deletions(-)

(limited to 'src/pages/recherche/index.tsx')

diff --git a/src/pages/recherche/index.tsx b/src/pages/recherche/index.tsx
index 2a18aa3..293df0e 100644
--- a/src/pages/recherche/index.tsx
+++ b/src/pages/recherche/index.tsx
@@ -20,25 +20,26 @@ import {
   PageBody,
 } from '../../components';
 import {
-  getArticles,
-  getThematicsPreview,
-  getTopicsPreview,
-  getTotalArticles,
-  getTotalThematics,
-  getTotalTopics,
+  convertTaxonomyToPageLink,
+  fetchPostsCount,
+  fetchPostsList,
+  fetchThematicsCount,
+  fetchThematicsList,
+  fetchTopicsCount,
+  fetchTopicsList,
 } from '../../services/graphql';
 import styles from '../../styles/pages/blog.module.scss';
 import type {
   NextPageWithLayout,
-  RawThematicPreview,
-  RawTopicPreview,
+  WPThematicPreview,
+  WPTopicPreview,
 } from '../../types';
 import { CONFIG } from '../../utils/config';
 import { ROUTES } from '../../utils/constants';
 import {
   getBlogSchema,
   getLinksItemData,
-  getPageLinkFromRawData,
+  getPostsWithUrl,
   getSchemaJson,
   getWebPageSchema,
 } from '../../utils/helpers';
@@ -46,8 +47,8 @@ import { loadTranslation, type Messages } from '../../utils/helpers/server';
 import { useBreadcrumb, useDataFromAPI, usePostsList } from '../../utils/hooks';
 
 type SearchPageProps = {
-  thematicsList: RawThematicPreview[];
-  topicsList: RawTopicPreview[];
+  thematicsList: WPThematicPreview[];
+  topicsList: WPTopicPreview[];
   translation: Messages;
 };
 
@@ -115,6 +116,7 @@ const SearchPage: NextPageWithLayout<SearchPageProps> = ({
   const schemaJsonLd = getSchemaJson([webpageSchema, blogSchema]);
 
   const {
+    articles,
     error,
     firstNewResultIndex,
     isLoading,
@@ -122,16 +124,15 @@ const SearchPage: NextPageWithLayout<SearchPageProps> = ({
     isRefreshing,
     hasNextPage,
     loadMore,
-    posts,
   } = usePostsList({
     fallback: [],
-    fetcher: getArticles,
+    fetcher: fetchPostsList,
     perPage: CONFIG.postsPerPage,
     searchQuery: query.s as string,
   });
 
   const totalArticles = useDataFromAPI<number>(async () =>
-    getTotalArticles(query.s as string)
+    fetchPostsCount({ search: query.s as string })
   );
 
   const thematicsListTitle = intl.formatMessage({
@@ -172,6 +173,10 @@ const SearchPage: NextPageWithLayout<SearchPageProps> = ({
     [intl, routerPush]
   );
 
+  const foundArticles = articles?.flatMap((p) =>
+    p.edges.map((edge) => edge.node)
+  );
+
   return (
     <Page breadcrumbs={breadcrumbItems} isBodyLastChild>
       <Head>
@@ -199,14 +204,14 @@ const SearchPage: NextPageWithLayout<SearchPageProps> = ({
       />
       <PageHeader heading={title} meta={{ total: totalArticles }} />
       <PageBody className={styles.body}>
-        {posts ? null : <Spinner>{loadingResults}</Spinner>}
-        {posts?.length ? (
+        {foundArticles ? null : <Spinner>{loadingResults}</Spinner>}
+        {foundArticles?.length ? (
           <PostsList
             className={styles.list}
             firstNewResult={firstNewResultIndex}
             isLoading={isLoading || isLoadingMore || isRefreshing}
             onLoadMore={hasNextPage ? loadMore : undefined}
-            posts={posts}
+            posts={getPostsWithUrl(foundArticles)}
             sortByYear
           />
         ) : (
@@ -248,11 +253,7 @@ const SearchPage: NextPageWithLayout<SearchPageProps> = ({
               {thematicsListTitle}
             </Heading>
           }
-          items={getLinksItemData(
-            thematicsList.map((thematic) =>
-              getPageLinkFromRawData(thematic, 'thematic')
-            )
-          )}
+          items={getLinksItemData(thematicsList.map(convertTaxonomyToPageLink))}
         />
         <LinksWidget
           heading={
@@ -260,9 +261,7 @@ const SearchPage: NextPageWithLayout<SearchPageProps> = ({
               {topicsListTitle}
             </Heading>
           }
-          items={getLinksItemData(
-            topicsList.map((topic) => getPageLinkFromRawData(topic, 'topic'))
-          )}
+          items={getLinksItemData(topicsList.map(convertTaxonomyToPageLink))}
         />
       </PageSidebar>
     </Page>
@@ -274,10 +273,10 @@ SearchPage.getLayout = (page) => getLayout(page);
 export const getStaticProps: GetStaticProps<SearchPageProps> = async ({
   locale,
 }) => {
-  const totalThematics = await getTotalThematics();
-  const thematics = await getThematicsPreview({ first: totalThematics });
-  const totalTopics = await getTotalTopics();
-  const topics = await getTopicsPreview({ first: totalTopics });
+  const totalThematics = await fetchThematicsCount();
+  const thematics = await fetchThematicsList({ first: totalThematics });
+  const totalTopics = await fetchTopicsCount();
+  const topics = await fetchTopicsList({ first: totalTopics });
   const translation = await loadTranslation(locale);
 
   return {
-- 
cgit v1.2.3

