Fixes

README.md

@@ -93,24 +93,44 @@ In this section we will try to describe each endpoint and the expected results.
 #### Endpoints
 
 Method: GET<br>
-`/api/user/:id` - Returns one user object if the id matches a user in the database.<br>
-`/api/users` - Returns an array with 10 users paginated. Also accepts a query for searching users.<br>
-`/api/blog/:id` - Returns one blog object if the id matcher a blog in the database.<br>
-`/api/blogs` - Returns an array with 10 blogs paginated. Also accepts a query for searching blogs.<br>
-`/api/featured` - Returns an array with the blogs marked as featured.<br>
-`/api/blogs/user/:id` - Returns an array with all the blogs authored by the user indicated by the id param.<br>
+`/api/user/:id` 
+* Returns one user object if the id matches a user in the database.
+
+`/api/users` 
+* Returns an array with 10 users paginated. Also accepts a query for searching users. (e.g.`/api/blogs?q=placeholder`)
+
+`/api/blog/:id`
+* Returns one blog object if the id matcher a blog in the database.
+
+`/api/blogs`
+* Returns an array with 10 blogs paginated. Also accepts a query for searching blogs. (e.g. `/api/blogs?q=placeholder`)
+
+`/api/featured`
+* Returns an array with the blogs marked as featured.
+
+`/api/blogs/user/:id`
+* Returns an array with all the blogs authored by the user indicated by the id param.
 
 Method: POST<br>
-`/api/users/` - Returns an object with the new user information including the id.<br>
-`/api/blogs/` - Returns an object with the new blog post information including the id.<br>
+`/api/users/` 
+* Returns an object with the new user information including the id.
+
+`/api/blogs/` 
+* Returns an object with the new blog post information including the id.
 
 Method: PUT<br>
-`/api/user/:id` - Returns an object with the updated user.<br>
-`/api/blog/:id` - Returns an object with the updated blog post.<br>
+`/api/user/:id`
+* Returns an object with the updated user.
+
+`/api/blog/:id` 
+* Returns an object with the updated blog post.
 
 Method: DELETE<br>
-`/api/user/:id` - Returns an empty object after deleting the indicated user.<br>
-`/api/blog/:id` - Returns an empty object after deleting the indicated blog post. <br>
+`/api/user/:id` 
+* Returns an empty object after deleting the indicated user.
+
+`/api/blog/:id` 
+* Returns an empty object after deleting the indicated blog post. 
 
 #### Data Models
 
@@ -148,11 +168,9 @@ Import axios near the top of the file:
 `import axios from 'axios';`
 
 
-Now, you will make a `componentWillMount` method and use axios to make a GET request to the endpoint: `'/api/featured'`
+Now, you will make a `componentDidMount` method and use axios to make a GET request to the endpoint: `'/api/featured'`
 
-Using the `.then` function on the axios call, set the `featured` property in state to the appropriate data in the results.
-
-Set the data to the `posts` property on state and set `index` to `(~~(Math.random() * results.data.length) + 0)` (this will randomly select a post to feature on the homepage).
+Using the `.then` function on the axios call, set the data to the `posts` property on state and set `index` to `Math.floor(Math.random() * results.data.length)` (this will randomly select a post to feature on the homepage).
 
 Now, in the `render` method before the `return`, map over the `posts` array and assign each blog post object into a `<BlogThumb />` component. The `BlogThumb` component will display the prop called `blog`.
 
