Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 | import React, { FC, useState, useEffect } from 'react'
import styled from 'styled-components'
import CommentLists from './CommentLists'
import CommentForm from './CommentForm'
import Crowi from 'client/util/Crowi'
import { CommonProps } from 'client/types/component'
import { Comment as CommentType } from 'client/types/crowi'
const PageComments = styled.div<Props>`
margin: 8px 0 0 0;
`
function useFetchComments(crowi, pageId, revisionId, revisionCreatedAt, isSharePage) {
const [comments, setComments] = useState<{
current: CommentType[]
newer: CommentType[]
older: CommentType[]
}>({ current: [], newer: [], older: [] })
const fetchComments = async () => {
if (isSharePage) return
const { ok, comments }: { ok: boolean; comments: CommentType[] } = await crowi.apiGet('/comments.get', { page_id: pageId })
const [current, newer, older]: [CommentType[], CommentType[], CommentType[]] = [[], [], []]
if (ok) {
comments.forEach(comment => {
const { revision, createdAt } = comment
const isCurrent = revision === revisionId
const isNewer = Date.parse(createdAt) / 1000 > revisionCreatedAt
const target = isCurrent ? current : isNewer ? newer : older
target.push(comment)
})
setComments({ current, newer, older })
}
}
return [comments, fetchComments] as const
}
function usePostComment(crowi, pageId, revisionId, fetchComments) {
const [posting, setPosting] = useState(false)
const [message, setMessage] = useState('')
const postComment = async (comment: string) => {
try {
setPosting(true)
const { ok, error } = await crowi.apiPost('/comments.add', {
commentForm: {
comment,
page_id: pageId,
revision_id: revisionId,
},
})
if (ok) {
setMessage('')
fetchComments()
} else {
setMessage(error)
}
} catch (err) {
setMessage(err.message)
} finally {
setPosting(false)
}
}
return [{ posting, message }, { postComment }] as const
}
type Props = CommonProps & {
crowi: Crowi
pageId: string | null
revisionId: string | null
revisionCreatedAt: string | null
isSharePage: boolean
}
const Comment: FC<Props> = props => {
const { crowi, pageId, revisionId, revisionCreatedAt, isSharePage, ...others } = props
const [comments, fetchComments] = useFetchComments(crowi, pageId, revisionId, revisionCreatedAt, isSharePage)
const [{ posting, message }, { postComment }] = usePostComment(crowi, pageId, revisionId, fetchComments)
useEffect(() => {
fetchComments()
}, [])
return !isSharePage ? (
<PageComments {...others}>
<CommentForm posting={posting} message={message} postComment={postComment} />
<CommentLists crowi={crowi} comments={comments} revisionId={revisionId} />
</PageComments>
) : null
}
export default Comment
|