All files / client/components/Comment CommentLists.tsx

0% Statements 0/10
0% Branches 0/4
0% Functions 0/3
0% Lines 0/8

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                                                                                                                       
import React, { FC } from 'react'
import styled from 'styled-components'
import CommentList from './CommentList'
import Icon from 'components/Common/Icon'
import Crowi from 'client/util/Crowi'
import { Comment } from 'client/types/crowi'
 
const ToggleCommentList = styled.a`
  text-align: center;
  display: block;
  margin: 8px;
  font-size: 0.9em;
  color: #999;
`
 
function NewerCommentList({ crowi, comments, revisionId }) {
  if (!comments.length) return null
 
  return (
    <>
      <CommentList className="collapse" id="page-comments-list-newer" crowi={crowi} comments={comments} revisionId={revisionId} />
      <a className="text-center" data-toggle="collapse" href="#page-comments-list-newer">
        <Icon name="chevronDoubleUp" /> Comments for Newer Revision <Icon name="chevronDoubleUp" />
      </a>
    </>
  )
}
 
function OlderCommentList({ crowi, comments, revisionId }) {
  if (!comments.length) return null
 
  return (
    <>
      <a className="text-center" data-toggle="collapse" href="#page-comments-list-older">
        <Icon name="chevronDoubleDown" /> Comments for Older Revision <Icon name="chevronDoubleDown" />
      </a>
      <CommentList className="collapse in" id="page-comments-list-older" crowi={crowi} comments={comments} revisionId={revisionId} />
    </>
  )
}
 
interface Props {
  crowi: Crowi
  comments: { newer: Comment[]; current: Comment[]; older: Comment[] }
  revisionId: string | null
}
 
const CommentLists: FC<Props> = ({ crowi, comments, revisionId }) => {
  const { newer, current, older } = comments
  return (
    <div>
      <NewerCommentList crowi={crowi} comments={newer} revisionId={revisionId} />
      <CommentList crowi={crowi} comments={current} revisionId={revisionId} />
      <OlderCommentList crowi={crowi} comments={older} revisionId={revisionId} />
    </div>
  )
}
 
export default CommentLists