WIP: Damon/sc 1211 add pagination for posts

packages/components/acter/posts/index.tsx

@@ -4,7 +4,7 @@ import { Grid, makeStyles, createStyles, Theme } from '@material-ui/core'
 
 import { InfoSection } from '@acter/components/acter/landing-page/info-section'
 import { LandingPageLayout } from '@acter/components/acter/landing-page/layout'
-import { PostList } from '@acter/components/posts'
+import { PostList } from '@acter/components/posts/organisms/post-list'
 
 export const ActerPosts: FC = () => {
   const classes = useStyles({})

packages/components/acter/posts/single-post-section.tsx

@@ -9,7 +9,7 @@ import {
 } from '@material-ui/core'
 import { ArrowBackSharp as BackIcon } from '@material-ui/icons'
 
-import { SinglePost } from '@acter/components/posts/single-post'
+import { PostContent } from '@acter/components/posts/organisms/post'
 import { Link } from '@acter/components/util/anchor-link'
 import { Post } from '@acter/schema'
 
@@ -36,7 +36,7 @@ export const SinglePostSection: FC<SinglePostSectionProps> = ({
           <Typography className={classes.backLink}>Back to posts</Typography>
         </Box>
       </Link>
-      <Box className={classes.postContainer}>{<SinglePost post={post} />}</Box>
+      <Box className={classes.postContainer}>{<PostContent post={post} />}</Box>
     </>
   )
 }

packages/components/activity/posts.tsx

@@ -5,7 +5,7 @@ import { useRouter } from 'next/router'
 import slugify from 'slugify'
 
 import { SinglePostSection } from '@acter/components/acter/posts/single-post-section'
-import { PostList } from '@acter/components/posts'
+import { PostList } from '@acter/components/posts/organisms/post-list'
 import { acterAsUrl } from '@acter/lib/acter/acter-as-url'
 import { usePost } from '@acter/lib/post/use-post'
 import { Acter } from '@acter/schema'

packages/components/group/index.tsx

@@ -13,7 +13,7 @@ import { DescriptionSection } from '@acter/components/group/sections/description
 import { LinksSection } from '@acter/components/group/sections/links'
 import { MembersSection } from '@acter/components/group/sections/members'
 import { UpcomingActivities } from '@acter/components/group/sections/upcoming-activities'
-import { PostList } from '@acter/components/posts'
+import { PostList } from '@acter/components/posts/organisms/post-list'
 
 export const GroupLanding: FC = () => {
   const classes = useStyles()

packages/components/package.json

@@ -57,7 +57,6 @@
     "react-filepond": "7.1.1",
     "react-google-autocomplete": "2.6.1",
     "react-imgix": "9.5.0",
-    "react-infinite-scroll-component": "6.1.0",
     "react-is-visible": "1.1.2",
     "react-sanitized-html": "^2.0.0",
     "sanitize-html": "^2.7.0",

packages/components/pagination/infinite-list.tsx

@@ -0,0 +1,25 @@
+import React, { FC, ReactNode } from 'react'
+
+import {
+  LoadMoreOnVisible,
+  LoadMoreOnVisibleProps,
+} from './load-more-on-visible'
+
+export interface InfiniteListProps<T = unknown>
+  extends LoadMoreOnVisibleProps<T> {
+  entities: T[]
+  render?: (entity: T) => ReactNode
+}
+
+export const InfiniteList: FC<InfiniteListProps> = ({
+  entities,
+  render,
+  children,
+  ...restProps
+}) => (
+  <>
+    {render && entities?.map(render)}
+    {children}
+    <LoadMoreOnVisible entities={entities} {...restProps} />
+  </>
+)

packages/components/pagination/load-more-on-visible.tsx

@@ -0,0 +1,39 @@
+import React, { useEffect, useRef, FC, ReactElement } from 'react'
+import { useIsVisible } from 'react-is-visible'
+
+import { Button } from '@acter/components/styled'
+
+export interface LoadMoreOnVisibleProps<T = unknown> {
+  entities: T[]
+  fetching: boolean
+  hasMore: boolean
+  renderOnLoading?: () => ReactElement
+  loadMore: () => void
+}
+
+export const LoadMoreOnVisible: FC<LoadMoreOnVisibleProps> = ({
+  entities,
+  fetching,
+  hasMore,
+  renderOnLoading,
+  loadMore,
+}) => {
+  if (fetching) {
+    return renderOnLoading?.()
+  }
+
+  if (!entities || !hasMore) return null
+
+  const nodeRef = useRef()
+  const isVisible = useIsVisible(nodeRef)
+
+  useEffect(() => {
+    if (isVisible) loadMore()
+  }, [isVisible])
+
+  return (
+    <div ref={nodeRef}>
+      <Button onClick={loadMore}>Load more</Button>
+    </div>
+  )
+}

packages/components/posts/molecules/content/index.ts

@@ -0,0 +1 @@
+export * from './post-content'

packages/components/posts/post/content.tsx → packages/components/posts/molecules/content/post-content.tsx

@@ -4,8 +4,11 @@ import { Box } from '@material-ui/core'
 import { makeStyles, createStyles, Theme } from '@material-ui/core/styles'
 
 import { SanitizedContent } from '@acter/components/molecules/sanitized-content'
-import { PostInfo, PostInfoProps } from '@acter/components/posts/post/info'
-import { PostReactions } from '@acter/components/posts/reactions'
+import {
+  PostInfo,
+  PostInfoProps,
+} from '@acter/components/posts/molecules/info/post-info'
+import { PostReactions } from '@acter/components/posts/organisms/reactions'
 
 type PostContentProps = PostInfoProps
 

packages/components/posts/molecules/info/index.ts

@@ -0,0 +1 @@
+export * from './post-info'

packages/components/posts/molecules/options/index.ts

@@ -0,0 +1 @@
+export * from './post-options'

packages/components/posts/organisms/container/index.ts

@@ -0,0 +1 @@
+export * from './post-container'

packages/components/posts/post/index.tsx → packages/components/posts/organisms/container/post-container.tsx

@@ -6,10 +6,13 @@ import clsx from 'clsx'
 
 import { ActerAvatar } from '@acter/components/acter/avatar'
 import { LoadingSpinner } from '@acter/components/atoms/loading/spinner'
-import { PostForm, PostFormValues } from '@acter/components/posts/form'
-import { PostContent } from '@acter/components/posts/post/content'
-import { PostOptions } from '@acter/components/posts/post/options'
-import { AddPostReaction } from '@acter/components/posts/reactions/add-reaction'
+import { PostContent } from '@acter/components/posts/molecules/content'
+import { PostOptions } from '@acter/components/posts/molecules/options'
+import {
+  PostForm,
+  PostFormValues,
+} from '@acter/components/posts/organisms/form'
+import { AddPostReaction } from '@acter/components/posts/organisms/reactions/add-reaction'
 import { checkMemberAccess } from '@acter/lib/acter/check-member-access'
 import { useActer } from '@acter/lib/acter/use-acter'
 import { useDeletePost } from '@acter/lib/post/use-delete-post'
@@ -23,7 +26,7 @@ export interface PostsProps {
   parentId?: string
 }
 
-export const Post: FC<PostsProps> = ({ user, post, parentId }) => {
+export const PostContainer: FC<PostsProps> = ({ user, post, parentId }) => {
   const classes = useStyles()
   const [toggleForm, setToggleForm] = useState(false)
   const { acter } = useActer()

packages/components/posts/organisms/form/index.ts

@@ -0,0 +1,2 @@
+export * from './post-form'
+export * from './post-form-section'

packages/components/posts/form/post-form-section.tsx → packages/components/posts/organisms/form/post-form-section.tsx

@@ -10,7 +10,7 @@ import {
   PostForm,
   PostFormProps,
   PostFormValues,
-} from '@acter/components/posts/form'
+} from '@acter/components/posts/organisms/form'
 import { useActer } from '@acter/lib/acter/use-acter'
 import { useTranslation } from '@acter/lib/i18n/use-translation'
 import { useCreateComment } from '@acter/lib/post/use-create-comment'

packages/components/posts/form/__stories__/post-form.stories.tsx → packages/components/posts/organisms/form/post-form.stories.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 
 import { Meta, Story } from '@storybook/react'
 
-import { PostForm, PostFormProps } from '@acter/components/posts/form'
+import { PostForm, PostFormProps } from '@acter/components/posts/organisms/form'
 import { ExampleActer } from '@acter/schema/fixtures'
 import { ExampleUser } from '@acter/schema/fixtures'
 

packages/components/posts/organisms/post-list/index.ts

@@ -0,0 +1 @@
+export * from './post-list'

packages/components/posts/__stories__/post.stories.tsx → packages/components/posts/organisms/post-list/post-list.stories.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 
 import { Meta, Story } from '@storybook/react'
 
-import { PostList } from '@acter/components/posts'
+import { PostList } from '@acter/components/posts/organisms/post-list'
 import {
   withExampleActerParams,
   withExampleUserParams,

packages/components/posts/index.tsx → packages/components/posts/organisms/post-list/post-list.tsx

@@ -4,13 +4,14 @@ import { Box } from '@material-ui/core'
 import { makeStyles, createStyles, Theme } from '@material-ui/core/styles'
 
 import { LoadingSpinner } from '@acter/components/atoms/loading/spinner'
-import { PostFormSection } from '@acter/components/posts/form/post-form-section'
-import { SinglePost } from '@acter/components/posts/single-post'
+import { InfiniteList } from '@acter/components/pagination/infinite-list'
+import { PostFormSection } from '@acter/components/posts/organisms/form/post-form-section'
+import { Post } from '@acter/components/posts/organisms/post'
 import { checkMemberAccess } from '@acter/lib/acter/check-member-access'
 import { useActer } from '@acter/lib/acter/use-acter'
 import { usePosts } from '@acter/lib/post/use-posts'
 import { useUser } from '@acter/lib/user/use-user'
-import { ActerJoinSettings } from '@acter/schema'
+import { ActerJoinSettings, Post as PostType } from '@acter/schema'
 
 interface PostListProps {
   acterId?: string
@@ -19,11 +20,17 @@ interface PostListProps {
 export const PostList: FC<PostListProps> = ({ acterId }) => {
   const classes = useStyles()
 
-  const { posts, fetching: postsLoading } = usePosts({ acterId })
+  const {
+    posts,
+    fetching: postsLoading,
+    hasMore,
+    loadMore,
+  } = usePosts({ acterId })
   const { user, fetching: userLoading } = useUser()
   const { acter, fetching: acterLoading } = useActer({ acterId })
 
-  if (acterLoading || userLoading || postsLoading) return <LoadingSpinner />
+  if (!posts && (acterLoading || userLoading || postsLoading))
+    return <LoadingSpinner />
   if (!acter) return null
 
   const isUserActerFollower = acter.Followers.find(
@@ -41,11 +48,16 @@ export const PostList: FC<PostListProps> = ({ acterId }) => {
       {isMember && <PostFormSection user={user} acterId={acterId} />}
 
       {(isActerPublic || isMember) && (
-        <>
-          {posts?.map((post) => (
-            <SinglePost post={post} acterId={acterId} key={`post-${post.id}`} />
-          ))}
-        </>
+        <InfiniteList
+          entities={posts}
+          fetching={postsLoading}
+          hasMore={hasMore}
+          loadMore={loadMore}
+          renderOnLoading={() => <LoadingSpinner />}
+          render={(post: PostType) => (
+            <Post post={post} acterId={acterId} key={`post-${post.id}`} />
+          )}
+        />
       )}
     </Box>
   )

packages/components/posts/organisms/post/index.ts

@@ -0,0 +1 @@
+export * from './post'

packages/components/posts/single-post.tsx → packages/components/posts/organisms/post/post.tsx

@@ -1,10 +1,10 @@
-import React, { FC } from 'react'
+import React, { useState, FC } from 'react'
 
 import { Box, Divider } from '@material-ui/core'
 import { makeStyles, createStyles, Theme } from '@material-ui/core/styles'
 
-import { PostFormSection } from '@acter/components/posts/form/post-form-section'
-import { Post } from '@acter/components/posts/post/index'
+import { PostContainer } from '@acter/components/posts/organisms/container'
+import { PostFormSection } from '@acter/components/posts/organisms/form/post-form-section'
 import { checkMemberAccess } from '@acter/lib/acter/check-member-access'
 import { useActer } from '@acter/lib/acter/use-acter'
 import { useUser } from '@acter/lib/user/use-user'
@@ -15,29 +15,42 @@ interface SinglePostProps {
   acterId?: string
 }
 
-export const SinglePost: FC<SinglePostProps> = ({ post, acterId }) => {
+export const Post: FC<SinglePostProps> = ({ post, acterId }) => {
   const classes = useStyles()
   const { user } = useUser()
   const { acter } = useActer({ acterId })
+  const [hasMoreComments, setHasMoreComments] = useState(
+    post.Comments.length > 5
+  )
 
   if (!acter || !user) return null
 
   const isMember = checkMemberAccess(user, acter)
 
+  const comments = post.Comments
+    ? post.Comments.slice(0, post.Comments.length - 1).reverse()
+    : []
+
   return (
     <Box className={classes.contentContainer}>
-      <Post post={post} user={user} />
+      <PostContainer post={post} user={user} />
       <Box className={classes.commentSection}>
-        {post.Comments.length !== 0 && <Divider className={classes.divider} />}
-
-        {post.Comments?.map((comment) => (
-          <Post
-            key={`post-${post.id}-comment-${comment.id}`}
-            post={comment}
-            parentId={post.id}
-            user={user}
-          />
-        ))}
+        {comments.length !== 0 && (
+          <>
+            <Divider className={classes.divider} />
+            {hasMoreComments && <>Load more comments</>}
+            {comments.map((comment) => {
+              return (
+                <PostContainer
+                  key={`post-${post.id}-comment-${comment.id}`}
+                  post={comment}
+                  parentId={post.id}
+                  user={user}
+                />
+              )
+            })}
+          </>
+        )}
 
         {isMember && (
           <PostFormSection parentId={post.id} user={user} acterId={acterId} />

packages/components/posts/reactions/index.tsx → packages/components/posts/organisms/reactions/index.tsx

@@ -8,7 +8,7 @@ import {
   Typography,
 } from '@material-ui/core/'
 
-import { AddPostReaction } from '@acter/components/posts/reactions/add-reaction'
+import { AddPostReaction } from '@acter/components/posts/organisms/reactions/add-reaction'
 import { checkMemberAccess } from '@acter/lib/acter/check-member-access'
 import { useActer } from '@acter/lib/acter/use-acter'
 import { useCreatePostReaction } from '@acter/lib/post/use-create-post-reaction'

packages/components/posts/__stories__/post-reactions.stories.tsx → packages/components/posts/organisms/reactions/post-reactions.stories.tsx

@@ -3,7 +3,7 @@ import { Meta, Story } from '@storybook/react'
 import {
   PostReactions,
   PostReactionsProps,
-} from '@acter/components/posts/reactions'
+} from '@acter/components/posts/organisms/reactions'
 import { withExampleActerParams } from '@acter/lib/storybook-helpers'
 import { ExamplePost } from '@acter/schema/fixtures'