wassname/talk
1
0
Fork 0
mirror of https://github.com/wassname/talk.git synced 2026-07-13 17:45:56 +08:00
Code Issues Packages Projects Releases Wiki Activity

Highlighting permalinked comment.

Browse Source
This commit is contained in:
David Jay
2017-02-28 13:55:28 -05:00
parent bf23fc2974
commit 158f31d603
6 changed files with 85 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/coral-embed-stream/src/Comment.js
+6 -4
View File
@@ -38,12 +38,12 @@ class Comment extends React.Component {
// id of currently opened ReplyBox. tracked in Stream.js
activeReplyBox: PropTypes.string.isRequired,
setActiveReplyBox: PropTypes.func.isRequired,
refetch: PropTypes.func.isRequired,
showSignInDialog: PropTypes.func.isRequired,
postFlag: PropTypes.func.isRequired,
postLike: PropTypes.func.isRequired,
deleteAction: PropTypes.func.isRequired,
parentId: PropTypes.string,
highlighted: PropTypes.string,
addNotification: PropTypes.func.isRequired,
postItem: PropTypes.func.isRequired,
depth: PropTypes.number.isRequired,
@@ -85,10 +85,10 @@ class Comment extends React.Component {
asset,
depth,
postItem,
refetch,
addNotification,
showSignInDialog,
postLike,
highlighted,
postFlag,
postDontAgree,
loadMore,
@@ -100,10 +100,12 @@ class Comment extends React.Component {
const like = getActionSummary('LikeActionSummary', comment);
const flag = getActionSummary('FlagActionSummary', comment);
const dontagree = getActionSummary('DontAgreeActionSummary', comment);
let commentClass = parentId ? `reply ${styles.Reply}` : `comment ${styles.Comment}`;
commentClass += highlighted === comment.id ? ' highlighted-comment' : '';
return (
<div
className={parentId ? `reply ${styles.Reply}` : `comment ${styles.Comment}`}
className={commentClass}
id={`c_${comment.id}`}
style={{marginLeft: depth * 30}}>
<hr aria-hidden={true} />
@@ -158,7 +160,6 @@ class Comment extends React.Component {
comment.replies &&
comment.replies.map(reply => {
return <Comment
refetch={refetch}
setActiveReplyBox={setActiveReplyBox}
activeReplyBox={activeReplyBox}
addNotification={addNotification}
@@ -166,6 +167,7 @@ class Comment extends React.Component {
postItem={postItem}
depth={depth + 1}
asset={asset}
highlighted={highlighted}
currentUser={currentUser}
postLike={postLike}
postFlag={postFlag}
client/coral-embed-stream/src/Embed.js
+59 -19
View File
@@ -12,7 +12,7 @@ const {logout, showSignInDialog, requestConfirmEmail} = authActions;
const {addNotification, clearNotification} = notificationActions;
const {fetchAssetSuccess} = assetActions;
import {queryStream, commentQuery} from 'coral-framework/graphql/queries';
import {queryStream} from 'coral-framework/graphql/queries';
import {postComment, postFlag, postLike, postDontAgree, deleteAction} from 'coral-framework/graphql/mutations';
import {editName} from 'coral-framework/actions/user';
import {updateCountCache} from 'coral-framework/actions/asset';
@@ -31,12 +31,13 @@ import ChangeUsernameContainer from '../../coral-sign-in/containers/ChangeUserna
import ProfileContainer from 'coral-settings/containers/ProfileContainer';
import RestrictedContent from 'coral-framework/components/RestrictedContent';
import ConfigureStreamContainer from 'coral-configure/containers/ConfigureStreamContainer';
import Comment from './Comment';
import LoadMore from './LoadMore';
import NewCount from './NewCount';
class Embed extends Component {
state = {activeTab: 0, showSignInDialog: false};
state = {activeTab: 0, showSignInDialog: false, activeReplyBox: ''};
changeTab = (tab) => {
@@ -60,22 +61,24 @@ class Embed extends Component {
componentDidMount () {
pym.sendMessage('childReady');
pym.onMessage('DOMContentLoaded', hash => {
const commentId = hash.replace('#', 'c_');
let count = 0;
const interval = setInterval(() => {
if (document.getElementById(commentId)) {
window.clearInterval(interval);
pym.scrollParentToChildEl(commentId);
}
// pym.onMessage('DOMContentLoaded', hash => {
if (++count > 100) { // ~10 seconds
// give up waiting for the comments to load.
// it would be weird for the page to jump after that long.
window.clearInterval(interval);
}
}, 100);
});
// const commentId = hash.replace('#', 'c_');
// let count = 0;
// const interval = setInterval(() => {
// if (document.getElementById(commentId)) {
// window.clearInterval(interval);
// pym.scrollParentToChildEl(commentId);
// }
//
// if (++count > 100) { // ~10 seconds
// // give up waiting for the comments to load.
// // it would be weird for the page to jump after that long.
// window.clearInterval(interval);
// }
// }, 100);
// });
}
componentWillReceiveProps (nextProps) {
@@ -83,13 +86,27 @@ class Embed extends Component {
if(!isEqual(nextProps.data.asset, this.props.data.asset)) {
loadAsset(nextProps.data.asset);
}
// if(!isEqual(nextProps.data.comment, this.props.data.comment)) {
// pym.scrollParentToChildEl(nextProps.data.comment.id);
// }
}
setActiveReplyBox (reactKey) {
if (!this.props.currentUser) {
const offset = document.getElementById(`c_${reactKey}`).getBoundingClientRect().top - 75;
this.props.showSignInDialog(offset);
} else {
this.setState({activeReplyBox: reactKey});
}
}
render () {
const {activeTab} = this.state;
const {closedAt, countCache = {}} = this.props.asset;
const {loading, asset, refetch} = this.props.data;
const {loading, asset, refetch, comment} = this.props.data;
const {loggedIn, isAdmin, user, showSignInDialog, signInOffset} = this.props.auth;
const highlightedComment = comment && comment.parent ? comment.parent : comment;
const openStream = closedAt === null;
@@ -159,6 +176,28 @@ class Embed extends Component {
}
{!loggedIn && <SignInContainer requireEmailConfirmation={asset.settings.requireEmailConfirmation} offset={signInOffset}/>}
{loggedIn && user && <ChangeUsernameContainer loggedIn={loggedIn} offset={signInOffset} user={user} />}
{
highlightedComment &&
<Comment
refetch={refetch}
setActiveReplyBox={this.setActiveReplyBox}
activeReplyBox={this.state.activeReplyBox}
addNotification={addNotification}
depth={0}
postItem={this.props.postItem}
asset={asset}
currentUser={user}
highlighted={comment.id}
postLike={this.props.postLike}
postFlag={this.props.postFlag}
postDontAgree={this.props.postDontAgree}
loadMore={this.props.loadMore}
deleteAction={this.props.deleteAction}
showSignInDialog={this.props.showSignInDialog}
key={highlightedComment.id}
reactKey={highlightedComment.id}
comment={highlightedComment} />
}
<NewCount
commentCount={asset.commentCount}
countCache={countCache[asset.id]}
@@ -171,6 +210,8 @@ class Embed extends Component {
refetch={refetch}
addNotification={this.props.addNotification}
postItem={this.props.postItem}
setActiveReplyBox={this.setActiveReplyBox}
activeReplyBox={this.state.activeReplyBox}
asset={asset}
currentUser={user}
postLike={this.props.postLike}
@@ -251,6 +292,5 @@ export default compose(
postLike,
postDontAgree,
deleteAction,
commentQuery,
queryStream
)(Embed);
client/coral-embed-stream/src/Stream.js
+3 -16
View File
@@ -5,7 +5,6 @@ import {NEW_COMMENT_COUNT_POLL_INTERVAL} from 'coral-framework/constants/comment
class Stream extends React.Component {
static propTypes = {
refetch: PropTypes.func.isRequired,
addNotification: PropTypes.func.isRequired,
postItem: PropTypes.func.isRequired,
asset: PropTypes.object.isRequired,
@@ -19,7 +18,6 @@ class Stream extends React.Component {
constructor(props) {
super(props);
this.state = {activeReplyBox: '', countPoll: null};
this.setActiveReplyBox = this.setActiveReplyBox.bind(this);
}
componentDidMount() {
@@ -42,15 +40,6 @@ class Stream extends React.Component {
clearInterval(this.state.countPoll);
}
setActiveReplyBox (reactKey) {
if (!this.props.currentUser) {
const offset = document.getElementById(`c_${reactKey}`).getBoundingClientRect().top - 75;
this.props.showSignInDialog(offset);
} else {
this.setState({activeReplyBox: reactKey});
}
}
render () {
const {
comments,
@@ -63,8 +52,7 @@ class Stream extends React.Component {
postDontAgree,
loadMore,
deleteAction,
showSignInDialog,
refetch
showSignInDialog
} = this.props;
return (
@@ -72,9 +60,8 @@ class Stream extends React.Component {
{
comments.map(comment =>
<Comment
refetch={refetch}
setActiveReplyBox={this.setActiveReplyBox}
activeReplyBox={this.state.activeReplyBox}
setActiveReplyBox={this.props.setActiveReplyBox}
activeReplyBox={this.props.activeReplyBox}
addNotification={addNotification}
depth={0}
postItem={postItem}
client/coral-embed-stream/style/default.css
+5
View File
@@ -180,6 +180,11 @@ hr {
float: right;
}
.highlighted-comment {
padding-left: 10px;
border-left: 3px solid rgb(35,118,216);
}
/* Tag Labels */
.coral-plugin-tag-label {
client/coral-framework/graphql/queries/index.js
+2 -10
View File
@@ -2,7 +2,6 @@ import {graphql} from 'react-apollo';
import STREAM_QUERY from './streamQuery.graphql';
import LOAD_MORE from './loadMore.graphql';
import GET_COUNTS from './getCounts.graphql';
import COMMENT_QUERY from './commentQuery.graphql';
import MY_COMMENT_HISTORY from './myCommentHistory.graphql';
function getQueryVariable(variable) {
@@ -88,7 +87,8 @@ export const loadMore = (data) => ({limit, cursor, parent_id, asset_id, sort}, n
export const queryStream = graphql(STREAM_QUERY, {
options: () => ({
variables: {
asset_url: getQueryVariable('asset_url')
asset_url: getQueryVariable('asset_url'),
comment_id: getQueryVariable('comment_id')
}
}),
props: ({data}) => ({
@@ -98,12 +98,4 @@ export const queryStream = graphql(STREAM_QUERY, {
})
});
export const commentQuery = graphql(COMMENT_QUERY, {
options: () => ({
variables: {
id: getQueryVariable('comment_id')
}
})
});
export const myCommentHistory = graphql(MY_COMMENT_HISTORY, {});
client/coral-framework/graphql/queries/streamQuery.graphql
+10 -1
View File
@@ -1,6 +1,15 @@
#import "../fragments/commentView.graphql"
query AssetQuery($asset_url: String!) {
query AssetQuery($asset_url: String!, $comment_id: ID!) {
comment(id: $comment_id) {
...commentView
parent {
...commentView
replies {
...commentView
}
}
}
asset(url: $asset_url) {
id
title