Trying to figure out comments
This commit is contained in:
parent
1a5d37f116
commit
c8ba3ebaf3
3 changed files with 46 additions and 19 deletions
|
@ -9,7 +9,7 @@ export const fetchPosts = () => async (dispatch) => {
|
||||||
export const fetchPost = (slug) => async (dispatch) => {
|
export const fetchPost = (slug) => async (dispatch) => {
|
||||||
const post = await sudoscientist.get('/blog/posts/by-slug/' + slug)
|
const post = await sudoscientist.get('/blog/posts/by-slug/' + slug)
|
||||||
const comments = await sudoscientist.get('/blog/comments/' + post.data.id);
|
const comments = await sudoscientist.get('/blog/comments/' + post.data.id);
|
||||||
const response = { ...post.data, ...comments.data }
|
const response = { post: post.data, comments: comments.data }
|
||||||
dispatch({ type: 'FETCH_POST', payload: response })
|
dispatch({ type: 'FETCH_POST', payload: response })
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -18,15 +18,28 @@ class Post extends React.Component {
|
||||||
.then(() => this.setState({isLoading: false}))
|
.then(() => this.setState({isLoading: false}))
|
||||||
}
|
}
|
||||||
|
|
||||||
render () {
|
renderComments() {
|
||||||
const {posts} = this.props
|
//if (comments.length) {
|
||||||
const {isLoading} = this.state
|
//return comments.map(comment => {
|
||||||
|
// return (
|
||||||
|
// <div className="item" key={comment.id}>
|
||||||
|
// <div className="content">
|
||||||
|
// <div className="markdown-body">
|
||||||
|
// <ReactMarkdown source={comment.content} />
|
||||||
|
// </div>
|
||||||
|
// </div>
|
||||||
|
// </div>
|
||||||
|
// );
|
||||||
|
//});
|
||||||
|
//}
|
||||||
|
}
|
||||||
|
|
||||||
if (isLoading) {
|
renderPost() {
|
||||||
return <p>Loading</p>
|
const {posts} = this.props
|
||||||
} else {
|
|
||||||
const post = posts.entities[posts.currentId]
|
const post = posts.entities[posts.currentId]
|
||||||
return (
|
console.log(post)
|
||||||
|
return(
|
||||||
|
<div className="container">
|
||||||
<div className="item" key={post.id}>
|
<div className="item" key={post.id}>
|
||||||
<div className="content">
|
<div className="content">
|
||||||
<div className="description">
|
<div className="description">
|
||||||
|
@ -39,6 +52,21 @@ class Post extends React.Component {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
{ this.renderComments(post.comments) }
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
render () {
|
||||||
|
const {isLoading} = this.state
|
||||||
|
|
||||||
|
if (isLoading) {
|
||||||
|
return <p>Loading</p>
|
||||||
|
} else {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
{ this.renderPost() }
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -47,8 +75,7 @@ class Post extends React.Component {
|
||||||
const mapStateToProps = (state) => {
|
const mapStateToProps = (state) => {
|
||||||
return {
|
return {
|
||||||
posts: state.posts,
|
posts: state.posts,
|
||||||
slug: state.slug,
|
slug: state.slug
|
||||||
comments: state.comments
|
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -17,8 +17,8 @@ export default (state = initialState, action) => {
|
||||||
return {...state, ...{entities: mergedEntities}}
|
return {...state, ...{entities: mergedEntities}}
|
||||||
|
|
||||||
case 'FETCH_POST':
|
case 'FETCH_POST':
|
||||||
mergedEntities = normalizeEntities(state.entities, [action.payload])
|
mergedEntities = normalizeEntities(state.entities, [action.payload.post])
|
||||||
return {...state, ...{entities: mergedEntities, currentId: action.payload.id}}
|
return {...state, ...{entities: mergedEntities, currentId: action.payload.post.id}}
|
||||||
default:
|
default:
|
||||||
return state;
|
return state;
|
||||||
}
|
}
|
||||||
|
|
Reference in a new issue