From da33489b60802b690335ce216533d7c0c307fbfc Mon Sep 17 00:00:00 2001
From: Damon <damon@vestervand.net>
Date: Tue, 7 Jun 2022 12:17:08 +0200
Subject: [PATCH] WIP Post/comment pagination

---
 .../components/posts/organisms/form/index.ts  |  2 +
 .../form/{index.tsx => post-form.tsx}         |  0
 .../components/posts/organisms/post/post.tsx  | 37 ++++++++++++-------
 packages/lib/package.json                     |  1 +
 packages/lib/post/use-posts.ts                |  7 +++-
 packages/schema/fragments/post-full.graphql   |  2 +-
 yarn.lock                                     |  8 ++++
 7 files changed, 41 insertions(+), 16 deletions(-)
 create mode 100644 packages/components/posts/organisms/form/index.ts
 rename packages/components/posts/organisms/form/{index.tsx => post-form.tsx} (100%)

diff --git a/packages/components/posts/organisms/form/index.ts b/packages/components/posts/organisms/form/index.ts
new file mode 100644
index 000000000..5a1adc2e4
--- /dev/null
+++ b/packages/components/posts/organisms/form/index.ts
@@ -0,0 +1,2 @@
+export * from './post-form'
+export * from './post-form-section'
diff --git a/packages/components/posts/organisms/form/index.tsx b/packages/components/posts/organisms/form/post-form.tsx
similarity index 100%
rename from packages/components/posts/organisms/form/index.tsx
rename to packages/components/posts/organisms/form/post-form.tsx
diff --git a/packages/components/posts/organisms/post/post.tsx b/packages/components/posts/organisms/post/post.tsx
index 1c3ae2693..a62d3f013 100644
--- a/packages/components/posts/organisms/post/post.tsx
+++ b/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} />
diff --git a/packages/lib/package.json b/packages/lib/package.json
index 8532c6ae5..fa6133e0f 100644
--- a/packages/lib/package.json
+++ b/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",
diff --git a/packages/lib/post/use-posts.ts b/packages/lib/post/use-posts.ts
index e3d48217b..613ce13aa 100644
--- a/packages/lib/post/use-posts.ts
+++ b/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
 }
diff --git a/packages/schema/fragments/post-full.graphql b/packages/schema/fragments/post-full.graphql
index 64cb39c20..0b043ff01 100644
--- a/packages/schema/fragments/post-full.graphql
+++ b/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 {
diff --git a/yarn.lock b/yarn.lock
index 37196c4f8..96dcee027 100644
--- a/yarn.lock
+++ b/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"