fix: update comments list when a new comment is send

The comments list was static before. If an user posted a comment, even
after it was approved, the comments list was keeping the old state.

2 files changed, 25 insertions, 4 deletions

diff --git a/src/components/Comment/Comment.tsx b/src/components/Comment/Comment.tsx
index 4835f8c..ab1dffc 100644
--- a/src/components/Comment/Comment.tsx
+++ b/src/components/Comment/Comment.tsx
@@ -121,7 +121,7 @@ const Comment = ({
               return (
                 <Comment
                   articleId={articleId}
-                  key={reply.id}
+                  key={reply.commentId}
                   comment={reply}
                   isNested={true}
                 />
diff --git a/src/components/CommentsList/CommentsList.tsx b/src/components/CommentsList/CommentsList.tsx
index 6630a03..1e7c3e7 100644
--- a/src/components/CommentsList/CommentsList.tsx
+++ b/src/components/CommentsList/CommentsList.tsx
@@ -1,6 +1,9 @@
 import Comment from '@components/Comment/Comment';
+import Spinner from '@components/Spinner/Spinner';
+import { getCommentsByPostId } from '@services/graphql/queries';
 import { Comment as CommentData } from '@ts/types/comments';
 import { useIntl } from 'react-intl';
+import useSWR from 'swr';
 import styles from './CommentsList.module.scss';
 
 const CommentsList = ({
@@ -11,11 +14,29 @@ const CommentsList = ({
   comments: CommentData[];
 }) => {
   const intl = useIntl();
+  const { data, error } = useSWR<CommentData[]>(
+    '/api/comments',
+    () => getCommentsByPostId(articleId),
+    { fallbackData: comments }
+  );
 
   const getCommentsList = () => {
-    return comments.map((comment) => {
+    if (error) {
+      return intl.formatMessage({
+        defaultMessage: 'Failed to load.',
+        description: 'CommentsList: failed to load',
+      });
+    }
+
+    if (!data) return <Spinner />;
+
+    return data.map((comment) => {
       return (
-        <Comment key={comment.id} articleId={articleId} comment={comment} />
+        <Comment
+          key={comment.commentId}
+          articleId={articleId}
+          comment={comment}
+        />
       );
     });
   };
@@ -28,7 +49,7 @@ const CommentsList = ({
           description: 'CommentsList: Comments section title',
         })}
       </h2>
-      {comments.length > 0 ? (
+      {data && data.length > 0 ? (
         <ol className={styles.list}>{getCommentsList()}</ol>
       ) : (
         <p className={styles['no-comments']}>