albert/qmining-page
1
0
Fork 0
mirror of https://gitlab.com/MrFry/qmining-page synced 2025-04-01 20:23:44 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Front page forum

Browse source
This commit is contained in:
mrfry 2021-03-05 17:07:37 +01:00
parent a09e9734da
commit 561aa21d93
15 changed files with 484 additions and 136 deletions
Download patch file Download diff file Expand all files Collapse all files

150
src/components/comments.js
View file

@ -1,30 +1,36 @@
import React, { useState } from 'react'
import ReactButton from './reactButton.js'
import Modal from './modal.js'
import styles from './comments.module.css'
function CommentInput({ onSubmit }) {
function CommentInput({ onSubmit, onCancel }) {
const [val, setVal] = useState('')
return (
<div className={styles.commentAreaContainer}>
<textarea
autoFocus
className={styles.commentArea}
value={val}
onChange={(e) => {
setVal(e.target.value)
}}
/>
<div>
<div className={'actions'}>
<span
onClick={() => {
onSubmit(val)
}}
className={styles.button}
>
Submit
</span>
<span
onClick={() => {
onCancel()
}}
>
Cancel
</span>
</div>
</div>
)
@ -33,10 +39,10 @@ function CommentInput({ onSubmit }) {
function Comment({ comment, index, onComment, onDelete, onReact, uid }) {
const [displayed, setDisplayed] = useState(true)
const [commenting, setCommenting] = useState(false)
const { text, subComments, date, user, reacts, adminComment } = comment
const { content, subComments, date, user, reacts, admin } = comment
const own = uid === user
const commentStyle = adminComment
const commentStyle = admin
? styles.adminComment
: own
? styles.ownComment
@ -60,25 +66,23 @@ function Comment({ comment, index, onComment, onDelete, onReact, uid }) {
<div>{date}</div>
</div>
<div className={`${!displayed && styles.hidden}`}>
<div className={styles.commentText}> {text}</div>
<div className={styles.actionsContainer}>
<div
className={styles.button}
<div className={styles.commentText}> {content}</div>
<div className={'actions'}>
<span
onClick={() => {
setCommenting(true)
}}
>
Reply...
</div>
</span>
{own && (
<div
className={styles.button}
<span
onClick={() => {
onDelete([index])
}}
>
Delete
</div>
</span>
)}
<ReactButton
onClick={(reaction, isDelete) => {
@ -90,6 +94,9 @@ function Comment({ comment, index, onComment, onDelete, onReact, uid }) {
</div>
{commenting && (
<CommentInput
onCancel={() => {
setCommenting(false)
}}
onSubmit={(e) => {
onComment([index], e)
setCommenting(false)
@ -110,8 +117,8 @@ function Comment({ comment, index, onComment, onDelete, onReact, uid }) {
onDelete={(path) => {
onDelete([...path, index])
}}
onComment={(path, text) => {
onComment([...path, index], text)
onComment={(path, content) => {
onComment([...path, index], content)
}}
index={i}
key={i}
@ -124,6 +131,17 @@ function Comment({ comment, index, onComment, onDelete, onReact, uid }) {
)
}
function countComments(comments) {
return comments.reduce((acc, comment) => {
if (comment.subComments) {
acc += countComments(comment.subComments) + 1
} else {
acc += 1
}
return acc
}, 0)
}
export default function Comments({
comments,
onComment,
@ -132,44 +150,78 @@ export default function Comments({
uid,
}) {
const [addingNewComment, setAddingNewComment] = useState(false)
const [commentsShowing, setCommentsShowing] = useState(false)
const commentCount = comments ? countComments(comments) : 0
return (
<div>
{comments && comments.length > 0 ? (
comments.map((comment, i) => {
return (
<Comment
onReact={onReact}
onComment={onComment}
onDelete={onDelete}
comment={comment}
index={i}
key={i}
uid={uid}
/>
)
})
) : (
<div>
<div>No comments yet</div>
</div>
)}
{addingNewComment ? (
<CommentInput
onSubmit={(e) => {
setAddingNewComment(false)
onComment([], e)
{commentsShowing ? (
<Modal
closeClick={() => {
setCommentsShowing(false)
}}
/>
) : (
<span
onClick={() => {
setAddingNewComment(true)
}}
className={styles.button}
>
Add new
{comments && comments.length > 0
? comments.map((comment, i) => {
return (
<Comment
onReact={onReact}
onComment={onComment}
onDelete={onDelete}
comment={comment}
index={i}
key={i}
uid={uid}
/>
)
})
: null}
{commentCount !== 0 ? (
<div className={'actions'}>
<span
onClick={() => {
setAddingNewComment(true)
}}
>
New comment
</span>
</div>
) : null}
{addingNewComment ? (
<CommentInput
onSubmit={(e) => {
if (!e) {
alert('Írj be valamit, hogy kommentelhess...')
return
}
setAddingNewComment(false)
onComment([], e)
}}
onCancel={() => {
setAddingNewComment(false)
if (commentCount === 0) {
setCommentsShowing(false)
}
}}
/>
) : null}
</Modal>
) : null}
<div
className={'actions'}
onClick={() => {
setCommentsShowing(true)
if (commentCount === 0) {
setAddingNewComment(true)
}
}}
>
<span>
{commentCount === 0
? 'New comment'
: `Show ${commentCount} comment${commentCount > 1 ? 's' : ''}`}
</span>
)}
</div>
</div>
)
}