From bf3b02837000165db27366287d580c2828308d00 Mon Sep 17 00:00:00 2001 From: Dan Zajdband Date: Wed, 30 Nov 2016 15:09:42 -0500 Subject: [PATCH 1/6] Close comments: WIP --- .gitignore | 1 + .../coral-embed-stream/src/CommentStream.js | 67 ++++++++++++++++++- client/coral-embed-stream/style/default.css | 39 +++++++++++ 3 files changed, 105 insertions(+), 2 deletions(-) diff --git a/.gitignore b/.gitignore index 3b59ff2f5..3c51c1db4 100644 --- a/.gitignore +++ b/.gitignore @@ -5,6 +5,7 @@ dist dist/coral-admin/bundle.js .DS_Store *.iml +dump.rdb .env gaba.cfg .idea/ diff --git a/client/coral-embed-stream/src/CommentStream.js b/client/coral-embed-stream/src/CommentStream.js index 95a6f63f3..a78b2f72c 100644 --- a/client/coral-embed-stream/src/CommentStream.js +++ b/client/coral-embed-stream/src/CommentStream.js @@ -19,8 +19,9 @@ import LikeButton from '../../coral-plugin-likes/LikeButton'; import PermalinkButton from '../../coral-plugin-permalinks/PermalinkButton'; import SignInContainer from '../../coral-sign-in/containers/SignInContainer'; import UserBox from '../../coral-sign-in/components/UserBox'; -import {TabBar, Tab, TabContent} from '../../coral-ui'; +import {TabBar, Tab, TabContent, Button} from '../../coral-ui'; import SettingsContainer from '../../coral-settings/containers/SettingsContainer'; +import {Icon} from 'react-mdl'; const {addItem, updateItem, postItem, getStream, postAction, deleteAction, appendItemArray} = itemActions; const {addNotification, clearNotification} = notificationActions; @@ -57,10 +58,15 @@ class CommentStream extends Component { super(props); this.state = { - activeTab: 0 + activeTab: 0, + closingComments: false }; this.changeTab = this.changeTab.bind(this); + this.changeCommentMessage = this.changeCommentMessage.bind(this); + this.promptCloseComments = this.promptCloseComments.bind(this); + this.cancelClosingComments = this.cancelClosingComments.bind(this); + this.submitMessage = this.submitMessage.bind(this); } changeTab (tab) { @@ -69,6 +75,26 @@ class CommentStream extends Component { }); } + changeCommentMessage (str) { + + } + + submitMessage () { + + } + + cancelClosingComments () { + this.setState({ + closingComments: false + }); + } + + promptCloseComments () { + this.setState({ + closingComments: true + }); + } + static propTypes = { items: PropTypes.object.isRequired, addItem: PropTypes.func.isRequired, @@ -136,6 +162,7 @@ class CommentStream extends Component { Settings + Configure Stream @@ -269,6 +296,17 @@ class CommentStream extends Component { + +

Close Comment Stream

+ + {this.state.closingComments ? + : null} + : 'Loading' } @@ -276,4 +314,29 @@ class CommentStream extends Component { } } +const CloseCommentsInfo = ({ closing, onClick }) => ( +
+

+ This comment stream is currently open. By closing this comment stream, + no new comments may be submitted and all previous comments will still + be displayed. +

+ +
+) + +const CloseCommentsActions = ({ onChangeMessage, message, onCancel, onSubmitMessage }) => ( +
+

Are you sure you'd like to close this comment stream?

+

Write a message for readers to display

+ +
+ + +
+
+) + export default connect(mapStateToProps, mapDispatchToProps)(CommentStream); diff --git a/client/coral-embed-stream/style/default.css b/client/coral-embed-stream/style/default.css index 12bdfacae..f83541527 100644 --- a/client/coral-embed-stream/style/default.css +++ b/client/coral-embed-stream/style/default.css @@ -193,3 +193,42 @@ hr { float: right; margin: 8px; } + +/* Close comments */ + +.close-comments-intro-wrapper { + display: flex; + justify-content: space-between; + align-items: center; +} + +.close-comments-intro-wrapper button { + width: 300px; + margin-left: 20px; +} + +.close-comments-intro-wrapper button:disabled { + opacity: 0.5; + cursor: not-allowed; +} + +.close-comments-message { + box-sizing: border-box; + width: 100%; + height: 100px; +} + +.close-comments-confirm-wrapper { + float: right; +} + +.close-comments-alert { + background-color: #d65344; + color: white; + font-size: 16px; + padding: 5px; +} + +.close-comments-alert i.material-icons { + font-size: 16px !important; +} From 4be258c63d1353d292c2bd673c913713e90ffb08 Mon Sep 17 00:00:00 2001 From: Dan Zajdband Date: Mon, 5 Dec 2016 11:02:39 -0500 Subject: [PATCH 2/6] Added simple open/close flow --- .../coral-embed-stream/src/CommentStream.js | 68 ++++++------------- client/coral-framework/actions/config.js | 18 +++++ client/coral-framework/index.js | 2 + client/coral-framework/reducers/config.js | 17 ++++- models/asset.js | 6 +- routes/api/asset/index.js | 12 ++++ 6 files changed, 71 insertions(+), 52 deletions(-) create mode 100644 client/coral-framework/actions/config.js diff --git a/client/coral-embed-stream/src/CommentStream.js b/client/coral-embed-stream/src/CommentStream.js index a78b2f72c..db1ef96b3 100644 --- a/client/coral-embed-stream/src/CommentStream.js +++ b/client/coral-embed-stream/src/CommentStream.js @@ -4,6 +4,7 @@ import { Notification, notificationActions, authActions, + configActions } from '../../coral-framework'; import {connect} from 'react-redux'; import CommentBox from '../../coral-plugin-commentbox/CommentBox'; @@ -26,6 +27,7 @@ import {Icon} from 'react-mdl'; const {addItem, updateItem, postItem, getStream, postAction, deleteAction, appendItemArray} = itemActions; const {addNotification, clearNotification} = notificationActions; const {logout} = authActions; +const {updateOpenStatus} = configActions; const mapStateToProps = (state) => { return { @@ -50,6 +52,7 @@ const mapDispatchToProps = (dispatch) => ({ appendItemArray: (item, property, value, addToFront, itemType) => dispatch(appendItemArray(item, property, value, addToFront, itemType)), logout: () => dispatch(logout()), + updateStatus: status => dispatch(updateOpenStatus(status)) }); class CommentStream extends Component { @@ -58,15 +61,11 @@ class CommentStream extends Component { super(props); this.state = { - activeTab: 0, - closingComments: false + activeTab: 0 }; this.changeTab = this.changeTab.bind(this); - this.changeCommentMessage = this.changeCommentMessage.bind(this); - this.promptCloseComments = this.promptCloseComments.bind(this); - this.cancelClosingComments = this.cancelClosingComments.bind(this); - this.submitMessage = this.submitMessage.bind(this); + this.toggleStatus = this.toggleStatus.bind(this); } changeTab (tab) { @@ -75,24 +74,8 @@ class CommentStream extends Component { }); } - changeCommentMessage (str) { - - } - - submitMessage () { - - } - - cancelClosingComments () { - this.setState({ - closingComments: false - }); - } - - promptCloseComments () { - this.setState({ - closingComments: true - }); + toggleStatus () { + this.props.updateStatus(this.props.config.status === 'open' ? 'closed' : 'open') } static propTypes = { @@ -153,6 +136,7 @@ class CommentStream extends Component { const rootItem = this.props.items.assets && this.props.items.assets[rootItemId]; const {actions, users, comments} = this.props.items; const {loggedIn, user, showSignInDialog} = this.props.auth; + const {status} = this.props.config; const {activeTab} = this.state; return
@@ -297,15 +281,9 @@ class CommentStream extends Component { -

Close Comment Stream

- - {this.state.closingComments ? - : null} +

{status === 'open' ? 'Close' : 'Open'} Comment Stream

+
: 'Loading' @@ -314,28 +292,22 @@ class CommentStream extends Component { } } -const CloseCommentsInfo = ({ closing, onClick }) => ( +const CloseCommentsInfo = ({ status, onClick }) => status === 'open' ? (

This comment stream is currently open. By closing this comment stream, no new comments may be submitted and all previous comments will still be displayed.

- +
-) - -const CloseCommentsActions = ({ onChangeMessage, message, onCancel, onSubmitMessage }) => ( -
-

Are you sure you'd like to close this comment stream?

-

Write a message for readers to display

- -
- - -
+) : ( +
+

+ This comment stream is currently closed. By opening this comment stream, + new comments may be submitted and displayed +

+
) diff --git a/client/coral-framework/actions/config.js b/client/coral-framework/actions/config.js new file mode 100644 index 000000000..09b4596a7 --- /dev/null +++ b/client/coral-framework/actions/config.js @@ -0,0 +1,18 @@ +import coralApi from '../helpers/response'; +/* Config Actions */ + +/** + * Action name constants + */ + +export const OPEN_COMMENTS = 'OPEN_COMMENTS'; +export const CLOSE_COMMENTS = 'CLOSE_COMMENTS'; +export const ADD_ITEM = 'ADD_ITEM'; + +export const updateOpenStatus = status => (dispatch, getState) => { + const assetId = getState().items.get('assets').keySeq().toArray()[0] + return coralApi(`/asset/${assetId}/status?status=${status}`, {method: 'PUT'}) + .then(res => { + dispatch({ type: status === 'open' ? OPEN_COMMENTS : CLOSE_COMMENTS }) + }) +} diff --git a/client/coral-framework/index.js b/client/coral-framework/index.js index 7b721badc..9a679d969 100644 --- a/client/coral-framework/index.js +++ b/client/coral-framework/index.js @@ -4,6 +4,7 @@ import * as itemActions from './actions/items'; import I18n from './modules/i18n/i18n'; import * as notificationActions from './actions/notification'; import * as authActions from './actions/auth'; +import * as configActions from './actions/config'; export { Notification, @@ -12,4 +13,5 @@ export { I18n, notificationActions, authActions, + configActions }; diff --git a/client/coral-framework/reducers/config.js b/client/coral-framework/reducers/config.js index 6521d92a3..9620f5b97 100644 --- a/client/coral-framework/reducers/config.js +++ b/client/coral-framework/reducers/config.js @@ -1,19 +1,30 @@ /* @flow */ import {Map} from 'immutable'; -import * as actions from '../actions/items'; +import * as actions from '../actions/config'; const initialState = Map({ - features: Map({}) + features: Map({}), + status: 'open' }); export default (state = initialState, action) => { switch(action.type) { - // Override config if worked case actions.UPDATE_SETTINGS: return action.config; + case actions.OPEN_COMMENTS: + return state.set('status', 'open'); + + case actions.CLOSE_COMMENTS: + return state.set('status', 'closed'); + + case actions.ADD_ITEM: + return action.item_type === 'assets' ? + state.set('status', action.item.status) + : state; + default: return state; } diff --git a/models/asset.js b/models/asset.js index 00251985a..165ebbc6c 100644 --- a/models/asset.js +++ b/models/asset.js @@ -34,7 +34,11 @@ const AssetSchema = new Schema({ subsection: String, author: String, publication_date: Date, - modified_date: Date + modified_date: Date, + status: { + type: String, + default: 'open' + } }, { versionKey: false, timestamps: { diff --git a/routes/api/asset/index.js b/routes/api/asset/index.js index 96b83a969..30cb98528 100644 --- a/routes/api/asset/index.js +++ b/routes/api/asset/index.js @@ -96,4 +96,16 @@ router.put('/:asset_id/settings', (req, res, next) => { }); +router.put('/:asset_id/status', (req, res, next) => { + // Update the asset status + Asset + .update({ id: req.params.asset_id }, { status: req.query.status }) + .then((asset) => { + res.status(204).end(); + }) + .catch((err) => { + next(err); + }); +}); + module.exports = router; From 95ec57c64df27c42e7c469ad1c125172efc8551e Mon Sep 17 00:00:00 2001 From: Dan Zajdband Date: Mon, 5 Dec 2016 11:11:21 -0500 Subject: [PATCH 3/6] Added default message on thread --- .../coral-embed-stream/src/CommentStream.js | 40 ++++++++++--------- 1 file changed, 22 insertions(+), 18 deletions(-) diff --git a/client/coral-embed-stream/src/CommentStream.js b/client/coral-embed-stream/src/CommentStream.js index db1ef96b3..d2a7ddd18 100644 --- a/client/coral-embed-stream/src/CommentStream.js +++ b/client/coral-embed-stream/src/CommentStream.js @@ -150,24 +150,28 @@ class CommentStream extends Component { -
- - {loggedIn && } - - {!loggedIn && } -
+ { + status === 'open' + ?
+ + {loggedIn && } + + {!loggedIn && } +
+ :

Comments are closed for this thread

+ } { rootItem.comments && rootItem.comments.map((commentId) => { const comment = comments[commentId]; From 568e46f1e3b9e3745c4579851efb7ee4ec225c8b Mon Sep 17 00:00:00 2001 From: Dan Zajdband Date: Mon, 5 Dec 2016 17:02:21 -0500 Subject: [PATCH 4/6] Added restricted wrapper --- client/coral-embed-stream/src/CommentStream.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/client/coral-embed-stream/src/CommentStream.js b/client/coral-embed-stream/src/CommentStream.js index 7973c2a85..1922d3c3d 100644 --- a/client/coral-embed-stream/src/CommentStream.js +++ b/client/coral-embed-stream/src/CommentStream.js @@ -248,8 +248,10 @@ class CommentStream extends Component {

{status === 'open' ? 'Close' : 'Open'} Comment Stream

- + + + Date: Mon, 5 Dec 2016 19:18:29 -0300 Subject: [PATCH 5/6] Lint --- .../coral-embed-stream/src/CommentStream.js | 295 +++++++++--------- client/coral-framework/actions/config.js | 10 +- routes/api/asset/index.js | 10 +- 3 files changed, 155 insertions(+), 160 deletions(-) diff --git a/client/coral-embed-stream/src/CommentStream.js b/client/coral-embed-stream/src/CommentStream.js index 1922d3c3d..d46042df8 100644 --- a/client/coral-embed-stream/src/CommentStream.js +++ b/client/coral-embed-stream/src/CommentStream.js @@ -53,7 +53,7 @@ class CommentStream extends Component { } toggleStatus () { - this.props.updateStatus(this.props.config.status === 'open' ? 'closed' : 'open') + this.props.updateStatus(this.props.config.status === 'open' ? 'closed' : 'open'); } static propTypes = { @@ -105,154 +105,153 @@ class CommentStream extends Component { {/* Add to the restricted param a boolean if the user is suspended*/} }> - { - status === 'open' - ?
- - - {!loggedIn && } -
- :

Comments are closed for this thread.

- } - { - rootItem.comments && rootItem.comments.map((commentId) => { - const comment = comments[commentId]; - return
-
- - - -
- + + + {!loggedIn && } +
+ :

Comments are closed for this thread.

+ } + { + rootItem.comments && rootItem.comments.map((commentId) => { + const comment = comments[commentId]; + return
+
+ + + +
+ + +
+
+ + +
+ - -
-
- - -
- - { - comment.children && - comment.children.map((replyId) => { - let reply = this.props.items.comments[replyId]; - return
-
- - - -
- { + let reply = this.props.items.comments[replyId]; + return
+
+ + + +
+ + +
+
+ + +
+ - -
-
- - -
- -
; - }) - } -
; - }) - } - - - - - - -

{status === 'open' ? 'Close' : 'Open'} Comment Stream

- - - - +
; + }) + } +
; + }) + } + + + + + + +

{status === 'open' ? 'Close' : 'Open'} Comment Stream

+ + + + : - + } ; } } -const CloseCommentsInfo = ({ status, onClick }) => status === 'open' ? ( +const CloseCommentsInfo = ({status, onClick}) => status === 'open' ? (

This comment stream is currently open. By closing this comment stream, @@ -284,7 +283,7 @@ const CloseCommentsInfo = ({ status, onClick }) => status === 'open' ? (

-) +); const mapStateToProps = state => ({ config: state.config.toJS(), diff --git a/client/coral-framework/actions/config.js b/client/coral-framework/actions/config.js index 09b4596a7..6dc880434 100644 --- a/client/coral-framework/actions/config.js +++ b/client/coral-framework/actions/config.js @@ -10,9 +10,9 @@ export const CLOSE_COMMENTS = 'CLOSE_COMMENTS'; export const ADD_ITEM = 'ADD_ITEM'; export const updateOpenStatus = status => (dispatch, getState) => { - const assetId = getState().items.get('assets').keySeq().toArray()[0] + const assetId = getState().items.get('assets') + .keySeq() + .toArray()[0]; return coralApi(`/asset/${assetId}/status?status=${status}`, {method: 'PUT'}) - .then(res => { - dispatch({ type: status === 'open' ? OPEN_COMMENTS : CLOSE_COMMENTS }) - }) -} + .then(() => dispatch({type: status === 'open' ? OPEN_COMMENTS : CLOSE_COMMENTS})); +}; diff --git a/routes/api/asset/index.js b/routes/api/asset/index.js index 30cb98528..05926bc15 100644 --- a/routes/api/asset/index.js +++ b/routes/api/asset/index.js @@ -99,13 +99,9 @@ router.put('/:asset_id/settings', (req, res, next) => { router.put('/:asset_id/status', (req, res, next) => { // Update the asset status Asset - .update({ id: req.params.asset_id }, { status: req.query.status }) - .then((asset) => { - res.status(204).end(); - }) - .catch((err) => { - next(err); - }); + .update({id: req.params.asset_id}, {status: req.query.status}) + .then(() => res.status(204).end()) + .catch((err) => next(err)); }); module.exports = router; From 08e232c4fe2f30e96963e8201a203dc7c4d73d3d Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Mon, 5 Dec 2016 19:28:47 -0300 Subject: [PATCH 6/6] User Should still be able to see sign info even if its closed // moving comp --- .../coral-embed-stream/src/CommentStream.js | 24 +++---------------- .../components/CloseCommentsInfo.js | 23 ++++++++++++++++++ 2 files changed, 26 insertions(+), 21 deletions(-) create mode 100644 client/coral-framework/components/CloseCommentsInfo.js diff --git a/client/coral-embed-stream/src/CommentStream.js b/client/coral-embed-stream/src/CommentStream.js index d46042df8..753455d8d 100644 --- a/client/coral-embed-stream/src/CommentStream.js +++ b/client/coral-embed-stream/src/CommentStream.js @@ -23,10 +23,11 @@ import PermalinkButton from '../../coral-plugin-permalinks/PermalinkButton'; import SignInContainer from '../../coral-sign-in/containers/SignInContainer'; import UserBox from '../../coral-sign-in/components/UserBox'; -import {TabBar, Tab, TabContent, Spinner, Button} from '../../coral-ui'; +import {TabBar, Tab, TabContent, Spinner} from '../../coral-ui'; import SettingsContainer from '../../coral-settings/containers/SettingsContainer'; import RestrictedContent from '../../coral-framework/components/RestrictedContent'; import SuspendedAccount from '../../coral-framework/components/SuspendedAccount'; +import CloseCommentsInfo from '../../coral-framework/components/CloseCommentsInfo'; const {addItem, updateItem, postItem, getStream, postAction, deleteAction, appendItemArray} = itemActions; const {addNotification, clearNotification} = notificationActions; @@ -122,10 +123,10 @@ class CommentStream extends Component { reply={false} author={user} /> - {!loggedIn && } :

Comments are closed for this thread.

} + {!loggedIn && } { rootItem.comments && rootItem.comments.map((commentId) => { const comment = comments[commentId]; @@ -266,25 +267,6 @@ class CommentStream extends Component { } } -const CloseCommentsInfo = ({status, onClick}) => status === 'open' ? ( -
-

- This comment stream is currently open. By closing this comment stream, - no new comments may be submitted and all previous comments will still - be displayed. -

- -
-) : ( -
-

- This comment stream is currently closed. By opening this comment stream, - new comments may be submitted and displayed -

- -
-); - const mapStateToProps = state => ({ config: state.config.toJS(), items: state.items.toJS(), diff --git a/client/coral-framework/components/CloseCommentsInfo.js b/client/coral-framework/components/CloseCommentsInfo.js new file mode 100644 index 000000000..627328f9b --- /dev/null +++ b/client/coral-framework/components/CloseCommentsInfo.js @@ -0,0 +1,23 @@ +import React from 'react'; +import {Button} from 'coral-ui'; + +export default ({status, onClick}) => ( + status === 'open' ? ( +
+

+ This comment stream is currently open. By closing this comment stream, + no new comments may be submitted and all previous comments will still + be displayed. +

+ +
+ ) : ( +
+

+ This comment stream is currently closed. By opening this comment stream, + new comments may be submitted and displayed +

+ +
+ ) +);