enable ssg for pages

Author: ceolinwill

package.json

@@ -34,7 +34,7 @@
     "@material-ui/lab": "^4.0.0-alpha.52",
     "algoliasearch": "^4.0.3",
     "diff": "^4.0.2",
-    "firebase": "^7.15.1",
+    "firebase": "^7.15.2",
     "is-hotkey": "^0.1.6",
     "lodash": "^4.17.15",
     "mitt": "^2.0.1",

src/components/CategoryFilter.tsx

@@ -7,7 +7,7 @@ import CommentActions from './CommentActions';
 import CommentForm from './CommentForm';
 import CommentUser from './CommentUser';
 import ReplyList from './ReplyList';
-import EditorRead from './rich-text/EditorRead';
+import RichTextViewer from './rich-text/RichTextViewer';
 
 interface CommentCardProps {
   data: Comment.Get;
@@ -36,7 +36,7 @@ const CommentCard = ({ data }: CommentCardProps) => {
     >
       <CommentUser user={createdBy} />
       <div className={classes.content}>
-        <EditorRead content={content} />
+        <RichTextViewer content={content} />
       </div>
       <CommentActions
         data={data}

src/components/CommentCard.tsx

@@ -1,41 +1,24 @@
-import { Fragment, useEffect } from 'react';
-import { Button, Grid } from '@material-ui/core';
+import { Fragment, useState } from 'react';
+import dynamic from 'next/dynamic';
+import { Grid } from '@material-ui/core';
 import { Comment } from '@zoonk/models';
-import { listComments } from '@zoonk/services';
-import { theme } from '@zoonk/utils';
 import DiscussionListItem from './DiscussionListItem';
-import ListSkeleton from './ListSkeleton';
 import NoItems from './NoItems';
-import useLoadMore from './useLoadMore';
-import useTranslation from './useTranslation';
+
+const DiscussionLoadMore = dynamic(() => import('./DiscussionLoadMore'), {
+  ssr: false,
+});
 
 interface DiscussionListProps {
-  allowLoadMore?: boolean;
-  createdById?: string;
+  data: Comment.Get[];
   limit?: number;
+  userId?: string;
 }
 
-const DiscussionList = ({
-  allowLoadMore,
-  createdById,
-  limit = 10,
-}: DiscussionListProps) => {
-  const translate = useTranslation();
-  const { get, items, lastVisible, loading } = useLoadMore<Comment.Snapshot>(
-    limit,
-  );
-
-  const loadMore = () => {
-    get({ data: listComments(lastVisible, createdById, limit) });
-  };
+const DiscussionList = ({ data, limit = 10, userId }: DiscussionListProps) => {
+  const [items, setItems] = useState<Comment.Get[]>(data);
 
-  useEffect(() => {
-    get({ data: listComments(undefined, createdById, limit) });
-  }, [get, createdById, limit]);
-
-  if (items.length === 0 && loading === false) {
-    return <NoItems />;
-  }
+  if (items.length === 0) return <NoItems />;
 
   return (
     <Fragment>
@@ -47,19 +30,13 @@ const DiscussionList = ({
         ))}
       </Grid>
 
-      {loading && <ListSkeleton items={limit} />}
-
-      {allowLoadMore && lastVisible && (
-        <Button
-          fullWidth
-          variant="contained"
-          color="primary"
-          onClick={loadMore}
-          style={{ margin: theme.spacing(3, 0, 2) }}
-        >
-          {translate('load_more')}
-        </Button>
-      )}
+      <DiscussionLoadMore
+        lastItem={items[items.length - 1].id}
+        length={items.length}
+        limit={limit}
+        userId={userId}
+        onLoadMore={(res) => setItems([...items, ...res])}
+      />
     </Fragment>
   );
 };

src/components/DiscussionList.tsx

@@ -11,7 +11,7 @@ import {
   Typography,
 } from '@material-ui/core';
 import { Comment } from '@zoonk/models';
-import EditorRead from './rich-text/EditorRead';
+import RichTextViewer from './rich-text/RichTextViewer';
 import useAuth from './useAuth';
 import useTranslation from './useTranslation';
 
@@ -66,7 +66,7 @@ const DiscussionListItem = ({
         subheader={createdAt}
       />
       <CardContent>
-        <EditorRead content={content} />
+        <RichTextViewer content={content} />
       </CardContent>
       <CardActions disableSpacing>
         <NextLink href={`/${link}/[id]`} as={`/${link}/${linkId}`} passHref>

src/components/DiscussionListItem.tsx

@@ -0,0 +1,34 @@
+import { Comment } from '@zoonk/models';
+import { getCommentsSnapshot } from '@zoonk/services';
+import LoadMore from './LoadMore';
+
+interface DiscussionLoadMoreProps {
+  lastItem: string | firebase.firestore.DocumentSnapshot;
+  length: number;
+  limit: number;
+  userId?: string;
+  onLoadMore: (posts: Comment.Get[]) => void;
+}
+
+const DiscussionLoadMore = ({
+  lastItem,
+  length,
+  limit,
+  userId,
+  onLoadMore,
+}: DiscussionLoadMoreProps) => {
+  const lastPath =
+    typeof lastItem === 'string' ? `comments/${lastItem}` : lastItem;
+
+  return (
+    <LoadMore<Comment.Snapshot>
+      lastPath={lastPath}
+      length={length}
+      limit={limit}
+      onLoadMore={onLoadMore}
+      request={(last) => getCommentsSnapshot(last, limit, userId)}
+    />
+  );
+};
+
+export default DiscussionLoadMore;

src/components/DiscussionLoadMore.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'react';
+import dynamic from 'next/dynamic';
 import NextLink from 'next/link';
 import {
   Button,
@@ -14,11 +15,12 @@ import { editableFields } from '@zoonk/utils';
 import { getFieldDiff } from '@zoonk/utils/diff';
 import EditsDiffBox from './EditsDiffBox';
 import EditsHeader from './EditsHeader';
-import EditsReport from './EditsReport';
-import EditsRevert from './EditsRevert';
 import { getPlainText } from './rich-text/posts';
 import useTranslation from './useTranslation';
 
+const EditsReport = dynamic(() => import('./EditsReport'), { ssr: false });
+const EditsRevert = dynamic(() => import('./EditsRevert'), { ssr: false });
+
 interface EditsItemProps {
   displayTitle?: boolean;
   edits: Activity.Get;

src/components/EditGet.tsx

@@ -1,52 +1,39 @@
-import { Fragment, useEffect } from 'react';
-import { Button } from '@material-ui/core';
+import { Fragment, useState } from 'react';
+import dynamic from 'next/dynamic';
 import { Activity } from '@zoonk/models';
-import { listActivities } from '@zoonk/services';
-import { theme } from '@zoonk/utils';
 import EditsItem from './EditsItem';
-import EditsSkeleton from './EditsSkeleton';
-import useLoadMore from './useLoadMore';
-import useTranslation from './useTranslation';
+import NoItems from './NoItems';
+
+// Dynamically loading this component to reduce the first load size.
+const EditsLoadMore = dynamic(() => import('./EditsLoadMore'), {
+  ssr: false,
+});
 
 interface EditsListProps {
+  data: Activity.Get[];
   displayTitle?: boolean;
   itemPath?: string;
-  limit?: number;
+  limit: number;
 }
 
-const EditsList = ({ displayTitle, itemPath, limit = 10 }: EditsListProps) => {
-  const translate = useTranslation();
-  const { get, items, lastVisible, loading } = useLoadMore<Activity.Snapshot>(
-    limit,
-  );
-
-  const loadMore = () => {
-    get({ data: listActivities(itemPath, lastVisible, limit) });
-  };
+const EditsList = ({ data, displayTitle, itemPath, limit }: EditsListProps) => {
+  const [items, setItems] = useState<Activity.Get[]>(data);
 
-  useEffect(() => {
-    get({ data: listActivities(itemPath, undefined, limit), replace: true });
-  }, [get, itemPath, limit]);
+  if (items.length === 0) return <NoItems />;
 
   return (
     <Fragment>
       {items.map((item) => (
         <EditsItem displayTitle={displayTitle} edits={item} key={item.id} />
       ))}
 
-      {loading && <EditsSkeleton />}
-
-      {lastVisible && (
-        <Button
-          fullWidth
-          variant="contained"
-          color="primary"
-          onClick={loadMore}
-          style={{ margin: theme.spacing(3, 0, 2) }}
-        >
-          {translate('load_more')}
-        </Button>
-      )}
+      <EditsLoadMore
+        itemPath={itemPath}
+        lastItem={items[items.length - 1].id}
+        length={items.length}
+        limit={limit}
+        onLoadMore={(res) => setItems([...items, ...res])}
+      />
     </Fragment>
   );
 };