wassname/talk
1
0
Fork 0
mirror of https://github.com/wassname/talk.git synced 2026-08-20 12:50:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'master' into subscriptions

Browse Source
This commit is contained in:
Wyatt Johnson
2017-04-18 15:43:25 -06:00
parent 7fac8ef073 bfacc8f2f7
commit e1c8e75405
33 changed files with 392 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/coral-configure/components/ConfigureCommentStream.js
+4 -5
View File
@@ -7,7 +7,7 @@ import I18n from 'coral-framework/modules/i18n/i18n';
import translations from '../translations.json';
const lang = new I18n(translations);
export default ({handleChange, handleApply, changed, updateQuestionBoxContent, ...props}) => (
export default ({handleChange, handleApply, changed, ...props}) => (
<form onSubmit={handleApply}>
<div className={styles.wrapper}>
<div className={styles.container}>
@@ -38,9 +38,9 @@ export default ({handleChange, handleApply, changed, updateQuestionBoxContent, .
<Checkbox
className={styles.checkbox}
cStyle={changed ? 'green' : 'darkGrey'}
name="premodLinks"
name="plinksenable"
onChange={handleChange}
defaultChecked={props.premodLinks}
defaultChecked={props.premodLinksEnable}
info={{
title: lang.t('configureCommentStream.enablePremodLinks'),
description: lang.t('configureCommentStream.enablePremodLinksDescription')
@@ -57,11 +57,10 @@ export default ({handleChange, handleApply, changed, updateQuestionBoxContent, .
title: lang.t('configureCommentStream.enableQuestionBox'),
description: lang.t('configureCommentStream.enableQuestionBoxDescription')
}} />
<div className={`${props.questionBoxEnable ? null : styles.hidden}`} >
<TextField
id="qboxcontent"
onChange={updateQuestionBoxContent}
onChange={handleChange}
rows={3}
value={props.questionBoxContent}
label={lang.t('configureCommentStream.includeQuestionHere')}
client/coral-configure/containers/ConfigureStreamContainer.js
+20 -15
View File
@@ -16,13 +16,13 @@ class ConfigureStreamContainer extends Component {
this.state = {
changed: false,
dirtySettings: props.asset.settings,
closedAt: (props.asset.closedAt === null ? 'open' : 'closed')
};
this.toggleStatus = this.toggleStatus.bind(this);
this.handleChange = this.handleChange.bind(this);
this.handleApply = this.handleApply.bind(this);
this.updateQuestionBoxContent = this.updateQuestionBoxContent.bind(this);
}
handleApply (e) {
@@ -32,7 +32,7 @@ class ConfigureStreamContainer extends Component {
const questionBoxEnable = elements.qboxenable.checked;
const questionBoxContent = elements.qboxcontent.value;
const premodLinksEnable = elements.premodLinks.checked;
const premodLinksEnable = elements.plinksenable.checked;
const {changed} = this.state;
const newConfig = {
@@ -49,23 +49,29 @@ class ConfigureStreamContainer extends Component {
changed: false
});
}, 300);
// this.props.loadAsset(this.props.data.asset);
}
}
handleChange (e) {
// TODO: Don’t directly manipulate state and make state change immutable.
if (e.target && e.target.id === 'qboxenable') {
this.props.asset.settings.questionBoxEnable = e.target.checked;
this.state.dirtySettings.questionBoxEnable = e.target.checked;
}
if (e.target && e.target.id === 'qboxcontent') {
this.state.dirtySettings.questionBoxContent = e.target.value;
}
if (e.target && e.target.id === 'plinksenable') {
this.state.dirtySettings.premodLinksEnable = e.target.value;
}
this.setState({
changed: true
});
}
updateQuestionBoxContent(e) {
this.props.asset.settings.questionBoxContent = e.target.value;
this.handleChange(e);
}
toggleStatus () {
// update the closedAt status for the asset
@@ -85,10 +91,10 @@ class ConfigureStreamContainer extends Component {
}
render () {
const {settings} = this.props.asset;
const {dirtySettings} = this.state;
const premod = dirtySettings.moderation === 'PRE';
const {closedAt} = this.state;
const premod = settings.moderation === 'PRE';
const closedTimeout = settings.closedTimeout;
const closedTimeout = dirtySettings.closedTimeout;
return (
<div>
@@ -96,11 +102,10 @@ class ConfigureStreamContainer extends Component {
handleChange={this.handleChange}
handleApply={this.handleApply}
changed={this.state.changed}
premodLinks={settings.premodLinks}
premodLinksEnable={dirtySettings.premodLinksEnable}
premod={premod}
updateQuestionBoxContent={this.updateQuestionBoxContent}
questionBoxEnable={settings.questionBoxEnable}
questionBoxContent={settings.questionBoxContent}
questionBoxEnable={dirtySettings.questionBoxEnable}
questionBoxContent={dirtySettings.questionBoxContent}
/>
<hr />
<h3>{closedAt === 'open' ? 'Close' : 'Open'} Comment Stream</h3>
client/coral-embed-stream/src/Comment.js
+2 -2
View File
@@ -168,7 +168,7 @@ class Comment extends React.Component {
? <TagLabel><BestIndicator /></TagLabel>
: null }
<PubDate created_at={comment.created_at} />
<Slot fill="commentInfoBar" commentId={comment.id} />
<Slot fill="commentInfoBar" comment={comment} commentId={comment.id} inline/>
{ (currentUser && (comment.user.id !== currentUser.id))
? <span className={styles.topRightMenu}>
@@ -209,7 +209,7 @@ class Comment extends React.Component {
removeBest={removeBestTag} />
</IfUserCanModifyBest>
</ActionButton>
<Slot fill="commentDetail" commentId={comment.id} />
<Slot fill="commentDetail" comment={comment} commentId={comment.id} inline/>
</div>
<div className="commentActionsRight comment__action-container">
<ActionButton>
client/coral-framework/components/Slot.css
+3
View File
@@ -0,0 +1,3 @@
.inline {
display: inline-block;
}
client/coral-framework/components/Slot.js
+4 -3
View File
@@ -1,13 +1,14 @@
import React, {Component} from 'react';
import {getSlotElements} from 'coral-framework/helpers/plugins';
import styles from './Slot.css';
class Slot extends Component {
render() {
const {fill, ...rest} = this.props;
const {fill, inline = false, ...rest} = this.props;
return (
<span>
<div className={inline ? styles.inline : ''}>
{getSlotElements(fill, rest)}
</span>
</div>
);
}
}
client/coral-framework/graphql/mutations/index.js
+10 -10
View File
@@ -20,12 +20,11 @@ export const postComment = graphql(POST_COMMENT, {
fragments: commentView
}),
props: ({ownProps, mutate}) => ({
postItem: ({asset_id, body, parent_id}) =>
mutate({
postItem: comment => {
const {asset_id, body, parent_id, tags = []} = comment;
return mutate({
variables: {
asset_id,
body,
parent_id
comment
},
optimisticResponse: {
createComment: {
@@ -39,14 +38,14 @@ export const postComment = graphql(POST_COMMENT, {
parent_id,
asset_id,
action_summaries: [],
tags: [],
tags,
status: null,
id: 'pending'
}
}
},
updateQueries: {
AssetQuery: (oldData, {mutationResult:{data:{createComment:{comment}}}}) => {
AssetQuery: (oldData, {mutationResult: {data: {createComment: {comment}}}}) => {
if (oldData.asset.settings.moderation === 'PRE' || comment.status === 'PREMOD' || comment.status === 'REJECTED') {
return oldData;
@@ -62,8 +61,8 @@ export const postComment = graphql(POST_COMMENT, {
...oldData.asset,
comments: oldData.asset.comments.map((oldComment) => {
return oldComment.id === parent_id
? {...oldComment, replies: [...oldComment.replies, comment]}
: oldComment;
? {...oldComment, replies: [...oldComment.replies, comment]}
: oldComment;
})
}
};
@@ -83,7 +82,8 @@ export const postComment = graphql(POST_COMMENT, {
return updatedAsset;
}
}
})
});
}
}),
});
client/coral-framework/graphql/mutations/postComment.graphql
+2 -2
View File
@@ -1,7 +1,7 @@
#import "../fragments/commentView.graphql"
mutation CreateComment ($asset_id: ID!, $parent_id: ID, $body: String!) {
createComment(asset_id:$asset_id, parent_id:$parent_id, body:$body) {
mutation CreateComment ($comment: CreateCommentInput!) {
createComment(comment: $comment) {
comment {
...commentView
replyCount
client/coral-framework/graphql/queries/streamQuery.graphql
+1
View File
@@ -28,6 +28,7 @@ query AssetQuery($asset_id: ID, $asset_url: String, $comment_id: ID!, $has_comme
moderation
infoBoxEnable
infoBoxContent
premodLinksEnable
questionBoxEnable
questionBoxContent
closeTimeout
client/coral-framework/reducers/index.js
+2
View File
@@ -1,11 +1,13 @@
import auth from './auth';
import user from './user';
import asset from './asset';
import {reducer as commentBox} from '../../coral-plugin-commentbox';
import {pluginReducers} from '../helpers/plugins';
export default {
auth,
user,
asset,
commentBox,
...pluginReducers
};
client/coral-plugin-commentbox/CommentBox.js
+108 -38
View File
@@ -2,56 +2,57 @@ import React, {Component, PropTypes} from 'react';
import {I18n} from '../coral-framework';
import translations from './translations.json';
import {Button} from 'coral-ui';
import {Slot} from 'coral-framework';
import {connect} from 'react-redux';
const name = 'coral-plugin-commentbox';
class CommentBox extends Component {
static propTypes = {
commentPostedHandler: PropTypes.func,
postItem: PropTypes.func.isRequired,
cancelButtonClicked: PropTypes.func,
assetId: PropTypes.string.isRequired,
parentId: PropTypes.string,
authorId: PropTypes.string.isRequired,
isReply: PropTypes.bool.isRequired,
canPost: PropTypes.bool,
currentUser: PropTypes.object
}
constructor(props) {
super(props);
state = {
body: '',
username: ''
this.state = {
username: '',
body: '',
hooks: {
preSubmit: [],
postSubmit: []
}
};
}
postComment = () => {
const {
commentPostedHandler,
postItem,
assetId,
updateCountCache,
isReply,
countCache,
assetId,
parentId,
postItem,
countCache,
addNotification,
authorId
updateCountCache,
commentPostedHandler
} = this.props;
let comment = {
body: this.state.body,
asset_id: assetId,
author_id: authorId,
parent_id: parentId
parent_id: parentId,
body: this.state.body,
...this.props.commentBox
};
if (this.props.charCount && this.state.body.length > this.props.charCount) {
return;
}
!isReply && updateCountCache(assetId, countCache + 1);
// Execute preSubmit Hooks
this.state.hooks.preSubmit.forEach(hook => hook());
postItem(comment, 'comments')
.then(({data}) => {
const postedComment = data.createComment.comment;
// Execute postSubmit Hooks
this.state.hooks.postSubmit.forEach(hook => hook(data));
if (postedComment.status === 'REJECTED') {
addNotification('error', lang.t('comment-post-banned-word'));
!isReply && updateCountCache(assetId, countCache);
@@ -64,14 +65,67 @@ class CommentBox extends Component {
commentPostedHandler();
}
})
.catch((err) => console.error(err));
.catch((err) => console.error(err));
this.setState({body: ''});
}
registerHook = (hookType = '', hook = () => {}) => {
if (typeof hook !== 'function') {
return console.warn(`Hooks must be functions. Please check your ${hookType} hooks`);
} else if (typeof hookType === 'string') {
this.setState(state => ({
hooks: {
...state.hooks,
[hookType]: [
...state.hooks[hookType],
hook
]
}
}));
return {
hookType,
hook
};
} else {
return console.warn('hookTypes must be a string. Please check your hooks');
}
}
unregisterHook = hookData => {
const {hookType, hook} = hookData;
this.setState(state => {
let newHooks = state.hooks[newHooks];
const idx = state.hooks[hookType].indexOf(hook);
if (idx !== -1) {
newHooks = [
...state.hooks[hookType].slice(0, idx),
...state.hooks[hookType].slice(idx + 1)
];
}
return {
hooks: {
...state.hooks,
[hookType]: newHooks
}
};
});
}
handleChange = e => this.setState({body: e.target.value});
render () {
const {styles, isReply, authorId, charCount} = this.props;
let {cancelButtonClicked} = this.props;
const length = this.state.body.length;
const enablePostComment = !length || (charCount && length > charCount);
if (isReply && typeof cancelButtonClicked !== 'function') {
console.warn('the CommentBox component should have a cancelButtonClicked callback defined if it lives in a Reply');
@@ -93,33 +147,35 @@ class CommentBox extends Component {
value={this.state.body}
placeholder={lang.t('comment')}
id={isReply ? 'replyText' : 'commentText'}
onChange={(e) => this.setState({body: e.target.value})}
onChange={this.handleChange}
rows={3}/>
</div>
<div className={`${name}-char-count ${length > charCount ? `${name}-char-max` : ''}`}>
{
charCount &&
`${charCount - length} ${lang.t('characters-remaining')}`
}
{charCount && `${charCount - length} ${lang.t('characters-remaining')}`}
</div>
<div className={`${name}-button-container`}>
<Slot
fill="commentBoxDetail"
registerHook={this.registerHook}
unregisterHook={this.unregisterHook}
inline
/>
{
isReply && (
<Button
cStyle='darkGrey'
className={`${name}-cancel-button`}
onClick={() => {
cancelButtonClicked('');
}}>
onClick={() => cancelButtonClicked('')}>
{lang.t('cancel')}
</Button>
)
}
{ authorId && (
<Button
cStyle={!length || (charCount && length > charCount) ? 'lightGrey' : 'darkGrey'}
cStyle={enablePostComment ? 'lightGrey' : 'darkGrey'}
className={`${name}-button`}
onClick={this.postComment}>
onClick={this.postComment}
disabled={enablePostComment ? 'disabled' : ''}>
{lang.t('post')}
</Button>
)
@@ -129,6 +185,20 @@ class CommentBox extends Component {
}
}
export default CommentBox;
CommentBox.propTypes = {
commentPostedHandler: PropTypes.func,
postItem: PropTypes.func.isRequired,
cancelButtonClicked: PropTypes.func,
assetId: PropTypes.string.isRequired,
parentId: PropTypes.string,
authorId: PropTypes.string.isRequired,
isReply: PropTypes.bool.isRequired,
canPost: PropTypes.bool,
currentUser: PropTypes.object
};
const mapStateToProps = ({commentBox}) => ({commentBox});
export default connect(mapStateToProps, null)(CommentBox);
const lang = new I18n(translations);
client/coral-plugin-commentbox/actions.js
+9
View File
@@ -0,0 +1,9 @@
export const addTag = tag => ({
type: 'ADD_TAG',
tag
});
export const removeTag = idx => ({
type: 'REMOVE_TAG',
idx
});
client/coral-plugin-commentbox/constants.js
+2
View File
@@ -0,0 +1,2 @@
export const ADD_TAG = 'ADD_TAG';
export const REMOVE_TAG = 'REMOVE_TAG';
client/coral-plugin-commentbox/index.js
+5
View File
@@ -0,0 +1,5 @@
import reducer from './reducer';
export default {
reducer
};
client/coral-plugin-commentbox/reducer.js
+25
View File
@@ -0,0 +1,25 @@
import {ADD_TAG, REMOVE_TAG} from './constants';
const initialState = {
tags: []
};
export default function commentBox (state = initialState, action) {
switch (action.type) {
case ADD_TAG :
return {
...state,
tags: [...state.tags, action.tag]
};
case REMOVE_TAG :
return {
...state,
tags: [
...state.tags.slice(0, action.idx),
...state.tags.slice(action.idx + 1)
]
};
default :
return state;
}
}
client/coral-plugin-commentbox/styles.css
+6
View File
@@ -0,0 +1,6 @@
.slot {
display: inline-block;
div {
display: inline-block;
}
}