[WiP] init & test
This commit is contained in:
ilya-bkv
parent
2e74624240
commit
2f252da9db
|
|
@ -3,6 +3,7 @@
|
|||
margin: 0 -2.4rem 1.5em;
|
||||
padding: 0.8rem 2.4rem;
|
||||
transition: background-color 0.3s;
|
||||
border: 1px solid red;
|
||||
|
||||
&:hover {
|
||||
background-color: #f6f6f6;
|
||||
|
|
@ -32,25 +33,25 @@
|
|||
}
|
||||
}
|
||||
|
||||
.commentLevel1 {
|
||||
margin-left: 3.2rem;
|
||||
}
|
||||
|
||||
.commentLevel2 {
|
||||
margin-left: 6.4rem;
|
||||
}
|
||||
|
||||
.commentLevel3 {
|
||||
margin-left: 9.6rem;
|
||||
}
|
||||
|
||||
.commentLevel4 {
|
||||
margin-left: 12.8rem;
|
||||
}
|
||||
|
||||
.commentLevel5 {
|
||||
margin-left: 16rem;
|
||||
}
|
||||
//.commentLevel1 {
|
||||
// margin-left: 3.2rem;
|
||||
//}
|
||||
//
|
||||
//.commentLevel2 {
|
||||
// margin-left: 6.4rem;
|
||||
//}
|
||||
//
|
||||
//.commentLevel3 {
|
||||
// margin-left: 9.6rem;
|
||||
//}
|
||||
//
|
||||
//.commentLevel4 {
|
||||
// margin-left: 12.8rem;
|
||||
//}
|
||||
//
|
||||
//.commentLevel5 {
|
||||
// margin-left: 16rem;
|
||||
//}
|
||||
|
||||
.commentControls {
|
||||
@include font-size(1.2rem);
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@ import { formatDate } from '../../utils'
|
|||
import { SharePopup } from './SharePopup'
|
||||
import stylesHeader from '../Nav/Header.module.scss'
|
||||
import Userpic from '../Author/Userpic'
|
||||
import CommentWrapper from './CommentWrapper'
|
||||
|
||||
export default (props: {
|
||||
level?: number
|
||||
|
|
@ -34,114 +35,116 @@ export default (props: {
|
|||
)
|
||||
|
||||
return (
|
||||
<div class={clsx(styles.comment, { [styles[`commentLevel${props.level}`]]: Boolean(props.level) })}>
|
||||
<Show when={!!body()}>
|
||||
<div class={styles.commentContent}>
|
||||
<Show
|
||||
when={!props.compact}
|
||||
fallback={
|
||||
<div>
|
||||
<Userpic user={comment().createdBy as Author} isBig={false} isAuthorsList={false} />
|
||||
<small class={styles.commentArticle}>
|
||||
<a href={`#comment-${comment()?.id}`}>{comment()?.shout.title || ''}</a>
|
||||
</small>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<div class={styles.commentDetails}>
|
||||
<div class={styles.commentAuthor}>
|
||||
<AuthorCard
|
||||
author={comment()?.createdBy as Author}
|
||||
hideDescription={true}
|
||||
hideFollow={true}
|
||||
isComments={true}
|
||||
hasLink={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class={styles.commentDate}>{formattedDate()}</div>
|
||||
<div
|
||||
class={styles.commentRating}
|
||||
classList={{
|
||||
[styles.commentRatingPositive]: comment().stat?.rating > 0,
|
||||
[styles.commentRatingNegative]: comment().stat?.rating < 0
|
||||
}}
|
||||
>
|
||||
<button class={clsx(styles.commentRatingControl, styles.commentRatingControlUp)} />
|
||||
<div class={styles.commentRatingValue}>{comment().stat?.rating || 0}</div>
|
||||
<button class={clsx(styles.commentRatingControl, styles.commentRatingControlDown)} />
|
||||
</div>
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
<div
|
||||
class={styles.commentBody}
|
||||
contenteditable={props.canEdit}
|
||||
id={'comment-' + (comment().id || '')}
|
||||
>
|
||||
<MD body={body()} />
|
||||
</div>
|
||||
|
||||
<Show when={!props.compact}>
|
||||
<div class={styles.commentControls}>
|
||||
<button
|
||||
class={clsx(styles.commentControl, styles.commentControlReply)}
|
||||
onClick={() => setIsReplyVisible(!isReplyVisible())}
|
||||
>
|
||||
<Icon name="reply" class={styles.icon} />
|
||||
{t('Reply')}
|
||||
</button>
|
||||
|
||||
<Show when={props.canEdit}>
|
||||
{/*FIXME implement edit comment modal*/}
|
||||
{/*<button*/}
|
||||
{/* class={clsx(styles.commentControl, styles.commentControlEdit)}*/}
|
||||
{/* onClick={() => showModal('editComment')}*/}
|
||||
{/*>*/}
|
||||
{/* <Icon name="edit" class={styles.icon} />*/}
|
||||
{/* {t('Edit')}*/}
|
||||
{/*</button>*/}
|
||||
<button
|
||||
class={clsx(styles.commentControl, styles.commentControlDelete)}
|
||||
onClick={() => remove()}
|
||||
>
|
||||
<Icon name="delete" class={styles.icon} />
|
||||
{t('Delete')}
|
||||
</button>
|
||||
</Show>
|
||||
|
||||
<SharePopup
|
||||
containerCssClass={stylesHeader.control}
|
||||
trigger={
|
||||
<button class={clsx(styles.commentControl, styles.commentControlShare)}>
|
||||
<Icon name="share" class={styles.icon} />
|
||||
{t('Share')}
|
||||
</button>
|
||||
}
|
||||
/>
|
||||
|
||||
{/*<button*/}
|
||||
{/* class={clsx(styles.commentControl, styles.commentControlComplain)}*/}
|
||||
{/* onClick={() => showModal('reportComment')}*/}
|
||||
{/*>*/}
|
||||
{/* {t('Report')}*/}
|
||||
{/*</button>*/}
|
||||
</div>
|
||||
|
||||
<Show when={isReplyVisible()}>
|
||||
<form class={styles.replyForm}>
|
||||
<textarea name="reply" id="reply" rows="5" />
|
||||
<div class={styles.replyFormControls}>
|
||||
<button class="button button--light" onClick={() => setIsReplyVisible(false)}>
|
||||
{t('Cancel')}
|
||||
</button>
|
||||
<button class="button">{t('Send')}</button>
|
||||
<CommentWrapper level={props.level}>
|
||||
<li class={clsx(styles.comment, { [styles[`commentLevel${props.level}`]]: Boolean(props.level) })}>
|
||||
<Show when={!!body()}>
|
||||
<div class={styles.commentContent}>
|
||||
<Show
|
||||
when={!props.compact}
|
||||
fallback={
|
||||
<div>
|
||||
<Userpic user={comment().createdBy as Author} isBig={false} isAuthorsList={false} />
|
||||
<small class={styles.commentArticle}>
|
||||
<a href={`#comment-${comment()?.id}`}>{comment()?.shout.title || ''}</a>
|
||||
</small>
|
||||
</div>
|
||||
</form>
|
||||
}
|
||||
>
|
||||
<div class={styles.commentDetails}>
|
||||
<div class={styles.commentAuthor}>
|
||||
<AuthorCard
|
||||
author={comment()?.createdBy as Author}
|
||||
hideDescription={true}
|
||||
hideFollow={true}
|
||||
isComments={true}
|
||||
hasLink={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class={styles.commentDate}>{formattedDate()}</div>
|
||||
<div
|
||||
class={styles.commentRating}
|
||||
classList={{
|
||||
[styles.commentRatingPositive]: comment().stat?.rating > 0,
|
||||
[styles.commentRatingNegative]: comment().stat?.rating < 0
|
||||
}}
|
||||
>
|
||||
<button class={clsx(styles.commentRatingControl, styles.commentRatingControlUp)} />
|
||||
<div class={styles.commentRatingValue}>{comment().stat?.rating || 0}</div>
|
||||
<button class={clsx(styles.commentRatingControl, styles.commentRatingControlDown)} />
|
||||
</div>
|
||||
</div>
|
||||
</Show>
|
||||
</Show>
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class={styles.commentBody}
|
||||
contenteditable={props.canEdit}
|
||||
id={'comment-' + (comment().id || '')}
|
||||
>
|
||||
<MD body={body()} />
|
||||
</div>
|
||||
|
||||
<Show when={!props.compact}>
|
||||
<div class={styles.commentControls}>
|
||||
<button
|
||||
class={clsx(styles.commentControl, styles.commentControlReply)}
|
||||
onClick={() => setIsReplyVisible(!isReplyVisible())}
|
||||
>
|
||||
<Icon name="reply" class={styles.icon} />
|
||||
{t('Reply')}
|
||||
</button>
|
||||
|
||||
<Show when={props.canEdit}>
|
||||
{/*FIXME implement edit comment modal*/}
|
||||
{/*<button*/}
|
||||
{/* class={clsx(styles.commentControl, styles.commentControlEdit)}*/}
|
||||
{/* onClick={() => showModal('editComment')}*/}
|
||||
{/*>*/}
|
||||
{/* <Icon name="edit" class={styles.icon} />*/}
|
||||
{/* {t('Edit')}*/}
|
||||
{/*</button>*/}
|
||||
<button
|
||||
class={clsx(styles.commentControl, styles.commentControlDelete)}
|
||||
onClick={() => remove()}
|
||||
>
|
||||
<Icon name="delete" class={styles.icon} />
|
||||
{t('Delete')}
|
||||
</button>
|
||||
</Show>
|
||||
|
||||
<SharePopup
|
||||
containerCssClass={stylesHeader.control}
|
||||
trigger={
|
||||
<button class={clsx(styles.commentControl, styles.commentControlShare)}>
|
||||
<Icon name="share" class={styles.icon} />
|
||||
{t('Share')}
|
||||
</button>
|
||||
}
|
||||
/>
|
||||
|
||||
{/*<button*/}
|
||||
{/* class={clsx(styles.commentControl, styles.commentControlComplain)}*/}
|
||||
{/* onClick={() => showModal('reportComment')}*/}
|
||||
{/*>*/}
|
||||
{/* {t('Report')}*/}
|
||||
{/*</button>*/}
|
||||
</div>
|
||||
|
||||
<Show when={isReplyVisible()}>
|
||||
<form class={styles.replyForm}>
|
||||
<textarea name="reply" id="reply" rows="5" />
|
||||
<div class={styles.replyFormControls}>
|
||||
<button class="button button--light" onClick={() => setIsReplyVisible(false)}>
|
||||
{t('Cancel')}
|
||||
</button>
|
||||
<button class="button">{t('Send')}</button>
|
||||
</div>
|
||||
</form>
|
||||
</Show>
|
||||
</Show>
|
||||
</div>
|
||||
</Show>
|
||||
</li>
|
||||
</CommentWrapper>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
71
src/components/Article/CommentWrapper.tsx
Normal file
71
src/components/Article/CommentWrapper.tsx
Normal file
|
|
@ -0,0 +1,71 @@
|
|||
import type { JSX } from 'solid-js/jsx-runtime'
|
||||
import { Switch, Match } from 'solid-js'
|
||||
|
||||
type Props = {
|
||||
level?: number
|
||||
children: JSX.Element
|
||||
}
|
||||
|
||||
const CommentWrapper = (props: Props) => {
|
||||
return (
|
||||
<Switch fallback={props.children}>
|
||||
<Match when={props.level === 1}>
|
||||
<ul>{props.children}</ul>
|
||||
</Match>
|
||||
<Match when={props.level === 2}>
|
||||
<ul>
|
||||
<li>
|
||||
<ul>{props.children}</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</Match>
|
||||
<Match when={props.level === 3}>
|
||||
<ul>
|
||||
<li>
|
||||
<ul>
|
||||
<li>
|
||||
<ul>{props.children}</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</Match>
|
||||
<Match when={props.level === 4}>
|
||||
<ul>
|
||||
<li>
|
||||
<ul>
|
||||
<li>
|
||||
<ul>
|
||||
<li>
|
||||
<ul>{props.children}</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</Match>
|
||||
<Match when={props.level === 5}>
|
||||
<ul>
|
||||
<li>
|
||||
<ul>
|
||||
<li>
|
||||
<ul>
|
||||
<li>
|
||||
<ul>
|
||||
<li>
|
||||
<ul>{props.children}</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</Match>
|
||||
</Switch>
|
||||
)
|
||||
}
|
||||
|
||||
export default CommentWrapper
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
import { For, Show, createMemo, createSignal, onMount } from 'solid-js'
|
||||
import { For, Show, createMemo, createSignal, onMount, createEffect } from 'solid-js'
|
||||
import { useSession } from '../../context/session'
|
||||
import Comment from './Comment'
|
||||
import { t } from '../../utils/intl'
|
||||
|
|
@ -49,6 +49,25 @@ export const CommentsTree = (props: { shoutSlug: string }) => {
|
|||
return level
|
||||
}
|
||||
onMount(async () => await loadMore())
|
||||
|
||||
function nestComments(commentList) {
|
||||
const commentMap = {}
|
||||
commentList.forEach((comment) => (commentMap[comment.id] = comment))
|
||||
commentList.forEach((comment) => {
|
||||
if (comment.replyTo !== null) {
|
||||
const parent = commentMap[comment.replyTo]
|
||||
;(parent.children = parent.children || []).push(comment)
|
||||
}
|
||||
})
|
||||
return commentList.filter((comment) => {
|
||||
return comment.replyTo === null
|
||||
})
|
||||
}
|
||||
|
||||
createEffect(() => {
|
||||
console.log('!!! reactions():', nestComments(reactions()))
|
||||
})
|
||||
|
||||
return (
|
||||
<>
|
||||
<Show when={!isCommentsLoading()} fallback={<Loading />}>
|
||||
|
|
@ -83,15 +102,20 @@ export const CommentsTree = (props: { shoutSlug: string }) => {
|
|||
</ul>
|
||||
</div>
|
||||
|
||||
<For each={reactions().reverse()}>
|
||||
{(reaction: Reaction) => (
|
||||
<Comment
|
||||
comment={reaction}
|
||||
level={getCommentLevel(reaction)}
|
||||
canEdit={reaction.createdBy?.slug === session()?.user?.slug}
|
||||
/>
|
||||
)}
|
||||
</For>
|
||||
<ul>
|
||||
<For each={reactions().reverse()}>
|
||||
{(reaction: Reaction) => (
|
||||
<>
|
||||
{JSON.stringify(getCommentLevel(reaction))}
|
||||
<Comment
|
||||
comment={reaction}
|
||||
level={getCommentLevel(reaction)}
|
||||
canEdit={reaction.createdBy?.slug === session()?.user?.slug}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</For>
|
||||
</ul>
|
||||
|
||||
<Show when={isLoadMoreButtonVisible()}>
|
||||
<button onClick={loadMore}>{t('Load more')}</button>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user