Use SSG for chapters, groups, posts, and topics

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;

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

@@ -1,7 +1,13 @@
-import { NextPage } from 'next';
+import { GetStaticPaths, GetStaticProps, InferGetStaticPropsType } from 'next';
 import dynamic from 'next/dynamic';
 import Error from 'next/error';
-import { Container, Divider, makeStyles } from '@material-ui/core';
+import { useRouter } from 'next/router';
+import {
+  CircularProgress,
+  Container,
+  Divider,
+  makeStyles,
+} from '@material-ui/core';
 import LinkList from '@zoonk/components/LinkList';
 import Meta from '@zoonk/components/Meta';
 import PostBar from '@zoonk/components/PostBar';
@@ -10,8 +16,8 @@ import PostHeader from '@zoonk/components/PostHeader';
 import RichTextViewer from '@zoonk/components/rich-text/RichTextViewer';
 import { getPlainText, getPostImage } from '@zoonk/components/rich-text/posts';
 import { Post } from '@zoonk/models';
-import { getPost } from '@zoonk/services';
-import { appLanguage, PostContext, preRender } from '@zoonk/utils';
+import { getPost, getPosts } from '@zoonk/services';
+import { appLanguage, PostContext } from '@zoonk/utils';
 
 const CommentList = dynamic(() => import('@zoonk/components/CommentList'), {
   ssr: false,
@@ -34,9 +40,25 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
-const PostPage: NextPage<PostPageProps> = ({ data }) => {
+export const getStaticPaths: GetStaticPaths = async () => {
+  const posts = await getPosts({ limit: 50 });
+  const paths = posts.map((post) => ({ params: { id: post.id } }));
+  return { paths, fallback: true };
+};
+
+export const getStaticProps: GetStaticProps<PostPageProps> = async ({
+  params,
+}) => {
+  const id = String(params?.id);
+  const data = await getPost(id);
+  return { props: { data }, revalidate: 1 };
+};
+
+const PostPage = ({ data }: InferGetStaticPropsType<typeof getStaticProps>) => {
+  const { isFallback } = useRouter();
   const classes = useStyles();
 
+  if (!data && isFallback) return <CircularProgress />;
   if (!data) return <Error statusCode={404} />;
 
   const { content, cover, id, language, sites, title } = data;
@@ -68,11 +90,4 @@ const PostPage: NextPage<PostPageProps> = ({ data }) => {
   );
 };
 
-PostPage.getInitialProps = async ({ query }) => {
-  const id = String(query.id);
-  const data = await getPost(id);
-  preRender();
-  return { data };
-};
-
 export default PostPage;

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

@@ -1,6 +1,7 @@
-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 ChaptersCard from '@zoonk/components/ChaptersCard';
 import Meta from '@zoonk/components/Meta';
 import PostsList from '@zoonk/components/PostsList';
@@ -9,8 +10,7 @@ import TopicBase from '@zoonk/components/TopicBase';
 import TopicsBreadcrumb from '@zoonk/components/TopicsBreadcrumb';
 import useTranslation from '@zoonk/components/useTranslation';
 import { Post, Topic } from '@zoonk/models';
-import { getPosts, getTopic } from '@zoonk/services';
-import { preRender } from '@zoonk/utils';
+import { getPosts, getTopic, getTopics } from '@zoonk/services';
 
 interface TopicPageProps {
   posts: Post.Get[];
@@ -19,9 +19,30 @@ interface TopicPageProps {
 
 const limit = 10;
 
-const TopicPage: NextPage<TopicPageProps> = ({ posts, topic }) => {
+export const getStaticPaths: GetStaticPaths = async () => {
+  const topics = await getTopics({ limit: 20 });
+  const paths = topics.map((topic) => ({ params: { id: topic.id } }));
+  return { paths, fallback: true };
+};
+
+export const getStaticProps: GetStaticProps<TopicPageProps> = async ({
+  params,
+}) => {
+  const topicId = String(params?.id);
+  const topicReq = getTopic(topicId);
+  const postsReq = getPosts({ topicId, limit });
+  const [topic, posts] = await Promise.all([topicReq, postsReq]);
+  return { props: { posts, topic }, revalidate: 1 };
+};
+
+const TopicPage = ({
+  posts,
+  topic,
+}: InferGetStaticPropsType<typeof getStaticProps>) => {
   const translate = useTranslation();
+  const { isFallback } = useRouter();
 
+  if (!topic && isFallback) return <CircularProgress />;
   if (!topic) return <Error statusCode={404} />;
 
   const { chapterData, id, language, photo, title } = topic;
@@ -49,13 +70,4 @@ const TopicPage: NextPage<TopicPageProps> = ({ posts, topic }) => {
   );
 };
 
-TopicPage.getInitialProps = async ({ query }) => {
-  const topicId = String(query.id);
-  const topicReq = getTopic(topicId);
-  const postsReq = getPosts({ topicId, limit });
-  const [topic, posts] = await Promise.all([topicReq, postsReq]);
-  preRender();
-  return { posts, topic };
-};
-
 export default TopicPage;

src/utils/index.ts

@@ -8,7 +8,6 @@ export * from './misc';
 export * from './posts';
 export * from './progress';
 export * from './routing';
-export * from './server';
 export * from './settings';
 export * from './snackbar';
 export * from './theme';