From c14930df9be89ae8acea97ec4441f660d57d05d6 Mon Sep 17 00:00:00 2001 From: NtonBala Date: Fri, 10 Nov 2017 17:00:47 +0200 Subject: [PATCH 01/11] Added action types & reducers for posts & post. --- .idea/workspace.xml | 258 +++++++++--------- README.md | 9 + package.json | 8 +- src/constants/actionTypes/PostActionTypes.js | 7 + src/constants/actionTypes/PostsActionTypes.js | 7 + src/reducers/Post.js | 36 +++ src/reducers/Posts.js | 41 +++ src/reducers/index.js | 9 + 8 files changed, 251 insertions(+), 124 deletions(-) create mode 100644 src/constants/actionTypes/PostActionTypes.js create mode 100644 src/constants/actionTypes/PostsActionTypes.js create mode 100644 src/reducers/Post.js create mode 100644 src/reducers/Posts.js create mode 100644 src/reducers/index.js diff --git a/.idea/workspace.xml b/.idea/workspace.xml index 58d7b84..9ed8a17 100644 --- a/.idea/workspace.xml +++ b/.idea/workspace.xml @@ -2,39 +2,14 @@ - - + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + @@ -48,22 +23,26 @@ - - + + - - - + + + + + - - + + - - - + + + + + @@ -98,9 +77,6 @@ @@ -164,9 +147,8 @@ - + @@ -185,7 +167,6 @@ - @@ -196,18 +177,25 @@ - + + + + + + + @@ -386,12 +369,12 @@ - + - @@ -448,7 +431,6 @@ - @@ -600,13 +582,6 @@ - - - - - - - @@ -719,14 +694,6 @@ - - - - - - - - @@ -743,48 +710,76 @@ + + + + + + + + + + + + + + + + + + - + + + + + + + + + - - + + - + - - + + - + - + - - - + + + + + - + - - + + - + diff --git a/src/App.js b/src/App.js index 391e865..02c174b 100644 --- a/src/App.js +++ b/src/App.js @@ -1,10 +1,13 @@ import React from 'react'; - import {Router, browserHistory} from 'react-router'; import routes from 'routes'; +import {Provider} from 'react-redux'; +import store from 'store'; const App = () => ( - + + + ); export default App; diff --git a/src/actions/Post.js b/src/actions/Post.js index 70591ba..c3d3d9c 100644 --- a/src/actions/Post.js +++ b/src/actions/Post.js @@ -47,7 +47,7 @@ export const incrementLikes = (id) => ( dispatch(requestIncrementLikes(id)); return request - .post(`${API_ROOT}/posts`) + .put(`${API_ROOT}/posts`) .send({post_id: id}) //eslint-disable-line camelcase .end((err) => { err ? dispatch(errorIncrementLikes()) : diff --git a/src/actions/Posts.js b/src/actions/Posts.js index d6b603f..7adb4bd 100644 --- a/src/actions/Posts.js +++ b/src/actions/Posts.js @@ -48,7 +48,7 @@ export const incrementLikes = (id) => ( dispatch(requestIncrementLikes()); return request - .post(`${API_ROOT}/posts`) + .put(`${API_ROOT}/posts`) .send({post_id: id}) //eslint-disable-line camelcase .end((err) => { err ? dispatch(errorIncrementLikes()) : diff --git a/src/store/index.js b/src/store/index.js new file mode 100644 index 0000000..90ca3ee --- /dev/null +++ b/src/store/index.js @@ -0,0 +1,7 @@ +import {createStore, applyMiddleware} from 'redux'; +import thunk from 'redux-thunk'; +import reducers from 'reducers'; + +const store = createStore(reducers, applyMiddleware(thunk)); + +export default store; From 70c3e02fe5a3ed119b609117513a462d658a4a15 Mon Sep 17 00:00:00 2001 From: NtonBala Date: Mon, 13 Nov 2017 16:07:45 +0200 Subject: [PATCH 05/11] Added prepareData helper for dispatching asynchronous actions. Added prepareData methods to app routes. Created history callback to compare current URL with routes templates and call corresponding prepareData method, hang it onto browserHistory object and added initial call when the app is initialized. --- .idea/workspace.xml | 214 ++++++++++++++++++++++--------------- package.json | 1 + src/App.js | 18 +++- src/helpers/prepareData.js | 16 +++ src/reducers/Post.js | 2 +- src/routes/Blog.js | 12 ++- 6 files changed, 170 insertions(+), 93 deletions(-) create mode 100644 src/helpers/prepareData.js diff --git a/.idea/workspace.xml b/.idea/workspace.xml index ddd34aa..288a8f7 100644 --- a/.idea/workspace.xml +++ b/.idea/workspace.xml @@ -2,11 +2,12 @@ - + + - - + + @@ -20,11 +21,11 @@ - + - - + + @@ -32,6 +33,40 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + @@ -63,7 +98,6 @@ @@ -153,6 +188,8 @@ + + @@ -165,6 +202,24 @@ + + + + + + + + + + + + + + + + + + @@ -175,13 +230,11 @@ + + - + @@ -223,15 +266,15 @@ + + + + - - - - - @@ -415,12 +459,12 @@ - + - + @@ -463,21 +507,6 @@ - - - - - - - - - - - - - - - @@ -584,27 +613,6 @@ - - - - - - - - - - - - - - - - - - - - - @@ -619,13 +627,6 @@ - - - - - - - @@ -669,45 +670,91 @@ - + - - + + - + - - + + + - + - - + + - + - - + + + - + - - + + + - + - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + @@ -720,94 +767,108 @@ - + - - + + - + - - + + + + + + + + + + - + - - + + + + + + + + + + + + - + - - + + - + - - - - - + + + - + - - + + - + - - - - - + + + - + - - + + - + - + - - + + - + - + - - + + - + diff --git a/src/components/BlogPage.js b/src/components/BlogPage.js deleted file mode 100644 index 1dd7804..0000000 --- a/src/components/BlogPage.js +++ /dev/null @@ -1,54 +0,0 @@ -import React from 'react'; - -import _ from 'lodash'; - -import {updateItemsMetaInfo as update} from 'helpers/like'; - -import BlogList from 'components/widgets/blog/BlogList'; -import PieChart from 'components/widgets/blog/PieChart'; - -import {fetchPosts} from 'helpers/rest'; -import {fetchMetaInfo} from '../helpers/rest'; - -class BlogPage extends React.Component { - constructor(props) { - super(props); - this.state = { - blogItems: [] - }; - this.like = _.bind(this.like, this); - } - like(_id) { - const {blogItems} = this.state; - - fetchMetaInfo(_id, update, blogItems, - (newBlogItems) => this.setState({blogItems: newBlogItems}) - ); - } - componentDidMount() { - fetchPosts( - (blogItems) => this.setState({blogItems}) - ); - } - render() { - const {blogItems} = this.state, - columns = _.map( - blogItems, - item => [item.title, item.metaInfo.likes] - ); - - return ( -
- - -
- ); - } -} - -export default BlogPage; diff --git a/src/components/BlogPost.js b/src/components/BlogPost.js index f8ca148..d2d2640 100644 --- a/src/components/BlogPost.js +++ b/src/components/BlogPost.js @@ -1,52 +1,19 @@ import React, {PropTypes} from 'react'; - -import _ from 'lodash'; - -import {updateItemMetaInfo as update} from 'helpers/like'; - import BlogItem from 'components/widgets/blog/BlogItem'; - -import {fetchPost, fetchMetaInfo} from 'helpers/rest'; - import {Item} from 'semantic-ui-react'; -class BlogPost extends React.Component { - constructor(props) { - super(props); - this.state = { - blogItem: {} - }; - this.like = _.bind(this.like, this); - } - like(_id) { - const {blogItem} = this.state; - - fetchMetaInfo(_id, update, blogItem, - (newBlogItem) => this.setState({blogItem: newBlogItem}) - ); - } - componentDidMount() { - fetchPost( - this.props.params.post_id, - (blogItem) => this.setState({blogItem}) - ); - } - render() { - const {blogItem} = this.state; - - return ( - - this.like(blogItem._id)} - /> - - ); - } -} +const BlogPost = ({blogItem, like}) => ( + + {blogItem && like(blogItem._id)} + />} + +); BlogPost.propTypes = { - params: PropTypes.object + blogItem: PropTypes.object, + like: BlogItem.propTypes.like }; export default BlogPost; diff --git a/src/components/widgets/blog/BlogItem.js b/src/components/widgets/blog/BlogItem.js index 7333254..417b155 100644 --- a/src/components/widgets/blog/BlogItem.js +++ b/src/components/widgets/blog/BlogItem.js @@ -1,59 +1,45 @@ import React, {PropTypes} from 'react'; - import _ from 'lodash'; - import Image from './elements/Image'; import TextBox from './elements/TextBox'; import MetaInfo from './elements/MetaInfo'; import Like from './elements/Like'; import Title from './elements/Title'; - import {Grid} from 'semantic-ui-react'; -class BlogItem extends React.Component { - render() { - const {image, description, metaInfo, title, _id, like} = this.props; - return ( - React.createElement( - Grid, - { - centered: true, - columns: 3 - }, - React.createElement( - Grid.Column, - { - computer: 4, - tablet: 8, - mobile: 15 - }, - React.createElement(Image, { - src: image.src, - alt: image.alt, - width: '100%', - height: '100%' - }) - ), - React.createElement( - Grid.Column, - { - computer: 12, - tablet: 8, - mobile: 15 - }, - React.createElement(Title, {title, _id}), - React.createElement(TextBox, {description}), - React.createElement(MetaInfo, { - author: metaInfo.author, - created: metaInfo.created, - modified: metaInfo.modified - }), - React.createElement(Like, {likes: metaInfo.likes, like}) - ) - ) - ); - } -} +const BlogItem = ({image, description, metaInfo, title, _id, like}) => ( + + + {image.alt} + + + + <TextBox description={description}/> + <MetaInfo + author={metaInfo.author} + created={metaInfo.created} + modified={metaInfo.modified} + /> + <Like + likes={metaInfo.likes} + like={like} + /> + </Grid.Column> + </Grid> +); BlogItem.propTypes = { _id: Title.propTypes._id, diff --git a/src/containers/PostContainer.js b/src/containers/PostContainer.js new file mode 100644 index 0000000..90101f8 --- /dev/null +++ b/src/containers/PostContainer.js @@ -0,0 +1,15 @@ +import {connect} from 'react-redux'; +import BlogPost from '../components/BlogPost'; +import {incrementLikes} from '../actions/Post'; + +const stateToProps = (state) => ({ + blogItem: state.post.entry, + isRequesting: state.post.isRequesting, + error: state.post.error +}); + +const actionsToProps = (dispatch, ownProps) => ({ + like: () => dispatch(incrementLikes(ownProps.params.post_id)) +}); + +export default connect(stateToProps, actionsToProps())(BlogPost); diff --git a/src/containers/PostsContainer.js b/src/containers/PostsContainer.js new file mode 100644 index 0000000..af8b935 --- /dev/null +++ b/src/containers/PostsContainer.js @@ -0,0 +1,16 @@ +import {connect} from 'react-redux'; +import BlogList from '../components/widgets/blog/BlogList'; +import {flowRight} from 'lodash/util'; +import {incrementLikes} from '../actions/Posts'; + +const stateToProps = (state) => ({ + blogItems: state.posts.entries, + isFetching: state.posts.isFetching, + error: state.posts.error +}); + +const actionsToProps = (dispatch) => ({ + like: flowRight(dispatch, incrementLikes) +}); + +export default connect(stateToProps, actionsToProps)(BlogList); diff --git a/src/helpers/like.js b/src/helpers/like.js deleted file mode 100644 index 8c45f73..0000000 --- a/src/helpers/like.js +++ /dev/null @@ -1,22 +0,0 @@ -import _ from 'lodash'; -import update from 'immutability-helper'; - -export const updateItemsMetaInfo = (blogItems, metaInfo, setNewState, _id) => { - const index = _.findIndex(blogItems, {_id}); - - const newBlogItems = update( - blogItems, - {[index]: {$merge: {metaInfo}}} - ); - - setNewState(newBlogItems); -}; - -export const updateItemMetaInfo = (blogItem, metaInfo, setNewState) => { - const newBlogItem = update( - blogItem, - {$merge: {metaInfo}} - ); - - setNewState(newBlogItem); -}; diff --git a/src/helpers/rest.js b/src/helpers/rest.js deleted file mode 100644 index 871b49d..0000000 --- a/src/helpers/rest.js +++ /dev/null @@ -1,25 +0,0 @@ -import request from 'superagent'; - -export const fetchPosts = (setNewState) => { - request.get( - 'http://localhost:3001/posts', - {}, - (err, res) => setNewState(res.body) - ); -}; - -export const fetchPost = (_id, setNewState) => { - request.get( - `http://localhost:3001/posts/${_id}`, - {}, - (err, res) => setNewState(res.body) - ); -}; - -export const fetchMetaInfo = (_id, update, state, setNewState) => { - request.get( - `http://localhost:3001/metainfo/${_id}`, - {}, - (err, res) => update(state, res.body, setNewState, _id) - ); -}; diff --git a/src/routes/Blog.js b/src/routes/Blog.js index c2d91a3..502957b 100644 --- a/src/routes/Blog.js +++ b/src/routes/Blog.js @@ -1,13 +1,13 @@ -import BlogPage from 'components/BlogPage'; import MainLayout from 'components/layouts/MainLayout'; -import BlogPost from 'components/BlogPost'; import {postsPath} from 'helpers/routes'; import {fetchPosts} from '../actions/Posts'; import {fetchPost} from '../actions/Post'; +import PostsContainer from '../containers/PostsContainer'; +import PostContainer from '../containers/PostContainer'; const Index = { path: '/', - component: BlogPage, + component: PostsContainer, prepareData: (store) => { store.dispatch(fetchPosts()); } @@ -15,7 +15,7 @@ const Index = { const PostRoute = { path: postsPath(), - component: BlogPost, + component: PostContainer, prepareData: (store, query, params) => { store.dispatch(fetchPost(params.post_id)); } From 158c1cb044a512f6397c74e049dfbe7dd9767ad2 Mon Sep 17 00:00:00 2001 From: NtonBala <balashov.anton.1983@gmail.com> Date: Tue, 14 Nov 2017 22:21:45 +0200 Subject: [PATCH 08/11] Fixed params issue in superagent put request, fixed posts reducer _id issue, fixed ownProps issue in PostContainer. --- .idea/workspace.xml | 254 +++++++++++++++----------------- src/actions/Post.js | 3 +- src/actions/Posts.js | 3 +- src/containers/PostContainer.js | 2 +- src/reducers/Posts.js | 4 +- 5 files changed, 125 insertions(+), 141 deletions(-) diff --git a/.idea/workspace.xml b/.idea/workspace.xml index f62d141..ee64863 100644 --- a/.idea/workspace.xml +++ b/.idea/workspace.xml @@ -2,15 +2,11 @@ <project version="4"> <component name="ChangeListManager"> <list default="true" id="fbfc7658-0e79-45bf-b587-a6e48a0003d0" name="Default" comment=""> - <change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/src/containers/PostContainer.js" /> - <change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/src/containers/PostsContainer.js" /> - <change type="DELETED" beforePath="$PROJECT_DIR$/src/components/BlogPage.js" afterPath="" /> - <change type="DELETED" beforePath="$PROJECT_DIR$/src/helpers/like.js" afterPath="" /> - <change type="DELETED" beforePath="$PROJECT_DIR$/src/helpers/rest.js" afterPath="" /> <change type="MODIFICATION" beforePath="$PROJECT_DIR$/.idea/workspace.xml" afterPath="$PROJECT_DIR$/.idea/workspace.xml" /> - <change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/components/BlogPost.js" afterPath="$PROJECT_DIR$/src/components/BlogPost.js" /> - <change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/components/widgets/blog/BlogItem.js" afterPath="$PROJECT_DIR$/src/components/widgets/blog/BlogItem.js" /> - <change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/routes/Blog.js" afterPath="$PROJECT_DIR$/src/routes/Blog.js" /> + <change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/actions/Post.js" afterPath="$PROJECT_DIR$/src/actions/Post.js" /> + <change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/actions/Posts.js" afterPath="$PROJECT_DIR$/src/actions/Posts.js" /> + <change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/containers/PostContainer.js" afterPath="$PROJECT_DIR$/src/containers/PostContainer.js" /> + <change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/reducers/Posts.js" afterPath="$PROJECT_DIR$/src/reducers/Posts.js" /> </list> <ignored path="$PROJECT_DIR$/.tmp/" /> <ignored path="$PROJECT_DIR$/temp/" /> @@ -24,19 +20,17 @@ </component> <component name="FileEditorManager"> <leaf SIDE_TABS_SIZE_LIMIT_KEY="300"> - <file leaf-file-name="App.js" pinned="false" current-in-tab="false"> - <entry file="file://$PROJECT_DIR$/src/App.js"> + <file leaf-file-name="Posts.js" pinned="false" current-in-tab="false"> + <entry file="file://$PROJECT_DIR$/src/reducers/Posts.js"> <provider selected="true" editor-type-id="text-editor"> - <state relative-caret-position="238"> - <caret line="34" column="0" lean-forward="false" selection-start-line="34" selection-start-column="0" selection-end-line="34" selection-end-column="0" /> - <folding> - <element signature="e#0#26#0" expanded="true" /> - </folding> + <state relative-caret-position="82"> + <caret line="12" column="37" lean-forward="true" selection-start-line="12" selection-start-column="37" selection-end-line="12" selection-end-column="37" /> + <folding /> </state> </provider> </entry> </file> - <file leaf-file-name="PostContainer.js" pinned="false" current-in-tab="false"> + <file leaf-file-name="PostContainer.js" pinned="false" current-in-tab="true"> <entry file="file://$PROJECT_DIR$/src/containers/PostContainer.js"> <provider selected="true" editor-type-id="text-editor"> <state relative-caret-position="255"> @@ -48,26 +42,34 @@ </provider> </entry> </file> - <file leaf-file-name="BlogPost.js" pinned="false" current-in-tab="false"> - <entry file="file://$PROJECT_DIR$/src/components/BlogPost.js"> + <file leaf-file-name="Blog.js" pinned="false" current-in-tab="false"> + <entry file="file://$PROJECT_DIR$/src/routes/Blog.js"> <provider selected="true" editor-type-id="text-editor"> - <state relative-caret-position="323"> - <caret line="19" column="0" lean-forward="true" selection-start-line="19" selection-start-column="0" selection-end-line="19" selection-end-column="0" /> + <state relative-caret-position="296"> + <caret line="21" column="2" lean-forward="true" selection-start-line="21" selection-start-column="2" selection-end-line="21" selection-end-column="2" /> <folding> - <element signature="e#0#39#0" expanded="true" /> + <element signature="e#0#55#0" expanded="true" /> </folding> </state> </provider> </entry> </file> - <file leaf-file-name="BlogItem.js" pinned="false" current-in-tab="true"> - <entry file="file://$PROJECT_DIR$/src/components/widgets/blog/BlogItem.js"> + <file leaf-file-name="index.js" pinned="false" current-in-tab="false"> + <entry file="file://$PROJECT_DIR$/src/helpers/routes/index.js"> <provider selected="true" editor-type-id="text-editor"> - <state relative-caret-position="-61"> - <caret line="8" column="0" lean-forward="true" selection-start-line="8" selection-start-column="0" selection-end-line="8" selection-end-column="0" /> - <folding> - <element signature="e#0#39#0" expanded="true" /> - </folding> + <state relative-caret-position="17"> + <caret line="1" column="0" lean-forward="false" selection-start-line="1" selection-start-column="0" selection-end-line="1" selection-end-column="0" /> + <folding /> + </state> + </provider> + </entry> + </file> + <file leaf-file-name="webpack.config.js" pinned="false" current-in-tab="false"> + <entry file="file://$PROJECT_DIR$/webpack.config.js"> + <provider selected="true" editor-type-id="text-editor"> + <state relative-caret-position="168"> + <caret line="32" column="8" lean-forward="true" selection-start-line="32" selection-start-column="8" selection-end-line="32" selection-end-column="8" /> + <folding /> </state> </provider> </entry> @@ -137,11 +139,8 @@ <option value="$PROJECT_DIR$/src/reducers/index.js" /> <option value="$PROJECT_DIR$/src/constants/actionTypes/PostActionTypes.js" /> <option value="$PROJECT_DIR$/src/constants/actionTypes/PostsActionTypes.js" /> - <option value="$PROJECT_DIR$/src/reducers/Posts.js" /> <option value="$PROJECT_DIR$/src/index.js" /> <option value="$PROJECT_DIR$/src/constants/API.js" /> - <option value="$PROJECT_DIR$/src/actions/Posts.js" /> - <option value="$PROJECT_DIR$/src/actions/Post.js" /> <option value="$PROJECT_DIR$/src/reducers/Post.js" /> <option value="$PROJECT_DIR$/package.json" /> <option value="$PROJECT_DIR$/src/helpers/prepareData.js" /> @@ -152,8 +151,11 @@ <option value="$PROJECT_DIR$/src/containers/PostsContainer.js" /> <option value="$PROJECT_DIR$/src/routes/Blog.js" /> <option value="$PROJECT_DIR$/src/components/BlogPost.js" /> - <option value="$PROJECT_DIR$/src/containers/PostContainer.js" /> <option value="$PROJECT_DIR$/src/components/widgets/blog/BlogItem.js" /> + <option value="$PROJECT_DIR$/src/actions/Posts.js" /> + <option value="$PROJECT_DIR$/src/actions/Post.js" /> + <option value="$PROJECT_DIR$/src/reducers/Posts.js" /> + <option value="$PROJECT_DIR$/src/containers/PostContainer.js" /> </list> </option> </component> @@ -175,7 +177,8 @@ </component> <component name="ProjectFrameBounds" extendedState="6"> <option name="x" value="-8" /> - <option name="width" value="1378" /> + <option name="y" value="-8" /> + <option name="width" value="1382" /> <option name="height" value="744" /> </component> <component name="ProjectView"> @@ -193,6 +196,8 @@ <foldersAlwaysOnTop value="true" /> </navigator> <panes> + <pane id="Scratches" /> + <pane id="Scope" /> <pane id="ProjectPane"> <subPane> <expand> @@ -221,22 +226,26 @@ <item name="React-Blog" type="b2602c69:ProjectViewProjectNode" /> <item name="React-Blog" type="462c0819:PsiDirectoryNode" /> <item name="src" type="462c0819:PsiDirectoryNode" /> - <item name="components" type="462c0819:PsiDirectoryNode" /> - <item name="widgets" type="462c0819:PsiDirectoryNode" /> + <item name="containers" type="462c0819:PsiDirectoryNode" /> </path> <path> <item name="React-Blog" type="b2602c69:ProjectViewProjectNode" /> <item name="React-Blog" type="462c0819:PsiDirectoryNode" /> <item name="src" type="462c0819:PsiDirectoryNode" /> - <item name="components" type="462c0819:PsiDirectoryNode" /> - <item name="widgets" type="462c0819:PsiDirectoryNode" /> - <item name="blog" type="462c0819:PsiDirectoryNode" /> + <item name="helpers" type="462c0819:PsiDirectoryNode" /> </path> <path> <item name="React-Blog" type="b2602c69:ProjectViewProjectNode" /> <item name="React-Blog" type="462c0819:PsiDirectoryNode" /> <item name="src" type="462c0819:PsiDirectoryNode" /> - <item name="containers" type="462c0819:PsiDirectoryNode" /> + <item name="helpers" type="462c0819:PsiDirectoryNode" /> + <item name="routes" type="462c0819:PsiDirectoryNode" /> + </path> + <path> + <item name="React-Blog" type="b2602c69:ProjectViewProjectNode" /> + <item name="React-Blog" type="462c0819:PsiDirectoryNode" /> + <item name="src" type="462c0819:PsiDirectoryNode" /> + <item name="reducers" type="462c0819:PsiDirectoryNode" /> </path> <path> <item name="React-Blog" type="b2602c69:ProjectViewProjectNode" /> @@ -248,13 +257,11 @@ <select /> </subPane> </pane> - <pane id="Scratches" /> - <pane id="Scope" /> </panes> </component> <component name="PropertiesComponent"> <property name="WebServerToolWindowFactoryState" value="false" /> - <property name="last_opened_file_path" value="$PROJECT_DIR$" /> + <property name="last_opened_file_path" value="$PROJECT_DIR$/../Blog-Server" /> <property name="settings.editor.selected.configurable" value="preferences.sourceCode" /> <property name="HbShouldOpenHtmlAsHb" value="" /> <property name="nodejs_interpreter_path" value="C:/Program Files/nodejs/node" /> @@ -446,25 +453,27 @@ <workItem from="1510396233991" duration="133000" /> <workItem from="1510523378037" duration="284000" /> <workItem from="1510566835868" duration="12252000" /> - <workItem from="1510593444411" duration="8479000" /> + <workItem from="1510593444411" duration="8711000" /> + <workItem from="1510653141916" duration="5517000" /> </task> <servers /> </component> <component name="TimeTrackingManager"> - <option name="totallyTimeSpent" value="310451000" /> + <option name="totallyTimeSpent" value="316200000" /> </component> <component name="ToolWindowManager"> <frame x="-8" y="-8" width="1382" height="744" extended-state="6" /> + <editor active="true" /> <layout> <window_info id="Project" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="true" show_stripe_button="true" weight="0.24181548" sideWeight="0.5" order="0" side_tool="false" content_ui="combo" /> <window_info id="TODO" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="6" side_tool="false" content_ui="tabs" /> <window_info id="Event Log" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.3289689" sideWeight="0.5" order="7" side_tool="true" content_ui="tabs" /> - <window_info id="Run" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33060557" sideWeight="0.5" order="2" side_tool="false" content_ui="tabs" /> <window_info id="Version Control" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="7" side_tool="false" content_ui="tabs" /> + <window_info id="Run" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33060557" sideWeight="0.5" order="2" side_tool="false" content_ui="tabs" /> <window_info id="Structure" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.24962178" sideWeight="0.5" order="1" side_tool="false" content_ui="tabs" /> - <window_info id="Terminal" active="true" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="true" show_stripe_button="true" weight="0.30441898" sideWeight="0.5" order="7" side_tool="false" content_ui="tabs" /> - <window_info id="Debug" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.4" sideWeight="0.5" order="3" side_tool="false" content_ui="tabs" /> + <window_info id="Terminal" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="true" show_stripe_button="true" weight="0.30441898" sideWeight="0.5" order="7" side_tool="false" content_ui="tabs" /> <window_info id="Favorites" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="2" side_tool="true" content_ui="tabs" /> + <window_info id="Debug" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.4" sideWeight="0.5" order="3" side_tool="false" content_ui="tabs" /> <window_info id="Cvs" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.25" sideWeight="0.5" order="4" side_tool="false" content_ui="tabs" /> <window_info id="Message" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="0" side_tool="false" content_ui="tabs" /> <window_info id="Commander" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.4" sideWeight="0.5" order="0" side_tool="false" content_ui="tabs" /> @@ -557,13 +566,6 @@ </state> </provider> </entry> - <entry file="file://$PROJECT_DIR$/src/components/widgets/blog/elements/Image.js"> - <provider selected="true" editor-type-id="text-editor"> - <state relative-caret-position="-80"> - <caret line="0" column="44" lean-forward="false" selection-start-line="0" selection-start-column="44" selection-end-line="0" selection-end-column="44" /> - </state> - </provider> - </entry> <entry file="file://$PROJECT_DIR$/.babelrc"> <provider selected="true" editor-type-id="text-editor"> <state relative-caret-position="119"> @@ -606,13 +608,6 @@ </state> </provider> </entry> - <entry file="file://$PROJECT_DIR$/webpack.config.js"> - <provider selected="true" editor-type-id="text-editor"> - <state relative-caret-position="288"> - <caret line="41" column="11" lean-forward="true" selection-start-line="41" selection-start-column="11" selection-end-line="41" selection-end-column="11" /> - </state> - </provider> - </entry> <entry file="file://$PROJECT_DIR$/semantic/gulpfile.js"> <provider selected="true" editor-type-id="text-editor"> <state relative-caret-position="0"> @@ -670,28 +665,6 @@ </state> </provider> </entry> - <entry file="file://$PROJECT_DIR$/src/actions/Post.js"> - <provider selected="true" editor-type-id="text-editor"> - <state relative-caret-position="136"> - <caret line="49" column="16" lean-forward="false" selection-start-line="49" selection-start-column="16" selection-end-line="49" selection-end-column="16" /> - </state> - </provider> - </entry> - <entry file="file://$PROJECT_DIR$/src/reducers/Posts.js"> - <provider selected="true" editor-type-id="text-editor"> - <state relative-caret-position="142"> - <caret line="12" column="26" lean-forward="false" selection-start-line="12" selection-start-column="24" selection-end-line="12" selection-end-column="26" /> - <folding /> - </state> - </provider> - </entry> - <entry file="file://$PROJECT_DIR$/src/helpers/routes/index.js"> - <provider selected="true" editor-type-id="text-editor"> - <state relative-caret-position="17"> - <caret line="1" column="0" lean-forward="false" selection-start-line="1" selection-start-column="0" selection-end-line="1" selection-end-column="0" /> - </state> - </provider> - </entry> <entry file="file://$PROJECT_DIR$/package.json"> <provider selected="true" editor-type-id="text-editor"> <state relative-caret-position="567"> @@ -735,14 +708,6 @@ </state> </provider> </entry> - <entry file="file://$PROJECT_DIR$/src/actions/Posts.js"> - <provider selected="true" editor-type-id="text-editor"> - <state relative-caret-position="284"> - <caret line="58" column="0" lean-forward="true" selection-start-line="58" selection-start-column="0" selection-end-line="58" selection-end-column="0" /> - <folding /> - </state> - </provider> - </entry> <entry file="file://$PROJECT_DIR$/src/helpers/prepareData.js"> <provider selected="true" editor-type-id="text-editor"> <state relative-caret-position="238"> @@ -755,7 +720,6 @@ <provider selected="true" editor-type-id="text-editor"> <state relative-caret-position="-91"> <caret line="0" column="0" lean-forward="false" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" /> - <folding /> </state> </provider> </entry> @@ -767,108 +731,130 @@ </state> </provider> </entry> - <entry file="file://$PROJECT_DIR$/src/components/BlogPage.js"> + <entry file="file://$PROJECT_DIR$/src/components/BlogPage.js" /> + <entry file="file://$PROJECT_DIR$/src/containers/PostsContainer.js"> <provider selected="true" editor-type-id="text-editor"> - <state relative-caret-position="83"> - <caret line="21" column="39" lean-forward="true" selection-start-line="21" selection-start-column="39" selection-end-line="21" selection-end-column="39" /> + <state relative-caret-position="34"> + <caret line="2" column="38" lean-forward="true" selection-start-line="2" selection-start-column="38" selection-end-line="2" selection-end-column="38" /> <folding /> </state> </provider> </entry> - <entry file="file://$PROJECT_DIR$/src/containers/PostsContainer.js"> + <entry file="file://$PROJECT_DIR$/src/helpers/date.js"> <provider selected="true" editor-type-id="text-editor"> - <state relative-caret-position="34"> - <caret line="2" column="38" lean-forward="true" selection-start-line="2" selection-start-column="38" selection-end-line="2" selection-end-column="38" /> + <state relative-caret-position="85"> + <caret line="6" column="0" lean-forward="true" selection-start-line="6" selection-start-column="0" selection-end-line="6" selection-end-column="0" /> + </state> + </provider> + </entry> + <entry file="file://$PROJECT_DIR$/src/helpers/history.js"> + <provider selected="true" editor-type-id="text-editor"> + <state relative-caret-position="51"> + <caret line="3" column="0" lean-forward="true" selection-start-line="3" selection-start-column="0" selection-end-line="3" selection-end-column="0" /> + </state> + </provider> + </entry> + <entry file="file://$PROJECT_DIR$/src/helpers/like.js" /> + <entry file="file://$PROJECT_DIR$/src/helpers/rest.js" /> + <entry file="file://$PROJECT_DIR$/src/components/widgets/blog/BlogList.js"> + <provider selected="true" editor-type-id="text-editor"> + <state relative-caret-position="0"> + <caret line="5" column="48" lean-forward="false" selection-start-line="5" selection-start-column="48" selection-end-line="5" selection-end-column="48" /> + </state> + </provider> + </entry> + <entry file="file://$PROJECT_DIR$/src/components/widgets/blog/elements/Image.js"> + <provider selected="true" editor-type-id="text-editor"> + <state relative-caret-position="0"> + <caret line="0" column="44" lean-forward="false" selection-start-line="0" selection-start-column="44" selection-end-line="0" selection-end-column="44" /> <folding /> </state> </provider> </entry> - <entry file="file://$PROJECT_DIR$/src/App.js"> + <entry file="file://$PROJECT_DIR$/src/components/widgets/blog/BlogItem.js"> <provider selected="true" editor-type-id="text-editor"> - <state relative-caret-position="238"> - <caret line="34" column="0" lean-forward="false" selection-start-line="34" selection-start-column="0" selection-end-line="34" selection-end-column="0" /> + <state relative-caret-position="-61"> + <caret line="8" column="0" lean-forward="true" selection-start-line="8" selection-start-column="0" selection-end-line="8" selection-end-column="0" /> <folding> - <element signature="e#0#26#0" expanded="true" /> + <element signature="e#0#39#0" expanded="false" /> </folding> </state> </provider> </entry> - <entry file="file://$PROJECT_DIR$/src/routes/Blog.js"> + <entry file="file://$PROJECT_DIR$/src/App.js"> <provider selected="true" editor-type-id="text-editor"> - <state relative-caret-position="289"> - <caret line="17" column="28" lean-forward="false" selection-start-line="17" selection-start-column="28" selection-end-line="17" selection-end-column="28" /> + <state relative-caret-position="238"> + <caret line="34" column="0" lean-forward="false" selection-start-line="34" selection-start-column="0" selection-end-line="34" selection-end-column="0" /> <folding> - <element signature="e#0#55#0" expanded="false" /> + <element signature="e#0#26#0" expanded="false" /> </folding> </state> </provider> </entry> - <entry file="file://$PROJECT_DIR$/src/helpers/date.js"> + <entry file="file://$PROJECT_DIR$/webpack.config.js"> <provider selected="true" editor-type-id="text-editor"> - <state relative-caret-position="85"> - <caret line="6" column="0" lean-forward="true" selection-start-line="6" selection-start-column="0" selection-end-line="6" selection-end-column="0" /> + <state relative-caret-position="168"> + <caret line="32" column="8" lean-forward="true" selection-start-line="32" selection-start-column="8" selection-end-line="32" selection-end-column="8" /> <folding /> </state> </provider> </entry> - <entry file="file://$PROJECT_DIR$/src/helpers/history.js"> + <entry file="file://$PROJECT_DIR$/src/actions/Post.js"> <provider selected="true" editor-type-id="text-editor"> - <state relative-caret-position="51"> - <caret line="3" column="0" lean-forward="true" selection-start-line="3" selection-start-column="0" selection-end-line="3" selection-end-column="0" /> + <state relative-caret-position="278"> + <caret line="56" column="0" lean-forward="true" selection-start-line="56" selection-start-column="0" selection-end-line="56" selection-end-column="0" /> <folding /> </state> </provider> </entry> - <entry file="file://$PROJECT_DIR$/src/helpers/like.js"> + <entry file="file://$PROJECT_DIR$/src/actions/Posts.js"> <provider selected="true" editor-type-id="text-editor"> - <state relative-caret-position="68"> - <caret line="5" column="0" lean-forward="false" selection-start-line="5" selection-start-column="0" selection-end-line="5" selection-end-column="0" /> + <state relative-caret-position="276"> + <caret line="56" column="2" lean-forward="true" selection-start-line="56" selection-start-column="2" selection-end-line="56" selection-end-column="2" /> <folding /> </state> </provider> </entry> - <entry file="file://$PROJECT_DIR$/src/helpers/rest.js"> + <entry file="file://$PROJECT_DIR$/src/reducers/Posts.js"> <provider selected="true" editor-type-id="text-editor"> - <state relative-caret-position="187"> - <caret line="11" column="16" lean-forward="false" selection-start-line="11" selection-start-column="16" selection-end-line="11" selection-end-column="16" /> + <state relative-caret-position="82"> + <caret line="12" column="37" lean-forward="true" selection-start-line="12" selection-start-column="37" selection-end-line="12" selection-end-column="37" /> <folding /> </state> </provider> </entry> - <entry file="file://$PROJECT_DIR$/src/components/widgets/blog/BlogList.js"> + <entry file="file://$PROJECT_DIR$/src/helpers/routes/index.js"> <provider selected="true" editor-type-id="text-editor"> - <state relative-caret-position="0"> - <caret line="5" column="48" lean-forward="false" selection-start-line="5" selection-start-column="48" selection-end-line="5" selection-end-column="48" /> + <state relative-caret-position="17"> + <caret line="1" column="0" lean-forward="false" selection-start-line="1" selection-start-column="0" selection-end-line="1" selection-end-column="0" /> <folding /> </state> </provider> </entry> - <entry file="file://$PROJECT_DIR$/src/containers/PostContainer.js"> + <entry file="file://$PROJECT_DIR$/src/routes/Blog.js"> <provider selected="true" editor-type-id="text-editor"> - <state relative-caret-position="255"> - <caret line="15" column="0" lean-forward="true" selection-start-line="15" selection-start-column="0" selection-end-line="15" selection-end-column="0" /> + <state relative-caret-position="296"> + <caret line="21" column="2" lean-forward="true" selection-start-line="21" selection-start-column="2" selection-end-line="21" selection-end-column="2" /> <folding> - <element signature="e#0#36#0" expanded="true" /> + <element signature="e#0#55#0" expanded="true" /> </folding> </state> </provider> </entry> <entry file="file://$PROJECT_DIR$/src/components/BlogPost.js"> <provider selected="true" editor-type-id="text-editor"> - <state relative-caret-position="323"> - <caret line="19" column="0" lean-forward="true" selection-start-line="19" selection-start-column="0" selection-end-line="19" selection-end-column="0" /> - <folding> - <element signature="e#0#39#0" expanded="true" /> - </folding> + <state relative-caret-position="289"> + <caret line="19" column="0" lean-forward="false" selection-start-line="19" selection-start-column="0" selection-end-line="19" selection-end-column="0" /> + <folding /> </state> </provider> </entry> - <entry file="file://$PROJECT_DIR$/src/components/widgets/blog/BlogItem.js"> + <entry file="file://$PROJECT_DIR$/src/containers/PostContainer.js"> <provider selected="true" editor-type-id="text-editor"> - <state relative-caret-position="-61"> - <caret line="8" column="0" lean-forward="true" selection-start-line="8" selection-start-column="0" selection-end-line="8" selection-end-column="0" /> + <state relative-caret-position="255"> + <caret line="15" column="0" lean-forward="true" selection-start-line="15" selection-start-column="0" selection-end-line="15" selection-end-column="0" /> <folding> - <element signature="e#0#39#0" expanded="true" /> + <element signature="e#0#36#0" expanded="true" /> </folding> </state> </provider> diff --git a/src/actions/Post.js b/src/actions/Post.js index c3d3d9c..d777ddf 100644 --- a/src/actions/Post.js +++ b/src/actions/Post.js @@ -47,8 +47,7 @@ export const incrementLikes = (id) => ( dispatch(requestIncrementLikes(id)); return request - .put(`${API_ROOT}/posts`) - .send({post_id: id}) //eslint-disable-line camelcase + .put(`${API_ROOT}/posts/${id}`) .end((err) => { err ? dispatch(errorIncrementLikes()) : dispatch(successIncrementLikes()); diff --git a/src/actions/Posts.js b/src/actions/Posts.js index 7adb4bd..5b4f7c0 100644 --- a/src/actions/Posts.js +++ b/src/actions/Posts.js @@ -48,8 +48,7 @@ export const incrementLikes = (id) => ( dispatch(requestIncrementLikes()); return request - .put(`${API_ROOT}/posts`) - .send({post_id: id}) //eslint-disable-line camelcase + .put(`${API_ROOT}/posts/${id}`) .end((err) => { err ? dispatch(errorIncrementLikes()) : dispatch(successIncrementLikes(id)); diff --git a/src/containers/PostContainer.js b/src/containers/PostContainer.js index 90101f8..4b04bfe 100644 --- a/src/containers/PostContainer.js +++ b/src/containers/PostContainer.js @@ -12,4 +12,4 @@ const actionsToProps = (dispatch, ownProps) => ({ like: () => dispatch(incrementLikes(ownProps.params.post_id)) }); -export default connect(stateToProps, actionsToProps())(BlogPost); +export default connect(stateToProps, actionsToProps)(BlogPost); diff --git a/src/reducers/Posts.js b/src/reducers/Posts.js index 936e6a1..a1a758e 100644 --- a/src/reducers/Posts.js +++ b/src/reducers/Posts.js @@ -10,7 +10,7 @@ const initialState = { }; const incrementLikes = (state, action) => ( - state.id !== action.id ? state : + state._id !== action.id ? state : update(state, { metaInfo: {likes: {$apply: (count) => (count + 1)}} }) @@ -25,7 +25,7 @@ export default (state = initialState, action) => { case types.FETCH_POSTS_SUCCESS: return assign({}, initialState, {entries: action.response}); case types.INCREMENT_POSTS_LIKES_REQUEST: - return assign({}, state, {isRequesting: true}); + return assign({}, state, {isRequesting: true, error: false}); case types.INCREMENT_POSTS_LIKES_ERROR: return assign({}, state, {isRequesting: false, error: true}); case types.INCREMENT_POSTS_LIKES_SUCCESS: From adae5bd11ffc16c2acb7d9c07c96b01b68622564 Mon Sep 17 00:00:00 2001 From: NtonBala <balashov.anton.1983@gmail.com> Date: Wed, 15 Nov 2017 13:49:19 +0200 Subject: [PATCH 09/11] Added stateless BlogPage component, create PageContainer for displaying posts list & piechart. --- .idea/workspace.xml | 234 +++++++----------- src/components/BlogPage.js | 35 +++ .../{PostsContainer.js => PageContainer.js} | 4 +- src/routes/Blog.js | 4 +- 4 files changed, 126 insertions(+), 151 deletions(-) create mode 100644 src/components/BlogPage.js rename src/containers/{PostsContainer.js => PageContainer.js} (74%) diff --git a/.idea/workspace.xml b/.idea/workspace.xml index ee64863..8f042d6 100644 --- a/.idea/workspace.xml +++ b/.idea/workspace.xml @@ -2,11 +2,10 @@ <project version="4"> <component name="ChangeListManager"> <list default="true" id="fbfc7658-0e79-45bf-b587-a6e48a0003d0" name="Default" comment=""> + <change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/src/components/BlogPage.js" /> + <change type="MOVED" beforePath="$PROJECT_DIR$/src/containers/PostsContainer.js" afterPath="$PROJECT_DIR$/src/containers/PageContainer.js" /> <change type="MODIFICATION" beforePath="$PROJECT_DIR$/.idea/workspace.xml" afterPath="$PROJECT_DIR$/.idea/workspace.xml" /> - <change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/actions/Post.js" afterPath="$PROJECT_DIR$/src/actions/Post.js" /> - <change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/actions/Posts.js" afterPath="$PROJECT_DIR$/src/actions/Posts.js" /> - <change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/containers/PostContainer.js" afterPath="$PROJECT_DIR$/src/containers/PostContainer.js" /> - <change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/reducers/Posts.js" afterPath="$PROJECT_DIR$/src/reducers/Posts.js" /> + <change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/routes/Blog.js" afterPath="$PROJECT_DIR$/src/routes/Blog.js" /> </list> <ignored path="$PROJECT_DIR$/.tmp/" /> <ignored path="$PROJECT_DIR$/temp/" /> @@ -20,21 +19,23 @@ </component> <component name="FileEditorManager"> <leaf SIDE_TABS_SIZE_LIMIT_KEY="300"> - <file leaf-file-name="Posts.js" pinned="false" current-in-tab="false"> - <entry file="file://$PROJECT_DIR$/src/reducers/Posts.js"> + <file leaf-file-name="BlogPage.js" pinned="false" current-in-tab="false"> + <entry file="file://$PROJECT_DIR$/src/components/BlogPage.js"> <provider selected="true" editor-type-id="text-editor"> - <state relative-caret-position="82"> - <caret line="12" column="37" lean-forward="true" selection-start-line="12" selection-start-column="37" selection-end-line="12" selection-end-column="37" /> - <folding /> + <state relative-caret-position="442"> + <caret line="26" column="29" lean-forward="false" selection-start-line="26" selection-start-column="29" selection-end-line="26" selection-end-column="29" /> + <folding> + <element signature="e#0#26#0" expanded="true" /> + </folding> </state> </provider> </entry> </file> - <file leaf-file-name="PostContainer.js" pinned="false" current-in-tab="true"> - <entry file="file://$PROJECT_DIR$/src/containers/PostContainer.js"> + <file leaf-file-name="PageContainer.js" pinned="false" current-in-tab="false"> + <entry file="file://$PROJECT_DIR$/src/containers/PageContainer.js"> <provider selected="true" editor-type-id="text-editor"> - <state relative-caret-position="255"> - <caret line="15" column="0" lean-forward="true" selection-start-line="15" selection-start-column="0" selection-end-line="15" selection-end-column="0" /> + <state relative-caret-position="272"> + <caret line="16" column="0" lean-forward="true" selection-start-line="16" selection-start-column="0" selection-end-line="16" selection-end-column="0" /> <folding> <element signature="e#0#36#0" expanded="true" /> </folding> @@ -42,11 +43,11 @@ </provider> </entry> </file> - <file leaf-file-name="Blog.js" pinned="false" current-in-tab="false"> + <file leaf-file-name="Blog.js" pinned="false" current-in-tab="true"> <entry file="file://$PROJECT_DIR$/src/routes/Blog.js"> <provider selected="true" editor-type-id="text-editor"> - <state relative-caret-position="296"> - <caret line="21" column="2" lean-forward="true" selection-start-line="21" selection-start-column="2" selection-end-line="21" selection-end-column="2" /> + <state relative-caret-position="481"> + <caret line="30" column="0" lean-forward="true" selection-start-line="30" selection-start-column="0" selection-end-line="30" selection-end-column="0" /> <folding> <element signature="e#0#55#0" expanded="true" /> </folding> @@ -54,26 +55,6 @@ </provider> </entry> </file> - <file leaf-file-name="index.js" pinned="false" current-in-tab="false"> - <entry file="file://$PROJECT_DIR$/src/helpers/routes/index.js"> - <provider selected="true" editor-type-id="text-editor"> - <state relative-caret-position="17"> - <caret line="1" column="0" lean-forward="false" selection-start-line="1" selection-start-column="0" selection-end-line="1" selection-end-column="0" /> - <folding /> - </state> - </provider> - </entry> - </file> - <file leaf-file-name="webpack.config.js" pinned="false" current-in-tab="false"> - <entry file="file://$PROJECT_DIR$/webpack.config.js"> - <provider selected="true" editor-type-id="text-editor"> - <state relative-caret-position="168"> - <caret line="32" column="8" lean-forward="true" selection-start-line="32" selection-start-column="8" selection-end-line="32" selection-end-column="8" /> - <folding /> - </state> - </provider> - </entry> - </file> </leaf> </component> <component name="FindInProjectRecents"> @@ -105,7 +86,6 @@ <component name="IdeDocumentHistory"> <option name="CHANGED_PATHS"> <list> - <option value="$PROJECT_DIR$/components/BlogList.js" /> <option value="$PROJECT_DIR$/components/PieChart.js" /> <option value="$PROJECT_DIR$/components/BlogPage.js" /> <option value="$PROJECT_DIR$/.gitignore" /> @@ -134,7 +114,6 @@ <option value="$PROJECT_DIR$/src/components/layouts/MainLayout.js" /> <option value="$PROJECT_DIR$/src/components/widgets/blog/elements/Title.js" /> <option value="$PROJECT_DIR$/README.md" /> - <option value="$PROJECT_DIR$/src/components/BlogPage.js" /> <option value="$PROJECT_DIR$/src/constants/actionTypes/actionTypes.js" /> <option value="$PROJECT_DIR$/src/reducers/index.js" /> <option value="$PROJECT_DIR$/src/constants/actionTypes/PostActionTypes.js" /> @@ -149,13 +128,15 @@ <option value="$PROJECT_DIR$/src/store/index.js" /> <option value="$PROJECT_DIR$/src/containers/DevTools.js" /> <option value="$PROJECT_DIR$/src/containers/PostsContainer.js" /> - <option value="$PROJECT_DIR$/src/routes/Blog.js" /> <option value="$PROJECT_DIR$/src/components/BlogPost.js" /> <option value="$PROJECT_DIR$/src/components/widgets/blog/BlogItem.js" /> <option value="$PROJECT_DIR$/src/actions/Posts.js" /> <option value="$PROJECT_DIR$/src/actions/Post.js" /> <option value="$PROJECT_DIR$/src/reducers/Posts.js" /> <option value="$PROJECT_DIR$/src/containers/PostContainer.js" /> + <option value="$PROJECT_DIR$/src/components/BlogPage.js" /> + <option value="$PROJECT_DIR$/src/containers/PageContainer.js" /> + <option value="$PROJECT_DIR$/src/routes/Blog.js" /> </list> </option> </component> @@ -196,8 +177,6 @@ <foldersAlwaysOnTop value="true" /> </navigator> <panes> - <pane id="Scratches" /> - <pane id="Scope" /> <pane id="ProjectPane"> <subPane> <expand> @@ -210,53 +189,12 @@ <item name="React-Blog" type="462c0819:PsiDirectoryNode" /> <item name="src" type="462c0819:PsiDirectoryNode" /> </path> - <path> - <item name="React-Blog" type="b2602c69:ProjectViewProjectNode" /> - <item name="React-Blog" type="462c0819:PsiDirectoryNode" /> - <item name="src" type="462c0819:PsiDirectoryNode" /> - <item name="actions" type="462c0819:PsiDirectoryNode" /> - </path> - <path> - <item name="React-Blog" type="b2602c69:ProjectViewProjectNode" /> - <item name="React-Blog" type="462c0819:PsiDirectoryNode" /> - <item name="src" type="462c0819:PsiDirectoryNode" /> - <item name="components" type="462c0819:PsiDirectoryNode" /> - </path> - <path> - <item name="React-Blog" type="b2602c69:ProjectViewProjectNode" /> - <item name="React-Blog" type="462c0819:PsiDirectoryNode" /> - <item name="src" type="462c0819:PsiDirectoryNode" /> - <item name="containers" type="462c0819:PsiDirectoryNode" /> - </path> - <path> - <item name="React-Blog" type="b2602c69:ProjectViewProjectNode" /> - <item name="React-Blog" type="462c0819:PsiDirectoryNode" /> - <item name="src" type="462c0819:PsiDirectoryNode" /> - <item name="helpers" type="462c0819:PsiDirectoryNode" /> - </path> - <path> - <item name="React-Blog" type="b2602c69:ProjectViewProjectNode" /> - <item name="React-Blog" type="462c0819:PsiDirectoryNode" /> - <item name="src" type="462c0819:PsiDirectoryNode" /> - <item name="helpers" type="462c0819:PsiDirectoryNode" /> - <item name="routes" type="462c0819:PsiDirectoryNode" /> - </path> - <path> - <item name="React-Blog" type="b2602c69:ProjectViewProjectNode" /> - <item name="React-Blog" type="462c0819:PsiDirectoryNode" /> - <item name="src" type="462c0819:PsiDirectoryNode" /> - <item name="reducers" type="462c0819:PsiDirectoryNode" /> - </path> - <path> - <item name="React-Blog" type="b2602c69:ProjectViewProjectNode" /> - <item name="React-Blog" type="462c0819:PsiDirectoryNode" /> - <item name="src" type="462c0819:PsiDirectoryNode" /> - <item name="routes" type="462c0819:PsiDirectoryNode" /> - </path> </expand> <select /> </subPane> </pane> + <pane id="Scope" /> + <pane id="Scratches" /> </panes> </component> <component name="PropertiesComponent"> @@ -454,24 +392,25 @@ <workItem from="1510523378037" duration="284000" /> <workItem from="1510566835868" duration="12252000" /> <workItem from="1510593444411" duration="8711000" /> - <workItem from="1510653141916" duration="5517000" /> + <workItem from="1510653141916" duration="7034000" /> + <workItem from="1510743738832" duration="1662000" /> </task> <servers /> </component> <component name="TimeTrackingManager"> - <option name="totallyTimeSpent" value="316200000" /> + <option name="totallyTimeSpent" value="319379000" /> </component> <component name="ToolWindowManager"> <frame x="-8" y="-8" width="1382" height="744" extended-state="6" /> - <editor active="true" /> <layout> <window_info id="Project" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="true" show_stripe_button="true" weight="0.24181548" sideWeight="0.5" order="0" side_tool="false" content_ui="combo" /> <window_info id="TODO" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="6" side_tool="false" content_ui="tabs" /> <window_info id="Event Log" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.3289689" sideWeight="0.5" order="7" side_tool="true" content_ui="tabs" /> + <window_info id="Find" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.3289689" sideWeight="0.5" order="1" side_tool="false" content_ui="tabs" /> <window_info id="Version Control" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="7" side_tool="false" content_ui="tabs" /> <window_info id="Run" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33060557" sideWeight="0.5" order="2" side_tool="false" content_ui="tabs" /> <window_info id="Structure" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.24962178" sideWeight="0.5" order="1" side_tool="false" content_ui="tabs" /> - <window_info id="Terminal" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="true" show_stripe_button="true" weight="0.30441898" sideWeight="0.5" order="7" side_tool="false" content_ui="tabs" /> + <window_info id="Terminal" active="true" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="true" show_stripe_button="true" weight="0.30441898" sideWeight="0.5" order="7" side_tool="false" content_ui="tabs" /> <window_info id="Favorites" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="2" side_tool="true" content_ui="tabs" /> <window_info id="Debug" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.4" sideWeight="0.5" order="3" side_tool="false" content_ui="tabs" /> <window_info id="Cvs" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.25" sideWeight="0.5" order="4" side_tool="false" content_ui="tabs" /> @@ -480,7 +419,6 @@ <window_info id="Inspection" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.4" sideWeight="0.5" order="5" side_tool="false" content_ui="tabs" /> <window_info id="Mongo Explorer" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.19667171" sideWeight="0.5" order="3" side_tool="false" content_ui="tabs" /> <window_info id="Hierarchy" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.25" sideWeight="0.5" order="2" side_tool="false" content_ui="combo" /> - <window_info id="Find" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.3289689" sideWeight="0.5" order="1" side_tool="false" content_ui="tabs" /> <window_info id="Ant Build" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.25" sideWeight="0.5" order="1" side_tool="false" content_ui="tabs" /> </layout> <layout-to-restore> @@ -516,7 +454,6 @@ <watches-manager /> </component> <component name="editorHistoryManager"> - <entry file="file://$PROJECT_DIR$/npm-debug.log" /> <entry file="file://$PROJECT_DIR$/dist/bundle.js" /> <entry file="file://$PROJECT_DIR$/semantic.json"> <provider selected="true" editor-type-id="text-editor"> @@ -530,13 +467,6 @@ <state /> </provider> </entry> - <entry file="file://$PROJECT_DIR$/src/components/widgets/blog/PieChart.js"> - <provider selected="true" editor-type-id="text-editor"> - <state relative-caret-position="243"> - <caret line="32" column="22" lean-forward="true" selection-start-line="32" selection-start-column="22" selection-end-line="32" selection-end-column="22" /> - </state> - </provider> - </entry> <entry file="file://$PROJECT_DIR$/src/components/widgets/blog/elements/TextBox.js"> <provider selected="true" editor-type-id="text-editor"> <state relative-caret-position="272"> @@ -685,9 +615,6 @@ <provider selected="true" editor-type-id="text-editor"> <state relative-caret-position="238"> <caret line="14" column="2" lean-forward="true" selection-start-line="14" selection-start-column="2" selection-end-line="14" selection-end-column="2" /> - <folding> - <element signature="e#0#26#0" expanded="false" /> - </folding> </state> </provider> </entry> @@ -695,9 +622,6 @@ <provider selected="true" editor-type-id="text-editor"> <state relative-caret-position="170"> <caret line="10" column="32" lean-forward="false" selection-start-line="10" selection-start-column="32" selection-end-line="10" selection-end-column="32" /> - <folding> - <element signature="e#0#26#0" expanded="false" /> - </folding> </state> </provider> </entry> @@ -727,16 +651,6 @@ <provider selected="true" editor-type-id="text-editor"> <state relative-caret-position="136"> <caret line="10" column="36" lean-forward="false" selection-start-line="10" selection-start-column="36" selection-end-line="10" selection-end-column="36" /> - <folding /> - </state> - </provider> - </entry> - <entry file="file://$PROJECT_DIR$/src/components/BlogPage.js" /> - <entry file="file://$PROJECT_DIR$/src/containers/PostsContainer.js"> - <provider selected="true" editor-type-id="text-editor"> - <state relative-caret-position="34"> - <caret line="2" column="38" lean-forward="true" selection-start-line="2" selection-start-column="38" selection-end-line="2" selection-end-column="38" /> - <folding /> </state> </provider> </entry> @@ -756,13 +670,6 @@ </entry> <entry file="file://$PROJECT_DIR$/src/helpers/like.js" /> <entry file="file://$PROJECT_DIR$/src/helpers/rest.js" /> - <entry file="file://$PROJECT_DIR$/src/components/widgets/blog/BlogList.js"> - <provider selected="true" editor-type-id="text-editor"> - <state relative-caret-position="0"> - <caret line="5" column="48" lean-forward="false" selection-start-line="5" selection-start-column="48" selection-end-line="5" selection-end-column="48" /> - </state> - </provider> - </entry> <entry file="file://$PROJECT_DIR$/src/components/widgets/blog/elements/Image.js"> <provider selected="true" editor-type-id="text-editor"> <state relative-caret-position="0"> @@ -775,9 +682,6 @@ <provider selected="true" editor-type-id="text-editor"> <state relative-caret-position="-61"> <caret line="8" column="0" lean-forward="true" selection-start-line="8" selection-start-column="0" selection-end-line="8" selection-end-column="0" /> - <folding> - <element signature="e#0#39#0" expanded="false" /> - </folding> </state> </provider> </entry> @@ -791,19 +695,10 @@ </state> </provider> </entry> - <entry file="file://$PROJECT_DIR$/webpack.config.js"> - <provider selected="true" editor-type-id="text-editor"> - <state relative-caret-position="168"> - <caret line="32" column="8" lean-forward="true" selection-start-line="32" selection-start-column="8" selection-end-line="32" selection-end-column="8" /> - <folding /> - </state> - </provider> - </entry> <entry file="file://$PROJECT_DIR$/src/actions/Post.js"> <provider selected="true" editor-type-id="text-editor"> <state relative-caret-position="278"> <caret line="56" column="0" lean-forward="true" selection-start-line="56" selection-start-column="0" selection-end-line="56" selection-end-column="0" /> - <folding /> </state> </provider> </entry> @@ -811,15 +706,13 @@ <provider selected="true" editor-type-id="text-editor"> <state relative-caret-position="276"> <caret line="56" column="2" lean-forward="true" selection-start-line="56" selection-start-column="2" selection-end-line="56" selection-end-column="2" /> - <folding /> </state> </provider> </entry> - <entry file="file://$PROJECT_DIR$/src/reducers/Posts.js"> + <entry file="file://$PROJECT_DIR$/src/containers/PostContainer.js"> <provider selected="true" editor-type-id="text-editor"> - <state relative-caret-position="82"> - <caret line="12" column="37" lean-forward="true" selection-start-line="12" selection-start-column="37" selection-end-line="12" selection-end-column="37" /> - <folding /> + <state relative-caret-position="255"> + <caret line="15" column="0" lean-forward="true" selection-start-line="15" selection-start-column="0" selection-end-line="15" selection-end-column="0" /> </state> </provider> </entry> @@ -827,17 +720,20 @@ <provider selected="true" editor-type-id="text-editor"> <state relative-caret-position="17"> <caret line="1" column="0" lean-forward="false" selection-start-line="1" selection-start-column="0" selection-end-line="1" selection-end-column="0" /> - <folding /> </state> </provider> </entry> - <entry file="file://$PROJECT_DIR$/src/routes/Blog.js"> + <entry file="file://$PROJECT_DIR$/webpack.config.js"> <provider selected="true" editor-type-id="text-editor"> - <state relative-caret-position="296"> - <caret line="21" column="2" lean-forward="true" selection-start-line="21" selection-start-column="2" selection-end-line="21" selection-end-column="2" /> - <folding> - <element signature="e#0#55#0" expanded="true" /> - </folding> + <state relative-caret-position="168"> + <caret line="32" column="8" lean-forward="true" selection-start-line="32" selection-start-column="8" selection-end-line="32" selection-end-column="8" /> + </state> + </provider> + </entry> + <entry file="file://$PROJECT_DIR$/src/reducers/Posts.js"> + <provider selected="true" editor-type-id="text-editor"> + <state relative-caret-position="153"> + <caret line="12" column="37" lean-forward="true" selection-start-line="12" selection-start-column="37" selection-end-line="12" selection-end-column="37" /> </state> </provider> </entry> @@ -849,15 +745,59 @@ </state> </provider> </entry> - <entry file="file://$PROJECT_DIR$/src/containers/PostContainer.js"> + <entry file="file://$PROJECT_DIR$/node_modules/lodash/collection.js"> <provider selected="true" editor-type-id="text-editor"> - <state relative-caret-position="255"> - <caret line="15" column="0" lean-forward="true" selection-start-line="15" selection-start-column="0" selection-end-line="15" selection-end-column="0" /> + <state relative-caret-position="0"> + <caret line="0" column="0" lean-forward="false" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" /> + <folding /> + </state> + </provider> + </entry> + <entry file="file://$PROJECT_DIR$/src/components/widgets/blog/PieChart.js"> + <provider selected="true" editor-type-id="text-editor"> + <state relative-caret-position="340"> + <caret line="40" column="0" lean-forward="false" selection-start-line="40" selection-start-column="0" selection-end-line="40" selection-end-column="0" /> + <folding /> + </state> + </provider> + </entry> + <entry file="file://$PROJECT_DIR$/src/components/widgets/blog/BlogList.js"> + <provider selected="true" editor-type-id="text-editor"> + <state relative-caret-position="-336"> + <caret line="5" column="48" lean-forward="false" selection-start-line="5" selection-start-column="48" selection-end-line="5" selection-end-column="48" /> + <folding /> + </state> + </provider> + </entry> + <entry file="file://$PROJECT_DIR$/src/components/BlogPage.js"> + <provider selected="true" editor-type-id="text-editor"> + <state relative-caret-position="442"> + <caret line="26" column="29" lean-forward="false" selection-start-line="26" selection-start-column="29" selection-end-line="26" selection-end-column="29" /> + <folding> + <element signature="e#0#26#0" expanded="true" /> + </folding> + </state> + </provider> + </entry> + <entry file="file://$PROJECT_DIR$/src/containers/PageContainer.js"> + <provider selected="true" editor-type-id="text-editor"> + <state relative-caret-position="272"> + <caret line="16" column="0" lean-forward="true" selection-start-line="16" selection-start-column="0" selection-end-line="16" selection-end-column="0" /> <folding> <element signature="e#0#36#0" expanded="true" /> </folding> </state> </provider> </entry> + <entry file="file://$PROJECT_DIR$/src/routes/Blog.js"> + <provider selected="true" editor-type-id="text-editor"> + <state relative-caret-position="481"> + <caret line="30" column="0" lean-forward="true" selection-start-line="30" selection-start-column="0" selection-end-line="30" selection-end-column="0" /> + <folding> + <element signature="e#0#55#0" expanded="true" /> + </folding> + </state> + </provider> + </entry> </component> </project> \ No newline at end of file diff --git a/src/components/BlogPage.js b/src/components/BlogPage.js new file mode 100644 index 0000000..aaba7b1 --- /dev/null +++ b/src/components/BlogPage.js @@ -0,0 +1,35 @@ +import React from 'react'; +import BlogList from './widgets/blog/BlogList'; +import PieChart from './widgets/blog/PieChart'; +import {map} from 'lodash/collection'; + +const BlogPage = ({blogItems, like}) => { + const columns = map( + blogItems, + item => [item.title, item.metaInfo.likes] + ); + + return ( + <div> + <BlogList + blogItems={blogItems} + like={like} + /> + <PieChart + columns={columns} + /> + </div> + ); +}; + +BlogPage.propTypes = { + blogItems: BlogList.propTypes.blogItems, + like: BlogList.propTypes.like +}; + +BlogPage.defaultProps = { + blogItems: BlogList.defaultProps.blogItems, + like: BlogList.defaultProps.like +}; + +export default BlogPage; diff --git a/src/containers/PostsContainer.js b/src/containers/PageContainer.js similarity index 74% rename from src/containers/PostsContainer.js rename to src/containers/PageContainer.js index af8b935..3a7856a 100644 --- a/src/containers/PostsContainer.js +++ b/src/containers/PageContainer.js @@ -1,5 +1,5 @@ import {connect} from 'react-redux'; -import BlogList from '../components/widgets/blog/BlogList'; +import BlogPage from '../components/BlogPage'; import {flowRight} from 'lodash/util'; import {incrementLikes} from '../actions/Posts'; @@ -13,4 +13,4 @@ const actionsToProps = (dispatch) => ({ like: flowRight(dispatch, incrementLikes) }); -export default connect(stateToProps, actionsToProps)(BlogList); +export default connect(stateToProps, actionsToProps)(BlogPage); diff --git a/src/routes/Blog.js b/src/routes/Blog.js index 502957b..47c8df3 100644 --- a/src/routes/Blog.js +++ b/src/routes/Blog.js @@ -2,12 +2,12 @@ import MainLayout from 'components/layouts/MainLayout'; import {postsPath} from 'helpers/routes'; import {fetchPosts} from '../actions/Posts'; import {fetchPost} from '../actions/Post'; -import PostsContainer from '../containers/PostsContainer'; +import PageContainer from '../containers/PageContainer'; import PostContainer from '../containers/PostContainer'; const Index = { path: '/', - component: PostsContainer, + component: PageContainer, prepareData: (store) => { store.dispatch(fetchPosts()); } From f26b3f85da437a8c3041141dda7e684c43980a25 Mon Sep 17 00:00:00 2001 From: NtonBala <balashov.anton.1983@gmail.com> Date: Wed, 15 Nov 2017 15:05:34 +0200 Subject: [PATCH 10/11] Added Spinner & Error components. --- .idea/workspace.xml | 203 +++++++++++++++++------------ src/components/BlogPage.js | 20 ++- src/components/BlogPost.js | 23 +++- src/components/elements/Error.js | 13 ++ src/components/elements/Spinner.js | 13 ++ src/containers/PageContainer.js | 2 +- 6 files changed, 181 insertions(+), 93 deletions(-) create mode 100644 src/components/elements/Error.js create mode 100644 src/components/elements/Spinner.js diff --git a/.idea/workspace.xml b/.idea/workspace.xml index 8f042d6..3273e33 100644 --- a/.idea/workspace.xml +++ b/.idea/workspace.xml @@ -2,10 +2,12 @@ <project version="4"> <component name="ChangeListManager"> <list default="true" id="fbfc7658-0e79-45bf-b587-a6e48a0003d0" name="Default" comment=""> - <change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/src/components/BlogPage.js" /> - <change type="MOVED" beforePath="$PROJECT_DIR$/src/containers/PostsContainer.js" afterPath="$PROJECT_DIR$/src/containers/PageContainer.js" /> + <change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/src/components/elements/Error.js" /> + <change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/src/components/elements/Spinner.js" /> <change type="MODIFICATION" beforePath="$PROJECT_DIR$/.idea/workspace.xml" afterPath="$PROJECT_DIR$/.idea/workspace.xml" /> - <change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/routes/Blog.js" afterPath="$PROJECT_DIR$/src/routes/Blog.js" /> + <change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/components/BlogPage.js" afterPath="$PROJECT_DIR$/src/components/BlogPage.js" /> + <change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/components/BlogPost.js" afterPath="$PROJECT_DIR$/src/components/BlogPost.js" /> + <change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/containers/PageContainer.js" afterPath="$PROJECT_DIR$/src/containers/PageContainer.js" /> </list> <ignored path="$PROJECT_DIR$/.tmp/" /> <ignored path="$PROJECT_DIR$/temp/" /> @@ -22,35 +24,43 @@ <file leaf-file-name="BlogPage.js" pinned="false" current-in-tab="false"> <entry file="file://$PROJECT_DIR$/src/components/BlogPage.js"> <provider selected="true" editor-type-id="text-editor"> - <state relative-caret-position="442"> - <caret line="26" column="29" lean-forward="false" selection-start-line="26" selection-start-column="29" selection-end-line="26" selection-end-column="29" /> + <state relative-caret-position="370"> + <caret line="27" column="6" lean-forward="true" selection-start-line="27" selection-start-column="6" selection-end-line="27" selection-end-column="6" /> <folding> - <element signature="e#0#26#0" expanded="true" /> + <element signature="e#0#39#0" expanded="true" /> </folding> </state> </provider> </entry> </file> - <file leaf-file-name="PageContainer.js" pinned="false" current-in-tab="false"> - <entry file="file://$PROJECT_DIR$/src/containers/PageContainer.js"> + <file leaf-file-name="BlogPost.js" pinned="false" current-in-tab="false"> + <entry file="file://$PROJECT_DIR$/src/components/BlogPost.js"> <provider selected="true" editor-type-id="text-editor"> - <state relative-caret-position="272"> - <caret line="16" column="0" lean-forward="true" selection-start-line="16" selection-start-column="0" selection-end-line="16" selection-end-column="0" /> + <state relative-caret-position="238"> + <caret line="14" column="17" lean-forward="true" selection-start-line="14" selection-start-column="17" selection-end-line="14" selection-end-column="17" /> <folding> - <element signature="e#0#36#0" expanded="true" /> + <element signature="e#0#39#0" expanded="true" /> </folding> </state> </provider> </entry> </file> - <file leaf-file-name="Blog.js" pinned="false" current-in-tab="true"> - <entry file="file://$PROJECT_DIR$/src/routes/Blog.js"> + <file leaf-file-name=".eslintrc.js" pinned="false" current-in-tab="true"> + <entry file="file://$PROJECT_DIR$/.eslintrc.js"> <provider selected="true" editor-type-id="text-editor"> - <state relative-caret-position="481"> - <caret line="30" column="0" lean-forward="true" selection-start-line="30" selection-start-column="0" selection-end-line="30" selection-end-column="0" /> - <folding> - <element signature="e#0#55#0" expanded="true" /> - </folding> + <state relative-caret-position="96"> + <caret line="64" column="33" lean-forward="true" selection-start-line="64" selection-start-column="33" selection-end-line="64" selection-end-column="33" /> + <folding /> + </state> + </provider> + </entry> + </file> + <file leaf-file-name="BlogItem.js" pinned="false" current-in-tab="false"> + <entry file="file://$PROJECT_DIR$/src/components/widgets/blog/BlogItem.js"> + <provider selected="true" editor-type-id="text-editor"> + <state relative-caret-position="-613"> + <caret line="8" column="0" lean-forward="true" selection-start-line="8" selection-start-column="0" selection-end-line="8" selection-end-column="0" /> + <folding /> </state> </provider> </entry> @@ -86,8 +96,6 @@ <component name="IdeDocumentHistory"> <option name="CHANGED_PATHS"> <list> - <option value="$PROJECT_DIR$/components/PieChart.js" /> - <option value="$PROJECT_DIR$/components/BlogPage.js" /> <option value="$PROJECT_DIR$/.gitignore" /> <option value="$PROJECT_DIR$/.babelrc" /> <option value="$PROJECT_DIR$/dist/bundle.js" /> @@ -128,15 +136,17 @@ <option value="$PROJECT_DIR$/src/store/index.js" /> <option value="$PROJECT_DIR$/src/containers/DevTools.js" /> <option value="$PROJECT_DIR$/src/containers/PostsContainer.js" /> - <option value="$PROJECT_DIR$/src/components/BlogPost.js" /> <option value="$PROJECT_DIR$/src/components/widgets/blog/BlogItem.js" /> <option value="$PROJECT_DIR$/src/actions/Posts.js" /> <option value="$PROJECT_DIR$/src/actions/Post.js" /> <option value="$PROJECT_DIR$/src/reducers/Posts.js" /> <option value="$PROJECT_DIR$/src/containers/PostContainer.js" /> - <option value="$PROJECT_DIR$/src/components/BlogPage.js" /> - <option value="$PROJECT_DIR$/src/containers/PageContainer.js" /> <option value="$PROJECT_DIR$/src/routes/Blog.js" /> + <option value="$PROJECT_DIR$/src/containers/PageContainer.js" /> + <option value="$PROJECT_DIR$/src/components/BlogPage.js" /> + <option value="$PROJECT_DIR$/src/components/elements/Spinner.js" /> + <option value="$PROJECT_DIR$/src/components/elements/Error.js" /> + <option value="$PROJECT_DIR$/src/components/BlogPost.js" /> </list> </option> </component> @@ -393,15 +403,16 @@ <workItem from="1510566835868" duration="12252000" /> <workItem from="1510593444411" duration="8711000" /> <workItem from="1510653141916" duration="7034000" /> - <workItem from="1510743738832" duration="1662000" /> + <workItem from="1510743738832" duration="5217000" /> </task> <servers /> </component> <component name="TimeTrackingManager"> - <option name="totallyTimeSpent" value="319379000" /> + <option name="totallyTimeSpent" value="322934000" /> </component> <component name="ToolWindowManager"> <frame x="-8" y="-8" width="1382" height="744" extended-state="6" /> + <editor active="true" /> <layout> <window_info id="Project" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="true" show_stripe_button="true" weight="0.24181548" sideWeight="0.5" order="0" side_tool="false" content_ui="combo" /> <window_info id="TODO" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="6" side_tool="false" content_ui="tabs" /> @@ -410,7 +421,7 @@ <window_info id="Version Control" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="7" side_tool="false" content_ui="tabs" /> <window_info id="Run" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33060557" sideWeight="0.5" order="2" side_tool="false" content_ui="tabs" /> <window_info id="Structure" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.24962178" sideWeight="0.5" order="1" side_tool="false" content_ui="tabs" /> - <window_info id="Terminal" active="true" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="true" show_stripe_button="true" weight="0.30441898" sideWeight="0.5" order="7" side_tool="false" content_ui="tabs" /> + <window_info id="Terminal" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="true" show_stripe_button="true" weight="0.30441898" sideWeight="0.5" order="7" side_tool="false" content_ui="tabs" /> <window_info id="Favorites" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="2" side_tool="true" content_ui="tabs" /> <window_info id="Debug" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.4" sideWeight="0.5" order="3" side_tool="false" content_ui="tabs" /> <window_info id="Cvs" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.25" sideWeight="0.5" order="4" side_tool="false" content_ui="tabs" /> @@ -428,17 +439,17 @@ <window_info id="Commander" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.4" sideWeight="0.5" order="0" side_tool="false" content_ui="tabs" /> <window_info id="Event Log" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.3289689" sideWeight="0.5" order="7" side_tool="true" content_ui="tabs" /> <window_info id="Inspection" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.4" sideWeight="0.5" order="5" side_tool="false" content_ui="tabs" /> - <window_info id="Run" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33060557" sideWeight="0.5" order="2" side_tool="false" content_ui="tabs" /> <window_info id="Version Control" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="8" side_tool="false" content_ui="tabs" /> + <window_info id="Run" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33060557" sideWeight="0.5" order="2" side_tool="false" content_ui="tabs" /> + <window_info id="Terminal" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="true" show_stripe_button="true" weight="0.30441898" sideWeight="0.5" order="9" side_tool="false" content_ui="tabs" /> <window_info id="Mongo Explorer" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.19667171" sideWeight="0.5" order="3" side_tool="false" content_ui="tabs" /> - <window_info id="Terminal" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.26022914" sideWeight="0.5" order="9" side_tool="false" content_ui="tabs" /> - <window_info id="Project" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="true" show_stripe_button="true" weight="0.25417298" sideWeight="0.5" order="0" side_tool="false" content_ui="combo" /> + <window_info id="Project" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="true" show_stripe_button="true" weight="0.24181548" sideWeight="0.5" order="0" side_tool="false" content_ui="combo" /> <window_info id="Hierarchy" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.25" sideWeight="0.5" order="2" side_tool="false" content_ui="combo" /> <window_info id="Find" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.3289689" sideWeight="0.5" order="1" side_tool="false" content_ui="tabs" /> <window_info id="Structure" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.24962178" sideWeight="0.5" order="1" side_tool="false" content_ui="tabs" /> <window_info id="Ant Build" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.25" sideWeight="0.5" order="1" side_tool="false" content_ui="tabs" /> - <window_info id="Debug" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.4" sideWeight="0.5" order="3" side_tool="false" content_ui="tabs" /> <window_info id="Favorites" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="2" side_tool="true" content_ui="tabs" /> + <window_info id="Debug" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.4" sideWeight="0.5" order="3" side_tool="false" content_ui="tabs" /> </layout-to-restore> </component> <component name="TypeScriptGeneratedFilesManager"> @@ -454,14 +465,6 @@ <watches-manager /> </component> <component name="editorHistoryManager"> - <entry file="file://$PROJECT_DIR$/dist/bundle.js" /> - <entry file="file://$PROJECT_DIR$/semantic.json"> - <provider selected="true" editor-type-id="text-editor"> - <state relative-caret-position="0"> - <caret line="0" column="0" lean-forward="false" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" /> - </state> - </provider> - </entry> <entry file="file://$PROJECT_DIR$/favicon.ico"> <provider selected="true" editor-type-id="images"> <state /> @@ -489,13 +492,6 @@ </provider> </entry> <entry file="file://$PROJECT_DIR$/src/constants/static/blogItems.js" /> - <entry file="file://$PROJECT_DIR$/.eslintrc.js"> - <provider selected="true" editor-type-id="text-editor"> - <state relative-caret-position="1139"> - <caret line="67" column="30" lean-forward="true" selection-start-line="67" selection-start-column="30" selection-end-line="67" selection-end-column="30" /> - </state> - </provider> - </entry> <entry file="file://$PROJECT_DIR$/.babelrc"> <provider selected="true" editor-type-id="text-editor"> <state relative-caret-position="119"> @@ -517,13 +513,6 @@ </state> </provider> </entry> - <entry file="file://$PROJECT_DIR$/src/components/widgets/blog/elements/Title.js"> - <provider selected="true" editor-type-id="text-editor"> - <state relative-caret-position="119"> - <caret line="12" column="14" lean-forward="false" selection-start-line="12" selection-start-column="14" selection-end-line="12" selection-end-column="14" /> - </state> - </provider> - </entry> <entry file="file://$PROJECT_DIR$/src/components/layouts/MainLayout.js"> <provider selected="true" editor-type-id="text-editor"> <state relative-caret-position="85"> @@ -651,6 +640,7 @@ <provider selected="true" editor-type-id="text-editor"> <state relative-caret-position="136"> <caret line="10" column="36" lean-forward="false" selection-start-line="10" selection-start-column="36" selection-end-line="10" selection-end-column="36" /> + <folding /> </state> </provider> </entry> @@ -678,13 +668,6 @@ </state> </provider> </entry> - <entry file="file://$PROJECT_DIR$/src/components/widgets/blog/BlogItem.js"> - <provider selected="true" editor-type-id="text-editor"> - <state relative-caret-position="-61"> - <caret line="8" column="0" lean-forward="true" selection-start-line="8" selection-start-column="0" selection-end-line="8" selection-end-column="0" /> - </state> - </provider> - </entry> <entry file="file://$PROJECT_DIR$/src/App.js"> <provider selected="true" editor-type-id="text-editor"> <state relative-caret-position="238"> @@ -709,13 +692,6 @@ </state> </provider> </entry> - <entry file="file://$PROJECT_DIR$/src/containers/PostContainer.js"> - <provider selected="true" editor-type-id="text-editor"> - <state relative-caret-position="255"> - <caret line="15" column="0" lean-forward="true" selection-start-line="15" selection-start-column="0" selection-end-line="15" selection-end-column="0" /> - </state> - </provider> - </entry> <entry file="file://$PROJECT_DIR$/src/helpers/routes/index.js"> <provider selected="true" editor-type-id="text-editor"> <state relative-caret-position="17"> @@ -734,13 +710,6 @@ <provider selected="true" editor-type-id="text-editor"> <state relative-caret-position="153"> <caret line="12" column="37" lean-forward="true" selection-start-line="12" selection-start-column="37" selection-end-line="12" selection-end-column="37" /> - </state> - </provider> - </entry> - <entry file="file://$PROJECT_DIR$/src/components/BlogPost.js"> - <provider selected="true" editor-type-id="text-editor"> - <state relative-caret-position="289"> - <caret line="19" column="0" lean-forward="false" selection-start-line="19" selection-start-column="0" selection-end-line="19" selection-end-column="0" /> <folding /> </state> </provider> @@ -753,32 +722,70 @@ </state> </provider> </entry> + <entry file="file://$PROJECT_DIR$/src/routes/Blog.js"> + <provider selected="true" editor-type-id="text-editor"> + <state relative-caret-position="481"> + <caret line="30" column="0" lean-forward="true" selection-start-line="30" selection-start-column="0" selection-end-line="30" selection-end-column="0" /> + <folding> + <element signature="e#0#55#0" expanded="false" /> + </folding> + </state> + </provider> + </entry> + <entry file="file://$PROJECT_DIR$/src/components/widgets/blog/elements/Title.js"> + <provider selected="true" editor-type-id="text-editor"> + <state relative-caret-position="204"> + <caret line="12" column="14" lean-forward="false" selection-start-line="12" selection-start-column="14" selection-end-line="12" selection-end-column="14" /> + <folding> + <element signature="e#0#39#0" expanded="false" /> + </folding> + </state> + </provider> + </entry> <entry file="file://$PROJECT_DIR$/src/components/widgets/blog/PieChart.js"> <provider selected="true" editor-type-id="text-editor"> - <state relative-caret-position="340"> + <state relative-caret-position="680"> <caret line="40" column="0" lean-forward="false" selection-start-line="40" selection-start-column="0" selection-end-line="40" selection-end-column="0" /> - <folding /> + <folding> + <element signature="e#0#39#0" expanded="false" /> + </folding> </state> </provider> </entry> <entry file="file://$PROJECT_DIR$/src/components/widgets/blog/BlogList.js"> <provider selected="true" editor-type-id="text-editor"> - <state relative-caret-position="-336"> - <caret line="5" column="48" lean-forward="false" selection-start-line="5" selection-start-column="48" selection-end-line="5" selection-end-column="48" /> + <state relative-caret-position="267"> + <caret line="23" column="58" lean-forward="true" selection-start-line="23" selection-start-column="58" selection-end-line="23" selection-end-column="58" /> <folding /> </state> </provider> </entry> - <entry file="file://$PROJECT_DIR$/src/components/BlogPage.js"> + <entry file="file://$PROJECT_DIR$/src/containers/PostContainer.js"> <provider selected="true" editor-type-id="text-editor"> - <state relative-caret-position="442"> - <caret line="26" column="29" lean-forward="false" selection-start-line="26" selection-start-column="29" selection-end-line="26" selection-end-column="29" /> + <state relative-caret-position="255"> + <caret line="15" column="0" lean-forward="true" selection-start-line="15" selection-start-column="0" selection-end-line="15" selection-end-column="0" /> <folding> - <element signature="e#0#26#0" expanded="true" /> + <element signature="e#0#36#0" expanded="true" /> </folding> </state> </provider> </entry> + <entry file="file://$PROJECT_DIR$/src/components/elements/Error.js"> + <provider selected="true" editor-type-id="text-editor"> + <state relative-caret-position="204"> + <caret line="13" column="0" lean-forward="true" selection-start-line="13" selection-start-column="0" selection-end-line="13" selection-end-column="0" /> + <folding /> + </state> + </provider> + </entry> + <entry file="file://$PROJECT_DIR$/src/components/elements/Spinner.js"> + <provider selected="true" editor-type-id="text-editor"> + <state relative-caret-position="85"> + <caret line="6" column="23" lean-forward="false" selection-start-line="6" selection-start-column="23" selection-end-line="6" selection-end-column="23" /> + <folding /> + </state> + </provider> + </entry> <entry file="file://$PROJECT_DIR$/src/containers/PageContainer.js"> <provider selected="true" editor-type-id="text-editor"> <state relative-caret-position="272"> @@ -789,15 +796,41 @@ </state> </provider> </entry> - <entry file="file://$PROJECT_DIR$/src/routes/Blog.js"> + <entry file="file://$PROJECT_DIR$/src/components/BlogPage.js"> <provider selected="true" editor-type-id="text-editor"> - <state relative-caret-position="481"> - <caret line="30" column="0" lean-forward="true" selection-start-line="30" selection-start-column="0" selection-end-line="30" selection-end-column="0" /> + <state relative-caret-position="370"> + <caret line="27" column="6" lean-forward="true" selection-start-line="27" selection-start-column="6" selection-end-line="27" selection-end-column="6" /> <folding> - <element signature="e#0#55#0" expanded="true" /> + <element signature="e#0#39#0" expanded="true" /> </folding> </state> </provider> </entry> + <entry file="file://$PROJECT_DIR$/src/components/widgets/blog/BlogItem.js"> + <provider selected="true" editor-type-id="text-editor"> + <state relative-caret-position="-613"> + <caret line="8" column="0" lean-forward="true" selection-start-line="8" selection-start-column="0" selection-end-line="8" selection-end-column="0" /> + <folding /> + </state> + </provider> + </entry> + <entry file="file://$PROJECT_DIR$/src/components/BlogPost.js"> + <provider selected="true" editor-type-id="text-editor"> + <state relative-caret-position="238"> + <caret line="14" column="17" lean-forward="true" selection-start-line="14" selection-start-column="17" selection-end-line="14" selection-end-column="17" /> + <folding> + <element signature="e#0#39#0" expanded="true" /> + </folding> + </state> + </provider> + </entry> + <entry file="file://$PROJECT_DIR$/.eslintrc.js"> + <provider selected="true" editor-type-id="text-editor"> + <state relative-caret-position="96"> + <caret line="64" column="33" lean-forward="true" selection-start-line="64" selection-start-column="33" selection-end-line="64" selection-end-column="33" /> + <folding /> + </state> + </provider> + </entry> </component> </project> \ No newline at end of file diff --git a/src/components/BlogPage.js b/src/components/BlogPage.js index aaba7b1..598e19c 100644 --- a/src/components/BlogPage.js +++ b/src/components/BlogPage.js @@ -1,15 +1,21 @@ -import React from 'react'; +import React, {PropTypes} from 'react'; import BlogList from './widgets/blog/BlogList'; import PieChart from './widgets/blog/PieChart'; import {map} from 'lodash/collection'; +import Error from 'components/elements/Error'; +import Spinner from 'components/elements/Spinner'; -const BlogPage = ({blogItems, like}) => { +const BlogPage = ({blogItems, like, error, isRequesting}) => { const columns = map( blogItems, item => [item.title, item.metaInfo.likes] ); - return ( + if (error) return <Error/>; + + if (isRequesting) return <Spinner/>; + + else return ( <div> <BlogList blogItems={blogItems} @@ -24,12 +30,16 @@ const BlogPage = ({blogItems, like}) => { BlogPage.propTypes = { blogItems: BlogList.propTypes.blogItems, - like: BlogList.propTypes.like + like: BlogList.propTypes.like, + error: PropTypes.bool, + isRequesting: PropTypes.bool }; BlogPage.defaultProps = { blogItems: BlogList.defaultProps.blogItems, - like: BlogList.defaultProps.like + like: BlogList.defaultProps.like, + error: false, + isRequesting: false }; export default BlogPage; diff --git a/src/components/BlogPost.js b/src/components/BlogPost.js index d2d2640..5844025 100644 --- a/src/components/BlogPost.js +++ b/src/components/BlogPost.js @@ -1,9 +1,13 @@ import React, {PropTypes} from 'react'; import BlogItem from 'components/widgets/blog/BlogItem'; import {Item} from 'semantic-ui-react'; +import Error from 'components/elements/Error'; +import Spinner from 'components/elements/Spinner'; -const BlogPost = ({blogItem, like}) => ( +const BlogPost = ({blogItem, like, isRequesting, error}) => ( <Item.Group> + {isRequesting && <Spinner/>} + {error && <Error/>} {blogItem && <BlogItem {...blogItem} like={() => like(blogItem._id)} @@ -13,7 +17,22 @@ const BlogPost = ({blogItem, like}) => ( BlogPost.propTypes = { blogItem: PropTypes.object, - like: BlogItem.propTypes.like + like: BlogItem.propTypes.like, + isRequesting: PropTypes.bool, + error: PropTypes.bool +}; + +BlogPost.defaultProps = { + blogItem: { + _id: BlogItem.defaultProps._id, + image: BlogItem.defaultProps.image, + title: BlogItem.defaultProps.title, + description: BlogItem.defaultProps.description, + metaInfo: BlogItem.defaultProps.metaInfo + }, + like: BlogItem.defaultProps.like, + isRequesting: false, + error: false }; export default BlogPost; diff --git a/src/components/elements/Error.js b/src/components/elements/Error.js new file mode 100644 index 0000000..570cec9 --- /dev/null +++ b/src/components/elements/Error.js @@ -0,0 +1,13 @@ +import React from 'react'; +import {Segment, Header} from 'semantic-ui-react'; + +const Error = () => ( + <Segment> + <Header + size='small' + style={{color: '#4183c4'}} + >Oops! Some Error occured!</Header> + </Segment> +); + +export default Error; diff --git a/src/components/elements/Spinner.js b/src/components/elements/Spinner.js new file mode 100644 index 0000000..66a007a --- /dev/null +++ b/src/components/elements/Spinner.js @@ -0,0 +1,13 @@ +import React from 'react'; +import {Segment, Header} from 'semantic-ui-react'; + +const Spinner = () => ( + <Segment> + <Header + size='small' + style={{color: '#4183c4'}} + >Loading...</Header> + </Segment> +); + +export default Spinner; diff --git a/src/containers/PageContainer.js b/src/containers/PageContainer.js index 3a7856a..00c674c 100644 --- a/src/containers/PageContainer.js +++ b/src/containers/PageContainer.js @@ -5,7 +5,7 @@ import {incrementLikes} from '../actions/Posts'; const stateToProps = (state) => ({ blogItems: state.posts.entries, - isFetching: state.posts.isFetching, + isRequesting: state.posts.isRequesting, error: state.posts.error }); From 77cb47ce24ff8195512fe1fdee441e16cc813f22 Mon Sep 17 00:00:00 2001 From: NtonBala <balashov.anton.1983@gmail.com> Date: Tue, 21 Nov 2017 12:12:27 +0200 Subject: [PATCH 11/11] Moved action & action type for incrementing likes count in separated modules, added processing action for incrementing likes count in post & posts reducers, created LikeContainer. Moved away PagaContainer & added two containers: for PieChart & BlogList. --- .idea/workspace.xml | 421 +++++++++--------- src/actions/Post.js | 26 -- src/actions/Posts.js | 27 -- src/actions/actionCreators.js | 19 + src/components/BlogPage.js | 53 +-- src/components/BlogPost.js | 22 +- src/components/widgets/blog/BlogItem.js | 18 +- src/components/widgets/blog/BlogList.js | 47 +- src/components/widgets/blog/PieChart.js | 1 - src/components/widgets/blog/elements/Like.js | 10 +- src/constants/actionTypes/PostActionTypes.js | 4 - src/constants/actionTypes/PostsActionTypes.js | 4 - src/constants/actionTypes/actionTypes.js | 2 + src/containers/BlogListContainer.js | 8 + src/containers/LikeContainer.js | 9 + src/containers/PageContainer.js | 16 - src/containers/PieChartContainer.js | 9 + src/containers/PostContainer.js | 11 +- src/reducers/Post.js | 16 +- src/reducers/Posts.js | 16 +- src/routes/Blog.js | 4 +- 21 files changed, 326 insertions(+), 417 deletions(-) create mode 100644 src/actions/actionCreators.js create mode 100644 src/constants/actionTypes/actionTypes.js create mode 100644 src/containers/BlogListContainer.js create mode 100644 src/containers/LikeContainer.js delete mode 100644 src/containers/PageContainer.js create mode 100644 src/containers/PieChartContainer.js diff --git a/.idea/workspace.xml b/.idea/workspace.xml index 3273e33..a966925 100644 --- a/.idea/workspace.xml +++ b/.idea/workspace.xml @@ -2,12 +2,27 @@ <project version="4"> <component name="ChangeListManager"> <list default="true" id="fbfc7658-0e79-45bf-b587-a6e48a0003d0" name="Default" comment=""> - <change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/src/components/elements/Error.js" /> - <change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/src/components/elements/Spinner.js" /> + <change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/src/actions/actionCreators.js" /> + <change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/src/constants/actionTypes/actionTypes.js" /> + <change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/src/containers/BlogListContainer.js" /> + <change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/src/containers/LikeContainer.js" /> + <change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/src/containers/PieChartContainer.js" /> + <change type="DELETED" beforePath="$PROJECT_DIR$/src/containers/PageContainer.js" afterPath="" /> <change type="MODIFICATION" beforePath="$PROJECT_DIR$/.idea/workspace.xml" afterPath="$PROJECT_DIR$/.idea/workspace.xml" /> + <change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/actions/Post.js" afterPath="$PROJECT_DIR$/src/actions/Post.js" /> + <change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/actions/Posts.js" afterPath="$PROJECT_DIR$/src/actions/Posts.js" /> <change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/components/BlogPage.js" afterPath="$PROJECT_DIR$/src/components/BlogPage.js" /> <change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/components/BlogPost.js" afterPath="$PROJECT_DIR$/src/components/BlogPost.js" /> - <change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/containers/PageContainer.js" afterPath="$PROJECT_DIR$/src/containers/PageContainer.js" /> + <change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/components/widgets/blog/BlogItem.js" afterPath="$PROJECT_DIR$/src/components/widgets/blog/BlogItem.js" /> + <change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/components/widgets/blog/BlogList.js" afterPath="$PROJECT_DIR$/src/components/widgets/blog/BlogList.js" /> + <change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/components/widgets/blog/PieChart.js" afterPath="$PROJECT_DIR$/src/components/widgets/blog/PieChart.js" /> + <change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/components/widgets/blog/elements/Like.js" afterPath="$PROJECT_DIR$/src/components/widgets/blog/elements/Like.js" /> + <change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/constants/actionTypes/PostActionTypes.js" afterPath="$PROJECT_DIR$/src/constants/actionTypes/PostActionTypes.js" /> + <change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/constants/actionTypes/PostsActionTypes.js" afterPath="$PROJECT_DIR$/src/constants/actionTypes/PostsActionTypes.js" /> + <change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/containers/PostContainer.js" afterPath="$PROJECT_DIR$/src/containers/PostContainer.js" /> + <change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/reducers/Post.js" afterPath="$PROJECT_DIR$/src/reducers/Post.js" /> + <change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/reducers/Posts.js" afterPath="$PROJECT_DIR$/src/reducers/Posts.js" /> + <change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/routes/Blog.js" afterPath="$PROJECT_DIR$/src/routes/Blog.js" /> </list> <ignored path="$PROJECT_DIR$/.tmp/" /> <ignored path="$PROJECT_DIR$/temp/" /> @@ -21,23 +36,11 @@ </component> <component name="FileEditorManager"> <leaf SIDE_TABS_SIZE_LIMIT_KEY="300"> - <file leaf-file-name="BlogPage.js" pinned="false" current-in-tab="false"> - <entry file="file://$PROJECT_DIR$/src/components/BlogPage.js"> - <provider selected="true" editor-type-id="text-editor"> - <state relative-caret-position="370"> - <caret line="27" column="6" lean-forward="true" selection-start-line="27" selection-start-column="6" selection-end-line="27" selection-end-column="6" /> - <folding> - <element signature="e#0#39#0" expanded="true" /> - </folding> - </state> - </provider> - </entry> - </file> - <file leaf-file-name="BlogPost.js" pinned="false" current-in-tab="false"> - <entry file="file://$PROJECT_DIR$/src/components/BlogPost.js"> + <file leaf-file-name="BlogItem.js" pinned="false" current-in-tab="true"> + <entry file="file://$PROJECT_DIR$/src/components/widgets/blog/BlogItem.js"> <provider selected="true" editor-type-id="text-editor"> - <state relative-caret-position="238"> - <caret line="14" column="17" lean-forward="true" selection-start-line="14" selection-start-column="17" selection-end-line="14" selection-end-column="17" /> + <state relative-caret-position="553"> + <caret line="37" column="24" lean-forward="true" selection-start-line="37" selection-start-column="24" selection-end-line="37" selection-end-column="24" /> <folding> <element signature="e#0#39#0" expanded="true" /> </folding> @@ -45,26 +48,6 @@ </provider> </entry> </file> - <file leaf-file-name=".eslintrc.js" pinned="false" current-in-tab="true"> - <entry file="file://$PROJECT_DIR$/.eslintrc.js"> - <provider selected="true" editor-type-id="text-editor"> - <state relative-caret-position="96"> - <caret line="64" column="33" lean-forward="true" selection-start-line="64" selection-start-column="33" selection-end-line="64" selection-end-column="33" /> - <folding /> - </state> - </provider> - </entry> - </file> - <file leaf-file-name="BlogItem.js" pinned="false" current-in-tab="false"> - <entry file="file://$PROJECT_DIR$/src/components/widgets/blog/BlogItem.js"> - <provider selected="true" editor-type-id="text-editor"> - <state relative-caret-position="-613"> - <caret line="8" column="0" lean-forward="true" selection-start-line="8" selection-start-column="0" selection-end-line="8" selection-end-column="0" /> - <folding /> - </state> - </provider> - </entry> - </file> </leaf> </component> <component name="FindInProjectRecents"> @@ -96,18 +79,12 @@ <component name="IdeDocumentHistory"> <option name="CHANGED_PATHS"> <list> - <option value="$PROJECT_DIR$/.gitignore" /> - <option value="$PROJECT_DIR$/.babelrc" /> - <option value="$PROJECT_DIR$/dist/bundle.js" /> - <option value="$PROJECT_DIR$/src/helpers/date.js" /> <option value="$PROJECT_DIR$/src/constants/dateFormat.js" /> - <option value="$PROJECT_DIR$/src/components/widgets/blog/PieChart.js" /> <option value="$PROJECT_DIR$/src/components/widgets/blog/elements/Image.js" /> <option value="$PROJECT_DIR$/src/components/widgets/blog/elements/TextBox.js" /> <option value="$PROJECT_DIR$/src/routes/index.js" /> <option value="$PROJECT_DIR$/src/constants/static/blogItems.js" /> <option value="$PROJECT_DIR$/initializers/server/index.js" /> - <option value="$PROJECT_DIR$/src/components/widgets/blog/elements/Like.js" /> <option value="$PROJECT_DIR$/src/components/widgets/blog/elements/MetaInfo.js" /> <option value="$PROJECT_DIR$/src/components/widgets/blog/elements/Link.js" /> <option value="$PROJECT_DIR$/src/helpers/history.js" /> @@ -115,20 +92,15 @@ <option value="$PROJECT_DIR$/webpack.config.js" /> <option value="$PROJECT_DIR$/src/components/Post.js" /> <option value="$PROJECT_DIR$/.eslintrc.js" /> - <option value="$PROJECT_DIR$/src/components/widgets/blog/BlogList.js" /> <option value="$PROJECT_DIR$/src/helpers/routes/index.js" /> <option value="$PROJECT_DIR$/src/helpers/like.js" /> <option value="$PROJECT_DIR$/src/helpers/rest.js" /> <option value="$PROJECT_DIR$/src/components/layouts/MainLayout.js" /> <option value="$PROJECT_DIR$/src/components/widgets/blog/elements/Title.js" /> <option value="$PROJECT_DIR$/README.md" /> - <option value="$PROJECT_DIR$/src/constants/actionTypes/actionTypes.js" /> <option value="$PROJECT_DIR$/src/reducers/index.js" /> - <option value="$PROJECT_DIR$/src/constants/actionTypes/PostActionTypes.js" /> - <option value="$PROJECT_DIR$/src/constants/actionTypes/PostsActionTypes.js" /> <option value="$PROJECT_DIR$/src/index.js" /> <option value="$PROJECT_DIR$/src/constants/API.js" /> - <option value="$PROJECT_DIR$/src/reducers/Post.js" /> <option value="$PROJECT_DIR$/package.json" /> <option value="$PROJECT_DIR$/src/helpers/prepareData.js" /> <option value="$PROJECT_DIR$/index.html" /> @@ -136,17 +108,28 @@ <option value="$PROJECT_DIR$/src/store/index.js" /> <option value="$PROJECT_DIR$/src/containers/DevTools.js" /> <option value="$PROJECT_DIR$/src/containers/PostsContainer.js" /> - <option value="$PROJECT_DIR$/src/components/widgets/blog/BlogItem.js" /> - <option value="$PROJECT_DIR$/src/actions/Posts.js" /> + <option value="$PROJECT_DIR$/src/components/elements/Spinner.js" /> + <option value="$PROJECT_DIR$/src/components/elements/Error.js" /> + <option value="$PROJECT_DIR$/src/constants/actionTypes/PostActionTypes.js" /> + <option value="$PROJECT_DIR$/src/constants/actionTypes/PostsActionTypes.js" /> <option value="$PROJECT_DIR$/src/actions/Post.js" /> + <option value="$PROJECT_DIR$/src/actions/Posts.js" /> + <option value="$PROJECT_DIR$/src/constants/actionTypes/actionTypes.js" /> <option value="$PROJECT_DIR$/src/reducers/Posts.js" /> - <option value="$PROJECT_DIR$/src/containers/PostContainer.js" /> + <option value="$PROJECT_DIR$/src/actions/actionCreators.js" /> + <option value="$PROJECT_DIR$/src/reducers/Post.js" /> + <option value="$PROJECT_DIR$/src/containers/PieChartContainer.js" /> + <option value="$PROJECT_DIR$/src/components/widgets/blog/PieChart.js" /> <option value="$PROJECT_DIR$/src/routes/Blog.js" /> - <option value="$PROJECT_DIR$/src/containers/PageContainer.js" /> <option value="$PROJECT_DIR$/src/components/BlogPage.js" /> - <option value="$PROJECT_DIR$/src/components/elements/Spinner.js" /> - <option value="$PROJECT_DIR$/src/components/elements/Error.js" /> + <option value="$PROJECT_DIR$/src/containers/PageContainer.js" /> + <option value="$PROJECT_DIR$/src/containers/PostContainer.js" /> <option value="$PROJECT_DIR$/src/components/BlogPost.js" /> + <option value="$PROJECT_DIR$/src/containers/BlogListContainer.js" /> + <option value="$PROJECT_DIR$/src/components/widgets/blog/BlogList.js" /> + <option value="$PROJECT_DIR$/src/containers/LikeContainer.js" /> + <option value="$PROJECT_DIR$/src/components/widgets/blog/BlogItem.js" /> + <option value="$PROJECT_DIR$/src/components/widgets/blog/elements/Like.js" /> </list> </option> </component> @@ -199,12 +182,33 @@ <item name="React-Blog" type="462c0819:PsiDirectoryNode" /> <item name="src" type="462c0819:PsiDirectoryNode" /> </path> + <path> + <item name="React-Blog" type="b2602c69:ProjectViewProjectNode" /> + <item name="React-Blog" type="462c0819:PsiDirectoryNode" /> + <item name="src" type="462c0819:PsiDirectoryNode" /> + <item name="components" type="462c0819:PsiDirectoryNode" /> + </path> + <path> + <item name="React-Blog" type="b2602c69:ProjectViewProjectNode" /> + <item name="React-Blog" type="462c0819:PsiDirectoryNode" /> + <item name="src" type="462c0819:PsiDirectoryNode" /> + <item name="components" type="462c0819:PsiDirectoryNode" /> + <item name="widgets" type="462c0819:PsiDirectoryNode" /> + </path> + <path> + <item name="React-Blog" type="b2602c69:ProjectViewProjectNode" /> + <item name="React-Blog" type="462c0819:PsiDirectoryNode" /> + <item name="src" type="462c0819:PsiDirectoryNode" /> + <item name="components" type="462c0819:PsiDirectoryNode" /> + <item name="widgets" type="462c0819:PsiDirectoryNode" /> + <item name="blog" type="462c0819:PsiDirectoryNode" /> + </path> </expand> <select /> </subPane> </pane> - <pane id="Scope" /> <pane id="Scratches" /> + <pane id="Scope" /> </panes> </component> <component name="PropertiesComponent"> @@ -403,25 +407,30 @@ <workItem from="1510566835868" duration="12252000" /> <workItem from="1510593444411" duration="8711000" /> <workItem from="1510653141916" duration="7034000" /> - <workItem from="1510743738832" duration="5217000" /> + <workItem from="1510743738832" duration="6036000" /> + <workItem from="1510755423191" duration="179000" /> + <workItem from="1510910713787" duration="8525000" /> + <workItem from="1511004656662" duration="1399000" /> + <workItem from="1511082060033" duration="655000" /> + <workItem from="1511172450877" duration="13811000" /> + <workItem from="1511256538643" duration="1756000" /> </task> <servers /> </component> <component name="TimeTrackingManager"> - <option name="totallyTimeSpent" value="322934000" /> + <option name="totallyTimeSpent" value="350078000" /> </component> <component name="ToolWindowManager"> <frame x="-8" y="-8" width="1382" height="744" extended-state="6" /> <editor active="true" /> <layout> - <window_info id="Project" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="true" show_stripe_button="true" weight="0.24181548" sideWeight="0.5" order="0" side_tool="false" content_ui="combo" /> + <window_info id="Project" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="true" show_stripe_button="true" weight="0.24158126" sideWeight="0.5" order="0" side_tool="false" content_ui="combo" /> <window_info id="TODO" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="6" side_tool="false" content_ui="tabs" /> <window_info id="Event Log" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.3289689" sideWeight="0.5" order="7" side_tool="true" content_ui="tabs" /> - <window_info id="Find" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.3289689" sideWeight="0.5" order="1" side_tool="false" content_ui="tabs" /> <window_info id="Version Control" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="7" side_tool="false" content_ui="tabs" /> <window_info id="Run" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33060557" sideWeight="0.5" order="2" side_tool="false" content_ui="tabs" /> <window_info id="Structure" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.24962178" sideWeight="0.5" order="1" side_tool="false" content_ui="tabs" /> - <window_info id="Terminal" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="true" show_stripe_button="true" weight="0.30441898" sideWeight="0.5" order="7" side_tool="false" content_ui="tabs" /> + <window_info id="Terminal" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="true" show_stripe_button="true" weight="0.28548896" sideWeight="0.5" order="7" side_tool="false" content_ui="tabs" /> <window_info id="Favorites" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="2" side_tool="true" content_ui="tabs" /> <window_info id="Debug" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.4" sideWeight="0.5" order="3" side_tool="false" content_ui="tabs" /> <window_info id="Cvs" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.25" sideWeight="0.5" order="4" side_tool="false" content_ui="tabs" /> @@ -430,6 +439,7 @@ <window_info id="Inspection" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.4" sideWeight="0.5" order="5" side_tool="false" content_ui="tabs" /> <window_info id="Mongo Explorer" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.19667171" sideWeight="0.5" order="3" side_tool="false" content_ui="tabs" /> <window_info id="Hierarchy" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.25" sideWeight="0.5" order="2" side_tool="false" content_ui="combo" /> + <window_info id="Find" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.3289689" sideWeight="0.5" order="1" side_tool="false" content_ui="tabs" /> <window_info id="Ant Build" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.25" sideWeight="0.5" order="1" side_tool="false" content_ui="tabs" /> </layout> <layout-to-restore> @@ -460,52 +470,11 @@ </component> <component name="XDebuggerManager"> <breakpoint-manager> - <option name="time" value="12" /> + <option name="time" value="14" /> </breakpoint-manager> <watches-manager /> </component> <component name="editorHistoryManager"> - <entry file="file://$PROJECT_DIR$/favicon.ico"> - <provider selected="true" editor-type-id="images"> - <state /> - </provider> - </entry> - <entry file="file://$PROJECT_DIR$/src/components/widgets/blog/elements/TextBox.js"> - <provider selected="true" editor-type-id="text-editor"> - <state relative-caret-position="272"> - <caret line="16" column="24" lean-forward="true" selection-start-line="16" selection-start-column="24" selection-end-line="16" selection-end-column="24" /> - </state> - </provider> - </entry> - <entry file="file://$PROJECT_DIR$/src/components/widgets/blog/elements/Like.js"> - <provider selected="true" editor-type-id="text-editor"> - <state relative-caret-position="293"> - <caret line="35" column="0" lean-forward="true" selection-start-line="35" selection-start-column="0" selection-end-line="35" selection-end-column="0" /> - </state> - </provider> - </entry> - <entry file="file://$PROJECT_DIR$/src/components/widgets/blog/elements/MetaInfo.js"> - <provider selected="true" editor-type-id="text-editor"> - <state relative-caret-position="223"> - <caret line="30" column="39" lean-forward="false" selection-start-line="30" selection-start-column="39" selection-end-line="30" selection-end-column="39" /> - </state> - </provider> - </entry> - <entry file="file://$PROJECT_DIR$/src/constants/static/blogItems.js" /> - <entry file="file://$PROJECT_DIR$/.babelrc"> - <provider selected="true" editor-type-id="text-editor"> - <state relative-caret-position="119"> - <caret line="7" column="0" lean-forward="false" selection-start-line="7" selection-start-column="0" selection-end-line="7" selection-end-column="0" /> - </state> - </provider> - </entry> - <entry file="file://$PROJECT_DIR$/src/components/elements/Link.js"> - <provider selected="true" editor-type-id="text-editor"> - <state relative-caret-position="51"> - <caret line="3" column="0" lean-forward="false" selection-start-line="3" selection-start-column="0" selection-end-line="3" selection-end-column="0" /> - </state> - </provider> - </entry> <entry file="file://$PROJECT_DIR$/initializers/server/index.js"> <provider selected="true" editor-type-id="text-editor"> <state relative-caret-position="340"> @@ -513,13 +482,6 @@ </state> </provider> </entry> - <entry file="file://$PROJECT_DIR$/src/components/layouts/MainLayout.js"> - <provider selected="true" editor-type-id="text-editor"> - <state relative-caret-position="85"> - <caret line="9" column="18" lean-forward="false" selection-start-line="9" selection-start-column="18" selection-end-line="9" selection-end-column="18" /> - </state> - </provider> - </entry> <entry file="file://$PROJECT_DIR$/src/routes/index.js"> <provider selected="true" editor-type-id="text-editor"> <state relative-caret-position="85"> @@ -548,7 +510,6 @@ </state> </provider> </entry> - <entry file="file://$PROJECT_DIR$/src/constants/actionTypes/actionTypes.js" /> <entry file="file://$PROJECT_DIR$/src/reducers/index.js"> <provider selected="true" editor-type-id="text-editor"> <state relative-caret-position="153"> @@ -556,13 +517,6 @@ </state> </provider> </entry> - <entry file="file://$PROJECT_DIR$/src/constants/actionTypes/PostActionTypes.js"> - <provider selected="true" editor-type-id="text-editor"> - <state relative-caret-position="119"> - <caret line="7" column="0" lean-forward="true" selection-start-line="7" selection-start-column="0" selection-end-line="7" selection-end-column="0" /> - </state> - </provider> - </entry> <entry file="file://$PROJECT_DIR$/src/constants/dateFormat.js"> <provider selected="true" editor-type-id="text-editor"> <state relative-caret-position="17"> @@ -577,18 +531,10 @@ </state> </provider> </entry> - <entry file="file://$PROJECT_DIR$/src/constants/actionTypes/PostsActionTypes.js"> - <provider selected="true" editor-type-id="text-editor"> - <state relative-caret-position="119"> - <caret line="7" column="0" lean-forward="true" selection-start-line="7" selection-start-column="0" selection-end-line="7" selection-end-column="0" /> - </state> - </provider> - </entry> <entry file="file://$PROJECT_DIR$/package.json"> <provider selected="true" editor-type-id="text-editor"> <state relative-caret-position="567"> <caret line="53" column="28" lean-forward="true" selection-start-line="53" selection-start-column="28" selection-end-line="53" selection-end-column="28" /> - <folding /> </state> </provider> </entry> @@ -596,7 +542,6 @@ <provider selected="true" editor-type-id="text-editor"> <state relative-caret-position="272"> <caret line="16" column="0" lean-forward="true" selection-start-line="16" selection-start-column="0" selection-end-line="16" selection-end-column="0" /> - <folding /> </state> </provider> </entry> @@ -625,7 +570,6 @@ <provider selected="true" editor-type-id="text-editor"> <state relative-caret-position="238"> <caret line="16" column="0" lean-forward="true" selection-start-line="16" selection-start-column="0" selection-end-line="16" selection-end-column="0" /> - <folding /> </state> </provider> </entry> @@ -636,14 +580,6 @@ </state> </provider> </entry> - <entry file="file://$PROJECT_DIR$/src/reducers/Post.js"> - <provider selected="true" editor-type-id="text-editor"> - <state relative-caret-position="136"> - <caret line="10" column="36" lean-forward="false" selection-start-line="10" selection-start-column="36" selection-end-line="10" selection-end-column="36" /> - <folding /> - </state> - </provider> - </entry> <entry file="file://$PROJECT_DIR$/src/helpers/date.js"> <provider selected="true" editor-type-id="text-editor"> <state relative-caret-position="85"> @@ -664,7 +600,6 @@ <provider selected="true" editor-type-id="text-editor"> <state relative-caret-position="0"> <caret line="0" column="44" lean-forward="false" selection-start-line="0" selection-start-column="44" selection-end-line="0" selection-end-column="44" /> - <folding /> </state> </provider> </entry> @@ -672,165 +607,247 @@ <provider selected="true" editor-type-id="text-editor"> <state relative-caret-position="238"> <caret line="34" column="0" lean-forward="false" selection-start-line="34" selection-start-column="0" selection-end-line="34" selection-end-column="0" /> - <folding> - <element signature="e#0#26#0" expanded="false" /> - </folding> </state> </provider> </entry> - <entry file="file://$PROJECT_DIR$/src/actions/Post.js"> + <entry file="file://$PROJECT_DIR$/src/helpers/routes/index.js"> <provider selected="true" editor-type-id="text-editor"> - <state relative-caret-position="278"> - <caret line="56" column="0" lean-forward="true" selection-start-line="56" selection-start-column="0" selection-end-line="56" selection-end-column="0" /> + <state relative-caret-position="17"> + <caret line="1" column="0" lean-forward="false" selection-start-line="1" selection-start-column="0" selection-end-line="1" selection-end-column="0" /> </state> </provider> </entry> - <entry file="file://$PROJECT_DIR$/src/actions/Posts.js"> + <entry file="file://$PROJECT_DIR$/webpack.config.js"> <provider selected="true" editor-type-id="text-editor"> - <state relative-caret-position="276"> - <caret line="56" column="2" lean-forward="true" selection-start-line="56" selection-start-column="2" selection-end-line="56" selection-end-column="2" /> + <state relative-caret-position="168"> + <caret line="32" column="8" lean-forward="true" selection-start-line="32" selection-start-column="8" selection-end-line="32" selection-end-column="8" /> </state> </provider> </entry> - <entry file="file://$PROJECT_DIR$/src/helpers/routes/index.js"> + <entry file="file://$PROJECT_DIR$/src/components/elements/Error.js"> <provider selected="true" editor-type-id="text-editor"> - <state relative-caret-position="17"> - <caret line="1" column="0" lean-forward="false" selection-start-line="1" selection-start-column="0" selection-end-line="1" selection-end-column="0" /> + <state relative-caret-position="204"> + <caret line="13" column="0" lean-forward="true" selection-start-line="13" selection-start-column="0" selection-end-line="13" selection-end-column="0" /> </state> </provider> </entry> - <entry file="file://$PROJECT_DIR$/webpack.config.js"> + <entry file="file://$PROJECT_DIR$/src/components/elements/Spinner.js"> <provider selected="true" editor-type-id="text-editor"> - <state relative-caret-position="168"> - <caret line="32" column="8" lean-forward="true" selection-start-line="32" selection-start-column="8" selection-end-line="32" selection-end-column="8" /> + <state relative-caret-position="85"> + <caret line="6" column="23" lean-forward="false" selection-start-line="6" selection-start-column="23" selection-end-line="6" selection-end-column="23" /> </state> </provider> </entry> - <entry file="file://$PROJECT_DIR$/src/reducers/Posts.js"> + <entry file="file://$PROJECT_DIR$/.eslintrc.js"> <provider selected="true" editor-type-id="text-editor"> - <state relative-caret-position="153"> - <caret line="12" column="37" lean-forward="true" selection-start-line="12" selection-start-column="37" selection-end-line="12" selection-end-column="37" /> + <state relative-caret-position="96"> + <caret line="64" column="33" lean-forward="true" selection-start-line="64" selection-start-column="33" selection-end-line="64" selection-end-column="33" /> <folding /> </state> </provider> </entry> - <entry file="file://$PROJECT_DIR$/node_modules/lodash/collection.js"> + <entry file="file://$PROJECT_DIR$/src/constants/actionTypes/PostsActionTypes.js"> + <provider selected="true" editor-type-id="text-editor"> + <state relative-caret-position="51"> + <caret line="3" column="0" lean-forward="true" selection-start-line="3" selection-start-column="0" selection-end-line="3" selection-end-column="0" /> + </state> + </provider> + </entry> + <entry file="file://$PROJECT_DIR$/node_modules/lodash/lang.js"> <provider selected="true" editor-type-id="text-editor"> <state relative-caret-position="0"> <caret line="0" column="0" lean-forward="false" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" /> - <folding /> </state> </provider> </entry> - <entry file="file://$PROJECT_DIR$/src/routes/Blog.js"> + <entry file="file://$PROJECT_DIR$/src/constants/actionTypes/PostActionTypes.js"> <provider selected="true" editor-type-id="text-editor"> - <state relative-caret-position="481"> + <state relative-caret-position="51"> + <caret line="3" column="0" lean-forward="true" selection-start-line="3" selection-start-column="0" selection-end-line="3" selection-end-column="0" /> + </state> + </provider> + </entry> + <entry file="file://$PROJECT_DIR$/src/constants/actionTypes/actionTypes.js"> + <provider selected="true" editor-type-id="text-editor"> + <state relative-caret-position="17"> + <caret line="1" column="0" lean-forward="true" selection-start-line="1" selection-start-column="0" selection-end-line="1" selection-end-column="0" /> + </state> + </provider> + </entry> + <entry file="file://$PROJECT_DIR$/src/actions/Posts.js"> + <provider selected="true" editor-type-id="text-editor"> + <state relative-caret-position="323"> <caret line="30" column="0" lean-forward="true" selection-start-line="30" selection-start-column="0" selection-end-line="30" selection-end-column="0" /> + </state> + </provider> + </entry> + <entry file="file://$PROJECT_DIR$/src/actions/Post.js"> + <provider selected="true" editor-type-id="text-editor"> + <state relative-caret-position="-81"> + <caret line="0" column="0" lean-forward="false" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" /> + </state> + </provider> + </entry> + <entry file="file://$PROJECT_DIR$/src/reducers/Posts.js"> + <provider selected="true" editor-type-id="text-editor"> + <state relative-caret-position="629"> + <caret line="37" column="0" lean-forward="true" selection-start-line="37" selection-start-column="0" selection-end-line="37" selection-end-column="0" /> + </state> + </provider> + </entry> + <entry file="file://$PROJECT_DIR$/src/reducers/Post.js"> + <provider selected="true" editor-type-id="text-editor"> + <state relative-caret-position="128"> + <caret line="9" column="13" lean-forward="true" selection-start-line="9" selection-start-column="13" selection-end-line="9" selection-end-column="13" /> + </state> + </provider> + </entry> + <entry file="file://$PROJECT_DIR$/node_modules/lodash/array.js"> + <provider selected="true" editor-type-id="text-editor"> + <state relative-caret-position="-299"> + <caret line="0" column="0" lean-forward="false" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" /> + </state> + </provider> + </entry> + <entry file="file://$PROJECT_DIR$/src/components/layouts/MainLayout.js"> + <provider selected="true" editor-type-id="text-editor"> + <state relative-caret-position="85"> + <caret line="9" column="18" lean-forward="false" selection-start-line="9" selection-start-column="18" selection-end-line="9" selection-end-column="18" /> + </state> + </provider> + </entry> + <entry file="file://$PROJECT_DIR$/src/components/widgets/blog/PieChart.js"> + <provider selected="true" editor-type-id="text-editor"> + <state relative-caret-position="0"> + <caret line="0" column="39" lean-forward="false" selection-start-line="0" selection-start-column="39" selection-end-line="0" selection-end-column="39" /> + </state> + </provider> + </entry> + <entry file="file://$PROJECT_DIR$/src/containers/PageContainer.js"> + <provider selected="true" editor-type-id="text-editor"> + <state relative-caret-position="272"> + <caret line="16" column="0" lean-forward="true" selection-start-line="16" selection-start-column="0" selection-end-line="16" selection-end-column="0" /> + <folding /> + </state> + </provider> + </entry> + <entry file="file://$PROJECT_DIR$/src/containers/PostContainer.js"> + <provider selected="true" editor-type-id="text-editor"> + <state relative-caret-position="136"> + <caret line="8" column="0" lean-forward="true" selection-start-line="8" selection-start-column="0" selection-end-line="8" selection-end-column="0" /> <folding> - <element signature="e#0#55#0" expanded="false" /> + <element signature="e#0#36#0" expanded="false" /> </folding> </state> </provider> </entry> - <entry file="file://$PROJECT_DIR$/src/components/widgets/blog/elements/Title.js"> + <entry file="file://$PROJECT_DIR$/src/components/BlogPage.js"> <provider selected="true" editor-type-id="text-editor"> <state relative-caret-position="204"> - <caret line="12" column="14" lean-forward="false" selection-start-line="12" selection-start-column="14" selection-end-line="12" selection-end-column="14" /> + <caret line="12" column="0" lean-forward="true" selection-start-line="12" selection-start-column="0" selection-end-line="12" selection-end-column="0" /> <folding> - <element signature="e#0#39#0" expanded="false" /> + <element signature="e#0#26#0" expanded="false" /> </folding> </state> </provider> </entry> - <entry file="file://$PROJECT_DIR$/src/components/widgets/blog/PieChart.js"> + <entry file="file://$PROJECT_DIR$/src/routes/Blog.js"> <provider selected="true" editor-type-id="text-editor"> - <state relative-caret-position="680"> - <caret line="40" column="0" lean-forward="false" selection-start-line="40" selection-start-column="0" selection-end-line="40" selection-end-column="0" /> + <state relative-caret-position="289"> + <caret line="17" column="29" lean-forward="true" selection-start-line="17" selection-start-column="29" selection-end-line="17" selection-end-column="29" /> + </state> + </provider> + </entry> + <entry file="file://$PROJECT_DIR$/node_modules/lodash/collection.js"> + <provider selected="true" editor-type-id="text-editor"> + <state relative-caret-position="0"> + <caret line="0" column="0" lean-forward="false" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" /> + </state> + </provider> + </entry> + <entry file="file://$PROJECT_DIR$/src/containers/BlogListContainer.js"> + <provider selected="true" editor-type-id="text-editor"> + <state relative-caret-position="136"> + <caret line="8" column="0" lean-forward="true" selection-start-line="8" selection-start-column="0" selection-end-line="8" selection-end-column="0" /> <folding> - <element signature="e#0#39#0" expanded="false" /> + <element signature="e#0#59#0" expanded="false" /> </folding> </state> </provider> </entry> - <entry file="file://$PROJECT_DIR$/src/components/widgets/blog/BlogList.js"> + <entry file="file://$PROJECT_DIR$/src/actions/actionCreators.js"> <provider selected="true" editor-type-id="text-editor"> - <state relative-caret-position="267"> - <caret line="23" column="58" lean-forward="true" selection-start-line="23" selection-start-column="58" selection-end-line="23" selection-end-column="58" /> + <state relative-caret-position="289"> + <caret line="19" column="0" lean-forward="true" selection-start-line="19" selection-start-column="0" selection-end-line="19" selection-end-column="0" /> <folding /> </state> </provider> </entry> - <entry file="file://$PROJECT_DIR$/src/containers/PostContainer.js"> + <entry file="file://$PROJECT_DIR$/src/containers/PieChartContainer.js"> <provider selected="true" editor-type-id="text-editor"> - <state relative-caret-position="255"> - <caret line="15" column="0" lean-forward="true" selection-start-line="15" selection-start-column="0" selection-end-line="15" selection-end-column="0" /> + <state relative-caret-position="153"> + <caret line="9" column="0" lean-forward="true" selection-start-line="9" selection-start-column="0" selection-end-line="9" selection-end-column="0" /> <folding> - <element signature="e#0#36#0" expanded="true" /> + <element signature="e#0#36#0" expanded="false" /> </folding> </state> </provider> </entry> - <entry file="file://$PROJECT_DIR$/src/components/elements/Error.js"> + <entry file="file://$PROJECT_DIR$/src/components/widgets/blog/elements/Title.js"> <provider selected="true" editor-type-id="text-editor"> - <state relative-caret-position="204"> - <caret line="13" column="0" lean-forward="true" selection-start-line="13" selection-start-column="0" selection-end-line="13" selection-end-column="0" /> + <state relative-caret-position="289"> + <caret line="22" column="18" lean-forward="false" selection-start-line="22" selection-start-column="10" selection-end-line="22" selection-end-column="18" /> <folding /> </state> </provider> </entry> - <entry file="file://$PROJECT_DIR$/src/components/elements/Spinner.js"> + <entry file="file://$PROJECT_DIR$/src/components/widgets/blog/elements/Like.js"> <provider selected="true" editor-type-id="text-editor"> - <state relative-caret-position="85"> - <caret line="6" column="23" lean-forward="false" selection-start-line="6" selection-start-column="23" selection-end-line="6" selection-end-column="23" /> - <folding /> + <state relative-caret-position="374"> + <caret line="22" column="2" lean-forward="true" selection-start-line="22" selection-start-column="2" selection-end-line="22" selection-end-column="2" /> + <folding> + <element signature="e#0#39#0" expanded="true" /> + </folding> </state> </provider> </entry> - <entry file="file://$PROJECT_DIR$/src/containers/PageContainer.js"> + <entry file="file://$PROJECT_DIR$/src/containers/LikeContainer.js"> <provider selected="true" editor-type-id="text-editor"> - <state relative-caret-position="272"> - <caret line="16" column="0" lean-forward="true" selection-start-line="16" selection-start-column="0" selection-end-line="16" selection-end-column="0" /> + <state relative-caret-position="153"> + <caret line="9" column="0" lean-forward="true" selection-start-line="9" selection-start-column="0" selection-end-line="9" selection-end-column="0" /> <folding> <element signature="e#0#36#0" expanded="true" /> </folding> </state> </provider> </entry> - <entry file="file://$PROJECT_DIR$/src/components/BlogPage.js"> + <entry file="file://$PROJECT_DIR$/src/components/widgets/blog/BlogList.js"> <provider selected="true" editor-type-id="text-editor"> - <state relative-caret-position="370"> - <caret line="27" column="6" lean-forward="true" selection-start-line="27" selection-start-column="6" selection-end-line="27" selection-end-column="6" /> + <state relative-caret-position="201"> + <caret line="14" column="13" lean-forward="true" selection-start-line="14" selection-start-column="13" selection-end-line="14" selection-end-column="13" /> <folding> <element signature="e#0#39#0" expanded="true" /> </folding> </state> </provider> </entry> - <entry file="file://$PROJECT_DIR$/src/components/widgets/blog/BlogItem.js"> + <entry file="file://$PROJECT_DIR$/src/components/BlogPost.js"> <provider selected="true" editor-type-id="text-editor"> - <state relative-caret-position="-613"> - <caret line="8" column="0" lean-forward="true" selection-start-line="8" selection-start-column="0" selection-end-line="8" selection-end-column="0" /> + <state relative-caret-position="391"> + <caret line="26" column="0" lean-forward="true" selection-start-line="26" selection-start-column="0" selection-end-line="26" selection-end-column="0" /> <folding /> </state> </provider> </entry> - <entry file="file://$PROJECT_DIR$/src/components/BlogPost.js"> + <entry file="file://$PROJECT_DIR$/src/components/widgets/blog/BlogItem.js"> <provider selected="true" editor-type-id="text-editor"> - <state relative-caret-position="238"> - <caret line="14" column="17" lean-forward="true" selection-start-line="14" selection-start-column="17" selection-end-line="14" selection-end-column="17" /> + <state relative-caret-position="553"> + <caret line="37" column="24" lean-forward="true" selection-start-line="37" selection-start-column="24" selection-end-line="37" selection-end-column="24" /> <folding> <element signature="e#0#39#0" expanded="true" /> </folding> </state> </provider> </entry> - <entry file="file://$PROJECT_DIR$/.eslintrc.js"> - <provider selected="true" editor-type-id="text-editor"> - <state relative-caret-position="96"> - <caret line="64" column="33" lean-forward="true" selection-start-line="64" selection-start-column="33" selection-end-line="64" selection-end-column="33" /> - <folding /> - </state> - </provider> - </entry> </component> </project> \ No newline at end of file diff --git a/src/actions/Post.js b/src/actions/Post.js index d777ddf..e7c75a1 100644 --- a/src/actions/Post.js +++ b/src/actions/Post.js @@ -28,29 +28,3 @@ export const fetchPost = (id) => ( }); } ); - -//incrementing likes for specified post -const requestIncrementLikes = () => ({ - type: types.INCREMENT_POST_LIKES_REQUEST -}); - -const errorIncrementLikes = () => ({ - type: types.INCREMENT_POST_LIKES_ERROR -}); - -const successIncrementLikes = () => ({ - type: types.INCREMENT_POST_LIKES_SUCCESS -}); - -export const incrementLikes = (id) => ( - (dispatch) => { - dispatch(requestIncrementLikes(id)); - - return request - .put(`${API_ROOT}/posts/${id}`) - .end((err) => { - err ? dispatch(errorIncrementLikes()) : - dispatch(successIncrementLikes()); - }); - } -); diff --git a/src/actions/Posts.js b/src/actions/Posts.js index 5b4f7c0..b25e817 100644 --- a/src/actions/Posts.js +++ b/src/actions/Posts.js @@ -28,30 +28,3 @@ export const fetchPosts = () => ( }); } ); - -//increment post likes -const requestIncrementLikes = () => ({ - type: types.INCREMENT_POSTS_LIKES_REQUEST -}); - -const errorIncrementLikes = () => ({ - type: types.INCREMENT_POSTS_LIKES_ERROR -}); - -const successIncrementLikes = (id) => ({ - type: types.INCREMENT_POSTS_LIKES_SUCCESS, - id -}); - -export const incrementLikes = (id) => ( - (dispatch) => { - dispatch(requestIncrementLikes()); - - return request - .put(`${API_ROOT}/posts/${id}`) - .end((err) => { - err ? dispatch(errorIncrementLikes()) : - dispatch(successIncrementLikes(id)); - }); - } -); diff --git a/src/actions/actionCreators.js b/src/actions/actionCreators.js new file mode 100644 index 0000000..55a7231 --- /dev/null +++ b/src/actions/actionCreators.js @@ -0,0 +1,19 @@ +import {REQUEST_INCREMENT_LIKE} from '../constants/actionTypes/actionTypes'; +import request from 'superagent'; +import {API_ROOT} from '../constants/API'; + +//INCREMENT LIKE +const requestIncrementLike = (id) => ({ + type: REQUEST_INCREMENT_LIKE, + id +}); + +export const incrementLike = (id) => ( + (dispatch) => { + return request + .put(`${API_ROOT}/posts/${id}`) + .end((err) => { + if (!err) dispatch(requestIncrementLike(id)); + }); + } +); diff --git a/src/components/BlogPage.js b/src/components/BlogPage.js index 598e19c..f35ec32 100644 --- a/src/components/BlogPage.js +++ b/src/components/BlogPage.js @@ -1,45 +1,12 @@ -import React, {PropTypes} from 'react'; -import BlogList from './widgets/blog/BlogList'; -import PieChart from './widgets/blog/PieChart'; -import {map} from 'lodash/collection'; -import Error from 'components/elements/Error'; -import Spinner from 'components/elements/Spinner'; - -const BlogPage = ({blogItems, like, error, isRequesting}) => { - const columns = map( - blogItems, - item => [item.title, item.metaInfo.likes] - ); - - if (error) return <Error/>; - - if (isRequesting) return <Spinner/>; - - else return ( - <div> - <BlogList - blogItems={blogItems} - like={like} - /> - <PieChart - columns={columns} - /> - </div> - ); -}; - -BlogPage.propTypes = { - blogItems: BlogList.propTypes.blogItems, - like: BlogList.propTypes.like, - error: PropTypes.bool, - isRequesting: PropTypes.bool -}; - -BlogPage.defaultProps = { - blogItems: BlogList.defaultProps.blogItems, - like: BlogList.defaultProps.like, - error: false, - isRequesting: false -}; +import React from 'react'; +import BlogListContainer from '../containers/BlogListContainer'; +import PieChartContainer from '../containers/PieChartContainer'; + +const BlogPage = () => ( + <div> + <BlogListContainer/> + <PieChartContainer/> + </div> +); export default BlogPage; diff --git a/src/components/BlogPost.js b/src/components/BlogPost.js index 5844025..1256f6b 100644 --- a/src/components/BlogPost.js +++ b/src/components/BlogPost.js @@ -1,25 +1,16 @@ import React, {PropTypes} from 'react'; import BlogItem from 'components/widgets/blog/BlogItem'; import {Item} from 'semantic-ui-react'; -import Error from 'components/elements/Error'; -import Spinner from 'components/elements/Spinner'; +import {isEmpty} from 'lodash/lang'; -const BlogPost = ({blogItem, like, isRequesting, error}) => ( +const BlogPost = ({blogItem}) => ( <Item.Group> - {isRequesting && <Spinner/>} - {error && <Error/>} - {blogItem && <BlogItem - {...blogItem} - like={() => like(blogItem._id)} - />} + {!isEmpty(blogItem) && <BlogItem {...blogItem}/>} </Item.Group> ); BlogPost.propTypes = { - blogItem: PropTypes.object, - like: BlogItem.propTypes.like, - isRequesting: PropTypes.bool, - error: PropTypes.bool + blogItem: PropTypes.object }; BlogPost.defaultProps = { @@ -29,10 +20,7 @@ BlogPost.defaultProps = { title: BlogItem.defaultProps.title, description: BlogItem.defaultProps.description, metaInfo: BlogItem.defaultProps.metaInfo - }, - like: BlogItem.defaultProps.like, - isRequesting: false, - error: false + } }; export default BlogPost; diff --git a/src/components/widgets/blog/BlogItem.js b/src/components/widgets/blog/BlogItem.js index 417b155..78df0cd 100644 --- a/src/components/widgets/blog/BlogItem.js +++ b/src/components/widgets/blog/BlogItem.js @@ -3,11 +3,11 @@ import _ from 'lodash'; import Image from './elements/Image'; import TextBox from './elements/TextBox'; import MetaInfo from './elements/MetaInfo'; -import Like from './elements/Like'; +import LikeContainer from '../../../containers/LikeContainer'; import Title from './elements/Title'; import {Grid} from 'semantic-ui-react'; -const BlogItem = ({image, description, metaInfo, title, _id, like}) => ( +const BlogItem = ({image, description, metaInfo, title, _id}) => ( <Grid centered={true} columns={3}> <Grid.Column computer={4} @@ -33,9 +33,9 @@ const BlogItem = ({image, description, metaInfo, title, _id, like}) => ( created={metaInfo.created} modified={metaInfo.modified} /> - <Like + <LikeContainer likes={metaInfo.likes} - like={like} + id={_id} /> </Grid.Column> </Grid> @@ -50,9 +50,8 @@ BlogItem.propTypes = { title: Title.propTypes.title, description: TextBox.propTypes.description, metaInfo: PropTypes.shape( - _.assign({}, MetaInfo.propTypes, _.pick(Like.propTypes, ['likes'])) - ), - like: Like.propTypes.like + _.assign({}, MetaInfo.propTypes, _.pick(LikeContainer.propTypes, ['likes'])) + ) }; BlogItem.defaultProps = { @@ -63,9 +62,8 @@ BlogItem.defaultProps = { metaInfo: _.assign( {}, MetaInfo.defaultProps, - _.pick(Like.defaultProps, ['likes']) - ), - like: Like.defaultProps.like + _.pick(LikeContainer.defaultProps, ['likes']) + ) }; export default BlogItem; diff --git a/src/components/widgets/blog/BlogList.js b/src/components/widgets/blog/BlogList.js index 476a751..fe9deab 100644 --- a/src/components/widgets/blog/BlogList.js +++ b/src/components/widgets/blog/BlogList.js @@ -1,45 +1,28 @@ import React, {PropTypes} from 'react'; -import _ from 'lodash'; - +import {map} from 'lodash/collection'; import BlogItem from './BlogItem'; - import {List, Segment} from 'semantic-ui-react'; -const BlogList = ({blogItems, like}) => ( - React.createElement(List, null, _.map(blogItems, (blogItem) => ( - React.createElement( - List.Item, - {key: blogItem._id}, - React.createElement( - Segment, - { - compact: true - }, - React.createElement( - BlogItem, - _.assign( - {}, - blogItem, - { - like: () => like(blogItem._id) - } - ) - ) - ) - ) - ))) -); +const BlogList = ({blogItems}) => { + return (<List> + {map(blogItems, item => ( + <List.Item key={item._id}> + <Segment compact={true}> + <BlogItem {...item}/> + </Segment> + </List.Item> + ))} + </List>); +}; BlogList.propTypes = { blogItems: PropTypes.arrayOf( - PropTypes.shape(_.omit(BlogItem.propTypes, ['like'])) - ), - like: BlogItem.propTypes.like + PropTypes.shape(BlogItem.propTypes) + ) }; BlogList.defaultProps = { - blogItems: [_.omit(BlogItem.defaultProps, ['like'])], - like: BlogItem.defaultProps.like + blogItems: [BlogItem.defaultProps] }; export default BlogList; diff --git a/src/components/widgets/blog/PieChart.js b/src/components/widgets/blog/PieChart.js index 5f4f966..944659a 100644 --- a/src/components/widgets/blog/PieChart.js +++ b/src/components/widgets/blog/PieChart.js @@ -1,5 +1,4 @@ import React, {PropTypes} from 'react'; - import c3 from 'c3'; import {Segment} from 'semantic-ui-react'; diff --git a/src/components/widgets/blog/elements/Like.js b/src/components/widgets/blog/elements/Like.js index a3e59ff..0dc9c90 100644 --- a/src/components/widgets/blog/elements/Like.js +++ b/src/components/widgets/blog/elements/Like.js @@ -2,7 +2,7 @@ import React, {PropTypes} from 'react'; import {Segment, Button} from 'semantic-ui-react'; -const Like = ({likes, like}) => ( +const Like = ({likes, like, id}) => ( React.createElement( Segment, {vertical: true, textAlign: 'right', basic: true}, @@ -16,7 +16,7 @@ const Like = ({likes, like}) => ( content: likes }, labelPosition: 'right', - onClick: () => like() + onClick: () => like(id) } ) ) @@ -24,12 +24,14 @@ const Like = ({likes, like}) => ( Like.propTypes = { likes: PropTypes.number, - like: PropTypes.func + like: PropTypes.func, + id: PropTypes.string }; Like.defaultProps = { likes: 0, - like: () => true + like: () => true, + id: '676hjh67' }; export default Like; diff --git a/src/constants/actionTypes/PostActionTypes.js b/src/constants/actionTypes/PostActionTypes.js index 27c1415..b275b90 100644 --- a/src/constants/actionTypes/PostActionTypes.js +++ b/src/constants/actionTypes/PostActionTypes.js @@ -1,7 +1,3 @@ export const FETCH_POST_REQUEST = 'FETCH_POST_REQUEST'; export const FETCH_POST_SUCCESS = 'FETCH_POST_SUCCESS'; export const FETCH_POST_ERROR = 'FETCH_POST_ERROR'; - -export const INCREMENT_POST_LIKES_REQUEST = 'INCREMENT_POST_LIKES_REQUEST'; -export const INCREMENT_POST_LIKES_ERROR = 'INCREMENT_POST_LIKES_ERROR'; -export const INCREMENT_POST_LIKES_SUCCESS = 'INCREMENT_POST_LIKES_SUCCESS'; diff --git a/src/constants/actionTypes/PostsActionTypes.js b/src/constants/actionTypes/PostsActionTypes.js index c77a094..54efa4f 100644 --- a/src/constants/actionTypes/PostsActionTypes.js +++ b/src/constants/actionTypes/PostsActionTypes.js @@ -1,7 +1,3 @@ export const FETCH_POSTS_REQUEST = 'FETCH_POSTS_REQUEST'; export const FETCH_POSTS_SUCCESS = 'FETCH_POSTS_SUCCESS'; export const FETCH_POSTS_ERROR = 'FETCH_POSTS_ERROR'; - -export const INCREMENT_POSTS_LIKES_REQUEST = 'INCREMENT_POSTS_LIKES_REQUEST'; -export const INCREMENT_POSTS_LIKES_ERROR = 'INCREMENT_POSTS_LIKES_ERROR'; -export const INCREMENT_POSTS_LIKES_SUCCESS = 'INCREMENT_POSTS_LIKES_SUCCESS'; diff --git a/src/constants/actionTypes/actionTypes.js b/src/constants/actionTypes/actionTypes.js new file mode 100644 index 0000000..9f36e8c --- /dev/null +++ b/src/constants/actionTypes/actionTypes.js @@ -0,0 +1,2 @@ +export const REQUEST_INCREMENT_LIKE = 'REQUEST_INCREMENT_LIKE'; + diff --git a/src/containers/BlogListContainer.js b/src/containers/BlogListContainer.js new file mode 100644 index 0000000..db61907 --- /dev/null +++ b/src/containers/BlogListContainer.js @@ -0,0 +1,8 @@ +import BlogList from '../components/widgets/blog/BlogList'; +import {connect} from 'react-redux'; + +const stateToProps = (state) => ({ + blogItems: state.posts.entries +}); + +export default connect(stateToProps)(BlogList); diff --git a/src/containers/LikeContainer.js b/src/containers/LikeContainer.js new file mode 100644 index 0000000..7f0ca71 --- /dev/null +++ b/src/containers/LikeContainer.js @@ -0,0 +1,9 @@ +import {connect} from 'react-redux'; +import Like from '../components/widgets/blog/elements/Like'; +import {incrementLike} from '../actions/actionCreators'; + +const actionsToProps = (dispatch, ownProps) => ({ + like: () => dispatch(incrementLike(ownProps.id)) +}); + +export default connect(null, actionsToProps)(Like); diff --git a/src/containers/PageContainer.js b/src/containers/PageContainer.js deleted file mode 100644 index 00c674c..0000000 --- a/src/containers/PageContainer.js +++ /dev/null @@ -1,16 +0,0 @@ -import {connect} from 'react-redux'; -import BlogPage from '../components/BlogPage'; -import {flowRight} from 'lodash/util'; -import {incrementLikes} from '../actions/Posts'; - -const stateToProps = (state) => ({ - blogItems: state.posts.entries, - isRequesting: state.posts.isRequesting, - error: state.posts.error -}); - -const actionsToProps = (dispatch) => ({ - like: flowRight(dispatch, incrementLikes) -}); - -export default connect(stateToProps, actionsToProps)(BlogPage); diff --git a/src/containers/PieChartContainer.js b/src/containers/PieChartContainer.js new file mode 100644 index 0000000..e5a046d --- /dev/null +++ b/src/containers/PieChartContainer.js @@ -0,0 +1,9 @@ +import {connect} from 'react-redux'; +import PieChart from '../components/widgets/blog/PieChart'; +import {map} from 'lodash/collection'; + +const stateToProps = (state) => ({ + columns: map(state.posts.entries, item => [item.title, item.metaInfo.likes]) +}); + +export default connect(stateToProps)(PieChart); diff --git a/src/containers/PostContainer.js b/src/containers/PostContainer.js index 4b04bfe..ccdd342 100644 --- a/src/containers/PostContainer.js +++ b/src/containers/PostContainer.js @@ -1,15 +1,8 @@ import {connect} from 'react-redux'; import BlogPost from '../components/BlogPost'; -import {incrementLikes} from '../actions/Post'; const stateToProps = (state) => ({ - blogItem: state.post.entry, - isRequesting: state.post.isRequesting, - error: state.post.error + blogItem: state.post.entry }); -const actionsToProps = (dispatch, ownProps) => ({ - like: () => dispatch(incrementLikes(ownProps.params.post_id)) -}); - -export default connect(stateToProps, actionsToProps)(BlogPost); +export default connect(stateToProps)(BlogPost); diff --git a/src/reducers/Post.js b/src/reducers/Post.js index 92fc79d..33c7953 100644 --- a/src/reducers/Post.js +++ b/src/reducers/Post.js @@ -1,9 +1,11 @@ import {assign} from 'lodash/object'; +import {isEmpty} from 'lodash/lang'; import * as types from '../constants/actionTypes/PostActionTypes'; import update from 'immutability-helper'; +import {REQUEST_INCREMENT_LIKE} from '../constants/actionTypes/actionTypes'; const initialState = { - isRequesting: false, + isFetching: false, error: false, entry: {} }; @@ -11,19 +13,13 @@ const initialState = { export default (state = initialState, action) => { switch (action.type) { case types.FETCH_POST_REQUEST: - return assign({}, initialState, {isRequesting: true}); + return assign({}, initialState, {isFetching: true}); case types.FETCH_POST_ERROR: return assign({}, initialState, {error: true}); case types.FETCH_POST_SUCCESS: return assign({}, initialState, {entry: action.response}); - case types.INCREMENT_POST_LIKES_REQUEST: - return assign({}, state, {isRequesting: true}); - case types.INCREMENT_POST_LIKES_ERROR: - return assign({}, state, {isRequesting: false, error: true}); - case types.INCREMENT_POST_LIKES_SUCCESS: - return update(state, { - isRequesting: {$set: false}, - error: {$set: false}, + case REQUEST_INCREMENT_LIKE: + return isEmpty(state.entry) ? state : update(state, { entry: { metaInfo: { likes: {$apply: (count) => (count + 1)} diff --git a/src/reducers/Posts.js b/src/reducers/Posts.js index a1a758e..be7c043 100644 --- a/src/reducers/Posts.js +++ b/src/reducers/Posts.js @@ -1,10 +1,12 @@ import {assign} from 'lodash/object'; +import {isEmpty} from 'lodash/lang'; import * as types from '../constants/actionTypes/PostsActionTypes'; import {map} from 'lodash/collection'; import update from 'immutability-helper'; +import {REQUEST_INCREMENT_LIKE} from '../constants/actionTypes/actionTypes'; const initialState = { - isRequesting: false, + isFetching: false, error: false, entries: [] }; @@ -19,19 +21,13 @@ const incrementLikes = (state, action) => ( export default (state = initialState, action) => { switch (action.type) { case types.FETCH_POSTS_REQUEST: - return assign({}, initialState, {isRequesting: true}); + return assign({}, initialState, {isFetching: true}); case types.FETCH_POSTS_ERROR: return assign({}, initialState, {error: true}); case types.FETCH_POSTS_SUCCESS: return assign({}, initialState, {entries: action.response}); - case types.INCREMENT_POSTS_LIKES_REQUEST: - return assign({}, state, {isRequesting: true, error: false}); - case types.INCREMENT_POSTS_LIKES_ERROR: - return assign({}, state, {isRequesting: false, error: true}); - case types.INCREMENT_POSTS_LIKES_SUCCESS: - return assign({}, state, { - isRequesting: false, - error: false, + case REQUEST_INCREMENT_LIKE: + return isEmpty(state.entries) ? state : assign({}, state, { entries: map(state.entries, (post) => incrementLikes(post, action)) }); diff --git a/src/routes/Blog.js b/src/routes/Blog.js index 47c8df3..b4e9549 100644 --- a/src/routes/Blog.js +++ b/src/routes/Blog.js @@ -2,12 +2,12 @@ import MainLayout from 'components/layouts/MainLayout'; import {postsPath} from 'helpers/routes'; import {fetchPosts} from '../actions/Posts'; import {fetchPost} from '../actions/Post'; -import PageContainer from '../containers/PageContainer'; +import BlogPage from '../components/BlogPage'; import PostContainer from '../containers/PostContainer'; const Index = { path: '/', - component: PageContainer, + component: BlogPage, prepareData: (store) => { store.dispatch(fetchPosts()); }