diff options
Diffstat (limited to 'src/components/Comment')
| -rw-r--r-- | src/components/Comment/Comment.module.scss | 99 | ||||
| -rw-r--r-- | src/components/Comment/Comment.tsx | 200 |
2 files changed, 0 insertions, 299 deletions
diff --git a/src/components/Comment/Comment.module.scss b/src/components/Comment/Comment.module.scss deleted file mode 100644 index dd52db2..0000000 --- a/src/components/Comment/Comment.module.scss +++ /dev/null @@ -1,99 +0,0 @@ -@use "@styles/abstracts/functions" as fun; -@use "@styles/abstracts/mixins" as mix; - -.item { - margin: var(--spacing-sm) 0; -} - -.wrapper { - background: var(--color-bg); - border: fun.convert-px(1) solid var(--color-border); - box-shadow: fun.convert-px(3) fun.convert-px(3) 0 0 var(--color-shadow-light), - fun.convert-px(4) fun.convert-px(4) fun.convert-px(3) fun.convert-px(-2) - var(--color-shadow); - padding: var(--spacing-md); - position: relative; - - @include mix.media("screen") { - @include mix.dimensions("sm") { - display: grid; - grid-template-columns: minmax(#{fun.convert-px(150)}, 1fr) minmax(0, 85ch); - column-gap: var(--spacing-lg); - } - } -} - -.header { - display: flex; - flex-flow: column wrap; - align-items: center; - row-gap: var(--spacing-sm); - - @include mix.media("screen") { - @include mix.dimensions("sm") { - grid-row: 1 / 4; - } - } -} - -.avatar { - width: fun.convert-px(85); - height: fun.convert-px(85); - margin: 0 auto; - border-radius: fun.convert-px(3); - box-shadow: 0 0 0 fun.convert-px(1) var(--color-shadow-light), - fun.convert-px(2) fun.convert-px(2) 0 fun.convert-px(1) var(--color-shadow); - position: relative; - - img { - border-radius: fun.convert-px(3); - } -} - -.author { - color: var(--color-primary-darker); - font-weight: 600; - text-align: center; -} - -.date { - color: var(--color-fg-secondary); - font-size: var(--font-size-sm); - display: flex; - flex-flow: row wrap; - column-gap: var(--spacing-2xs); - justify-content: center; - margin: var(--spacing-md) 0; - - @include mix.media("screen") { - @include mix.dimensions("sm") { - justify-content: left; - margin: 0 0 var(--spacing-md); - } - } -} - -.body { - overflow-wrap: break-word; -} - -.footer { - display: flex; - justify-content: flex-end; - align-items: center; - padding: var(--spacing-md) 0 0; - - @include mix.media("screen") { - @include mix.dimensions("sm") { - padding: var(--spacing-sm) 0 0; - } - } - - button { - margin: 0; - } -} - -.list { - padding-left: var(--spacing-md); -} 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; |