Adding comment permalinks.

Fixes #18
This commit is contained in:
Dessalines 2019-04-05 13:22:59 -07:00
parent 1c95f4efcd
commit 6884de0afc
2 changed files with 15 additions and 4 deletions

View file

@ -83,7 +83,7 @@ export class PostListings extends Component<PostListingsProps, PostListingsState
{this.state.posts.length > 0 {this.state.posts.length > 0
? this.state.posts.map(post => ? this.state.posts.map(post =>
<PostListing post={post} showCommunity={!this.props.communityId}/>) <PostListing post={post} showCommunity={!this.props.communityId}/>)
: <div>No Listings</div> : <div>No Listings. Subscribe to some <Link to="/communities">forums</Link>.</div>
} }
</div> </div>
) )

View file

@ -21,6 +21,7 @@ interface PostState {
commentSort: CommentSortType; commentSort: CommentSortType;
community: Community; community: Community;
moderators: Array<CommunityUser>; moderators: Array<CommunityUser>;
scrolled: boolean;
} }
export class Post extends Component<any, PostState> { export class Post extends Component<any, PostState> {
@ -31,7 +32,8 @@ export class Post extends Component<any, PostState> {
comments: [], comments: [],
commentSort: CommentSortType.Hot, commentSort: CommentSortType.Hot,
community: null, community: null,
moderators: [] moderators: [],
scrolled: false
} }
constructor(props, context) { constructor(props, context) {
@ -60,6 +62,15 @@ export class Post extends Component<any, PostState> {
autosize(document.querySelectorAll('textarea')); autosize(document.querySelectorAll('textarea'));
} }
componentDidUpdate(lastProps: any, lastState: PostState, snapshot: any) {
if (!this.state.scrolled && lastState.comments.length > 0 && window.location.href.includes('#comment-')) {
let id = window.location.hash.split("#")[2];
var elmnt = document.getElementById(`${id}`);
elmnt.scrollIntoView();
this.state.scrolled = true;
}
}
render() { render() {
return ( return (
<div class="container"> <div class="container">
@ -294,7 +305,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
render() { render() {
let node = this.props.node; let node = this.props.node;
return ( return (
<div className={`comment ${node.comment.parent_id && !this.props.noIndent ? 'ml-4' : ''}`}> <div id={`comment-${node.comment.id}`} className={`comment ${node.comment.parent_id && !this.props.noIndent ? 'ml-4' : ''}`}>
<div className="float-left small text-center"> <div className="float-left small text-center">
<div className={`pointer upvote ${node.comment.my_vote == 1 ? 'text-info' : 'text-muted'}`} onClick={linkEvent(node, this.handleCommentLike)}></div> <div className={`pointer upvote ${node.comment.my_vote == 1 ? 'text-info' : 'text-muted'}`} onClick={linkEvent(node, this.handleCommentLike)}></div>
<div>{node.comment.score}</div> <div>{node.comment.score}</div>
@ -336,7 +347,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
</li> </li>
} }
<li className="list-inline-item"> <li className="list-inline-item">
<a className="text-muted" href="test">link</a> <Link className="text-muted" to={`/post/${node.comment.post_id}#comment-${node.comment.id}`}>link</Link>
</li> </li>
</ul> </ul>
</div> </div>