Text take Github Flavored Markdown. Comments older than 24 hours are deleted.
- Name is preserved, Text is reset, between submits.
+ Name is preserved, Text is reset, between submits.
+
+ actions={actions}
+ />
+ $$comments={data.get('$$comments')}
+ error={data.get('fetchCommentError')}
+ />
);
},
diff --git a/client/app/components/CommentForm.jsx b/client/app/components/CommentForm.jsx
new file mode 100644
index 000000000..c9b3c5dff
--- /dev/null
+++ b/client/app/components/CommentForm.jsx
@@ -0,0 +1,244 @@
+import React, { PropTypes } from 'react';
+import Input from 'react-bootstrap/lib/Input';
+import Row from 'react-bootstrap/lib/Row';
+import Col from 'react-bootstrap/lib/Col';
+import Nav from 'react-bootstrap/lib/Nav';
+import NavItem from 'react-bootstrap/lib/NavItem';
+import Alert from 'react-bootstrap/lib/Alert';
+import ReactCSSTransitionGroup from 'react/lib/ReactCSSTransitionGroup';
+
+const emptyComment = { author: '', text: '' };
+const textPlaceholder = 'Say something using markdown...';
+
+const CommentForm = React.createClass({
+ displayName: 'CommentForm',
+
+ propTypes: {
+ ajaxSending: PropTypes.bool.isRequired,
+ actions: PropTypes.object.isRequired,
+ error: PropTypes.any,
+ },
+
+ getInitialState() {
+ return {
+ formMode: 0,
+ comment: emptyComment,
+ };
+ },
+
+ handleSelect(selectedKey) {
+ this.setState({ formMode: selectedKey });
+ },
+
+ handleChange() {
+ let comment;
+
+ // This could also be done using ReactLink:
+ // http://facebook.github.io/react/docs/two-way-binding-helpers.html
+ if (this.state.formMode < 2) { + comment = { + author: this.refs.author.getValue(), + text: this.refs.text.getValue(), + }; + } else { + comment = { + // This is different because the input is a native HTML element + // rather than a React element. + author: this.refs.inlineAuthor.getDOMNode().value, + text: this.refs.inlineText.getDOMNode().value, + }; + } + + this.setState({ comment }); + }, + + handleSubmit(e) { + e.preventDefault(); + const { actions } = this.props; + actions + .submitComment(this.state.comment) + .then(this.resetAndFocus); + }, + + resetAndFocus() { + // Don't reset a form that didn't submit, this results in data loss + if (this.props.error) return; + + const comment = { author: this.state.comment.author, text: '' }; + this.setState({ comment }); + + let ref; + if (this.state.formMode < 2) { + ref = this.refs.text.getInputDOMNode(); + } else { + ref = React.findDOMNode(this.refs.inlineText); + } + + ref.focus(); + }, + + formHorizontal() { + return ( +
+
+
+
+ );
+ },
+
+ formStacked() {
+ return (
+
+
+
+
+ );
+ },
+
+ formInline() {
+ return (
+
+
+
+
+ );
+ },
+
+ errorWarning() {
+ // If there is no error, there is nothing to add to the DOM
+ if (!this.props.error) return undefined;
+ return (
+
+ Your comment was not saved!
+ A server error prevented your comment from being saved. Please try again.
+
+ );
+ },
+
+ render() {
+ let inputForm;
+ switch (this.state.formMode) {
+ case 0:
+ inputForm = this.formHorizontal();
+ break;
+ case 1:
+ inputForm = this.formStacked();
+ break;
+ case 2:
+ inputForm = this.formInline();
+ break;
+ default:
+ throw new Error(`Unknown form mode: ${this.state.formMode}.`);
+ }
+ return (
+
+
+
+ {this.errorWarning()}
+
+
+
+ {inputForm}
+
+ );
+ },
+});
+
+export default CommentForm;
diff --git a/client/assets/javascripts/components/CommentList.jsx b/client/app/components/CommentList.jsx
similarity index 55%
rename from client/assets/javascripts/components/CommentList.jsx
rename to client/app/components/CommentList.jsx
index 48a5a92ac..0f95a4e45 100644
--- a/client/assets/javascripts/components/CommentList.jsx
+++ b/client/app/components/CommentList.jsx
@@ -1,42 +1,50 @@
-import React from 'react';
-import Comment from './Comment';
+import React, { PropTypes } from 'react';
+import Immutable from 'immutable';
import Alert from 'react-bootstrap/lib/Alert';
import ReactCSSTransitionGroup from 'react/lib/ReactCSSTransitionGroup';
+import Comment from './Comment';
+
const CommentList = React.createClass({
displayName: 'CommentList',
propTypes: {
- comments: React.PropTypes.object,
- error: React.PropTypes.any.isRequired,
+ $$comments: PropTypes.instanceOf(Immutable.List).isRequired,
+ error: PropTypes.any,
},
errorWarning() {
// If there is no error, there is nothing to add to the DOM
if (!this.props.error) return undefined;
return (
-
- Comments could not be retrieved. A server error prevented loading comments. Please try again.
+
+ Comments could not be retrieved.
+ A server error prevented loading comments. Please try again.
);
},
render() {
- const commentNodes = this.props.comments.reverse().map((comment, index) => {
+ const { $$comments } = this.props;
+ const commentNodes = $$comments.reverse().map(($$comment, index) => {
// `key` is a React-specific concept and is not mandatory for the
// purpose of this tutorial. if you're curious, see more here:
// http://facebook.github.io/react/docs/multiple-components.html#dynamic-children
return (
-
+
);
});
return (
-
+
{this.errorWarning()}
-
+
{commentNodes}
diff --git a/client/app/components/CommentScreen.jsx b/client/app/components/CommentScreen.jsx
new file mode 100644
index 000000000..40439789e
--- /dev/null
+++ b/client/app/components/CommentScreen.jsx
@@ -0,0 +1,49 @@
+import React, { PropTypes } from 'react';
+import CommentBox from './CommentBox';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import * as commentsActionCreators from '../actions/commentsActionCreators';
+
+function select(state) {
+ // Which part of the Redux global state does our component want to receive as props?
+ return { data: state.$$commentsStore };
+}
+
+const CommentScreen = React.createClass({
+ displayName: 'CommentScreen',
+
+ propTypes: {
+ dispatch: PropTypes.func.isRequired,
+ data: PropTypes.object.isRequired,
+ },
+
+ render() {
+ const { dispatch, data } = this.props;
+ const actions = bindActionCreators(commentsActionCreators, dispatch);
+ return (
+
+ );
+ },
+});
+
+// Don't forget to actually use connect!
+export default connect(select)(CommentScreen);
diff --git a/client/assets/javascripts/constants/ActionTypes.js b/client/app/constants/commentsConstants.js
similarity index 100%
rename from client/assets/javascripts/constants/ActionTypes.js
rename to client/app/constants/commentsConstants.js
diff --git a/client/assets/javascripts/middleware/loggerMiddleware.js b/client/app/middlewares/loggerMiddleware.js
similarity index 100%
rename from client/assets/javascripts/middleware/loggerMiddleware.js
rename to client/app/middlewares/loggerMiddleware.js
diff --git a/client/app/reducers/commentsReducer.js b/client/app/reducers/commentsReducer.js
new file mode 100644
index 000000000..5ed231b1f
--- /dev/null
+++ b/client/app/reducers/commentsReducer.js
@@ -0,0 +1,65 @@
+/* eslint new-cap: 0 */
+
+import Immutable from 'immutable';
+
+import * as actionTypes from '../constants/commentsConstants';
+
+export const $$initialState = Immutable.fromJS({
+ $$comments: [],
+ ajaxCounter: 0,
+ fetchCommentError: null,
+ submitCommentError: null,
+});
+
+export default function commentsReducer($$state = $$initialState, action) {
+ const { type, comment, comments, error } = action;
+
+ switch (type) {
+
+ case actionTypes.FETCH_COMMENTS_SUCCESS: {
+ return $$state.merge({
+ $$comments: comments,
+ fetchCommentError: null,
+ });
+ }
+
+ case actionTypes.FETCH_COMMENTS_FAILURE: {
+ return $$state.merge({
+ fetchCommentError: error,
+ });
+ }
+
+ case actionTypes.SUBMIT_COMMENT_SUCCESS: {
+ return $$state.withMutations(state => (
+ state
+ .updateIn(
+ ['$$comments'],
+ $$comments => $$comments.push(Immutable.fromJS(comment))
+ )
+ .merge({ submitCommentError: null })
+ ));
+ }
+
+ case actionTypes.SUBMIT_COMMENT_FAILURE: {
+ return $$state.merge({
+ submitCommentError: error,
+ });
+ }
+
+ case actionTypes.INCREMENT_AJAX_COUNTER: {
+ return $$state.merge({
+ ajaxCounter: $$state.get('ajaxCounter') + 1,
+ });
+ }
+
+ case actionTypes.DECREMENT_AJAX_COUNTER: {
+ return $$state.merge({
+ ajaxCounter: $$state.get('ajaxCounter') - 1,
+ });
+ }
+
+ default: {
+ return $$state;
+ }
+ }
+}
diff --git a/client/app/reducers/index.js b/client/app/reducers/index.js
new file mode 100644
index 000000000..028795b53
--- /dev/null
+++ b/client/app/reducers/index.js
@@ -0,0 +1,10 @@
+import commentsReducer from './commentsReducer';
+import { $$initialState as $$commentsState } from './commentsReducer';
+
+export default {
+ $$commentsStore: commentsReducer,
+};
+
+export const initalStates = {
+ $$commentsState,
+};
diff --git a/client/assets/javascripts/ClientApp.jsx b/client/app/startup/ClientApp.jsx
similarity index 55%
rename from client/assets/javascripts/ClientApp.jsx
rename to client/app/startup/ClientApp.jsx
index fe28bb08c..dbdc2f932 100644
--- a/client/assets/javascripts/ClientApp.jsx
+++ b/client/app/startup/ClientApp.jsx
@@ -1,12 +1,13 @@
import React from 'react';
import { Provider } from 'react-redux';
-import CommentScreen from './components/CommentScreen';
-import CommentStore from './stores/CommentStore';
+import createStore from '../stores/commentsStore';
+import CommentScreen from '../components/CommentScreen';
-const App = () => {
+const App = props => {
+ const store = createStore(props);
const reactComponent = (
-
+
{() => }
);
diff --git a/client/app/startup/ServerApp.jsx b/client/app/startup/ServerApp.jsx
new file mode 100644
index 000000000..698277229
--- /dev/null
+++ b/client/app/startup/ServerApp.jsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { Provider } from 'react-redux';
+
+import createStore from '../stores/commentsStore';
+import CommentScreen from '../components/CommentScreen';
+
+const App = props => {
+ const store = createStore(props);
+ const reactComponent = (
+
+ {() => }
+
+ );
+ return reactComponent;
+};
+
+export default App;
diff --git a/client/assets/javascripts/clientGlobals.jsx b/client/app/startup/clientGlobals.jsx
similarity index 100%
rename from client/assets/javascripts/clientGlobals.jsx
rename to client/app/startup/clientGlobals.jsx
diff --git a/client/assets/javascripts/serverGlobals.jsx b/client/app/startup/serverGlobals.jsx
similarity index 100%
rename from client/assets/javascripts/serverGlobals.jsx
rename to client/app/startup/serverGlobals.jsx
diff --git a/client/app/stores/commentsStore.js b/client/app/stores/commentsStore.js
new file mode 100644
index 000000000..0622dce70
--- /dev/null
+++ b/client/app/stores/commentsStore.js
@@ -0,0 +1,24 @@
+import { compose, createStore, applyMiddleware, combineReducers } from 'redux';
+import thunkMiddleware from 'redux-thunk';
+import loggerMiddleware from '../middlewares/loggerMiddleware';
+import reducers from '../reducers';
+import { initalStates } from '../reducers';
+
+export default props => {
+ const initialComments = props;
+ const { $$commentsState } = initalStates;
+ const initialState = {
+ $$commentsStore: $$commentsState.merge({
+ $$comments: initialComments,
+ }),
+ };
+
+ const reducer = combineReducers(reducers);
+ const composedStore = compose(
+ applyMiddleware(thunkMiddleware, loggerMiddleware)
+ );
+ const storeCreator = composedStore(createStore);
+ const store = storeCreator(reducer, initialState);
+
+ return store;
+};
diff --git a/client/assets/javascripts/utils/CommentsManager.js b/client/app/utils/commentsManager.js
similarity index 90%
rename from client/assets/javascripts/utils/CommentsManager.js
rename to client/app/utils/commentsManager.js
index c501968f8..6698ace2e 100644
--- a/client/assets/javascripts/utils/CommentsManager.js
+++ b/client/app/utils/commentsManager.js
@@ -7,7 +7,7 @@ const CommentsManager = {
/**
* Retrieve comments from server using AJAX call.
*
- * @returns {Promise} - jqXHR result of ajax call.
+ * @returns {Promise} - result of ajax call.
*/
fetchComments() {
return request({
@@ -21,7 +21,7 @@ const CommentsManager = {
* Submit new comment to server using AJAX call.
*
* @param {Object} comment - Comment body to post.
- * @returns {Promise} - jqXHR result of ajax call.
+ * @returns {Promise} - result of ajax call.
*/
submitComment(comment) {
return request({
diff --git a/client/assets/javascripts/ServerApp.jsx b/client/assets/javascripts/ServerApp.jsx
deleted file mode 100755
index fe28bb08c..000000000
--- a/client/assets/javascripts/ServerApp.jsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react';
-import { Provider } from 'react-redux';
-
-import CommentScreen from './components/CommentScreen';
-import CommentStore from './stores/CommentStore';
-
-const App = () => {
- const reactComponent = (
-
- {() => }
-
- );
- return reactComponent;
-};
-
-// Export is needed for the hot reload server
-export default App;
diff --git a/client/assets/javascripts/components/Comment.jsx b/client/assets/javascripts/components/Comment.jsx
deleted file mode 100644
index d6d5a4e97..000000000
--- a/client/assets/javascripts/components/Comment.jsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import marked from 'marked';
-import React from 'react';
-
-const Comment = React.createClass({
- displayName: 'Comment',
-
- propTypes: {
- author: React.PropTypes.string.isRequired,
- text: React.PropTypes.string.isRequired,
- },
-
- render() {
- const rawMarkup = marked(this.props.text, { gfm: true, sanitize: true });
- return (
-
-
- {this.props.author}
-
-
-
- );
- },
-});
-
-export default Comment;
diff --git a/client/assets/javascripts/components/CommentForm.jsx b/client/assets/javascripts/components/CommentForm.jsx
deleted file mode 100644
index 1533415b0..000000000
--- a/client/assets/javascripts/components/CommentForm.jsx
+++ /dev/null
@@ -1,198 +0,0 @@
-import React from 'react/addons';
-import Input from 'react-bootstrap/lib/Input';
-import Row from 'react-bootstrap/lib/Row';
-import Col from 'react-bootstrap/lib/Col';
-import Nav from 'react-bootstrap/lib/Nav';
-import NavItem from 'react-bootstrap/lib/NavItem';
-import Alert from 'react-bootstrap/lib/Alert';
-import ReactCSSTransitionGroup from 'react/lib/ReactCSSTransitionGroup';
-
-const emptyComment = {author: '', text: ''};
-const textPlaceholder = 'Say something using markdown...';
-
-const CommentForm = React.createClass({
- displayName: 'CommentForm',
-
- propTypes: {
- ajaxSending: React.PropTypes.bool.isRequired,
- actions: React.PropTypes.object.isRequired,
- error: React.PropTypes.any.isRequired,
- },
-
- getInitialState() {
- return {
- formMode: 0,
- comment: emptyComment,
- };
- },
-
- handleSelect(selectedKey) {
- this.setState({formMode: selectedKey});
- },
-
- handleChange() {
- let comment;
-
- // This could also be done using ReactLink:
- // http://facebook.github.io/react/docs/two-way-binding-helpers.html
- if (this.state.formMode < 2) { - comment = { - author: this.refs.author.getValue(), - text: this.refs.text.getValue(), - }; - } else { - comment = { - // This is different because the input is a native HTML element - // rather than a React element. - author: this.refs.inlineAuthor.getDOMNode().value, - text: this.refs.inlineText.getDOMNode().value, - }; - } - - this.setState({comment}); - }, - - handleSubmit(e) { - e.preventDefault(); - this.props.actions.submitComment(this.state.comment).then( - () => this.resetAndFocus()
- );
- },
-
- resetAndFocus() {
- // Don't reset a form that didn't submit, this results in data loss
- if (this.props.error) return;
-
- const comment = {author: this.state.comment.author, text: ''};
- this.setState({comment});
-
- let ref;
- if (this.state.formMode < 2) { - ref = this.refs.text.getInputDOMNode(); - } else { - ref = React.findDOMNode(this.refs.inlineText); - } - - ref.focus(); - }, - - formHorizontal() { - return ( -
-
-
-
- );
- },
-
- formStacked() {
- return (
-
-
-
-
- );
- },
-
- formInline() {
- return (
-
-
-
-
- );
- },
-
- errorWarning() {
- // If there is no error, there is nothing to add to the DOM
- if (!this.props.error) return undefined;
- return (
-
- Your comment was not saved! A server error prevented your comment from being saved. Please try
- again.
-
- );
- },
-
- render() {
- let inputForm;
- switch (this.state.formMode) {
- case 0:
- inputForm = this.formHorizontal();
- break;
- case 1:
- inputForm = this.formStacked();
- break;
- case 2:
- inputForm = this.formInline();
- break;
- default:
- throw new Error(`Unknown form mode: ${this.state.formMode}.`);
- }
- return (
-
-
-
- {this.errorWarning()}
-
-
-
- {inputForm}
-
- );
- },
-});
-
-export default CommentForm;
diff --git a/client/assets/javascripts/components/CommentScreen.jsx b/client/assets/javascripts/components/CommentScreen.jsx
deleted file mode 100644
index 843c37a53..000000000
--- a/client/assets/javascripts/components/CommentScreen.jsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import React from 'react';
-import CommentBox from './CommentBox';
-import { connect } from 'react-redux';
-import { bindActionCreators } from 'redux';
-import { fetchComments, submitComment } from '../actions/CommentActionCreators';
-
-const CommentActionsCreators = { fetchComments, submitComment };
-
-function select(state) {
- // Which part of the Redux global state does our component want to receive as props?
- return { data: state.commentsData };
-}
-
-const CommentScreen = React.createClass({
- displayName: 'CommentScreen',
-
- propTypes: {
- dispatch: React.PropTypes.func.isRequired,
- data: React.PropTypes.object.isRequired,
- },
-
- render() {
- const { dispatch, data } = this.props;
- const actions = bindActionCreators(CommentActionsCreators, dispatch);
- return (
-