Send a POST request from React Component to Spring Boot Controller - reactjs

Question

So I have a React component called UpdateJobComponent. From here the user can either update a job or create a job (depending on the button they clicked in the previous component). The update of a job works fine however when I try to create a job i get the following errors:
Errors
Put http://localhost:8080/jobs/-1 500
Uncaught (in promise) Error: Request failed with status code 500
at createError
It tells me it's a PUT request and not a POST. However I thought I have it said up properly to match the the createJob PostMapping Controller. Below is the UpdateJobComponent code as well as the service files and also the Controller as well as the JobDataService.
I'm quite sure that the updateJob method in my JobController is receiving the POST and that's why I'm getting the problem but I can't figure out how to make the createJob in the JobController get it.
If you want to see anymore code just let me know, I tried to trim it as much as possible so not to take too long to look over! I'd really appreciate any help you can offer!
UpdateJobComponent
// imports
class UpdateJobComponent extends Component {
constructor(props) {
super(props)
this.state = {
id: this.props.match.params.id,
employer: this.props.match.employer,
description: ''
}
// bind methods
}
componentDidMount() {
if (this.state.id == -1) {
console.log("Not mounting")
return;
}
console.log(this.state.id)
console.log("mounting")
let userName = AuthenticationService.getLoggedUser()
JobDataService.retrieveJob(userName, this.state.id)
.then(response => this.setState({
description: response.data.description,
employer: response.data.employer,
jobTitle: response.data.jobTitle
}))
}
// Error handling for form
validate(values) {
let errors = {} // add validation for every field!!!!!!
if (!values.description) {
errors.description = 'Enter a description'
} else if (values.description.length < 5) {
errors.description = 'Description must be at least 5 characters long'
}
return errors
}
// When save is clicked
onSubmit(values) {
// let employer = this.state.employer
// let id = this.state.id
// let jobTitle = this.state.jobTitle
let job = {
id: this.state.id,
employer: values.employer,
jobTitle: values.jobTitle,
description: values.description
}
if (this.state.id === -1) {
JobDataService.createJob(job)
.then(() => this.props.history.push('/jobs'))
} else {
JobDataService.updateJob(job.jobTitle, job.employer, this.state.id, job)
.then(() => this.props.history.push('/jobs'))
}
}
render() {
let { description, employer, jobTitle } = this.state
return (
<div>
<h3>Update {this.state.employer}'s {this.state.jobTitle} Job</h3>
<div className="container">
<Formik
initialValues={{description: description, employer: employer, jobTitle: jobTitle}}
onSubmit={this.onSubmit}
validateOnChange={false}
validateOnBlur={false}
validate={this.validate}
enableReinitialize={true}
>
{
(props) => (
<Form>
// Formik form, removed to make post smaller...
<div className="btn-group mr-2" role="group" aria-label="First group">
<button className="btn btn-success" type="submit">Save</button>
</div>
JobDataService
// imports
const API_URL = 'http://localhost:8080'
const GET_ALL_JOBS_URL = `${API_URL}/jobs/`
updateJob(jobTitle, employer, id, job) {
return axios.put(`${GET_ALL_JOBS_URL}${id}`, job);
}
createJob(job) {
return axios.post(`${GET_ALL_JOBS_URL}`, job);
}
JobController
#Autowired
private JobService jobService;
#PostMapping("/jobs/")
public ResponseEntity<Job> createJob(#RequestBody Job job) {
Job createdJob = jobService.createJob(job);
java.net.URI uri = ServletUriComponentsBuilder.fromCurrentRequest().path("/{id}").buildAndExpand(createdJob.getId())
.toUri();
return ResponseEntity.created(uri).build();
}
#PutMapping("/jobs/{id}")
public ResponseEntity<Job> updateJob(#PathVariable long id, #RequestBody Job job) {
job.setId(id);
return ResponseEntity.ok().body(this.jobService.updateJob(job));
}
// Other get and delete methods
JobService
public Job createJob(Job job) {
if(job.getId() == -1 || job.getId() == 0) {
job.setId(++idCounter);
jobRepository.insert(job);
}
return jobRepository.save(job);
}
public Job updateJob(Job job) {
Optional < Job > jobDb = this.jobRepository.findById(job.getId());
if (jobDb.isPresent()) {
Job jobUpdate = jobDb.get();
jobUpdate.setId(job.getId());
jobUpdate.setEmployer(job.getEmployer());
jobUpdate.setJobTitle(job.getJobTitle());
jobUpdate.setDescription(job.getDescription());
jobRepository.save(jobUpdate);
return jobUpdate;
} else {
throw new ResourceNotFoundException("Record not found with id : " + job.getId());
}
}
// Other methods
Edit
Full error message:
PUT http://localhost:8080/jobs/-1 500
dispatchXhrRequest # 1.chunk.js:561
xhrAdapter # 1.chunk.js:411
dispatchRequest # 1.chunk.js:994
Promise.then (async)
request # 1.chunk.js:807
Axios.<computed> # 1.chunk.js:831
wrap # 1.chunk.js:1308
updateJob # main.chunk.js:1428
onSubmit # main.chunk.js:955
(anonymous) # 1.chunk.js:4699
(anonymous) # 1.chunk.js:5014
(anonymous) # 1.chunk.js:4709
Promise.then (async)
(anonymous) # 1.chunk.js:4705
(anonymous) # 1.chunk.js:5014
(anonymous) # 1.chunk.js:4750
(anonymous) # 1.chunk.js:5014
callCallback # 1.chunk.js:16321
invokeGuardedCallbackDev # 1.chunk.js:16370
invokeGuardedCallback # 1.chunk.js:16423
invokeGuardedCallbackAndCatchFirstError # 1.chunk.js:16438
executeDispatch # 1.chunk.js:16569
executeDispatchesInOrder # 1.chunk.js:16594
executeDispatchesAndRelease # 1.chunk.js:16697
executeDispatchesAndReleaseTopLevel # 1.chunk.js:16706
forEachAccumulated # 1.chunk.js:16678
runEventsInBatch # 1.chunk.js:16723
runExtractedPluginEventsInBatch # 1.chunk.js:16865
handleTopLevel # 1.chunk.js:21818
batchedEventUpdates$1 # 1.chunk.js:40326
batchedEventUpdates # 1.chunk.js:17401
dispatchEventForPluginEventSystem # 1.chunk.js:21914
attemptToDispatchEvent # 1.chunk.js:22031
dispatchEvent # 1.chunk.js:21934
unstable_runWithPriority # 1.chunk.js:51411
runWithPriority$2 # 1.chunk.js:28193
discreteUpdates$1 # 1.chunk.js:40343
discreteUpdates # 1.chunk.js:17426
dispatchDiscreteEvent # 1.chunk.js:21901

Answer 1

I just added an if statement in the updateJob method to check if the id was -1. It's far from pretty and will need to be fixed again but wll do for now. Thanks for your time Code-Apprentice!