Use SSG for chapters, groups, posts, and topics

Author: ceolinwill

functions/src/chapters/onUpdate/index.ts

@@ -1,3 +1,4 @@
 export * from './addToActivity';
+export * from './rebuildPage';
 export * from './updateParent';
 export * from './updatePosts';

functions/src/chapters/onUpdate/rebuildPage.ts

@@ -0,0 +1,14 @@
+import * as functions from 'firebase-functions';
+import fetch from 'node-fetch';
+import { Chapter } from '@zoonk/models';
+
+/**
+ * Call a chapter page in the frontend to rebuild it (SSG).
+ */
+export const onUpdateChapterRebuildPage = functions.firestore
+  .document('chapters/{id}')
+  .onUpdate((change) => {
+    const { language } = change.after.data() as Chapter.Response;
+    const url = `https://${language}.zoonk.org/chapters/${change.after.id}`;
+    return fetch(url);
+  });

functions/src/groups/onUpdate/index.ts

@@ -1,3 +1,4 @@
 export * from './addToActivity';
+export * from './rebuildPage';
 export * from './updateMyGroups';
 export * from './updatePosts';

functions/src/groups/onUpdate/rebuildPage.ts

@@ -0,0 +1,14 @@
+import * as functions from 'firebase-functions';
+import fetch from 'node-fetch';
+import { Group } from '@zoonk/models';
+
+/**
+ * Call a group page in the frontend to rebuild it (SSG).
+ */
+export const onUpdateGroupRebuildPage = functions.firestore
+  .document('groups/{id}')
+  .onUpdate((change) => {
+    const { language } = change.after.data() as Group.Response;
+    const url = `https://${language}.zoonk.org/groups/${change.after.id}`;
+    return fetch(url);
+  });

functions/src/posts/onUpdate/index.ts

@@ -1,2 +1,3 @@
 export * from './addToActivity';
+export * from './rebuildPage';
 export * from './updateGroup';

functions/src/posts/onUpdate/rebuildPage.ts

@@ -0,0 +1,14 @@
+import * as functions from 'firebase-functions';
+import fetch from 'node-fetch';
+import { Post } from '@zoonk/models';
+
+/**
+ * Call a post page in the frontend to rebuild it (SSG).
+ */
+export const onUpdatePostRebuildPage = functions.firestore
+  .document('posts/{id}')
+  .onUpdate((change) => {
+    const { language } = change.after.data() as Post.Response;
+    const url = `https://${language}.zoonk.org/posts/${change.after.id}`;
+    return fetch(url);
+  });

functions/src/topics/onUpdate/index.ts

@@ -1,2 +1,3 @@
 export * from './addToActivity';
+export * from './rebuildPage';
 export * from './updateMyTopics';

functions/src/topics/onUpdate/rebuildPage.ts

@@ -0,0 +1,14 @@
+import * as functions from 'firebase-functions';
+import fetch from 'node-fetch';
+import { Topic } from '@zoonk/models';
+
+/**
+ * Call a topic page in the frontend to rebuild it (SSG).
+ */
+export const onUpdateTopicRebuildPage = functions.firestore
+  .document('topics/{id}')
+  .onUpdate((change) => {
+    const { language } = change.after.data() as Topic.Response;
+    const url = `https://${language}.zoonk.org/topics/${change.after.id}`;
+    return fetch(url);
+  });

src/pages/chapters/[id]/index.tsx

@@ -1,6 +1,7 @@
-import { NextPage } from 'next';
+import { GetStaticPaths, GetStaticProps, InferGetStaticPropsType } from 'next';
 import Error from 'next/error';
-import { Container, Grid } from '@material-ui/core';
+import { useRouter } from 'next/router';
+import { CircularProgress, Container, Grid } from '@material-ui/core';
 import ChapterDetails from '@zoonk/components/ChapterDetails';
 import ChapterNav from '@zoonk/components/ChapterNav';
 import LessonsCard from '@zoonk/components/LessonsCard';
@@ -9,18 +10,33 @@ import TopicsBreadcrumb from '@zoonk/components/TopicsBreadcrumb';
 import useChapterProgress from '@zoonk/components/useChapterProgress';
 import { Chapter } from '@zoonk/models';
 import { getChapter } from '@zoonk/services';
