Skip to content

Commit 0c6d5ae

Browse files
codingforentrepreneurscodingforentrepreneurs
committed
25 & 26 Post Update Part 1 & 2
1 parent 3636c83 commit 0c6d5ae

File tree

6 files changed

+389
-156
lines changed

6 files changed

+389
-156
lines changed

‎src/reactify-ui/src/App.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,13 @@ import './App.css';
55

66
import Posts from './posts/Posts';
77
import PostDetail from './posts/PostDetail';
8-
8+
import PostUpdate from './posts/PostUpdate'
99
class App extends Component {
1010
render() {
1111
return (
1212
<BrowserRouter>
1313
<Switch>
14+
<Route exact path='/posts/create' component={PostUpdate}/>
1415
<Route exact path='/posts' component={Posts}/>
1516
<Route exact path='/posts/:slug' component={PostDetail}/>
1617
<Route component={Posts}/>

‎src/reactify-ui/src/posts/PostCreate.js‎

Lines changed: 155 additions & 150 deletions
Original file line numberDiff line numberDiff line change
@@ -1,152 +1,157 @@
1-
import React, {Component} from 'react'
2-
import 'whatwg-fetch'
3-
import cookie from 'react-cookies'
4-
import moment from 'moment'
5-
6-
class PostCreate extends Component {
7-
constructor(props){
8-
super(props)
9-
this.handleSubmit = this.handleSubmit.bind(this)
10-
this.handleInputChange = this.handleInputChange.bind(this)
11-
this.handleDraftChange = this.handleDraftChange.bind(this)
12-
this.clearForm = this.clearForm.bind(this)
13-
this.postTitleRef = React.createRef()
14-
this.postContentRef = React.createRef()
15-
this.state = {
16-
draft: false,
17-
title: null,
18-
content: null,
19-
publish: null,
20-
errors: {}
21-
}
22-
}
23-
createPost(data){
24-
const endpoint = '/api/posts/'
25-
const csrfToken = cookie.load('csrftoken')
26-
let thisComp = this
27-
if (csrfToken !== undefined) {
28-
let lookupOptions = {
29-
method: "POST",
30-
headers: {
31-
'Content-Type': 'application/json',
32-
'X-CSRFToken': csrfToken
33-
},
34-
body: JSON.stringify(data),
35-
credentials: 'include'
36-
}
37-
38-
fetch(endpoint, lookupOptions)
39-
.then(function(response){
40-
return response.json()
41-
}).then(function(responseData){
42-
console.log(responseData)
43-
if (thisComp.props.newPostItemCreated){
44-
thisComp.props.newPostItemCreated(responseData)
45-
}
46-
thisComp.clearForm()
47-
}).catch(function(error){
48-
console.log("error", error)
49-
alert("An error occured, please try again later.")
50-
})
51-
}
1+
// left for reference
2+
3+
4+
5+
6+
// import React, {Component} from 'react'
7+
// import 'whatwg-fetch'
8+
// import cookie from 'react-cookies'
9+
// import moment from 'moment'
10+
11+
// class PostCreate extends Component {
12+
// constructor(props){
13+
// super(props)
14+
// this.handleSubmit = this.handleSubmit.bind(this)
15+
// this.handleInputChange = this.handleInputChange.bind(this)
16+
// this.handleDraftChange = this.handleDraftChange.bind(this)
17+
// this.clearForm = this.clearForm.bind(this)
18+
// this.postTitleRef = React.createRef()
19+
// this.postContentRef = React.createRef()
20+
// this.state = {
21+
// draft: false,
22+
// title: null,
23+
// content: null,
24+
// publish: null,
25+
// errors: {}
26+
// }
27+
// }
28+
// createPost(data){
29+
// const endpoint = '/api/posts/'
30+
// const csrfToken = cookie.load('csrftoken')
31+
// let thisComp = this
32+
// if (csrfToken !== undefined) {
33+
// let lookupOptions = {
34+
// method: "POST",
35+
// headers: {
36+
// 'Content-Type': 'application/json',
37+
// 'X-CSRFToken': csrfToken
38+
// },
39+
// body: JSON.stringify(data),
40+
// credentials: 'include'
41+
// }
42+
43+
// fetch(endpoint, lookupOptions)
44+
// .then(function(response){
45+
// return response.json()
46+
// }).then(function(responseData){
47+
// console.log(responseData)
48+
// if (thisComp.props.newPostItemCreated){
49+
// thisComp.props.newPostItemCreated(responseData)
50+
// }
51+
// thisComp.clearForm()
52+
// }).catch(function(error){
53+
// console.log("error", error)
54+
// alert("An error occured, please try again later.")
55+
// })
56+
// }
5257

53-
}
54-
55-
handleSubmit(event){
56-
event.preventDefault()
57-
let data = this.state
58-
this.createPost(data)
59-
}
60-
61-
handleInputChange(event){
62-
event.preventDefault()
63-
let key = event.target.name
64-
let value = event.target.value
65-
if (key === 'title'){
66-
if (value.length > 120){
67-
alert("This title is too long")
68-
}
69-
}
70-
this.setState({
71-
[key]: value
72-
})
73-
}
74-
75-
handleDraftChange(){
76-
this.setState({
77-
draft: !this.state.draft
78-
})
79-
}
80-
81-
clearForm(event){
82-
if (event){
83-
event.preventDefault()
84-
}
85-
this.postCreateForm.reset()
86-
}
87-
88-
89-
clearFormRefs(){
90-
this.postTitleRef.current=''
91-
this.postContentRef.current=''
92-
}
93-
94-
95-
componentDidMount(){
96-
this.setState({
97-
draft: false,
98-
title: null,
99-
content: null,
100-
publish: moment(new Date()).format('YYYY-MM-DD'),
101-
})
102-
this.postTitleRef.current.focus()
103-
}
104-
105-
render(){
106-
const {publish} = this.state
107-
let thisComp = this
108-
return (
109-
<form onSubmit={this.handleSubmit} ref={(el) => this.postCreateForm = el}>
110-
<div className='form-group'>
111-
<label for='title'>Post title</label>
112-
<input
113-
type='text'
114-
id='title'
115-
name='title'
116-
className='form-control'
117-
placeholder='Blog post title'
118-
ref = {this.postTitleRef}
119-
onChange={this.handleInputChange}
120-
required='required'/>
121-
</div>
122-
<div className='form-group'>
123-
<label for='content'>Content</label>
124-
<textarea id='content' ref = {this.postContentRef} name='content' className='form-control' placeholder='Post content' onChange={this.handleInputChange} required='required'/>
58+
// }
59+
60+
// handleSubmit(event){
61+
// event.preventDefault()
62+
// let data = this.state
63+
// this.createPost(data)
64+
// }
65+
66+
// handleInputChange(event){
67+
// event.preventDefault()
68+
// let key = event.target.name
69+
// let value = event.target.value
70+
// if (key === 'title'){
71+
// if (value.length > 120){
72+
// alert("This title is too long")
73+
// }
74+
// }
75+
// this.setState({
76+
// [key]: value
77+
// })
78+
// }
79+
80+
// handleDraftChange(event){
81+
// this.setState({
82+
// draft: !this.state.draft
83+
// })
84+
// }
85+
86+
// clearForm(event){
87+
// if (event){
88+
// event.preventDefault()
89+
// }
90+
// this.postCreateForm.reset()
91+
// }
92+
93+
94+
// clearFormRefs(){
95+
// this.postTitleRef.current=''
96+
// this.postContentRef.current=''
97+
// }
98+
99+
100+
// componentDidMount(){
101+
// this.setState({
102+
// draft: false,
103+
// title: null,
104+
// content: null,
105+
// publish: moment(new Date()).format('YYYY-MM-DD'),
106+
// })
107+
// this.postTitleRef.current.focus()
108+
// }
109+
110+
// render(){
111+
// const {publish} = this.state
112+
// let thisComp = this
113+
// return (
114+
// <form onSubmit={this.handleSubmit} ref={(el) => this.postCreateForm = el}>
115+
// <div className='form-group'>
116+
// <label for='title'>Post title</label>
117+
// <input
118+
// type='text'
119+
// id='title'
120+
// name='title'
121+
// className='form-control'
122+
// placeholder='Blog post title'
123+
// ref = {this.postTitleRef}
124+
// onChange={this.handleInputChange}
125+
// required='required'/>
126+
// </div>
127+
// <div className='form-group'>
128+
// <label for='content'>Content</label>
129+
// <textarea id='content' ref = {this.postContentRef} name='content' className='form-control' placeholder='Post content' onChange={this.handleInputChange} required='required'/>
125130

126-
</div>
127-
<div className='form-group'>
128-
<label for='draft'>
129-
<input type='checkbox' checked={this.state.draft} id='draft' name='draft' className='mr-2' onChange={this.handleDraftChange}/>
130-
Draft </label>
131-
<button onClick={(event)=>{event.preventDefault();this.handleDraftChange()}}>Toggle Draft</button>
132-
</div>
133-
<div className='form-group'>
134-
<label for='publish'>Publish Date</label>
135-
<input
136-
type='date'
137-
id='publish'
138-
name='publish'
139-
className='form-control'
140-
onChange={this.handleInputChange}
141-
value={publish}
142-
required='required'/>
143-
</div>
144-
<button type='submit' className='btn btn-primary'>Save</button>
145-
<button className='btn btn-secondary' onClick={this.clearForm}>Cancel</button>
146-
</form>
147-
)
148-
}
149-
150-
}
151-
152-
export default PostCreate
131+
// </div>
132+
// <div className='form-group'>
133+
// <label for='draft'>
134+
// <input type='checkbox' checked={this.state.draft} id='draft' name='draft' className='mr-2' onChange={this.handleDraftChange}/>
135+
// Draft </label>
136+
// <button onClick={(event)=>{event.preventDefault();this.handleDraftChange()}}>Toggle Draft</button>
137+
// </div>
138+
// <div className='form-group'>
139+
// <label for='publish'>Publish Date</label>
140+
// <input
141+
// type='date'
142+
// id='publish'
143+
// name='publish'
144+
// className='form-control'
145+
// onChange={this.handleInputChange}
146+
// value={publish}
147+
// required='required'/>
148+
// </div>
149+
// <button type='submit' className='btn btn-primary'>Save</button>
150+
// <button className='btn btn-secondary' onClick={this.clearForm}>Cancel</button>
151+
// </form>
152+
// )
153+
// }
154+
155+
// }
156+
157+
// export default PostCreate

‎src/reactify-ui/src/posts/PostDetail.js‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,24 @@ import 'whatwg-fetch'
33
import cookie from 'react-cookies'
44
import { Link } from 'react-router-dom'
55

6+
import PostUpdate from './PostUpdate'
7+
68
class PostDetail extends Component {
79
constructor(props){
810
super(props)
11+
this.handlePostItemUpdated= this.handlePostItemUpdated.bind(this)
912
this.state = {
1013
slug: null,
1114
post: null,
1215
doneLoading: false,
1316
}
1417
}
1518

19+
handlePostItemUpdated(postItemData){
20+
this.setState({
21+
post: postItemData
22+
})
23+
}
1624
loadPost(slug){
1725
const endpoint = `/api/posts/${slug}/`
1826
let thisComp = this
@@ -80,7 +88,7 @@ class PostDetail extends Component {
8088
state: { fromDashboard: false }
8189
}}>Posts</Link></p>
8290

83-
{post.owner === true ? <div>Update Post</div> : ""}
91+
{post.owner === true ? <PostUpdate post={post} postItemUpdated={this.handlePostItemUpdated} /> : ""}
8492
</div>
8593
}
8694
</div> : "Loading..."}</p>

0 commit comments

Comments
 (0)