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

Selectors, resolving merge errors, better class names, removing comment reducer

Browse Source
This commit is contained in:
Chi Vinh Le
2017-06-08 00:29:05 +07:00
parent c8534a91a6
commit 66e4f02a1a
18 changed files with 50 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/coral-embed-stream/src/actions/comment.js
-11
View File
@@ -1,11 +0,0 @@
import {ADD_COMMENT_CLASSNAME, REMOVE_COMMENT_CLASSNAME} from '../constants/comment';
export const addCommentClassName = (className) => ({
type: ADD_COMMENT_CLASSNAME,
className
});
export const removeCommentClassName = (idx) => ({
type: REMOVE_COMMENT_CLASSNAME,
idx
});
client/coral-embed-stream/src/actions/stream.js
+10
View File
@@ -37,3 +37,13 @@ export const viewAllComments = () => {
return {type: actions.VIEW_ALL_COMMENTS};
};
export const addCommentClassName = (className) => ({
type: actions.ADD_COMMENT_CLASSNAME,
className
});
export const removeCommentClassName = (idx) => ({
type: actions.REMOVE_COMMENT_CLASSNAME,
idx
});
client/coral-embed-stream/src/components/Comment.js
+1 -2
View File
@@ -381,10 +381,9 @@ export default class Comment extends React.Component {
return (
<div
className={cn(commentClass, 'talk-stream-comment-wrapper', {[styles.enter]: this.state.animateEnter})}
className={cn(commentClass, 'talk-stream-comment-wrapper', classNamesToAdd, {[styles.enter]: this.state.animateEnter})}
id={`c_${comment.id}`}
style={{marginLeft: depth * 30}}
className={cn([commentClass, classNamesToAdd])}
>
<hr aria-hidden={true} />
<div
client/coral-embed-stream/src/components/Stream.js
+1 -1
View File
@@ -241,7 +241,7 @@ class Stream extends React.Component {
editComment={this.props.editComment}
liveUpdates={true}
/>
: <div className="commentStreamContainer">
: <div className="talk-stream-comments-container">
<NewCount
count={comments.nodes.length - view.length}
loadMore={this.viewNewComments}
client/coral-embed-stream/src/constants/comment.js
-2
View File
@@ -1,2 +0,0 @@
export const ADD_COMMENT_CLASSNAME = 'ADD_COMMENT_CLASSNAME';
export const REMOVE_COMMENT_CLASSNAME = 'REMOVE_COMMENT_CLASSNAME';
client/coral-embed-stream/src/constants/stream.js
+2
View File
@@ -1,3 +1,5 @@
export const SET_ACTIVE_REPLY_BOX = 'SET_ACTIVE_REPLY_BOX';
export const ADDTL_COMMENTS_ON_LOAD_MORE = 10;
export const VIEW_ALL_COMMENTS = 'VIEW_ALL_COMMENTS';
export const ADD_COMMENT_CLASSNAME = 'ADD_COMMENT_CLASSNAME';
export const REMOVE_COMMENT_CLASSNAME = 'REMOVE_COMMENT_CLASSNAME';
client/coral-embed-stream/src/containers/Stream.js
+1 -1
View File
@@ -290,7 +290,7 @@ const mapStateToProps = (state) => ({
assetUrl: state.stream.assetUrl,
activeTab: state.embed.activeTab,
previousTab: state.embed.previousTab,
commentClassNames: state.comment.commentClassNames
commentClassNames: state.stream.commentClassNames
});
const mapDispatchToProps = (dispatch) =>
client/coral-embed-stream/src/reducers/comment.js
-25
View File
@@ -1,25 +0,0 @@
import {ADD_COMMENT_CLASSNAME, REMOVE_COMMENT_CLASSNAME} from '../constants/comment';
const initialState = {
commentClassNames: []
};
export default function comment (state = initialState, action) {
switch (action.type) {
case ADD_COMMENT_CLASSNAME :
return {
...state,
commentClassNames: [...state.commentClassNames, action.className]
};
case REMOVE_COMMENT_CLASSNAME :
return {
...state,
commentClassNames: [
...state.commentClassNames.slice(0, action.idx),
...state.commentClassNames.slice(action.idx + 1)
]
};
default :
return state;
}
}
client/coral-embed-stream/src/reducers/index.js
-2
View File
@@ -1,5 +1,4 @@
import embed from './embed';
import comment from './comment';
import config from './config';
import stream from './stream';
@@ -7,5 +6,4 @@ export default {
embed,
config,
stream,
comment
};
client/coral-embed-stream/src/reducers/stream.js
+14
View File
@@ -20,6 +20,7 @@ const initialState = {
assetId: getQueryVariable('asset_id'),
assetUrl: getQueryVariable('asset_url'),
commentId: getQueryVariable('comment_id'),
commentClassNames: []
};
export default function stream(state = initialState, action) {
@@ -39,6 +40,19 @@ export default function stream(state = initialState, action) {
...state,
commentId: '',
};
case actions.ADD_COMMENT_CLASSNAME :
return {
...state,
commentClassNames: [...state.commentClassNames, action.className]
};
case actions.REMOVE_COMMENT_CLASSNAME :
return {
...state,
commentClassNames: [
...state.commentClassNames.slice(0, action.idx),
...state.commentClassNames.slice(action.idx + 1)
]
};
default:
return state;
}
client/coral-embed-stream/style/default.css
+2 -2
View File
@@ -182,7 +182,7 @@ hr {
padding: 10px 0;
}
.commentStreamContainer {
.talk-stream-comments-container {
position: relative;
z-index: 0;
}
@@ -493,4 +493,4 @@ button.comment__action-button[disabled],
.commentActionsLeft.comment__action-container .coral-plugin-replies-reply-button .coral-plugin-replies-icon {
visibility: visible;
}
}
}
plugin-api/alpha/client/actions/index.js
+1 -1
View File
@@ -1,2 +1,2 @@
export {addTag, removeTag} from 'coral-plugin-commentbox/actions';
export {addCommentClassName, removeCommentClassName} from 'coral-embed-stream/src/actions/comment';
export {addCommentClassName, removeCommentClassName} from 'coral-embed-stream/src/actions/stream';
plugin-api/alpha/client/selectors/index.js
+2
View File
@@ -0,0 +1,2 @@
export const commentBoxTagsSelector = (state) => state.commentBox.tags;
export const commentClassNamesSelector = (state) => state.stream.commentClassNames;
plugins/coral-plugin-offtopic/client/components/OffTopicCheckbox.js
+2 -2
View File
@@ -9,7 +9,7 @@ export default class OffTopicCheckbox extends React.Component {
componentDidMount() {
this.clearTagsHook = this.props.registerHook('postSubmit', () => {
const idx = this.props.commentBox.tags.indexOf(this.label);
const idx = this.props.tags.indexOf(this.label);
this.props.removeTag(idx);
});
}
@@ -23,7 +23,7 @@ export default class OffTopicCheckbox extends React.Component {
if (e.target.checked) {
addTag(this.label);
} else {
const idx = this.props.commentBox.tags.indexOf(this.label);
const idx = this.props.tags.indexOf(this.label);
removeTag(idx);
}
}
plugins/coral-plugin-offtopic/client/containers/OffTopicCheckbox.js
+4 -1
View File
@@ -1,9 +1,12 @@
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import {addTag, removeTag} from 'plugin-api/alpha/client/actions';
import {commentBoxTagsSelector} from 'plugin-api/alpha/client/selectors';
import OffTopicCheckbox from '../components/OffTopicCheckbox';
const mapStateToProps = ({commentBox}) => ({commentBox});
const mapStateToProps = (state) => ({
tags: commentBoxTagsSelector(state)
});
const mapDispatchToProps = (dispatch) =>
bindActionCreators({addTag, removeTag}, dispatch);
plugins/coral-plugin-offtopic/client/containers/OffTopicFilter.js
+4 -3
View File
@@ -1,6 +1,7 @@
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import {toggleCheckbox} from '../actions';
import {commentClassNamesSelector} from 'plugin-api/alpha/client/selectors';
import OffTopicFilter from '../components/OffTopicFilter';
import {
closeViewingOptions
@@ -10,9 +11,9 @@ import {
removeCommentClassName
} from 'plugin-api/alpha/client/actions';
const mapStateToProps = ({comment, coralPluginOfftopic: offTopic}) => ({
commentClassNames: comment.commentClassNames,
checked: offTopic.checked
const mapStateToProps = (state) => ({
commentClassNames: commentClassNamesSelector(state),
checked: state.coralPluginOfftopic.checked
});
const mapDispatchToProps = (dispatch) =>
plugins/coral-plugin-offtopic/client/index.js
+2 -2
View File
@@ -14,7 +14,7 @@ export default {
reducer,
slots: {
commentInputDetailArea: [OffTopicCheckbox],
streamViewingOptions: [OffTopicFilter],
commentInfoBar: [OffTopicTag]
commentInfoBar: [OffTopicTag],
viewingOptions: [OffTopicFilter]
}
};
plugins/coral-plugin-viewing-options/client/components/ViewingOptions.js
+4 -5
View File
@@ -12,9 +12,8 @@ const ViewingOptions = (props) => {
props.closeViewingOptions();
}
};
return (
<div className={cn([styles.viewingOptions, 'streamViewingOptions'])}>
<div className={cn([styles.viewingOptions, 'coral-plugin-viewing-options'])}>
<div>
<a onClick={toggleOpen}>Viewing Options
{props.open ? <Icon name="arrow_drop_up"/> : <Icon name="arrow_drop_down"/>}
@@ -22,12 +21,12 @@ const ViewingOptions = (props) => {
</div>
{
props.open ? (
<div className={cn([styles.streamViewingOptionsList, 'streamViewingOptionsList'])}>
<div className={cn([styles.streamViewingOptionsList, 'coral-plugin-viewing-options-list'])}>
<ul>
{
React.Children.map(<Slot fill="streamViewingOptions" />, (component) => {
React.Children.map(<Slot fill="viewingOptions" />, (component) => {
return React.createElement('li', {
className: 'viewingOption'
className: 'coral-plugin-viewing-options-item'
}, component);
})
}