notnull/tasks-mockup
2
0
Fork 0
Code Issues 5 Pull Requests 1 Releases Wiki Activity

comment threading

Browse Source
This commit is contained in:
data 2019-07-13 13:12:27 +02:00
parent 4839be414c
commit 8d35bf7620
9 changed files with 157 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
package.json
View File

@ -8,7 +8,8 @@
"http-proxy-middleware": "^0.19.1",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-scripts": "3.0.1"
"react-scripts": "3.0.1",
"uuid": "^3.3.2"
},
"scripts": {
"start": "react-scripts start",

3
public/css/custom.css Normal file
View File

@ -0,0 +1,3 @@
.replies {
margin-left: 1em;
}

3
public/index.html
View File

@ -25,7 +25,8 @@
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous"
/>
<title>React App</title>
<link rel="stylesheet" type="text/css" href="css/custom.css" />
<title>Anarchy Planet</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>

26
src/components/Comments/SingleComment/CollapsedComment.js Normal file
View File

@ -0,0 +1,26 @@
import React from 'react'
const CollapsedComment = props => {
return (
<li key={props.id}>
<div className="media-body ml-3 py-2 my-auto">
<img className="px-2" alt="profile" src="anon.jpeg" height={16} />
<a href="#user">username</a>
<small className="px-3">One day ago</small>
<span
className="a"
style={{
fontVariant: 'small-caps',
color: 'blue',
cursor: 'pointer',
}}
onClick={() => props.toggleCollapse(props.id)}
>
expand
</span>
</div>
</li>
)
}
export default CollapsedComment

41
src/components/Comments/SingleComment/ExpandedComment.js Normal file
View File

@ -0,0 +1,41 @@
import React from 'react'
const ExpandedComment = props => {
const { text } = props
return (
<li className="" key={props.id}>
<div className="media bg bg-dark">
<img alt="profile" src={props.user.avatar} height={64} />
<div className="media-body ml-3 my-auto">
<a className="" href="#user">
{props.user.name}
</a>
</div>
<div className="white">
<small>July 9 2019, 01:32:27 UTC</small>
{props.replies.length > 0 ? (
<span
className="a ml-3"
style={{
fontVariant: 'small-caps',
color: 'blue',
cursor: 'pointer',
}}
onClick={() => props.toggleCollapse(props.id)}
>
collapse
</span>
) : (
''
)}
<a className="float-right ml-2" href="#replies">
reply
</a>
</div>
</div>
<div className="">{text}</div>
</li>
)
}
export default ExpandedComment

10
src/components/Comments/SingleComment/index.js Normal file
View File

@ -0,0 +1,10 @@
import React from 'react'
import ExpandedComment from './ExpandedComment'
import CollapsedComment from './CollapsedComment'
const SingleComment = props => {
if (props.collapsed) return <CollapsedComment {...props} />
return <ExpandedComment {...props} />
}
export default SingleComment

70
src/components/Comments/index.js Normal file
View File

@ -0,0 +1,70 @@
import React from 'react'
import SingleComment from './SingleComment'
import uuid from 'uuid'
class ThreadList extends React.Component {
constructor() {
super()
this.toggleCollapse = this.toggleCollapse.bind(this)
}
toggleCollapse(id) {
// select passed comment from the state, toggle it and put it all back
const otherComments = this.props.comments.filter(c => c.id !== id)
const comment = this.props.comments.find(c => c.id === id)
comment['collapsed'] = !comment.collapsed
console.log('toggled: ', comment)
this.setState({ comments: otherComments.concat(comment) })
}
render() {
const comments = this.props.comments.filter(
// only show comments for this parent / thread
c =>
(!c.parentId && !this.props.threadLevel) ||
c.parentId === this.props.threadLevel,
)
if (comments.length === 0) {
return ''
}
console.log('showing comments for thread', this.props.threadLevel, comments)
return (
<ul className="list-unstyled">
{comments.map(comment => {
// TODO comments aren't sorted by time
if (comment.replies && comment.replies.length === 0) {
return (
<div className="ml-3" key={uuid()}>
<SingleComment
threadLevel={this.props.threadLevel}
toggleCollapse={this.toggleCollapse}
{...comment}
/>
</div>
)
} else {
return (
<div className="ml-3" key={uuid()}>
<SingleComment
threadLevel={this.props.threadLevel}
toggleCollapse={this.toggleCollapse}
{...comment}
/>
{!comment.collapsed ? (
<ThreadList
threadLevel={comment.id}
comments={this.props.comments}
/>
) : (
''
)}
</div>
)
}
})}
</ul>
)
}
}
export default ThreadList

11
src/components/article.js
View File

@ -1,5 +1,6 @@
import React from 'react'
import Tags from './tags'
import Comments from './Comments'
class Article extends React.Component {
constructor(props) {
@ -29,15 +30,7 @@ class Article extends React.Component {
</button>
</div>
<h2 className="mt-3">Comments</h2>
<ul className="list-group">
{this.props.comments
? this.props.comments.map(comment => (
<li className="list-group-item" key={comment.id}>
{comment.text}
</li>
))
: 'No comments yet.'}
</ul>
<Comments {...this.props} />
</div>
)
}

1
src/components/index.js
View File

@ -9,3 +9,4 @@ export { default as UpdateTask } from './update-task'
export { default as Profile } from './profile'
export { default as Projects } from './projects'
export { default as Project } from './project'
export { default as Comments } from './Comments'