From fb0d0287029cd5149ef87ec1b6f2d723e0a7f54c Mon Sep 17 00:00:00 2001 From: Brandon Y Lam Date: Mon, 10 Aug 2020 11:50:58 -0700 Subject: [PATCH 1/2] add demos --- package-lock.json | 41 +++++++++---- public/scripts/main.js | 127 +++++++++++++++++++++++++++++++++++++++++ routes/messages.js | 8 +-- 3 files changed, 161 insertions(+), 15 deletions(-) diff --git a/package-lock.json b/package-lock.json index 772055c..7b0e6fa 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1172,7 +1172,8 @@ }, "ansi-regex": { "version": "2.1.1", - "bundled": true + "bundled": true, + "optional": true }, "aproba": { "version": "1.2.0", @@ -1190,11 +1191,13 @@ }, "balanced-match": { "version": "1.0.0", - "bundled": true + "bundled": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -1207,15 +1210,18 @@ }, "code-point-at": { "version": "1.1.0", - "bundled": true + "bundled": true, + "optional": true }, "concat-map": { "version": "0.0.1", - "bundled": true + "bundled": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", - "bundled": true + "bundled": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -1318,7 +1324,8 @@ }, "inherits": { "version": "2.0.3", - "bundled": true + "bundled": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -1328,6 +1335,7 @@ "is-fullwidth-code-point": { "version": "1.0.0", "bundled": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -1340,17 +1348,20 @@ "minimatch": { "version": "3.0.4", "bundled": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } }, "minimist": { "version": "0.0.8", - "bundled": true + "bundled": true, + "optional": true }, "minipass": { "version": "2.3.5", "bundled": true, + "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -1367,6 +1378,7 @@ "mkdirp": { "version": "0.5.1", "bundled": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -1439,7 +1451,8 @@ }, "number-is-nan": { "version": "1.0.1", - "bundled": true + "bundled": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -1449,6 +1462,7 @@ "once": { "version": "1.4.0", "bundled": true, + "optional": true, "requires": { "wrappy": "1" } @@ -1524,7 +1538,8 @@ }, "safe-buffer": { "version": "5.1.2", - "bundled": true + "bundled": true, + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -1554,6 +1569,7 @@ "string-width": { "version": "1.0.2", "bundled": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -1571,6 +1587,7 @@ "strip-ansi": { "version": "3.0.1", "bundled": true, + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -1609,11 +1626,13 @@ }, "wrappy": { "version": "1.0.2", - "bundled": true + "bundled": true, + "optional": true }, "yallist": { "version": "3.0.3", - "bundled": true + "bundled": true, + "optional": true } } }, diff --git a/public/scripts/main.js b/public/scripts/main.js index 7395a68..6c79abd 100644 --- a/public/scripts/main.js +++ b/public/scripts/main.js @@ -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 ( + `
  • + #${m.id} +

    ${m.body}

    + +
    • + ` + ) + }).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)); + } +} \ No newline at end of file diff --git a/routes/messages.js b/routes/messages.js index 3772399..dcd7ae2 100644 --- a/routes/messages.js +++ b/routes/messages.js @@ -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; From 991413273f7ef28134a0342c4a168df453be9e6b Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Mon, 10 Aug 2020 18:49:58 +0000 Subject: [PATCH 2/2] Bump lodash from 4.17.11 to 4.17.19 Bumps [lodash](https://github.com/lodash/lodash) from 4.17.11 to 4.17.19. - [Release notes](https://github.com/lodash/lodash/releases) - [Commits](https://github.com/lodash/lodash/compare/4.17.11...4.17.19) Signed-off-by: dependabot[bot] --- package-lock.json | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/package-lock.json b/package-lock.json index 7b0e6fa..7e94faf 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1742,7 +1742,7 @@ }, "http-errors": { "version": "1.6.3", - "resolved": "http://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz", + "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz", "integrity": "sha1-i1VoC7S+KDoLW/TqLjhYC+HZMg0=", "requires": { "depd": "~1.1.2", @@ -2044,9 +2044,9 @@ } }, "lodash": { - "version": "4.17.11", - "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz", - "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==" + "version": "4.17.19", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.19.tgz", + "integrity": "sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ==" }, "lodash.debounce": { "version": "4.0.8", @@ -2588,7 +2588,7 @@ "dependencies": { "semver": { "version": "4.3.2", - "resolved": "http://registry.npmjs.org/semver/-/semver-4.3.2.tgz", + "resolved": "https://registry.npmjs.org/semver/-/semver-4.3.2.tgz", "integrity": "sha1-x6BxWKgL7dBSNVt3DYLWZA+AO+c=" } } @@ -3664,7 +3664,7 @@ }, "strip-ansi": { "version": "3.0.1", - "resolved": "http://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", "requires": { "ansi-regex": "^2.0.0"