So this fetch request is called on the submit button.
For some reason, in the dev tools, it goes through as a GET. Tested the request in Insomnia, and it ends up returning the site to me (the handlebars site)... and none of my console logs ever show up (on the backend or the front)
Front End
const newPostSubmit= async function(event) {
console.log('didnt make it');
event.preventDefault()
console.log('made it');
const title = document.getElementById('post-title').value;
const content = document.getElementById('content').value;
const response = await fetch(`/api/posts/`, {
method: 'POST',
body: JSON.stringify({
title,
content
}),
headers: {
'Content-Type': 'application/json'
}
});
if (response.ok) {
console.log('Post Success!')
// document.location.replace('/dashboard');
} else {
alert(response.statusText);
}
}
document.getElementById('submit-post').addEventListener('submit', newPostSubmit);Back End Route To Be Used
router.post('/', checkAuth, (req, res) => {
const body = req.body
console.log(body);
Post.create({ ...body, userId: req.session.userId })
.then(dbPostData => {
console.log(dbPostData);
res.json(dbPostData)
})
.catch(err => {
console.log(err);
res.status(500).json(err);
});
});The problem was with my HTML. The id of 'submit-post' was placed on the button, but needed to be on the form itself (the button was within the element) which is why the function would never run