diff --git a/src/components/Comments/SingleComment/ExpandedComment.js b/src/components/Comments/SingleComment/ExpandedComment.js index 95d711e..b43e88e 100644 --- a/src/components/Comments/SingleComment/ExpandedComment.js +++ b/src/components/Comments/SingleComment/ExpandedComment.js @@ -2,7 +2,12 @@ import React from 'react' const ExpandedComment = props => { return ( -
  • +
  • props.showCollapse(props.id, true)} + onMouseLeave={() => props.showCollapse(props.id, false)} + >
    profile @@ -20,6 +25,7 @@ const ExpandedComment = props => { fontVariant: 'small-caps', color: 'blue', cursor: 'pointer', + display: props.displayCollapse || 'none', }} onClick={() => props.toggleCollapse(props.id)} > diff --git a/src/components/Comments/index.js b/src/components/Comments/index.js index c6c79e0..dd63956 100644 --- a/src/components/Comments/index.js +++ b/src/components/Comments/index.js @@ -6,6 +6,16 @@ class ThreadList extends React.Component { constructor() { super() this.toggleCollapse = this.toggleCollapse.bind(this) + this.showCollapse = this.showCollapse.bind(this) + } + + showCollapse(id, state) { + this.setState({ displayCollapse: 'block' }) + const otherComments = this.props.comments.filter(c => c.id !== id) + const comment = this.props.comments.find(c => c.id === id) + comment['displayCollapse'] = state + //console.log('displayed collapse for: ', comment) + this.setState({ comments: otherComments.concat(comment) }) } toggleCollapse(id) { @@ -37,6 +47,7 @@ class ThreadList extends React.Component {
    @@ -47,16 +58,16 @@ class ThreadList extends React.Component {
    - {!comment.collapsed ? ( + {!comment.collapsed && ( - ) : ( - '' )}
    )