diff --git a/src/components/Post.js b/src/components/Post.js index 5071742..e2c888e 100644 --- a/src/components/Post.js +++ b/src/components/Post.js @@ -5,23 +5,37 @@ import { fetchPost } from '../actions'; import { Link } from 'react-router-dom'; class Post extends React.Component { + constructor (props) { + super(props) + this.state = { + isLoading: true + } + } componentDidMount() { const { slug } = this.props.match.params - this.props.fetchPost(slug); + this.props.fetchPost(slug) + .then(() => this.setState({isLoading: false})) } render () { - console.log(this.props.posts) - return ( -
-
-
-

""

- + const {posts} = this.props + const {isLoading} = this.state + + if (isLoading) { + return

Loading

+ } else { + const post = posts.entities[posts.currentId] + return ( +
+
+
+

{post.title}

+ +
-
- ); + ); + } } } diff --git a/src/reducers/postsReducer.js b/src/reducers/postsReducer.js index 2a3c642..87faf24 100644 --- a/src/reducers/postsReducer.js +++ b/src/reducers/postsReducer.js @@ -1,5 +1,6 @@ const initialState = { entities: {}, + currentId: "" }; const normalizeEntities = (entities, payloadData) => { @@ -9,12 +10,15 @@ const normalizeEntities = (entities, payloadData) => { } export default (state = initialState, action) => { + let mergedEntities = {} switch (action.type) { case 'FETCH_POSTS': - const mergedEntities = normalizeEntities(state.entities, action.payload) + mergedEntities = normalizeEntities(state.entities, action.payload) return {...state, ...{entities: mergedEntities}} + case 'FETCH_POST': - return action.payload; + mergedEntities = normalizeEntities(state.entities, [action.payload]) + return {...state, ...{entities: mergedEntities, currentId: action.payload.id}} default: return state; }