108 lines
3.7 KiB
TypeScript
108 lines
3.7 KiB
TypeScript
import './Comment.scss'
|
|
import { Icon } from '../Nav/Icon'
|
|
import { AuthorCard } from '../Author/Card'
|
|
import { Show } from 'solid-js/web'
|
|
import { clsx } from 'clsx'
|
|
import type { Author, Reaction as Point } from '../../graphql/types.gen'
|
|
import { createMemo } from 'solid-js'
|
|
import { t } from '../../utils/intl'
|
|
// import { createReaction, updateReaction, deleteReaction } from '../../stores/zine/reactions'
|
|
import MD from './MD'
|
|
import { deleteReaction } from '../../stores/zine/reactions'
|
|
|
|
export default (props: {
|
|
level?: number
|
|
comment: Partial<Point>
|
|
canEdit?: boolean
|
|
compact?: boolean
|
|
}) => {
|
|
const comment = createMemo(() => props.comment)
|
|
const body = createMemo(() => comment().body.toString().trim())
|
|
const remove = () => {
|
|
if (comment()?.id) {
|
|
console.log('[comment] removing', comment().id)
|
|
deleteReaction(comment().id)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div class={clsx('comment', { [`comment--level-${props.level}`]: Boolean(props.level) })}>
|
|
<Show when={!!body()}>
|
|
<div class="comment__content">
|
|
<Show
|
|
when={!props.compact}
|
|
fallback={
|
|
<div class="comment__details">
|
|
<a href={`/author/${comment()?.createdBy?.slug}`}>
|
|
@{(comment()?.createdBy || { name: 'anonymous' }).name}
|
|
</a>
|
|
<div class="comment__article">
|
|
<Icon name="reply-arrow" />
|
|
<a href={`#comment-${comment()?.id}`}>
|
|
#{(comment()?.shout || { title: 'Lorem ipsum titled' }).title}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
}
|
|
>
|
|
<div class="comment__details">
|
|
<div class="comment-author">
|
|
<AuthorCard
|
|
author={comment()?.createdBy as Author}
|
|
hideDescription={true}
|
|
hideFollow={true}
|
|
/>
|
|
</div>
|
|
|
|
<div class="comment-date">{comment()?.createdAt}</div>
|
|
<div class="comment-rating">{comment().stat.rating}</div>
|
|
</div>
|
|
</Show>
|
|
|
|
<div class="comment-body" contenteditable={props.canEdit} id={'comment-' + (comment().id || '')}>
|
|
<MD body={body()} />
|
|
</div>
|
|
|
|
<Show when={!props.compact}>
|
|
<div class="comment-controls">
|
|
<button class="comment-control comment-control--reply">
|
|
<Icon name="reply" />
|
|
{t('Reply')}
|
|
</button>
|
|
|
|
<Show when={props.canEdit}>
|
|
{/*FIXME implement edit comment modal*/}
|
|
{/*<button*/}
|
|
{/* class="comment-control comment-control--edit"*/}
|
|
{/* onClick={() => showModal('editComment')}*/}
|
|
{/*>*/}
|
|
{/* <Icon name="edit" />*/}
|
|
{/* {t('Edit')}*/}
|
|
{/*</button>*/}
|
|
<button class="comment-control comment-control--delete" onClick={() => remove()}>
|
|
<Icon name="delete" />
|
|
{t('Delete')}
|
|
</button>
|
|
</Show>
|
|
|
|
{/*FIXME implement modals */}
|
|
{/*<button*/}
|
|
{/* class="comment-control comment-control--share"*/}
|
|
{/* onClick={() => showModal('shareComment')}*/}
|
|
{/*>*/}
|
|
{/* {t('Share')}*/}
|
|
{/*</button>*/}
|
|
{/*<button*/}
|
|
{/* class="comment-control comment-control--complain"*/}
|
|
{/* onClick={() => showModal('reportComment')}*/}
|
|
{/*>*/}
|
|
{/* {t('Report')}*/}
|
|
{/*</button>*/}
|
|
</div>
|
|
</Show>
|
|
</div>
|
|
</Show>
|
|
</div>
|
|
)
|
|
}
|