discours.io/webapp
5
0
Fork 0
Code Issues Pull Requests Actions Projects Wiki Activity

[WiP] init & test

Browse Source
This commit is contained in:
ilya-bkv 2022-12-16 08:35:53 +03:00
parent 2e74624240
commit 2f252da9db
4 changed files with 235 additions and 136 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
src/components/Article/Comment.module.scss
View File

@ -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);

7
src/components/Article/Comment.tsx
View File

@ -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,7 +35,8 @@ export default (props: {
)
return (
<div class={clsx(styles.comment, { [styles[`commentLevel${props.level}`]]: Boolean(props.level) })}>
<CommentWrapper level={props.level}>
<li class={clsx(styles.comment, { [styles[`commentLevel${props.level}`]]: Boolean(props.level) })}>
<Show when={!!body()}>
<div class={styles.commentContent}>
<Show
@ -142,6 +144,7 @@ export default (props: {
</Show>
</div>
</Show>
</div>
</li>
</CommentWrapper>
)
}

71
src/components/Article/CommentWrapper.tsx Normal file
View 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

26
src/components/Article/CommentsTree.tsx
View File

@ -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>
<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>