It makes more sense now
This commit is contained in:
parent
dc33eed88b
commit
922299010c
2 changed files with 30 additions and 12 deletions
|
@ -5,25 +5,39 @@ import { fetchPost } from '../actions';
|
||||||
import { Link } from 'react-router-dom';
|
import { Link } from 'react-router-dom';
|
||||||
|
|
||||||
class Post extends React.Component {
|
class Post extends React.Component {
|
||||||
|
constructor (props) {
|
||||||
|
super(props)
|
||||||
|
this.state = {
|
||||||
|
isLoading: true
|
||||||
|
}
|
||||||
|
}
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
const { slug } = this.props.match.params
|
const { slug } = this.props.match.params
|
||||||
this.props.fetchPost(slug);
|
this.props.fetchPost(slug)
|
||||||
|
.then(() => this.setState({isLoading: false}))
|
||||||
}
|
}
|
||||||
|
|
||||||
render () {
|
render () {
|
||||||
console.log(this.props.posts)
|
const {posts} = this.props
|
||||||
|
const {isLoading} = this.state
|
||||||
|
|
||||||
|
if (isLoading) {
|
||||||
|
return <p>Loading</p>
|
||||||
|
} else {
|
||||||
|
const post = posts.entities[posts.currentId]
|
||||||
return (
|
return (
|
||||||
<div className="item" key="{post.id}">
|
<div className="item" key={post.id}>
|
||||||
<div className="content">
|
<div className="content">
|
||||||
<div className="description">
|
<div className="description">
|
||||||
<h1><b><u><Link to={"/posts/"}>""</Link></u></b></h1>
|
<h1><b><u><Link to={"/posts/" + post.slug}>{post.title}</Link></u></b></h1>
|
||||||
<ReactMarkdown source="{post.content}" />
|
<ReactMarkdown source={post.content} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
const mapStateToProps = (state) => {
|
const mapStateToProps = (state) => {
|
||||||
return {
|
return {
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
const initialState = {
|
const initialState = {
|
||||||
entities: {},
|
entities: {},
|
||||||
|
currentId: ""
|
||||||
};
|
};
|
||||||
|
|
||||||
const normalizeEntities = (entities, payloadData) => {
|
const normalizeEntities = (entities, payloadData) => {
|
||||||
|
@ -9,12 +10,15 @@ const normalizeEntities = (entities, payloadData) => {
|
||||||
}
|
}
|
||||||
|
|
||||||
export default (state = initialState, action) => {
|
export default (state = initialState, action) => {
|
||||||
|
let mergedEntities = {}
|
||||||
switch (action.type) {
|
switch (action.type) {
|
||||||
case 'FETCH_POSTS':
|
case 'FETCH_POSTS':
|
||||||
const mergedEntities = normalizeEntities(state.entities, action.payload)
|
mergedEntities = normalizeEntities(state.entities, action.payload)
|
||||||
return {...state, ...{entities: mergedEntities}}
|
return {...state, ...{entities: mergedEntities}}
|
||||||
|
|
||||||
case 'FETCH_POST':
|
case 'FETCH_POST':
|
||||||
return action.payload;
|
mergedEntities = normalizeEntities(state.entities, [action.payload])
|
||||||
|
return {...state, ...{entities: mergedEntities, currentId: action.payload.id}}
|
||||||
default:
|
default:
|
||||||
return state;
|
return state;
|
||||||
}
|
}
|
||||||
|
|
Reference in a new issue