From bafcd356d3fda45b70e480599545fd60ac0f5905 Mon Sep 17 00:00:00 2001
From: Daniel Stocks <daniel@webcloud.se>
Date: Thu, 7 Nov 2024 11:05:42 +0100
Subject: [PATCH] Update StoryCommentsSection.tsx to reflect Relay tutorial

Following the steps in the [Connections & Pagination](https://relay.dev/docs/next/tutorial/connections-pagination/#implementing-load-more-comments) part of the Relay Tutorial is clearly states that:

> At this point, you should see up to three comments on each story. Some stories have more than three comments, and these will show a "Load more" button, although it isn't hooked up yet.

But the example only loads 1 comments, and there is no "Load more" button present. The tutorial assumes that this code is already present and that is confusing to the reader.

In this PR I've updated `StoryCommentsSection.tsx` to reflect the code examples & instructions in the tutorial.

Thanks!
---
 .../src/components/StoryCommentsSection.tsx   | 26 ++++++++++---------
 1 file changed, 14 insertions(+), 12 deletions(-)

diff --git a/newsfeed/src/components/StoryCommentsSection.tsx b/newsfeed/src/components/StoryCommentsSection.tsx
index b564af9b..14aaaaf9 100644
--- a/newsfeed/src/components/StoryCommentsSection.tsx
+++ b/newsfeed/src/components/StoryCommentsSection.tsx
@@ -3,8 +3,7 @@ import { graphql } from "relay-runtime";
 import { useFragment } from "react-relay";
 import type { StoryCommentsSectionFragment$key } from "./__generated__/StoryCommentsSectionFragment.graphql";
 import Comment from "./Comment";
-
-const { useState, useTransition } = React;
+import LoadMoreCommentsButton from "./LoadMoreCommentsButton";
 
 export type Props = {
   story: StoryCommentsSectionFragment$key;
@@ -12,27 +11,30 @@ export type Props = {
 
 const StoryCommentsSectionFragment = graphql`
   fragment StoryCommentsSectionFragment on Story {
-    comments(first: 1) {
-      pageInfo {
-        startCursor
-      }
+    comments(first: 3) {
       edges {
         node {
-          id
           ...CommentFragment
         }
       }
+      pageInfo {
+        hasNextPage
+      }
     }
   }
 `;
 
 export default function StoryCommentsSection({ story }: Props) {
   const data = useFragment(StoryCommentsSectionFragment, story);
+  const onLoadMore = () => {/* TODO */};
   return (
-    <div>
-      {data.comments.edges.map((edge) => (
-        <Comment key={edge.node.id} comment={edge.node} />
-      ))}
-    </div>
+    <>
+      {data.comments.edges.map(commentEdge =>
+        <Comment comment={commentEdge.node} />
+      )}
+      {data.comments.pageInfo.hasNextPage && (
+        <LoadMoreCommentsButton onClick={onLoadMore} />
+      )}
+    </>
   );
 }