Skip to content
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 36 additions & 17 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

127 changes: 127 additions & 0 deletions public/scripts/main.js
Original file line number Diff line number Diff line change
@@ -1 +1,128 @@
// Write chatr code here!

if (false) {
// Promise Review
// Promises are a object that will return a value in the future.

// setTimeout is a async function.
// we "promsified" setTimeout in a promise called saySomethingLater
function saySomethingLater(delay, phrase) {
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log(phrase)
resolve(phrase)
}, delay)
})
}

// to consume our promise `saySomethingLater` we chain a `.then()` method to it.
// `.then()` accepts a callback function. This callback function gets invoked when the promise resolves (completes)
// the argument provided in the .then()'s callback is the value the promise resolves
saySomethingLater(3000, 'monday')
.then((phrase) => {
console.log(`logging from .then the phrase: ${phrase}`);
return 'apples'
})
.then((args) => {
console.log(args)
})

}


// Creating Fetch Requests

// Routes

// GET "/messages" -> Returns all messages (Message Index)
// POST "/messages" -> Create a message (Message Create)
// PATCH "/messages/:id" -> Update a message (Message Update)
// DELETE "/messages/:id" -> Delete a message (Message Delete)

const BASE_URL = 'http://localhost:3434';

const Message = {
all() {
return fetch(`${BASE_URL}/messages`) // GET "/messages"
.then((response) => {
return response.json(); // response.text() is a promise that will will read the response.body and turn it into text
})
},

create(params) {
// POST "/messages"
return fetch(`${BASE_URL}/messages`, {
method: "POST",
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(params)
})
},

delete(id) {
return fetch(`${BASE_URL}/messages/${id}`, {
method: "DELETE"
}).then(response => response)
}
}

document.addEventListener('DOMContentLoaded', () => {
const messagesContainer = document.querySelector('#messages');

// grabs all the messages and displays them on the page
function refreshMessages() {
Message.all()
.then((messages) => {
const htmlString = messages.map((m) => {
return (
`<li>
<strong>#${m.id}</strong>
<p>${m.body}</p>
<button data-id="${m.id} "class="delete-msg-btn">
Delete
</button>
</li>
`
)
}).join("");
messagesContainer.innerHTML = htmlString;
})
}

refreshMessages();

// creates a new message and calls "refreshMessages()"
const newMessageForm = document.querySelector('#new-message');
newMessageForm.addEventListener('submit', (e) => {
e.preventDefault();
const form = e.currentTarget;
const formData = new FormData(form);
Message.create({
username: 'brandon',
body: formData.get('body')
})
.then((payload) => refreshMessages());
})


// Delete a message
messagesContainer.addEventListener("click", (event) => {
const target = event.target
console.log(target);
if (target.matches(".delete-msg-btn")) {
const id = target.getAttribute('data-id')
Message.delete(id)
.then(() => refreshMessages())
}
})
})


const PokemonAPI = {
index() {
fetch('https://pokeapi.co/api/v2/pokemon/5')
.then(res => res.json())
.then(payload => console.log(payload));
}
}
8 changes: 4 additions & 4 deletions routes/messages.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@ const express = require('express');
const router = express.Router();
const {index, create, update, destroy} = require('../controllers/messages');

router.get('/', index);
router.post('/', create);
router.patch('/:id', update);
router.delete('/:id', destroy);
router.get('/', index); // GET "/messages" -> Returns all messages (Message Index)
router.post('/', create); // POST "/messages" -> Create a message (Message Create)
router.patch('/:id', update); // PATCH "/messages/:id" -> Update a message (Message Update)
router.delete('/:id', destroy); // DELETE "/messages/:id" -> Delete a message (Message Delete)

module.exports = router;