WIP Post/comment pagination

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

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

packages/components/posts/organisms/post/post.tsx

@@ -1,4 +1,4 @@
-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'
@@ -19,27 +19,38 @@ 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}>
       <PostContainer post={post} user={user} />
       <Box className={classes.commentSection}>
-        {post.Comments.length !== 0 && <Divider className={classes.divider} />}
-
-        {post.Comments?.map((comment) => {
-          return (
-            <PostContainer
-              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/lib/package.json

@@ -17,6 +17,7 @@
     "deep-equal": "2.0.5",
     "deepmerge": "4.2.2",
     "graphql": "15.5.1",
+    "immutable": "^4.1.0",
     "intercom-client": "2.11.2",
     "ioredis": "4.27.7",
     "just-camel-case": "^6.0.1",

packages/lib/post/use-posts.ts

@@ -3,7 +3,6 @@ import { useEffect, useState } from 'react'
 import { CombinedError, UseQueryArgs } from 'urql'
 
 import { useActer } from '@acter/lib/acter/use-acter'
-import { getObjectArrayMemoString } from '@acter/lib/get-object-array-memo-string'
 import {
   usePaginatedQuery,
   UsePaginatedState,
@@ -74,7 +73,11 @@ export const usePosts = (params?: UsePostsParams): UsePostsResult => {
     if (queryError) return setError(queryError)
   }, [acterError, queryError])
 
-  useEffect(() => setPosts(results), [getObjectArrayMemoString(results)])
+  useEffect(() => {
+    debugger
+    console.log('post results', results.toList().toArray())
+    setPosts(results.toList().toArray())
+  }, [results])
 
   return { posts, fetching, error, ...restQueryResults } as UsePostsResult
 }

packages/schema/fragments/post-full.graphql

@@ -2,7 +2,7 @@
 
 fragment PostFull on Post {
   ...PostDisplay
-  Comments(orderBy: { createdAt: asc }, take: 5) {
+  Comments(orderBy: { createdAt: desc }, take: 6) {
     ...PostDisplay
   }
   Parent {

yarn.lock

@@ -162,6 +162,7 @@ __metadata:
     deep-equal: 2.0.5
     deepmerge: 4.2.2
     graphql: 15.5.1
+    immutable: ^4.1.0
     intercom-client: 2.11.2
     ioredis: 4.27.7
     just-camel-case: ^6.0.1
@@ -15902,6 +15903,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"immutable@npm:^4.1.0":
+  version: 4.1.0
+  resolution: "immutable@npm:4.1.0"
+  checksum: b9bc1f14fb18eb382d48339c064b24a1f97ae4cf43102e0906c0a6e186a27afcd18b55ca4a0b63c98eefb58143e2b5ebc7755a5fb4da4a7ad84b7a6096ac5b13
+  languageName: node
+  linkType: hard
+
 "immutable@npm:~3.7.4":
   version: 3.7.6
   resolution: "immutable@npm:3.7.6"