@@ -168,10 +186,9 @@ Lastly, add a `.catch(console.log)` to the end of `.then` for error reporting.
 
 ```javascript
 ...
-componentWillMount(){
+componentDidMount(){
     axios.get('/api/featured').then(results=>{
         this.setState({
-            featured: results.data,
             index: (~~(Math.random() * results.data.length) + 0),
             posts: results.data
         })
@@ -199,7 +216,7 @@ The endpoint will be at `/api/blog/:id`. The `:id` is a parameter. Meaning that
 
 This parameter is being used in the React routing also. You can access the parameter in react thusly: `this.props.match.params.id` in this case.
 
-In a `componentWillMount` method, make an `axios.get` call to `/api/blog/id` with the id property from `this.props.match.params` filling the `id` spot in the URL. `console.log` the response in the `.then` and find what data needs to be set to `state`. 
+In a `componentDidMount` method, make an `axios.get` call to `/api/blog/id` with the id property from `this.props.match.params` filling the `id` spot in the URL. `console.log` the response in the `.then` and find what data needs to be set to `state`. 
 
 Lastly, add a `.catch(console.log)` to the end of `.then` for error reporting.
 
@@ -248,14 +265,6 @@ Map over `this.state.userResults`, passing each element into `<UserTile />`. Be
 
 Lastly, add a `.catch(console.log)` to the end of `.then` for error reporting.
 
-#### Bonus
-
-You'll notice that if we hit the back arrow our search history isn't preserved. To remedy that, paste this line into the top of your `if` and `else` statements: 
-
-```javascript
-this.props.history.push(makeQuery('/search?',{q:searchTerm,type:searchType}))
-```
-
 
 <details>
 <summary><b>Code Solution</b></summary>
@@ -270,13 +279,11 @@ search(e){
 
         axios.get(`/api/${searchType}?q=${searchTerm}`).then(response=>{
             if(searchType==='blogs'){
-                this.props.history.push(makeQuery('/search?',{q:searchTerm,type:searchType}))
                 this.setState({
                     blogResults: response.data,
                     userResults: []
                 })
             }else{
-                this.props.history.push(makeQuery('/search?',{q:searchTerm,type:searchType}))
                 this.setState({
                     blogResults: [],
                     userResults: response.data
@@ -357,17 +364,17 @@ Next we are going to add axios to the Edit.js component.
 Import axios near the top of the file:
 `import axios from 'axios';`
 
-This time there are going to be three `axios` requests made from `componentWillMount`, `updatePost`, and `deletePost` methods.
+This time there are going to be three `axios` requests made from `componentDidMount`, `updatePost`, and `deletePost` methods.
 
-The `componentWillMount` method will be using a GET request.
+The `componentDidMount` method will be using a GET request.
 
 The `updatePost` method will be using a PUT request.
 
 The `deletePost` method will be using a DELETE request.
 
 The endpoint for all requests will be at `/api/blog/:id`. You should notice that we are using a URL parameter again. This will be available via: `this.props.match.params.id`. The URL will need to be dynamic, so use backticks and variable injection again.
 
-Let's start with `componentWillMount`. This is where we'll make a GET request for the selected blog post. In the `.then` of the get request, we'll parse out our `response.data` into multiple properties on `this.state`. Try and decide what properties those might be by using `console.log` on `response.data`. As always, add `.catch(console.log)` after `.then`
+Let's start with `componentDidMount`. This is where we'll make a GET request for the selected blog post. In the `.then` of the get request, we'll parse out our `response.data` into multiple properties on `this.state`. Try and decide what properties those might be by using `console.log` on `response.data`. As always, add `.catch(console.log)` after `.then`
 
 Now we'll create the `updatePost` method for the PUT request. This is where our edit function comes from. A PUT request tells the server that you're changing some information that already exists, rather than adding new information. `axios.put` is set up the same way as `axios.post` -- two arguments: endpoint and body object. Follow the same pattern from `Add.js`. Don't forget `.catch(console.log)`
 
@@ -396,7 +403,7 @@ this.props.history.push('/search')
 
 ```javascript
 ...
-    componentWillMount(){
+    componentDidMount(){
         axios.get(`/api/blog/${this.props.match.params.id}`).then(results=>{
             let blog = results.data
             this.setState({
@@ -461,9 +468,9 @@ this.props.history.push(`/search/`)
 
 Next we are going to add axios to the User.js component. Import axios near the top of the file: `import axios from 'axios'`;
 
-We will need to make a GET request in the `componentWillMount` on `User.js` in order to populate the UI with the correct information. 
+We will need to make a GET request in the `componentDidMount` on `User.js` in order to populate the UI with the correct information. 
 
-You will be making two get requests within `componentWillMount`. The first will be to `/api/user/id`. You will get the id from `this.props.match.params.id`. Set the user property on state with the data from the response of the api call. 
+You will be making two get requests within `componentDidMount`. The first will be to `/api/user/id`. You will get the id from `this.props.match.params.id`. Set the user property on state with the data from the response of the api call. 
 
  The second will be to `/api/blogs` but will have a query where `userID` is equal to `this.props.match.params.id`. Set the posts property on state with the data from the response of the api call.
 
@@ -510,7 +517,7 @@ You will be making two get requests within `componentWillMount`. The first will
 
 ```javascript
 ...
-    componentWillMount(){
+    componentDidMount(){
         let userID = this.props.match.params.id;
         axios.get(`/api/user/${userID}`).then(response=>{
             let user = response.data

src/components/Blog.js

@@ -12,7 +12,7 @@ class Blog extends Component{
         }
     }
 
-    // insert componentWillMount method
+    // insert componentDidMount method
 
 
     render(){

src/components/Edit.js

@@ -18,7 +18,7 @@ class Edit extends Component {
         this.no = this.no.bind(this);
     }
 
-    // insert componentWillMount
+    // insert componentDidMount
 
 
     // insert updatePost 

src/components/Home.js

@@ -14,7 +14,7 @@ class Home extends Component{
         }
     }
 
-    // insert componentWillMount:
+    // insert componentDidMount:
 
 
     render(){

src/components/NewUser.js

@@ -52,7 +52,7 @@ class NewUser extends Component{
                         this.state.id >= 0
                         ?
                         <span>
-                            <button className='delete-button'>Delete User</button>
+                            <button onClick={()=>this.deleteUser()} className='delete-button'>Delete User</button>
                             <button type='submit'>Update</button>
                         </span>
                         :

src/components/User.js

@@ -14,7 +14,7 @@ class User extends Component{
         }
     }
 
-    // insert componentWillMount
+    // insert componentDidMount
 
 
     render(){