From a3eb518dcccaebd0f48c708c189ad2fcb07f0f73 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Sun, 21 Aug 2022 13:50:18 +0200
Subject: fix(comments): load all comments on a post

Previously, only the first 10 comments was loaded. So I update the
fetching method to retrieve all the comments on a post.
Also, I choose to order comments on client side because of a bug
with WPGraphQL.
Finally, I renamed the Comment type to SingleComment to avoid conflict
with existing types.
---
 src/components/organisms/layout/comment.tsx               |  4 ++--
 src/components/organisms/layout/comments-list.fixture.tsx |  4 ++--
 src/components/organisms/layout/comments-list.tsx         | 12 ++++++------
 3 files changed, 10 insertions(+), 10 deletions(-)

(limited to 'src/components/organisms')

diff --git a/src/components/organisms/layout/comment.tsx b/src/components/organisms/layout/comment.tsx
index f62f95c..497a04c 100644
--- a/src/components/organisms/layout/comment.tsx
+++ b/src/components/organisms/layout/comment.tsx
@@ -1,7 +1,7 @@
 import Button from '@components/atoms/buttons/button';
 import Link from '@components/atoms/links/link';
 import Meta from '@components/molecules/layout/meta';
-import { type Comment as CommentType } from '@ts/types/app';
+import { type SingleComment } from '@ts/types/app';
 import useSettings from '@utils/hooks/use-settings';
 import Image from 'next/image';
 import Script from 'next/script';
@@ -12,7 +12,7 @@ import CommentForm, { type CommentFormProps } from '../forms/comment-form';
 import styles from './comment.module.scss';
 
 export type CommentProps = Pick<
-  CommentType,
+  SingleComment,
   'approved' | 'content' | 'id' | 'meta' | 'parentId'
 > &
   Pick<CommentFormProps, 'Notice' | 'saveComment'> & {
diff --git a/src/components/organisms/layout/comments-list.fixture.tsx b/src/components/organisms/layout/comments-list.fixture.tsx
index 2618f77..f2a1d26 100644
--- a/src/components/organisms/layout/comments-list.fixture.tsx
+++ b/src/components/organisms/layout/comments-list.fixture.tsx
@@ -1,6 +1,6 @@
-import { Comment } from '@ts/types/app';
+import { SingleComment } from '@ts/types/app';
 
-export const comments: Comment[] = [
+export const comments: SingleComment[] = [
   {
     approved: true,
     content:
diff --git a/src/components/organisms/layout/comments-list.tsx b/src/components/organisms/layout/comments-list.tsx
index 97eccb7..deb0776 100644
--- a/src/components/organisms/layout/comments-list.tsx
+++ b/src/components/organisms/layout/comments-list.tsx
@@ -1,7 +1,7 @@
-import SingleComment, {
+import Comment, {
   type CommentProps,
 } from '@components/organisms/layout/comment';
-import { Comment } from '@ts/types/app';
+import { SingleComment } from '@ts/types/app';
 import { FC } from 'react';
 import styles from './comments-list.module.scss';
 
@@ -9,7 +9,7 @@ export type CommentsListProps = Pick<CommentProps, 'Notice' | 'saveComment'> & {
   /**
    * An array of comments.
    */
-  comments: Comment[];
+  comments: SingleComment[];
   /**
    * The maximum depth. Use `0` to not display nested comments.
    */
@@ -30,18 +30,18 @@ const CommentsList: FC<CommentsListProps> = ({
   /**
    * Get each comment wrapped in a list item.
    *
-   * @param {Comment[]} commentsList - An array of comments.
+   * @param {SingleComment[]} commentsList - An array of comments.
    * @returns {JSX.Element[]} The list items.
    */
   const getItems = (
-    commentsList: Comment[],
+    commentsList: SingleComment[],
     startLevel: number
   ): JSX.Element[] => {
     const isLastLevel = startLevel === depth;
 
     return commentsList.map(({ replies, ...comment }) => (
       <li key={comment.id} className={styles.item}>
-        <SingleComment
+        <Comment
           canReply={!isLastLevel}
           Notice={Notice}
           saveComment={saveComment}
-- 
cgit v1.2.3