diff options
| author | Armand Philippot <git@armandphilippot.com> | 2022-04-29 12:13:34 +0200 |
|---|---|---|
| committer | Armand Philippot <git@armandphilippot.com> | 2022-04-29 18:30:05 +0200 |
| commit | 7e16f500cb7bc0cfd8bafbf6bb1555704f771231 (patch) | |
| tree | bfc2b4a475cb06a787e2c4bdf284165644e82952 /src/components/Comment/Comment.tsx | |
| parent | 5324664e87bedfaa01ba62c0c847ef5b861e69b3 (diff) | |
chore: remove old pages, components, helpers and types
Since I'm using new components, I will also rewrite the GraphQL queries
so it is easier to start from scratch.
Diffstat (limited to 'src/components/Comment/Comment.tsx')
| -rw-r--r-- | src/components/Comment/Comment.tsx | 200 |
1 files changed, 0 insertions, 200 deletions
diff --git a/src/components/Comment/Comment.tsx b/src/components/Comment/Comment.tsx deleted file mode 100644 index 355363b..0000000 --- a/src/components/Comment/Comment.tsx +++ /dev/null @@ -1,200 +0,0 @@ -import { Button } from '@components/Buttons'; -import Spinner from '@components/Spinner/Spinner'; -import { Comment as CommentData } from '@ts/types/comments'; -import { settings } from '@utils/config'; -import { getFormattedDate } from '@utils/helpers/format'; -import dynamic from 'next/dynamic'; -import Image from 'next/image'; -import Link from 'next/link'; -import { useRouter } from 'next/router'; -import Script from 'next/script'; -import { useState } from 'react'; -import { useIntl } from 'react-intl'; -import { Comment as CommentSchema, WithContext } from 'schema-dts'; -import styles from './Comment.module.scss'; - -const DynamicCommentForm = dynamic( - () => import('@components/CommentForm/CommentForm'), - { - loading: () => <Spinner />, - } -); - -const Comment = ({ - articleId, - comment, - isNested = false, -}: { - articleId: number; - comment: CommentData; - isNested?: boolean; -}) => { - const intl = useIntl(); - const router = useRouter(); - const locale = router.locale ? router.locale : settings.locales.defaultLocale; - const [shouldOpenForm, setShouldOpenForm] = useState<boolean>(false); - - const getCommentAuthor = () => { - return comment.author.url ? ( - <Link href={comment.author.url}> - <a className={styles.author}>{comment.author.name}</a> - </Link> - ) : ( - <span className={styles.author}>{comment.author.name}</span> - ); - }; - - const getLocaleDate = () => { - const date = getFormattedDate(comment.date, locale); - const time = new Date(comment.date) - .toLocaleTimeString(locale, { - hour: 'numeric', - minute: 'numeric', - }) - .replace(':', 'h'); - return intl.formatMessage( - { - defaultMessage: '{date} at {time}', - description: 'Comment: publication date', - id: 'CT3ydM', - }, - { - date, - time, - } - ); - }; - - const getApprovedComment = () => { - return ( - <> - <article - className={styles.wrapper} - id={`comment-${comment.databaseId}`} - > - <header className={styles.header}> - {comment.author.gravatarUrl && ( - <div className={styles.avatar}> - <Image - src={comment.author.gravatarUrl} - alt={comment.author.name} - layout="fill" - /> - </div> - )} - {getCommentAuthor()} - </header> - <dl className={styles.date}> - <dt> - {intl.formatMessage({ - defaultMessage: 'Published on:', - description: 'Comment: publication date label', - id: 'soj7do', - })} - </dt> - <dd> - <time dateTime={comment.date}> - <Link href={`#comment-${comment.databaseId}`}> - <a>{getLocaleDate()}</a> - </Link> - </time> - </dd> - </dl> - <div - className={styles.body} - dangerouslySetInnerHTML={{ __html: comment.content }} - ></div> - {!isNested && ( - <footer className={styles.footer}> - <Button clickHandler={() => setShouldOpenForm((prev) => !prev)}> - {shouldOpenForm - ? intl.formatMessage({ - defaultMessage: 'Cancel reply', - description: 'Comment: reply button', - id: 'e1Forh', - }) - : intl.formatMessage({ - defaultMessage: 'Reply', - description: 'Comment: reply button', - id: 'hzHuCc', - })} - </Button> - </footer> - )} - </article> - {shouldOpenForm && ( - <DynamicCommentForm - articleId={articleId} - parentId={comment.databaseId} - /> - )} - {comment.replies.length > 0 && ( - <ol className={styles.list}> - {comment.replies.map((reply) => { - return ( - <Comment - articleId={articleId} - key={reply.databaseId} - comment={reply} - isNested={true} - /> - ); - })} - </ol> - )} - </> - ); - }; - - const getCommentStatus = () => { - return ( - <p> - {intl.formatMessage({ - defaultMessage: 'This comment is awaiting moderation.', - description: 'Comment: awaiting moderation message', - id: 'rXeTkM', - })} - </p> - ); - }; - - const schemaJsonLd: WithContext<CommentSchema> = { - '@context': 'https://schema.org', - '@id': `${settings.url}/#comment-${comment.databaseId}`, - '@type': 'Comment', - parentItem: isNested - ? { '@id': `${settings.url}/#comment-${comment.parentDatabaseId}` } - : undefined, - about: { '@type': 'Article', '@id': `${settings.url}/#article` }, - author: { - '@type': 'Person', - name: comment.author.name, - image: comment.author.gravatarUrl, - url: comment.author.url, - }, - creator: { - '@type': 'Person', - name: comment.author.name, - image: comment.author.gravatarUrl, - url: comment.author.url, - }, - dateCreated: comment.date, - datePublished: comment.date, - text: comment.content, - }; - - return ( - <> - <Script - id="schema-comments" - type="application/ld+json" - dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }} - /> - <li className={styles.item}> - {comment.approved ? getApprovedComment() : getCommentStatus()} - </li> - </> - ); -}; - -export default Comment; |