-import { preRender } from '@zoonk/utils';
 
 interface ChapterProps {
   data: Chapter.Get | null;
 }
 
-const ChapterPage: NextPage<ChapterProps> = ({ data }) => {
+export const getStaticPaths: GetStaticPaths = async () => {
+  return { paths: [], fallback: true };
+};
+
+export const getStaticProps: GetStaticProps<ChapterProps> = async ({
+  params,
+}) => {
+  const id = String(params?.id);
+  const data = await getChapter(id);
+  return { props: { data }, revalidate: 1 };
+};
+
+const ChapterPage = ({
+  data,
+}: InferGetStaticPropsType<typeof getStaticProps>) => {
+  const { isFallback } = useRouter();
   const { completed, progress } = useChapterProgress({
     chapter: data,
     chapterId: data?.id,
   });
 
+  if (!data && isFallback) return <CircularProgress />;
   if (!data) return <Error statusCode={404} />;
 
   const {
@@ -73,11 +89,4 @@ const ChapterPage: NextPage<ChapterProps> = ({ data }) => {
   );
 };
 
-ChapterPage.getInitialProps = async ({ query }) => {
-  const id = String(query.id);
-  const data = await getChapter(id);
-  preRender();
-  return { data };
-};
-
 export default ChapterPage;

src/pages/groups/[id]/index.tsx

@@ -1,15 +1,16 @@
-import { NextPage } from 'next';
+import { GetStaticPaths, GetStaticProps, InferGetStaticPropsType } from 'next';
 import Error from 'next/error';
-import { Container } from '@material-ui/core';
+import { useRouter } from 'next/router';
+import { CircularProgress, Container } from '@material-ui/core';
 import GroupBase from '@zoonk/components/GroupBase';
 import GroupsBreadcrumb from '@zoonk/components/GroupsBreadcrumb';
 import GroupPinned from '@zoonk/components/GroupPinned';
 import Meta from '@zoonk/components/Meta';
 import PostShare from '@zoonk/components/PostShare';
 import PostsList from '@zoonk/components/PostsList';
 import { Group, Post } from '@zoonk/models';
-import { getGroup, getPosts } from '@zoonk/services';
-import { appLanguage, preRender } from '@zoonk/utils';
+import { getGroup, getGroups, getPosts } from '@zoonk/services';
+import { appLanguage } from '@zoonk/utils';
 
 interface GroupPageProps {
   group: Group.Get | null;
@@ -18,7 +19,29 @@ interface GroupPageProps {
 
 const limit = 10;
 
-const GroupPage: NextPage<GroupPageProps> = ({ group, posts }) => {
+export const getStaticPaths: GetStaticPaths = async () => {
+  const groups = await getGroups({ limit: 20 });
+  const paths = groups.map((group) => ({ params: { id: group.id } }));
+  return { paths, fallback: true };
+};
+
+export const getStaticProps: GetStaticProps<GroupPageProps> = async ({
+  params,
+}) => {
+  const groupId = String(params?.id);
+  const groupReq = getGroup(groupId);
+  const postsReq = getPosts({ groupId, limit });
+  const [group, posts] = await Promise.all([groupReq, postsReq]);
+  return { props: { group, posts }, revalidate: 1 };
+};
+
+const GroupPage = ({
+  group,
+  posts,
+}: InferGetStaticPropsType<typeof getStaticProps>) => {
+  const { isFallback } = useRouter();
+
+  if (!group && isFallback) return <CircularProgress />;
   if (!group) return <Error statusCode={404} />;
 
   const { description, id, language, photo, title, topics } = group;
@@ -43,13 +66,4 @@ const GroupPage: NextPage<GroupPageProps> = ({ group, posts }) => {
   );
 };
 
-GroupPage.getInitialProps = async ({ query }) => {
-  const groupId = String(query.id);
-  const groupReq = getGroup(groupId);
-  const postsReq = getPosts({ groupId, limit });
-  const [group, posts] = await Promise.all([groupReq, postsReq]);
-  preRender();
-  return { group, posts };
-};
-
 export default GroupPage;