From bd9c9ae7e2ae973969569dd434836de9f38b07d4 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Tue, 7 Nov 2023 16:55:58 +0100
Subject: refactor(components): split Comment component into 3 components

* add ApprovedComment, PendingComment and ReplyCommentForm components
* let consumer handle reply form visibility
* move structured data into article page (each article already has the
comments data and already handle json ltd schema so I prefered to move
the schema in the final consumer instead of adding a script element
foreach comment)
---
 src/components/organisms/layout/comment.tsx | 189 ----------------------------
 1 file changed, 189 deletions(-)
 delete mode 100644 src/components/organisms/layout/comment.tsx

(limited to 'src/components/organisms/layout/comment.tsx')

diff --git a/src/components/organisms/layout/comment.tsx b/src/components/organisms/layout/comment.tsx
deleted file mode 100644
index b55bb3d..0000000
--- a/src/components/organisms/layout/comment.tsx
+++ /dev/null
@@ -1,189 +0,0 @@
-import NextImage from 'next/image';
-import Script from 'next/script';
-import type { FC } from 'react';
-import { useIntl } from 'react-intl';
-import type { Comment as CommentSchema, WithContext } from 'schema-dts';
-import type { SingleComment } from '../../../types';
-import { useSettings, useToggle } from '../../../utils/hooks';
-import { Button, Heading, Link, Time } from '../../atoms';
-import {
-  Card,
-  CardActions,
-  CardBody,
-  CardCover,
-  CardFooter,
-  CardHeader,
-  CardMeta,
-  CardTitle,
-} from '../../molecules';
-import { CommentForm, type CommentFormProps } from '../forms';
-import styles from './comment.module.scss';
-
-export type UserCommentProps = Pick<
-  SingleComment,
-  'approved' | 'content' | 'id' | 'meta' | 'parentId'
-> &
-  Pick<CommentFormProps, 'onSubmit'> & {
-    /**
-     * Enable or disable the reply button. Default: true.
-     */
-    canReply?: boolean;
-  };
-
-/**
- * UserComment component
- *
- * Render a single comment.
- */
-export const UserComment: FC<UserCommentProps> = ({
-  approved,
-  canReply = true,
-  content,
-  id,
-  meta,
-  onSubmit,
-  parentId,
-  ...props
-}) => {
-  const intl = useIntl();
-  const { website } = useSettings();
-  const [isReplying, toggleIsReplying] = useToggle(false);
-
-  if (!approved) {
-    return (
-      <div className={styles.wrapper}>
-        {intl.formatMessage({
-          defaultMessage: 'This comment is awaiting moderation...',
-          description: 'Comment: awaiting moderation',
-          id: '6a1Uo6',
-        })}
-      </div>
-    );
-  }
-
-  const { author, date } = meta;
-
-  const buttonLabel = isReplying
-    ? intl.formatMessage({
-        defaultMessage: 'Cancel reply',
-        description: 'Comment: cancel reply button',
-        id: 'LCorTC',
-      })
-    : intl.formatMessage({
-        defaultMessage: 'Reply',
-        description: 'Comment: reply button',
-        id: 'hzHuCc',
-      });
-  const formTitle = intl.formatMessage({
-    defaultMessage: 'Leave a reply',
-    description: 'Comment: comment form title',
-    id: '2fD5CI',
-  });
-
-  const commentSchema: WithContext<CommentSchema> = {
-    '@context': 'https://schema.org',
-    '@id': `${website.url}/#comment-${id}`,
-    '@type': 'Comment',
-    parentItem: parentId
-      ? { '@id': `${website.url}/#comment-${parentId}` }
-      : undefined,
-    about: { '@type': 'Article', '@id': `${website.url}/#article` },
-    author: {
-      '@type': 'Person',
-      name: author.name,
-      image: author.avatar?.src,
-      url: author.website,
-    },
-    creator: {
-      '@type': 'Person',
-      name: author.name,
-      image: author.avatar?.src,
-      url: author.website,
-    },
-    dateCreated: date,
-    datePublished: date,
-    text: content,
-  };
-
-  return (
-    <>
-      <Script
-        dangerouslySetInnerHTML={{ __html: JSON.stringify(commentSchema) }}
-        id="schema-comments"
-        type="application/ld+json"
-      />
-      <Card
-        cover={
-          author.avatar ? (
-            <CardCover className={styles.avatar}>
-              <NextImage
-                {...props}
-                alt={author.avatar.alt}
-                fill
-                src={author.avatar.src}
-                style={{ objectFit: 'cover' }}
-              />
-            </CardCover>
-          ) : undefined
-        }
-        id={`comment-${id}`}
-        variant={2}
-      >
-        <CardHeader>
-          <CardTitle className={styles.author} isFake>
-            {author.website ? (
-              <Link href={author.website}>{author.name}</Link>
-            ) : (
-              author.name
-            )}
-          </CardTitle>
-          <CardMeta
-            hasInlinedItems
-            items={[
-              {
-                id: 'publication-date',
-                label: intl.formatMessage({
-                  defaultMessage: 'Published on:',
-                  description: 'Comment: publication date label',
-                  id: 'soj7do',
-                }),
-                value: (
-                  <Link href={`#comment-${id}`}>
-                    <Time date={date} showTime />
-                  </Link>
-                ),
-              },
-            ]}
-          />
-        </CardHeader>
-        <CardBody
-          className={styles.body}
-          dangerouslySetInnerHTML={{ __html: content }}
-        />
-        {canReply ? (
-          <CardFooter>
-            <CardActions>
-              <Button kind="tertiary" onClick={toggleIsReplying}>
-                {buttonLabel}
-              </Button>
-            </CardActions>
-          </CardFooter>
-        ) : null}
-      </Card>
-      {isReplying ? (
-        <Card className={styles.form__wrapper} variant={2}>
-          <CardBody>
-            <Heading className={styles.form__heading} level={2}>
-              {formTitle}
-            </Heading>
-            <CommentForm
-              className={styles.form}
-              onSubmit={onSubmit}
-              parentId={id}
-            />
-          </CardBody>
-        </Card>
-      ) : null}
-    </>
-  );
-};
-- 
cgit v1.2.3