chore: add a widget to list all blog thematics

7 files changed, 88 insertions, 11 deletions

diff --git a/src/components/Widget/ThematicsList/ThematicsList.module.scss b/src/components/Widget/ThematicsList/ThematicsList.module.scss
new file mode 100644
index 0000000..5f37c7a
--- /dev/null
+++ b/src/components/Widget/ThematicsList/ThematicsList.module.scss
@@ -0,0 +1,7 @@
+.title {
+  margin: 0;
+}
+
+.list {
+  margin: var(--spacing-sm) 0;
+}
diff --git a/src/components/Widget/ThematicsList/ThematicsList.tsx b/src/components/Widget/ThematicsList/ThematicsList.tsx
new file mode 100644
index 0000000..232515d
--- /dev/null
+++ b/src/components/Widget/ThematicsList/ThematicsList.tsx
@@ -0,0 +1,36 @@
+import { t } from '@lingui/macro';
+import { getAllThematics } from '@services/graphql/queries';
+import { ThematicPreview } from '@ts/types/taxonomies';
+import Link from 'next/link';
+import useSWR from 'swr';
+import styles from './ThematicsList.module.scss';
+
+const ThematicsList = () => {
+  const { data, error } = useSWR('/api/thematics', getAllThematics);
+
+  if (error) return <div>{t`Failed to load.`}</div>;
+  if (!data) return <div>{t`Loading...`}</div>;
+
+  const sortedThematics = [...data].sort((a, b) =>
+    a.title.localeCompare(b.title)
+  );
+
+  const thematics = sortedThematics.map((thematic) => {
+    return (
+      <li key={thematic.databaseId}>
+        <Link href={`/thematique/${thematic.slug}`}>
+          <a>{thematic.title}</a>
+        </Link>
+      </li>
+    );
+  });
+
+  return (
+    <div>
+      <h2 className={styles.title}>{t`Thematics`}</h2>
+      <ul className={styles.list}>{thematics}</ul>
+    </div>
+  );
+};
+
+export default ThematicsList;
diff --git a/src/components/Widget/index.tsx b/src/components/Widget/index.tsx
index d6ce18f..025b302 100644
--- a/src/components/Widget/index.tsx
+++ b/src/components/Widget/index.tsx
@@ -1,3 +1,4 @@
 import RecentPosts from './RecentPosts/RecentPosts';
+import ThematicsList from './ThematicsList/ThematicsList';
 
-export { RecentPosts };
+export { RecentPosts, ThematicsList };
diff --git a/src/pages/blog/index.tsx b/src/pages/blog/index.tsx
index 79b8631..f6aceb6 100644
--- a/src/pages/blog/index.tsx
+++ b/src/pages/blog/index.tsx
@@ -13,6 +13,7 @@ import { Button } from '@components/Buttons';
 import { getPublishedPosts } from '@services/graphql/queries';
 import PostHeader from '@components/PostHeader/PostHeader';
 import styles from '@styles/pages/Listing.module.scss';
+import { ThematicsList } from '@components/Widget';
 
 const Blog: NextPageWithLayout<BlogPageProps> = ({ fallback }) => {
   const getKey = (pageIndex: number, previousData: PostsListData) => {
@@ -48,17 +49,22 @@ const Blog: NextPageWithLayout<BlogPageProps> = ({ fallback }) => {
         <title>{seo.blog.title}</title>
         <meta name="description" content={seo.blog.description} />
       </Head>
-      <div className={styles.wrapper}>
+      <article className={styles.wrapper}>
         <PostHeader title={t`Blog`} />
-        <PostsList data={data} showYears={true} />
-        {hasNextPage && (
-          <Button
-            isDisabled={isLoadingMore}
-            clickHandler={() => setSize(size + 1)}
-            position="center"
-          >{t`Load more?`}</Button>
-        )}
-      </div>
+        <div className={styles.body}>
+          <PostsList data={data} showYears={true} />
+          {hasNextPage && (
+            <Button
+              isDisabled={isLoadingMore}
+              clickHandler={() => setSize(size + 1)}
+              position="center"
+            >{t`Load more?`}</Button>
+          )}
+        </div>
+        <aside className={styles.aside}>
+          <ThematicsList />
+        </aside>
+      </article>
     </>
   );
 };
diff --git a/src/services/graphql/queries.ts b/src/services/graphql/queries.ts
index afc9f69..26a7869 100644
--- a/src/services/graphql/queries.ts
+++ b/src/services/graphql/queries.ts
@@ -3,11 +3,13 @@ import { Article, PostBy } from '@ts/types/articles';
 import { AllPostsSlug, PostsList, RawPostsList } from '@ts/types/blog';
 import {
   AllSubjectsSlug,
+  AllThematics,
   AllThematicsSlug,
   Subject,
   SubjectBy,
   Thematic,
   ThematicBy,
+  ThematicPreview,
 } from '@ts/types/taxonomies';
 import {
   getFormattedPost,
@@ -449,3 +451,20 @@ export const getAllThematicsSlug = async (): Promise<Slug[]> => {
   const response = await fetchApi<AllThematicsSlug>(query, null);
   return response.thematics.nodes;
 };
+
+export const getAllThematics = async (): Promise<ThematicPreview[]> => {
+  const query = gql`
+    query AllThematics {
+      thematics {
+        nodes {
+          databaseId
+          slug
+          title
+        }
+      }
+    }
+  `;
+
+  const response = await fetchApi<AllThematics>(query, null);
+  return response.thematics.nodes;
+};
diff --git a/src/ts/types/app.ts b/src/ts/types/app.ts
index c495367..7220ddd 100644
--- a/src/ts/types/app.ts
+++ b/src/ts/types/app.ts
@@ -7,6 +7,7 @@ import { CommentData, CreateComment } from './comments';
 import { ContactData, SendEmail } from './contact';
 import {
   AllSubjectsSlug,
+  AllThematics,
   AllThematicsSlug,
   SubjectBy,
   ThematicBy,
@@ -41,6 +42,7 @@ export type VariablesType<T> = T extends PostBy | SubjectBy | ThematicBy
 export type RequestType =
   | AllPostsSlug
   | AllSubjectsSlug
+  | AllThematics
   | AllThematicsSlug
   | CreateComment
   | PostBy
diff --git a/src/ts/types/taxonomies.ts b/src/ts/types/taxonomies.ts
index 71eb20a..32e1f15 100644
--- a/src/ts/types/taxonomies.ts
+++ b/src/ts/types/taxonomies.ts
@@ -66,6 +66,12 @@ export type Thematic = Taxonomy;
 
 export type ThematicPreview = TaxonomyPreview;
 
+export type AllThematics = {
+  thematics: {
+    nodes: ThematicPreview[];
+  };
+};
+
 export type RawThematic = TaxonomyPreview & {
   acfThematics: {
     postsInThematic: RawArticlePreview[];