Skip to content

Commit ef69624

Browse files
mcdreamer60mcdreamer60
committed
more commits for review
1 parent c1d3809 commit ef69624

File tree

10 files changed

+144
-170
lines changed

10 files changed

+144
-170
lines changed

‎src/actions/post.js‎

Lines changed: 6 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -3,30 +3,20 @@ import * as ReadableAPI from "../utils/api";
33

44
export const getPostById = id => {
55
return dispatch => {
6-
dispatch(loadPostByIdRequest());
7-
return ReadableAPI.getPostById(id).then(response => {
8-
if (response.error) {
9-
dispatch(loadPostByIdFailure(response));
10-
} else {
11-
dispatch(loadPostByIdSuccess(response));
12-
}
13-
});
6+
dispatch(requestPostById());
7+
return ReadableAPI.getPostById(id).then(response =>
8+
dispatch(receivePostById(response))
9+
);
1410
};
1511
};
16-
export const loadPostByIdSuccess = post => {
12+
export const receivePostById = post => {
1713
return {
1814
type: types.LOAD_POST_BY_ID_SUCCESS,
1915
post: post
2016
};
2117
};
22-
export const loadPostByIdRequest = () => {
18+
export const requestPostById = () => {
2319
return {
2420
type: types.LOAD_POST_BY_ID_REQUEST
2521
};
2622
};
27-
export const loadPostByIdFailure = error => {
28-
return {
29-
type: types.LOAD_POST_BY_ID_FAILURE,
30-
error: error
31-
};
32-
};

‎src/components/Categories.js‎

Lines changed: 26 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,54 @@
11
import React, { Component } from "react";
22
import { NavLink } from "react-router-dom";
33
import { connect } from "react-redux";
4-
import PropTypes from "prop-types";
54
import { getCategories } from "../actions/categories";
65
import Category from "./Category";
76

87
class Categories extends Component {
9-
static propTypes = {
10-
dispatchGetCategories: PropTypes.func,
11-
categories: PropTypes.array
12-
};
13-
148
componentDidMount() {
159
this.props.dispatchGetCategories();
1610
}
1711

1812
render() {
1913
return (
2014
<div className="nav">
21-
<NavLink activeClassName="active" to='/'> <h3 className="header">Readable</h3></NavLink>
22-
<div>
23-
<ul className="categories">
24-
<li>
25-
<NavLink activeClassName="active" className="btn" to="/create">
26-
Add a Post
27-
</NavLink>
28-
</li>
29-
<li>
30-
<NavLink activeClassName="active" className="btn" to="/">
31-
All Posts
32-
</NavLink>
33-
</li>
34-
{this.props.categories.map(category => (
35-
<Category key={category.name} category={category} />
36-
))}
37-
</ul>
38-
</div>
15+
<NavLink activeClassName="active" to="/">
16+
{" "}
17+
<h3 className="header">Readable</h3>
18+
</NavLink>
19+
<div>
20+
<ul className="categories">
21+
<li>
22+
<NavLink activeClassName="active" className="btn" to="/create">
23+
Add a Post
24+
</NavLink>
25+
</li>
26+
<li>
27+
<NavLink activeClassName="active" className="btn" to="/">
28+
All Posts
29+
</NavLink>
30+
</li>
31+
{this.props.categories.map(category => (
32+
<Category key={category.name} category={category} />
33+
))}
34+
</ul>
35+
</div>
3936
</div>
4037
);
4138
}
4239
}
43-
function mapStateToProps({ categories }) {
44-
return {
45-
categories
46-
};
47-
}
48-
4940
const mapDispatchToProps = dispatch => {
5041
return {
5142
dispatchGetCategories: () => {
5243
dispatch(getCategories());
5344
}
5445
};
5546
};
47+
function mapStateToProps(state) {
48+
return {
49+
categories: state.categories
50+
};
51+
}
5652
export default connect(
5753
mapStateToProps,
5854
mapDispatchToProps

‎src/components/Comments.js‎

Lines changed: 5 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import React, { Component } from "react";
22
import Modal from "react-modal";
33
import { connect } from "react-redux";
4-
import { getCommentsByPostId } from "./../actions/comments";
54
import Comment from "./Comment";
65
import CreateComment from "./CreateComment";
76

@@ -35,7 +34,7 @@ class Comments extends Component {
3534
parentId={this.props.post.id}
3635
close={this.handleCloseModal}
3736
/>
38-
</Modal>
37+
</Modal>
3938
</div>
4039
</div>
4140

@@ -52,20 +51,11 @@ class Comments extends Component {
5251
);
5352
}
5453
}
55-
function mapStateToProps(state) {
54+
function mapStateToProps({ post }, { comments }) {
5655
return {
57-
post: state.post,
58-
comments: state.comments
56+
post,
57+
comments
5958
};
6059
}
6160

62-
const mapDispatchToProps = dispatch => {
63-
return {
64-
dispatchGetCommentsByPostId: id => dispatch(getCommentsByPostId(id))
65-
};
66-
};
67-
68-
export default connect(
69-
mapStateToProps,
70-
mapDispatchToProps
71-
)(Comments);
61+
export default connect(mapStateToProps)(Comments);

‎src/components/CreateComment.js‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,8 @@ import React, { Component } from "react";
22
import serializeForm from "form-serialize";
33
import uuid from "uuid";
44
import { connect } from "react-redux";
5-
import {
6-
createComment,
7-
editComment
8-
} from "./../actions/comments";
9-
import { getPostById } from './../actions/post'
5+
import { createComment, editComment } from "./../actions/comments";
6+
import { getPostById } from "./../actions/post";
107
import * as ReadableAPI from "../utils/api";
118

129
class CreateComment extends Component {
@@ -41,15 +38,15 @@ class CreateComment extends Component {
4138
let comment = { ...values, id: this.props.commentId };
4239
this.props.dispatchEditComment(comment);
4340
}
44-
this.props.dispatchGetPost(this.props.parentId)
41+
this.props.dispatchGetPost(this.props.parentId);
4542
this.props.close();
4643
};
4744
handleChange = event => {
4845
this.setState({ [event.target.name]: event.target.value });
4946
};
5047
componentDidMount() {
5148
console.log(" create comment ", this.props);
52-
this.getComment(this.props.commentId)
49+
this.getComment(this.props.commentId);
5350
}
5451

5552
render() {
@@ -80,7 +77,11 @@ class CreateComment extends Component {
8077
</label>
8178
</div>
8279
<div>
83-
<input className="btn btn-outline-primary" type="submit" value="Submit" />
80+
<input
81+
className="btn btn-outline-primary"
82+
type="submit"
83+
value="Submit"
84+
/>
8485
</div>
8586
</form>
8687
</div>

‎src/components/CreatePost.js‎

Lines changed: 71 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ class CreatePost extends Component {
1111
title: "",
1212
author: "",
1313
category: "",
14-
body: "",
14+
body: ""
1515
};
1616
handleChange = event => {
1717
this.setState({ [event.target.name]: event.target.value });
@@ -53,74 +53,72 @@ class CreatePost extends Component {
5353
render() {
5454
const isEnabled = this.state.category.length > 0;
5555

56-
return (
57-
<div>
58-
<Link className="btn " to="/">
59-
Return to main page
60-
</Link>
61-
<form onSubmit={this.handleSubmit} className="create-contact-form">
62-
<div>
63-
<label>
64-
Title:
65-
<input
66-
type="text"
67-
name="title"
68-
placeholder="Title"
69-
value={this.state.title}
70-
onChange={this.handleChange}
71-
/>
72-
</label>
73-
</div>
74-
<div>
75-
<label>
76-
Author:
77-
<input
78-
type="text"
79-
name="author"
80-
placeholder="Author"
81-
value={this.state.author}
82-
onChange={this.handleChange}
83-
/>
84-
</label>
85-
</div>
86-
87-
<div>
88-
Category:
89-
<select
90-
name="category"
91-
value={this.state.category}
56+
return (
57+
<div>
58+
<Link className="btn " to="/">
59+
Return to main page
60+
</Link>
61+
<form onSubmit={this.handleSubmit} className="create-contact-form">
62+
<div>
63+
<label>
64+
Title:
65+
<input
66+
type="text"
67+
name="title"
68+
placeholder="Title"
69+
value={this.state.title}
9270
onChange={this.handleChange}
93-
>
94-
<option value="">Select Category</option>
95-
<option value="react">React</option>
96-
<option value="redux">Redux</option>
97-
<option value="udacity">Udacity</option>
98-
</select>
99-
</div>
100-
<div>
101-
<label>
102-
<div>Body:</div>
103-
<textarea
104-
name="body"
105-
value={this.state.body}
106-
onChange={this.handleChange}
107-
/>
108-
</label>
109-
</div>
110-
<div>
111-
<input disabled={!isEnabled} className="btn btn-outline-primary" type="submit" value="Submit" />
112-
</div>
113-
</form>
114-
</div>
115-
);
116-
}
71+
/>
72+
</label>
73+
</div>
74+
<div>
75+
<label>
76+
Author:
77+
<input
78+
type="text"
79+
name="author"
80+
placeholder="Author"
81+
value={this.state.author}
82+
onChange={this.handleChange}
83+
/>
84+
</label>
85+
</div>
11786

118-
}
119-
function mapStateToProps({ posts }, { categories }) {
120-
return {
121-
posts,
122-
categories
123-
};
87+
<div>
88+
Category:
89+
<select
90+
name="category"
91+
value={this.state.category}
92+
onChange={this.handleChange}
93+
>
94+
<option value="">Select Category</option>
95+
<option value="react">React</option>
96+
<option value="redux">Redux</option>
97+
<option value="udacity">Udacity</option>
98+
</select>
99+
</div>
100+
<div>
101+
<label>
102+
<div>Body:</div>
103+
<textarea
104+
name="body"
105+
value={this.state.body}
106+
onChange={this.handleChange}
107+
/>
108+
</label>
109+
</div>
110+
<div>
111+
<input
112+
disabled={!isEnabled}
113+
className="btn btn-outline-primary"
114+
type="submit"
115+
value="Submit"
116+
/>
117+
</div>
118+
</form>
119+
</div>
120+
);
121+
}
124122
}
125123

126124
const mapDispatchToProps = dispatch => {
@@ -133,7 +131,12 @@ const mapDispatchToProps = dispatch => {
133131
}
134132
};
135133
};
136-
134+
function mapStateToProps({ posts }, { categories }) {
135+
return {
136+
posts,
137+
categories
138+
};
139+
}
137140
export default connect(
138141
mapStateToProps,
139142
mapDispatchToProps

‎src/components/Post.js‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -38,20 +38,19 @@ const Post = props => {
3838
</li>
3939
);
4040
};
41-
42-
function mapStateToProps(state) {
43-
return {
44-
posts: state.posts,
45-
loading: state.loading
46-
};
47-
}
48-
4941
const mapDispatchToProps = dispatch => {
5042
return {
5143
dispatchDeletePost: id => dispatch(deletePost(id)),
5244
dispatchCastVote: payload => dispatch(castVote(payload))
5345
};
5446
};
47+
function mapStateToProps({ posts }, { loading }) {
48+
return {
49+
posts,
50+
loading
51+
};
52+
}
53+
5554
export default connect(
5655
mapStateToProps,
5756
mapDispatchToProps

0 commit comments

Comments
 (0)