Merge branch '06_dakota'

learn-co-students · Dec 19, 2022 · 89264c8 · 89264c8
2 parents b0d94bb + 738eb96
commit 89264c8
Show file tree

Hide file tree

Showing 61 changed files with 7,963 additions and 0 deletions.
diff --git a/06_PATCH_and_DELETE_Requests/Readme.md b/06_PATCH_and_DELETE_Requests/Readme.md
@@ -0,0 +1,72 @@
+# Full CRUD Requests
+## SWBAT
+- [ ] Review how to send a PATCH request using HTML forms and JavaScript
+- [ ] Review how to send a DELETE request using HTML buttons and JavaScript
+- [ ] Explain the difference between optimistic and pessimistic rendering
+
+## Deliverables 
+
+- Demo: Delete
+    - In renderBookCard, within the callback passed to the eventListener on the delete button, create a DELETE request.
+    - Update the DOM pessimistically 
+- Demo Update:
+    - In renderBookCard create an input. 
+    - Set its value to the books inventory. 
+    - Assigned its type to number.
+    - Append the input to the li
+    - Add an eventListener to the input.
+    - Pass the event listener a callback that performs a PATCH request.
+    - Review the differences between a PUT and PATCH
+- Refactor 
+- Put the DELETE request into a separate function
+- Put the PATCH request into a separate function
+## POST (Create)
+![post](assets/post.png)
+
+Posts send data to the server. The information is usually sent from a FORM, creating a resource in the database. A POST is typically for creating new data instead of updating data, like PUT or PATCH.
+
+A POST requires an additional argument, a request/config object.
+
+```
+// Method: The HTTP method used in this request. Fetch requests are GET by default. Though they can take a request object, it's not necessary. Other requests, such as POST, require the method to identify what type of request it is. 
+
+// Headers: An object that contains additional information for the request. The Content-Type indicates the original media type of the data. 
+
+// Body: The data from the request. Before the request can be sent the data must be converted to JSON.
+fetch(url, {
+    method: 'POST',
+    headers: {
+        'Content-Type': 'application/json'
+    },
+    body:JSON.stringify(formData)
+})
+```
+
+## Patch
+Patch updates/modifies a resource.
+
+```
+
+// The url in a patch requires an id to identify the resource being updated. 
+// The HTTP method is 'PATCH'
+// The body can take the full resource or one property of the resource.
+
+fetch(url/:id, {
+    method: 'PATCH',
+    headers: {
+        'Content-Type': 'application/json'
+    },
+    body:JSON.stringify({prop:value})
+})
+```
+
+## Delete
+Delete removes a resource from the server. Unlike Post and Patch it doesn't require headers or a body, though some backend frameworks may require a header.
+
+```
+// Delete does require the method and the id of the resource being deleted.
+fetch(url/:id, {
+    method: 'DELETE',
+})
+
+```
diff --git a/06_PATCH_and_DELETE_Requests/assets/books.png b/06_PATCH_and_DELETE_Requests/assets/books.png
diff --git a/06_PATCH_and_DELETE_Requests/assets/db.json b/06_PATCH_and_DELETE_Requests/assets/db.json
@@ -0,0 +1,9 @@
+{
+  "comments": [
+    {
+      "id": 1,
+      "body": "some comment",
+      "likes": 8
+    }
+  ]
+}
diff --git a/06_PATCH_and_DELETE_Requests/assets/export/favicon.ico b/06_PATCH_and_DELETE_Requests/assets/export/favicon.ico
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>Error</title>
+</head>
+<body>
+<pre>Cannot GET /favicon.ico</pre>
+</body>
+</html>
diff --git a/06_PATCH_and_DELETE_Requests/assets/export/fetch-delete-diagram.drawio.svg b/06_PATCH_and_DELETE_Requests/assets/export/fetch-delete-diagram.drawio.svg
diff --git a/06_PATCH_and_DELETE_Requests/assets/export/fetch-patch-diagram.drawio.svg b/06_PATCH_and_DELETE_Requests/assets/export/fetch-patch-diagram.drawio.svg