From 916c512bf5a31041ac87296e1382f84c9367b955 Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Mon, 14 Feb 2022 17:16:53 +0100 Subject: chore: display initial posts, thematics & topics By fetching the data in getStaticProps, I can display the data even for users with Javascript disabled. --- .../Widgets/RelatedThematics/RelatedThematics.tsx | 7 +--- .../Widgets/RelatedTopics/RelatedTopics.tsx | 7 +--- .../Widgets/ThematicsList/ThematicsList.tsx | 13 +++---- src/components/Widgets/TopicsList/TopicsList.tsx | 13 +++---- src/i18n/en.json | 24 ++---------- src/i18n/fr.json | 24 ++---------- src/pages/blog/index.tsx | 44 +++++++++++++++------- src/pages/sujet/[slug].tsx | 11 +++++- src/pages/thematique/[slug].tsx | 9 ++++- src/ts/types/blog.ts | 6 ++- src/ts/types/taxonomies.ts | 2 + 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 ( { )} withBorders={true} > - ); 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 ( { )} withBorders={true} > - ); 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} > - {getList()} ); 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} > - {getList()} ); 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 = ({ fallback }) => { +const Blog: NextPageWithLayout = ({ + allThematics, + allTopics, + firstPosts, + totalPosts, +}) => { const intl = useIntl(); const lastPostRef = useRef(null); const router = useRouter(); @@ -39,9 +49,9 @@ const Blog: NextPageWithLayout = ({ fallback }) => { const { data, error, size, setSize } = useSWRInfinite( getKey, getPublishedPosts, - { fallback } + { fallbackData: [firstPosts] } ); - const [totalPostsCount, setTotalPostsCount] = useState(0); + const [totalPostsCount, setTotalPostsCount] = useState(totalPosts); useEffect(() => { if (data) setTotalPostsCount(data[0].pageInfo.total); @@ -158,12 +168,6 @@ const Blog: NextPageWithLayout = ({ fallback }) => { >
- {getPostsList()} {hasNextPage && ( <> @@ -182,6 +186,12 @@ const Blog: NextPageWithLayout = ({ fallback }) => { description: 'BlogPage: load more text', })} + )}
@@ -193,12 +203,14 @@ const Blog: NextPageWithLayout = ({ fallback }) => { })} > = ({ topic }) => { +const Topic: NextPageWithLayout = ({ topic, allTopics }) => { const intl = useIntl(); const relatedThematics = useRef([]); const router = useRouter(); @@ -161,6 +165,7 @@ const Topic: NextPageWithLayout = ({ topic }) => { > = ({ thematic }) => { +const Thematic: NextPageWithLayout = ({ + thematic, + allThematics, +}) => { const intl = useIntl(); const relatedTopics = useRef([]); const router = useRouter(); @@ -151,6 +155,7 @@ const Thematic: NextPageWithLayout = ({ thematic }) => { >