Lesson 27 code

tomer79sagi · Feb 15, 2024 · 20d2da8 · 20d2da8
1 parent 52133ae
commit 20d2da8
Show file tree

Hide file tree

Showing 4 changed files with 100 additions and 13 deletions.
diff --git a/26 - 11.2.24 - TS Class, DOM, REST API/_prep/axios/tsconfig.json b/26 - 11.2.24 - TS Class, DOM, REST API/_prep/axios/tsconfig.json
@@ -2,9 +2,8 @@
 
   "compilerOptions": {
 
-  "target": "es6",
-
-  "module": "NodeNext",
+  "target": "es2016",
+  "module": "es6",
 
   "lib": ["dom", "dom.iterable", "esnext"],
 
@@ -27,7 +26,7 @@
   "isolatedModules": true,
 
   "jsx": "react-jsx",
-  "moduleResolution": "NodeNext"
+  "moduleResolution": "node"
 
   },
 

diff --git a/27 - 14.2.24 - REST API + REACT/rest-api/index.html b/27 - 14.2.24 - REST API + REACT/rest-api/index.html
@@ -11,7 +11,10 @@ <h1>17.12.23</h1>
     <h2>Fetch</h2>
 
     <div id="buttons">
-      <button id="btnLoad">Start</button>
+      <button id="btnGet">GET</button>
+      <button id="btnPost">POST</button>
+      <button id="btnPut">PUT</button>
+      <button id="btnDelete">DELETE</button>
     </div>
 
     <hr/>

diff --git a/27 - 14.2.24 - REST API + REACT/rest-api/script.js b/27 - 14.2.24 - REST API + REACT/rest-api/script.js
@@ -8,6 +8,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
+var _a, _b, _c, _d;
+;
 // -- MODEL --
 // 1. Makes call to server
 // 2. Returns a Promise object
@@ -40,6 +42,20 @@ function postData() {
         }
     });
 }
+function putData(postObj) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const response = yield fetch(`https://jsonplaceholder.typicode.com/posts/${postObj.id}`, {
+            method: 'PUT',
+            body: JSON.stringify(postObj),
+            headers: {
+                'Content-type': 'application/json; charset=UTF-8',
+            },
+        });
+        if (response.ok) { // if HTTP status is within the range of 200 and 299
+            return response.json(); // Similar to JSON.parse();
+        }
+    });
+}
 // -- VIEW --
 // Responsible for updating the UI with data
 // אחראי על עדכון הממשק משתמש באמצעות דאטה שהוא מקבל כקלט לפונקציה
@@ -60,14 +76,39 @@ function updateUI(data) {
     document.getElementById('output').innerHTML = `<table>${htmlContent}</table>`;
 }
 // -- CONTROL --
-function main() {
+function apiGET() {
     return __awaiter(this, void 0, void 0, function* () {
         // 1. Get list of posts from server - GET
         let data = yield getData();
         updateUI(data);
+    });
+}
+function apiPOST() {
+    return __awaiter(this, void 0, void 0, function* () {
         // 2. Create new post on server - POST
-        data = yield postData();
-        // alert(data);
+        const response = yield postData();
+        if (response.id)
+            alert(`Successfully created a new Post object. New ID is ${response.id}.`);
+    });
+}
+function apiPUT() {
+    return __awaiter(this, void 0, void 0, function* () {
+        const newPost = {
+            id: 19,
+            title: 'New Post',
+            body: 'This is a new post!',
+            userId: 1,
+        };
+        const response = yield putData(newPost);
+        if (response.id)
+            alert(`Successfully updated Post with ID ${response.id}.`);
+    });
+}
+function apiDELETE() {
+    return __awaiter(this, void 0, void 0, function* () {
     });
 }
-main();
+(_a = document.getElementById('btnGet')) === null || _a === void 0 ? void 0 : _a.addEventListener('click', apiGET);
+(_b = document.getElementById('btnPost')) === null || _b === void 0 ? void 0 : _b.addEventListener('click', apiPOST);
+(_c = document.getElementById('btnPut')) === null || _c === void 0 ? void 0 : _c.addEventListener('click', apiPUT);
+(_d = document.getElementById('btnDelete')) === null || _d === void 0 ? void 0 : _d.addEventListener('click', apiDELETE);
diff --git a/27 - 14.2.24 - REST API + REACT/rest-api/script.ts b/27 - 14.2.24 - REST API + REACT/rest-api/script.ts
@@ -1,3 +1,11 @@
+
+interface IPost {
+  id: number,
+  title: string,
+  body: string,
+  userId: number
+};
+
 // -- MODEL --
 // 1. Makes call to server
 // 2. Returns a Promise object
@@ -31,6 +39,20 @@ async function postData() {
   }
 }
 
+async function putData(postObj: IPost) {
+  const response = await fetch(`https://jsonplaceholder.typicode.com/posts/${postObj.id}`, {
+    method: 'PUT',
+    body: JSON.stringify(postObj),
+    headers: {
+      'Content-type': 'application/json; charset=UTF-8',
+    },
+  });
+
+  if (response.ok) { // if HTTP status is within the range of 200 and 299
+    return response.json(); // Similar to JSON.parse();
+  }
+}
+
 // -- VIEW --
 // Responsible for updating the UI with data
 // אחראי על עדכון הממשק משתמש באמצעות דאטה שהוא מקבל כקלט לפונקציה
@@ -54,14 +76,36 @@ function updateUI(data: any): void {
 }
 
 // -- CONTROL --
-async function main() {
+async function apiGET() {
   // 1. Get list of posts from server - GET
   let data = await getData();
   updateUI(data);
+}
 
+async function apiPOST() {
   // 2. Create new post on server - POST
-  data = await postData();
-  // alert(data);
+  const response = await postData();
+  if (response.id)
+    alert(`Successfully created a new Post object. New ID is ${response.id}.`);
+}
+
+async function apiPUT() {
+  const newPost = {
+    id: 19,
+    title: 'New Post',
+    body: 'This is a new post!',
+    userId: 1,
+  };
+
+  const response = await putData(newPost);
+  if (response.id)
+    alert(`Successfully updated Post with ID ${response.id}.`);
+}
+
+async function apiDELETE() {
 }
 
-main(); 
+document.getElementById('btnGet')?.addEventListener('click', apiGET);
+document.getElementById('btnPost')?.addEventListener('click', apiPOST);
+document.getElementById('btnPut')?.addEventListener('click', apiPUT);
+document.getElementById('btnDelete')?.addEventListener('click', apiDELETE);