Skip to content

Commit dc6df39

Browse files
alex35milalex35mil
committed
Component oriented structure
1 parent d67548b commit dc6df39

29 files changed

+146
-149
lines changed

‎client/app/bundles/Comments/actions/commentsActionCreators.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import commentsManager from '../utils/commentsManager';
1+
import requestsManager from 'libs/requestsManager';
22
import * as actionTypes from '../constants/commentsConstants';
33

44
export function setIsFetching() {
@@ -45,8 +45,8 @@ export function fetchComments() {
4545
return dispatch => {
4646
dispatch(setIsFetching());
4747
return (
48-
commentsManager
49-
.fetchComments()
48+
requestsManager
49+
.fetchEntities()
5050
.then(res => dispatch(fetchCommentsSuccess(res.data)))
5151
.catch(res => dispatch(fetchCommentsFailure(res.data)))
5252
);
@@ -57,8 +57,8 @@ export function submitComment(comment) {
5757
return dispatch => {
5858
dispatch(setIsSaving());
5959
return (
60-
commentsManager
61-
.submitComment(comment)
60+
requestsManager
61+
.submitEntity({ comment })
6262
.then(res => dispatch(submitCommentSuccess(res.data)))
6363
.catch(res => dispatch(submitCommentFailure(res.data)))
6464
);

‎client/app/bundles/Comments/components/CommentBox.jsx renamed to ‎client/app/bundles/Comments/components/CommentBox/CommentBox.jsx

Lines changed: 3 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,10 @@
11
import React, { PropTypes } from 'react';
22

3-
import CommentForm from './CommentForm';
4-
import CommentList from './CommentList';
3+
import CommentForm from './CommentForm/CommentForm';
4+
import CommentList from './CommentList/CommentList';
55

6-
class CommentBox extends React.Component {
7-
constructor(props, context) {
8-
super(props, context);
9-
this.state = {};
10-
}
6+
export default class CommentBox extends React.Component {
117

12-
static displayName = 'CommentBox';
138
static propTypes = {
149
pollInterval: PropTypes.number.isRequired,
1510
actions: PropTypes.object.isRequired,
@@ -51,5 +46,3 @@ class CommentBox extends React.Component {
5146
);
5247
}
5348
}
54-
55-
export default CommentBox;

‎client/app/bundles/Comments/components/CommentForm.jsx renamed to ‎client/app/bundles/Comments/components/CommentBox/CommentForm/CommentForm.jsx

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -11,25 +11,29 @@ import _ from 'lodash';
1111
const emptyComment = { author: '', text: '' };
1212
const textPlaceholder = 'Say something using markdown...';
1313

14-
class CommentForm extends React.Component {
14+
export default class CommentForm extends React.Component {
15+
16+
static propTypes = {
17+
isSaving: PropTypes.bool.isRequired,
18+
actions: PropTypes.object.isRequired,
19+
error: PropTypes.any,
20+
};
21+
1522
constructor(props, context) {
1623
super(props, context);
1724
this.state = {
1825
formMode: 0,
1926
comment: emptyComment,
2027
};
2128

22-
_.bindAll(this, '_handleSelect', '_handleChange', '_handleSubmit', '_resetAndFocus');
29+
_.bindAll(this, [
30+
'_handleSelect',
31+
'_handleChange',
32+
'_handleSubmit',
33+
'_resetAndFocus',
34+
]);
2335
}
2436

25-
static displayName = 'CommentForm';
26-
27-
static propTypes = {
28-
isSaving: PropTypes.bool.isRequired,
29-
actions: PropTypes.object.isRequired,
30-
error: PropTypes.any,
31-
};
32-
3337
_handleSelect(selectedKey) {
3438
this.setState({ formMode: selectedKey });
3539
}
@@ -201,7 +205,7 @@ class CommentForm extends React.Component {
201205

202206
_errorWarning() {
203207
// If there is no error, there is nothing to add to the DOM
204-
if (!this.props.error) return undefined;
208+
if (!this.props.error) return null;
205209
return (
206210
<Alert bsStyle="danger" key="commentSubmissionError">
207211
<strong>Your comment was not saved! </strong>
@@ -245,5 +249,3 @@ class CommentForm extends React.Component {
245249
);
246250
}
247251
}
248-
249-
export default CommentForm;

‎client/app/bundles/Comments/components/Comment.jsx renamed to ‎client/app/bundles/Comments/components/CommentBox/CommentList/Comment/Comment.jsx

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import React, { PropTypes } from 'react';
22
import marked from 'marked';
33

4-
class Comment extends React.Component {
5-
static displayName = 'Comment';
4+
export default class Comment extends React.Component {
5+
66
static propTypes = {
77
author: PropTypes.string.isRequired,
88
text: PropTypes.string.isRequired,
@@ -11,15 +11,17 @@ class Comment extends React.Component {
1111
render() {
1212
const { author, text } = this.props;
1313
const rawMarkup = marked(text, { gfm: true, sanitize: true });
14+
1415
return (
1516
<div className="comment">
1617
<h2 className="comment-author">
1718
{author}
1819
</h2>
19-
<span dangerouslySetInnerHTML={{ __html: rawMarkup }} className="comment-text"/>
20+
<span
21+
dangerouslySetInnerHTML={{ __html: rawMarkup }}
22+
className="comment-text"
23+
/>
2024
</div>
2125
);
2226
}
2327
}
24-
25-
export default Comment;

‎client/test/components/Comment_spec.jsx renamed to ‎client/app/bundles/Comments/components/CommentBox/CommentList/Comment/Comment.spec.jsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
import { React, expect, TestUtils } from '../test_helper';
2-
import Comment from '../../app/bundles/Comments/components/Comment';
1+
import { React, expect, TestUtils } from 'libs/testHelper';
2+
3+
import Comment from './Comment';
34

45
const {
56
renderIntoDocument,

‎client/app/bundles/Comments/components/CommentList.jsx renamed to ‎client/app/bundles/Comments/components/CommentBox/CommentList/CommentList.jsx

Lines changed: 10 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,27 +2,26 @@ import React, { PropTypes } from 'react';
22
import Immutable from 'immutable';
33
import Alert from 'react-bootstrap/lib/Alert';
44
import ReactCSSTransitionGroup from 'react/lib/ReactCSSTransitionGroup';
5+
import _ from 'lodash';
56

6-
import Comment from './Comment';
7+
import Comment from './Comment/Comment';
78

8-
class CommentList extends React.Component {
9-
constructor(props, context) {
10-
super(props, context);
11-
this.state = {};
12-
13-
this._errorWarning = this._errorWarning.bind(this);
14-
}
15-
16-
static displayName = 'CommentList';
9+
export default class CommentList extends React.Component {
1710

1811
static propTypes = {
1912
$$comments: PropTypes.instanceOf(Immutable.List).isRequired,
2013
error: PropTypes.any,
2114
};
2215

16+
constructor(props, context) {
17+
super(props, context);
18+
this.state = {};
19+
_.bindAll(this, '_errorWarning');
20+
}
21+
2322
_errorWarning() {
2423
// If there is no error, there is nothing to add to the DOM
25-
if (!this.props.error) return undefined;
24+
if (!this.props.error) return null;
2625
return (
2726
<Alert bsStyle="danger" key="commentFetchError">
2827
<strong>Comments could not be retrieved. </strong>
@@ -69,5 +68,3 @@ class CommentList extends React.Component {
6968
);
7069
}
7170
}
72-
73-
export default CommentList;

‎client/test/components/CommentList_spec.jsx renamed to ‎client/app/bundles/Comments/components/CommentBox/CommentList/CommentList.spec.jsx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
1-
import { React, expect, TestUtils } from '../test_helper';
1+
import { React, expect, TestUtils } from 'libs/testHelper';
22
import { List, Map } from 'immutable';
3-
import CommentList from '../../app/bundles/Comments/components/CommentList';
4-
import Comment from '../../app/bundles/Comments/components/Comment';
3+
4+
import CommentList from './CommentList';
5+
import Comment from './Comment/Comment';
56

67
const {
78
renderIntoDocument,

‎client/app/bundles/Comments/components/CommentScreen.jsx renamed to ‎client/app/bundles/Comments/components/CommentScreen/CommentScreen.jsx

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import React, { PropTypes } from 'react';
2-
import CommentBox from './CommentBox';
2+
import CommentBox from '../CommentBox/CommentBox';
3+
4+
export default class CommentScreen extends React.Component {
35

4-
class CommentScreen extends React.Component {
56
static propTypes = {
67
actions: PropTypes.object.isRequired,
78
data: PropTypes.object.isRequired,
@@ -34,5 +35,3 @@ class CommentScreen extends React.Component {
3435
);
3536
}
3637
}
37-
38-
export default CommentScreen;

‎client/app/bundles/Comments/components/SimpleCommentScreen.jsx renamed to ‎client/app/bundles/Comments/components/SimpleCommentScreen/SimpleCommentScreen.jsx

Lines changed: 30 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
import React from 'react';
22
import Immutable from 'immutable';
33
import request from 'axios';
4-
import CommentForm from './CommentForm';
5-
import CommentList from './CommentList';
6-
import metaTagsManager from '../utils/metaTagsManager';
74
import _ from 'lodash';
85

9-
class SimpleCommentScreen extends React.Component {
6+
import metaTagsManager from 'libs/metaTagsManager';
7+
import CommentForm from '../CommentBox/CommentForm/CommentForm';
8+
import CommentList from '../CommentBox/CommentList/CommentList';
9+
10+
export default class SimpleCommentScreen extends React.Component {
11+
1012
constructor(props, context) {
1113
super(props, context);
1214
this.state = {
@@ -19,16 +21,17 @@ class SimpleCommentScreen extends React.Component {
1921
_.bindAll(this, '_fetchComments', '_handleCommentSubmit');
2022
}
2123

22-
static displayName = 'SimpleCommentScreen';
23-
2424
componentDidMount() {
2525
this._fetchComments();
2626
}
2727

2828
_fetchComments() {
29-
return request.get('comments.json', { responseType: 'json' })
30-
.then(res => this.setState({ $$comments: Immutable.fromJS(res.data) }))
31-
.catch(error => this.setState({ fetchCommentsError: error }));
29+
return (
30+
request
31+
.get('comments.json', { responseType: 'json' })
32+
.then(res => this.setState({ $$comments: Immutable.fromJS(res.data) }))
33+
.catch(error => this.setState({ fetchCommentsError: error }))
34+
);
3235
}
3336

3437
_handleCommentSubmit(comment) {
@@ -41,22 +44,25 @@ class SimpleCommentScreen extends React.Component {
4144
},
4245
};
4346

44-
return request.post('comments.json', { comment }, requestConfig)
45-
.then(() => {
46-
const { $$comments } = this.state;
47-
const $$comment = Immutable.fromJS(comment);
47+
return (
48+
request
49+
.post('comments.json', { comment }, requestConfig)
50+
.then(() => {
51+
const { $$comments } = this.state;
52+
const $$comment = Immutable.fromJS(comment);
4853

49-
this.setState({
50-
$$comments: $$comments.push($$comment),
51-
ajaxSending: false,
52-
});
53-
})
54-
.catch(error => {
55-
this.setState({
56-
submitCommentError: error,
57-
ajaxSending: false,
58-
});
59-
});
54+
this.setState({
55+
$$comments: $$comments.push($$comment),
56+
ajaxSending: false,
57+
});
58+
})
59+
.catch(error => {
60+
this.setState({
61+
submitCommentError: error,
62+
ajaxSending: false,
63+
});
64+
})
65+
);
6066
}
6167

6268
render() {
@@ -80,5 +86,3 @@ class SimpleCommentScreen extends React.Component {
8086
);
8187
}
8288
}
83-
84-
export default SimpleCommentScreen;

‎client/app/bundles/Comments/components/TestReactRouter.jsx renamed to ‎client/app/bundles/Comments/components/TestReactRouter/TestReactRouter.jsx

File renamed without changes.

‎client/app/bundles/Comments/components/TestReactRouterRedirect.jsx renamed to ‎client/app/bundles/Comments/components/TestReactRouterRedirect/TestReactRouterRedirect.jsx

File renamed without changes.

‎client/app/bundles/Comments/components/NonRouterCommentScreen.jsx renamed to ‎client/app/bundles/Comments/containers/NonRouterCommentsContainer.jsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { PropTypes } from 'react';
2-
import CommentScreen from './CommentScreen';
2+
import CommentScreen from '../components/CommentScreen/CommentScreen';
33
import { connect } from 'react-redux';
44
import { bindActionCreators } from 'redux';
55
import * as commentsActionCreators from '../actions/commentsActionCreators';
@@ -9,7 +9,7 @@ function select(state) {
99
return { data: state.$$commentsStore };
1010
}
1111

12-
class NonRouterCommentScreen extends React.Component {
12+
class NonRouterCommentsContainer extends React.Component {
1313
static propTypes = {
1414
dispatch: PropTypes.func.isRequired,
1515
data: PropTypes.object.isRequired,
@@ -25,4 +25,4 @@ class NonRouterCommentScreen extends React.Component {
2525
}
2626

2727
// Don't forget to actually use connect!
28-
export default connect(select)(NonRouterCommentScreen);
28+
export default connect(select)(NonRouterCommentsContainer);

‎client/app/bundles/Comments/components/RouterCommentScreen.jsx renamed to ‎client/app/bundles/Comments/containers/RouterCommentsContainer.jsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { PropTypes } from 'react';
2-
import CommentScreen from './CommentScreen';
2+
import CommentScreen from '../components/CommentScreen/CommentScreen';
33
import { connect } from 'react-redux';
44
import { bindActionCreators } from 'redux';
55
import * as commentsActionCreators from '../actions/commentsActionCreators';
@@ -9,7 +9,7 @@ function select(state) {
99
return { data: state.$$commentsStore };
1010
}
1111

12-
class RouterCommentScreen extends React.Component {
12+
class RouterCommentsContainer extends React.Component {
1313
static propTypes = {
1414
dispatch: PropTypes.func.isRequired,
1515
data: PropTypes.object.isRequired,
@@ -43,4 +43,4 @@ class RouterCommentScreen extends React.Component {
4343
}
4444

4545
// Don't forget to actually use connect!
46-
export default connect(select)(RouterCommentScreen);
46+
export default connect(select)(RouterCommentsContainer);

‎client/app/bundles/Comments/layout/Layout.jsx

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,13 +13,20 @@ export default class Layout extends React.Component {
1313
<header>
1414
<ul>
1515
<li>
16-
<IndexLink to="/" activeClassName="active">Comments (Root URL)</IndexLink>
16+
<IndexLink to="/" activeClassName="active">
17+
Comments (Root URL)
18+
</IndexLink>
1719
</li>
1820
<li>
19-
<Link to="/react-router" activeClassName="active">Test React Router ('/react-router')</Link>
21+
<Link to="/react-router" activeClassName="active">
22+
Test React Router ('/react-router')
23+
</Link>
2024
</li>
2125
<li>
22-
<Link to="/react-router/redirect" activeClassName="active">Test Redirect (url to '/react-router/redirect' which goes to root '/')</Link>
26+
<Link to="/react-router/redirect" activeClassName="active">
27+
Test Redirect
28+
(url to '/react-router/redirect' which goes to root '/')
29+
</Link>
2330
</li>
2431
</ul>
2532
</header>

‎client/app/bundles/Comments/routes/routes.jsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
import React from 'react';
22
import { Route, IndexRoute } from 'react-router';
33
import Layout from '../layout/Layout';
4-
import TestReactRouter from '../components/TestReactRouter';
5-
import TestReactRouterRedirect from '../components/TestReactRouterRedirect';
6-
import RouterCommentScreen from '../components/RouterCommentScreen';
4+
import TestReactRouter from '../components/TestReactRouter/TestReactRouter';
5+
import TestReactRouterRedirect from '../components/TestReactRouterRedirect/TestReactRouterRedirect';
6+
import RouterCommentsContainer from '../containers/RouterCommentsContainer';
77

88
export default (
99
<Route path="/" component={Layout}>
1010
<IndexRoute
11-
component={RouterCommentScreen}
11+
component={RouterCommentsContainer}
1212
/>
1313
<Route
1414
path="react-router"

0 commit comments

Comments
 (0)