chore: display initial posts, thematics & topics

By fetching the data in getStaticProps, I can display the data even
for users with Javascript disabled.

11 files changed, 76 insertions, 84 deletions

diff --git a/src/components/Widgets/RelatedThematics/RelatedThematics.tsx b/src/components/Widgets/RelatedThematics/RelatedThematics.tsx
index e89d887..74325bb 100644
--- a/src/components/Widgets/RelatedThematics/RelatedThematics.tsx
+++ b/src/components/Widgets/RelatedThematics/RelatedThematics.tsx
@@ -21,6 +21,7 @@ const RelatedThematics = ({ thematics }: { thematics: ThematicPreview[] }) => {
 
   return (
     <ExpandableWidget
+      expand={true}
       title={intl.formatMessage(
         {
           defaultMessage:
@@ -31,12 +32,6 @@ const RelatedThematics = ({ thematics }: { thematics: ThematicPreview[] }) => {
       )}
       withBorders={true}
     >
-      <noscript>
-        {intl.formatMessage({
-          defaultMessage: 'Javascript is required to load the thematics.',
-          description: 'RelatedThematics: noscript tag',
-        })}
-      </noscript>
       <List items={thematicsList} />
     </ExpandableWidget>
   );
diff --git a/src/components/Widgets/RelatedTopics/RelatedTopics.tsx b/src/components/Widgets/RelatedTopics/RelatedTopics.tsx
index e225608..1702e82 100644
--- a/src/components/Widgets/RelatedTopics/RelatedTopics.tsx
+++ b/src/components/Widgets/RelatedTopics/RelatedTopics.tsx
@@ -21,6 +21,7 @@ const RelatedTopics = ({ topics }: { topics: TopicPreview[] }) => {
 
   return (
     <ExpandableWidget
+      expand={true}
       title={intl.formatMessage(
         {
           defaultMessage:
@@ -31,12 +32,6 @@ const RelatedTopics = ({ topics }: { topics: TopicPreview[] }) => {
       )}
       withBorders={true}
     >
-      <noscript>
-        {intl.formatMessage({
-          defaultMessage: 'Javascript is required to load the topics.',
-          description: 'RelatedTopics: noscript tag',
-        })}
-      </noscript>
       <List items={topicsList} />
     </ExpandableWidget>
   );
diff --git a/src/components/Widgets/ThematicsList/ThematicsList.tsx b/src/components/Widgets/ThematicsList/ThematicsList.tsx
index f175e80..f50a069 100644
--- a/src/components/Widgets/ThematicsList/ThematicsList.tsx
+++ b/src/components/Widgets/ThematicsList/ThematicsList.tsx
@@ -2,6 +2,7 @@ import Spinner from '@components/Spinner/Spinner';
 import { ExpandableWidget, List } from '@components/WidgetParts';
 import { getAllThematics } from '@services/graphql/queries';
 import { TitleLevel } from '@ts/types/app';
+import { ThematicPreview } from '@ts/types/taxonomies';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { useIntl } from 'react-intl';
@@ -10,9 +11,11 @@ import useSWR from 'swr';
 const ThematicsList = ({
   title,
   titleLevel,
+  initialData,
 }: {
   title: string;
   titleLevel?: TitleLevel;
+  initialData?: ThematicPreview[];
 }) => {
   const intl = useIntl();
   const router = useRouter();
@@ -21,7 +24,9 @@ const ThematicsList = ({
     ? router.asPath.replace('/thematique/', '')
     : '';
 
-  const { data, error } = useSWR('/api/thematics', getAllThematics);
+  const { data, error } = useSWR('/api/thematics', getAllThematics, {
+    fallbackData: initialData,
+  });
 
   const getList = () => {
     if (error)
@@ -62,12 +67,6 @@ const ThematicsList = ({
       withBorders={true}
       expand={true}
     >
-      <noscript>
-        {intl.formatMessage({
-          defaultMessage: 'Javascript is required to load the thematics.',
-          description: 'ThematicsList: noscript tag',
-        })}
-      </noscript>
       {getList()}
     </ExpandableWidget>
   );
diff --git a/src/components/Widgets/TopicsList/TopicsList.tsx b/src/components/Widgets/TopicsList/TopicsList.tsx
index e79d1a8..55bf5af 100644
--- a/src/components/Widgets/TopicsList/TopicsList.tsx
+++ b/src/components/Widgets/TopicsList/TopicsList.tsx
@@ -2,6 +2,7 @@ import Spinner from '@components/Spinner/Spinner';
 import { ExpandableWidget, List } from '@components/WidgetParts';
 import { getAllTopics } from '@services/graphql/queries';
 import { TitleLevel } from '@ts/types/app';
+import { TopicPreview } from '@ts/types/taxonomies';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { useIntl } from 'react-intl';
@@ -10,9 +11,11 @@ import useSWR from 'swr';
 const TopicsList = ({
   title,
   titleLevel,
+  initialData,
 }: {
   title: string;
   titleLevel?: TitleLevel;
+  initialData?: TopicPreview[];
 }) => {
   const intl = useIntl();
   const router = useRouter();
@@ -21,7 +24,9 @@ const TopicsList = ({
     ? router.asPath.replace('/sujet/', '')
     : '';
 
-  const { data, error } = useSWR('/api/topics', getAllTopics);
+  const { data, error } = useSWR('/api/topics', getAllTopics, {
+    fallbackData: initialData,
+  });
 
   const getList = () => {
     if (error)
@@ -62,12 +67,6 @@ const TopicsList = ({
       withBorders={true}
       expand={true}
     >
-      <noscript>
-        {intl.formatMessage({
-          defaultMessage: 'Javascript is required to load the topics.',
-          description: 'TopicsList: noscript tag',
-        })}
-      </noscript>
       {getList()}
     </ExpandableWidget>
   );
diff --git a/src/i18n/en.json b/src/i18n/en.json
index f6a8e61..77d4d7a 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -127,10 +127,6 @@
     "defaultMessage": "Contact",
     "description": "ContactPage: breadcrumb item"
   },
-  "DXxn3X": {
-    "defaultMessage": "Javascript is required to load the posts.",
-    "description": "BlogPage: noscript tag"
-  },
   "Dhow1m": {
     "defaultMessage": "Diaspora",
     "description": "Sharing: Diaspora"
@@ -203,6 +199,10 @@
     "defaultMessage": "Comment",
     "description": "CommentForm: Comment field label"
   },
+  "JPh168": {
+    "defaultMessage": "Javascript is required to load more posts.",
+    "description": "BlogPage: noscript tag"
+  },
   "JeYOeA": {
     "defaultMessage": "Sidebar",
     "description": "ArticlePage: right sidebar aria-label"
@@ -291,10 +291,6 @@
     "defaultMessage": "Sidebar",
     "description": "CVPage: right sidebar aria-label"
   },
-  "QYxJrm": {
-    "defaultMessage": "Javascript is required to load the thematics.",
-    "description": "RelatedThematics: noscript tag"
-  },
   "Qh2CwH": {
     "defaultMessage": "Find me elsewhere",
     "description": "ContactPage: social media widget title"
@@ -371,10 +367,6 @@
     "defaultMessage": "Send",
     "description": "CommentForm: Send button"
   },
-  "WJHwIR": {
-    "defaultMessage": "Javascript is required to load the topics.",
-    "description": "RelatedTopics: noscript tag"
-  },
   "WRkY1/": {
     "defaultMessage": "Collapse",
     "description": "ExpandableWidget: collapse text"
@@ -527,10 +519,6 @@
     "defaultMessage": "Table of Contents",
     "description": "CVPage: ToC sidebar aria-label"
   },
-  "g5aEea": {
-    "defaultMessage": "Javascript is required to load the topics.",
-    "description": "TopicsList: noscript tag"
-  },
   "gQKeF+": {
     "defaultMessage": "Thanks. Your message was successfully sent. I will answer it as soon as possible.",
     "description": "ContactForm: success message"
@@ -699,10 +687,6 @@
     "defaultMessage": "Web development",
     "description": "HomePage: link to web development thematic"
   },
-  "w+LN1W": {
-    "defaultMessage": "Javascript is required to load the thematics.",
-    "description": "ThematicsList: noscript tag"
-  },
   "w/lPUh": {
     "defaultMessage": "{topicsCount, plural, =0 {Related topics} one {Related topic} other {Related topics}}",
     "description": "RelatedTopics: widget title"
diff --git a/src/i18n/fr.json b/src/i18n/fr.json
index 95426d4..1f4928c 100644
--- a/src/i18n/fr.json
+++ b/src/i18n/fr.json
@@ -127,10 +127,6 @@
     "defaultMessage": "Contact",
     "description": "ContactPage: breadcrumb item"
   },
-  "DXxn3X": {
-    "defaultMessage": "Javascript est nécessaire pour chargé les articles.",
-    "description": "BlogPage: noscript tag"
-  },
   "Dhow1m": {
     "defaultMessage": "Diaspora",
     "description": "Sharing: Diaspora"
@@ -203,6 +199,10 @@
     "defaultMessage": "Commentaire",
     "description": "CommentForm: Comment field label"
   },
+  "JPh168": {
+    "defaultMessage": "Javascript est nécessaire pour charger plus d'articles.",
+    "description": "BlogPage: noscript tag"
+  },
   "JeYOeA": {
     "defaultMessage": "Barre latérale",
     "description": "ArticlePage: right sidebar aria-label"
@@ -291,10 +291,6 @@
     "defaultMessage": "Barre latérale",
     "description": "CVPage: right sidebar aria-label"
   },
-  "QYxJrm": {
-    "defaultMessage": "Javascript est nécessaire pour charger les thématiques.",
-    "description": "RelatedThematics: noscript tag"
-  },
   "Qh2CwH": {
     "defaultMessage": "Retrouvez-moi ailleurs",
     "description": "ContactPage: social media widget title"
@@ -371,10 +367,6 @@
     "defaultMessage": "Envoyer",
     "description": "CommentForm: Send button"
   },
-  "WJHwIR": {
-    "defaultMessage": "Javascript est nécessaire pour charger les sujets.",
-    "description": "RelatedTopics: noscript tag"
-  },
   "WRkY1/": {
     "defaultMessage": "Replier",
     "description": "ExpandableWidget: collapse text"
@@ -527,10 +519,6 @@
     "defaultMessage": "Table des matières",
     "description": "CVPage: ToC sidebar aria-label"
   },
-  "g5aEea": {
-    "defaultMessage": "Javascript est nécessaire pour charger les sujets.",
-    "description": "TopicsList: noscript tag"
-  },
   "gQKeF+": {
     "defaultMessage": "Merci. Votre message a bien été envoyé. J'y répondrai dès que possible.",
     "description": "ContactForm: success message"
@@ -699,10 +687,6 @@
     "defaultMessage": "Développement web",
     "description": "HomePage: link to web development thematic"
   },
-  "w+LN1W": {
-    "defaultMessage": "Javascript est nécessaire pour charger les thématiques.",
-    "description": "ThematicsList: noscript tag"
-  },
   "w/lPUh": {
     "defaultMessage": "{topicsCount, plural, =0 {Sujets liés} one {Sujet lié} other {Sujets liés}}",
     "description": "RelatedTopics: widget title"
diff --git a/src/pages/blog/index.tsx b/src/pages/blog/index.tsx
index 51db760..e725ea8 100644
--- a/src/pages/blog/index.tsx
+++ b/src/pages/blog/index.tsx
@@ -6,7 +6,12 @@ import PostsList from '@components/PostsList/PostsList';
 import Sidebar from '@components/Sidebar/Sidebar';
 import Spinner from '@components/Spinner/Spinner';
 import { ThematicsList, TopicsList } from '@components/Widgets';
-import { getPublishedPosts } from '@services/graphql/queries';
+import {
+  getAllThematics,
+  getAllTopics,
+  getPostsTotal,
+  getPublishedPosts,
+} from '@services/graphql/queries';
 import styles from '@styles/pages/Page.module.scss';
 import { NextPageWithLayout } from '@ts/types/app';
 import { BlogPageProps, PostsList as PostsListData } from '@ts/types/blog';
@@ -20,7 +25,12 @@ import { useIntl } from 'react-intl';
 import { Blog as BlogSchema, Graph, WebPage } from 'schema-dts';
 import useSWRInfinite from 'swr/infinite';
 
-const Blog: NextPageWithLayout<BlogPageProps> = ({ fallback }) => {
+const Blog: NextPageWithLayout<BlogPageProps> = ({
+  allThematics,
+  allTopics,
+  firstPosts,
+  totalPosts,
+}) => {
   const intl = useIntl();
   const lastPostRef = useRef<HTMLSpanElement>(null);
   const router = useRouter();
@@ -39,9 +49,9 @@ const Blog: NextPageWithLayout<BlogPageProps> = ({ fallback }) => {
   const { data, error, size, setSize } = useSWRInfinite(
     getKey,
     getPublishedPosts,
-    { fallback }
+    { fallbackData: [firstPosts] }
   );
-  const [totalPostsCount, setTotalPostsCount] = useState<number>(0);
+  const [totalPostsCount, setTotalPostsCount] = useState<number>(totalPosts);
 
   useEffect(() => {
     if (data) setTotalPostsCount(data[0].pageInfo.total);
@@ -158,12 +168,6 @@ const Blog: NextPageWithLayout<BlogPageProps> = ({ fallback }) => {
       >
         <PostHeader title={title} meta={{ results: totalPostsCount }} />
         <div className={styles.body}>
-          <noscript>
-            {intl.formatMessage({
-              defaultMessage: 'Javascript is required to load the posts.',
-              description: 'BlogPage: noscript tag',
-            })}
-          </noscript>
           {getPostsList()}
           {hasNextPage && (
             <>
@@ -182,6 +186,12 @@ const Blog: NextPageWithLayout<BlogPageProps> = ({ fallback }) => {
                   description: 'BlogPage: load more text',
                 })}
               </Button>
+              <noscript>
+                {intl.formatMessage({
+                  defaultMessage: 'Javascript is required to load more posts.',
+                  description: 'BlogPage: noscript tag',
+                })}
+              </noscript>
             </>
           )}
         </div>
@@ -193,12 +203,14 @@ const Blog: NextPageWithLayout<BlogPageProps> = ({ fallback }) => {
           })}
         >
           <ThematicsList
+            initialData={allThematics}
             title={intl.formatMessage({
               defaultMessage: 'Thematics',
               description: 'BlogPage: thematics list widget title',
             })}
           />
           <TopicsList
+            initialData={allTopics}
             title={intl.formatMessage({
               defaultMessage: 'Topics',
               description: 'BlogPage: topics list widget title',
@@ -220,17 +232,21 @@ export const getStaticProps: GetStaticProps = async (
     defaultMessage: 'Blog',
     description: 'BlogPage: breadcrumb item',
   });
-  const data = await getPublishedPosts({ first: settings.postsPerPage });
+  const firstPosts = await getPublishedPosts({ first: settings.postsPerPage });
+  const totalPosts = await getPostsTotal();
+  const allThematics = await getAllThematics();
+  const allTopics = await getAllTopics();
   const { locale } = context;
   const translation = await loadTranslation(locale);
 
   return {
     props: {
+      allThematics,
+      allTopics,
       breadcrumbTitle,
-      fallback: {
-        '/api/posts': data,
-      },
+      firstPosts,
       locale,
+      totalPosts,
       translation,
     },
   };
diff --git a/src/pages/sujet/[slug].tsx b/src/pages/sujet/[slug].tsx
index 910c02c..82af2ff 100644
--- a/src/pages/sujet/[slug].tsx
+++ b/src/pages/sujet/[slug].tsx
@@ -4,7 +4,11 @@ import PostPreview from '@components/PostPreview/PostPreview';
 import Sidebar from '@components/Sidebar/Sidebar';
 import Spinner from '@components/Spinner/Spinner';
 import { RelatedThematics, ToC, TopicsList } from '@components/Widgets';
-import { getAllTopicsSlug, getTopicBySlug } from '@services/graphql/queries';
+import {
+  getAllTopics,
+  getAllTopicsSlug,
+  getTopicBySlug,
+} from '@services/graphql/queries';
 import styles from '@styles/pages/Page.module.scss';
 import { NextPageWithLayout } from '@ts/types/app';
 import { ArticleMeta } from '@ts/types/articles';
@@ -20,7 +24,7 @@ import { useRef } from 'react';
 import { useIntl } from 'react-intl';
 import { Article as Article, Graph, WebPage } from 'schema-dts';
 
-const Topic: NextPageWithLayout<TopicProps> = ({ topic }) => {
+const Topic: NextPageWithLayout<TopicProps> = ({ topic, allTopics }) => {
   const intl = useIntl();
   const relatedThematics = useRef<ThematicPreview[]>([]);
   const router = useRouter();
@@ -161,6 +165,7 @@ const Topic: NextPageWithLayout<TopicProps> = ({ topic }) => {
         >
           <RelatedThematics thematics={relatedThematics.current} />
           <TopicsList
+            initialData={allTopics}
             title={intl.formatMessage({
               defaultMessage: 'Others topics',
               description: 'TopicPage: topics list widget title',
@@ -185,10 +190,12 @@ export const getStaticProps: GetStaticProps = async (
   const translation = await loadTranslation(locale);
   const { slug } = context.params as PostParams;
   const topic = await getTopicBySlug(slug);
+  const allTopics = await getAllTopics();
   const breadcrumbTitle = topic.title;
 
   return {
     props: {
+      allTopics,
       breadcrumbTitle,
       locale,
       topic,
diff --git a/src/pages/thematique/[slug].tsx b/src/pages/thematique/[slug].tsx
index 166e0bb..d737ea7 100644
--- a/src/pages/thematique/[slug].tsx
+++ b/src/pages/thematique/[slug].tsx
@@ -5,6 +5,7 @@ import Sidebar from '@components/Sidebar/Sidebar';
 import Spinner from '@components/Spinner/Spinner';
 import { RelatedTopics, ThematicsList, ToC } from '@components/Widgets';
 import {
+  getAllThematics,
   getAllThematicsSlug,
   getThematicBySlug,
 } from '@services/graphql/queries';
@@ -23,7 +24,10 @@ import { useRef } from 'react';
 import { useIntl } from 'react-intl';
 import { Article, Graph, WebPage } from 'schema-dts';
 
-const Thematic: NextPageWithLayout<ThematicProps> = ({ thematic }) => {
+const Thematic: NextPageWithLayout<ThematicProps> = ({
+  thematic,
+  allThematics,
+}) => {
   const intl = useIntl();
   const relatedTopics = useRef<TopicPreview[]>([]);
   const router = useRouter();
@@ -151,6 +155,7 @@ const Thematic: NextPageWithLayout<ThematicProps> = ({ thematic }) => {
         >
           <RelatedTopics topics={relatedTopics.current} />
           <ThematicsList
+            initialData={allThematics}
             title={intl.formatMessage({
               defaultMessage: 'Others thematics',
               description: 'ThematicPage: thematics list widget title',
@@ -175,10 +180,12 @@ export const getStaticProps: GetStaticProps = async (
   const translation = await loadTranslation(locale);
   const { slug } = context.params as PostParams;
   const thematic = await getThematicBySlug(slug);
+  const allThematics = await getAllThematics();
   const breadcrumbTitle = thematic.title;
 
   return {
     props: {
+      allThematics,
       breadcrumbTitle,
       locale,
       thematic,
diff --git a/src/ts/types/blog.ts b/src/ts/types/blog.ts
index 7325ddf..8b48264 100644
--- a/src/ts/types/blog.ts
+++ b/src/ts/types/blog.ts
@@ -1,5 +1,6 @@
 import { PageInfo, Slug } from './app';
 import { ArticlePreview, RawArticlePreview } from './articles';
+import { ThematicPreview, TopicPreview } from './taxonomies';
 
 export type PostsList = {
   posts: ArticlePreview[];
@@ -25,5 +26,8 @@ export type AllPostsSlug = {
 };
 
 export type BlogPageProps = {
-  fallback: PostsList;
+  allThematics: ThematicPreview[];
+  allTopics: TopicPreview[];
+  firstPosts: PostsList;
+  totalPosts: number;
 };
diff --git a/src/ts/types/taxonomies.ts b/src/ts/types/taxonomies.ts
index a62bef4..8a0fcc7 100644
--- a/src/ts/types/taxonomies.ts
+++ b/src/ts/types/taxonomies.ts
@@ -71,6 +71,7 @@ export type AllTopicsSlug = {
 };
 
 export type TopicProps = {
+  allTopics: TopicPreview[];
   topic: Topic;
 };
 
@@ -108,5 +109,6 @@ export type AllThematicsSlug = {
 };
 
 export type ThematicProps = {
+  allThematics: ThematicPreview[];
   thematic: Thematic;
 };