Added Update operation and cancel button

express-inmemory-crud/server.js

@@ -1,50 +1,85 @@
-const express = require('express')
+const express = require("express");
 const app = express();
-const bodyParser = require('body-parser')
+const bodyParser = require("body-parser");
 const port = 3000;
 
-app.set('view engine', 'pug')
-app.use(express.static('public'))
+app.set("view engine", "pug");
+app.use(express.static("public"));
 
-var urlencodedParser = bodyParser.urlencoded({ extended: false })
+var urlencodedParser = bodyParser.urlencoded({ extended: false });
 
-const products = [{
+const products = [
+  {
     id: 1,
     name: "Cool Book",
-    image: "https://donrheem.com/wp-content/uploads/2016/11/Book-Placeholder.png",
-    description: "This is a cool book you won't regreat reading it"
-},
-{
+    image:
+      "https://donrheem.com/wp-content/uploads/2016/11/Book-Placeholder.png",
+    description: "This is a cool book you won't regreat reading it",
+  },
+  {
     id: 2,
     name: "Awesome Book",
-    image: "https://upload.wikimedia.org/wikipedia/commons/7/72/Placeholder_book.svg",
-    description: "Yeat again this is a cool book you won't regreat reading it"
-},
-{
+    image:
+      "https://upload.wikimedia.org/wikipedia/commons/7/72/Placeholder_book.svg",
+    description: "Yeat again this is a cool book you won't regreat reading it",
+  },
+  {
     id: 3,
     name: "Yet Book",
-    image: "https://donrheem.com/wp-content/uploads/2016/11/Book-Placeholder.png",
-    description: "Again yet again this is a cool book you won't regreat reading it"
-}]
+    image:
+      "https://donrheem.com/wp-content/uploads/2016/11/Book-Placeholder.png",
+    description:
+      "Again yet again this is a cool book you won't regreat reading it",
+  },
+];
 
-app.get('/', (req, res) => {
-    res.render('index', { products: products })
-})
+app.get("/", (req, res) => {
+  res.render("index", { products: products });
+});
 
-app.get('/create', (req, res) => {
-    res.render('create')
-})
+app.get("/create", (req, res) => {
+  res.render("create");
+});
 
+app.post("/create", urlencodedParser, (req, res) => {
+  const body = req.body;
+  products.push(body);
+  res.redirect("/");
+});
 app.post('/create', urlencodedParser, (req, res) => {
     const body = req.body;
     products.push(body);
     res.redirect('/');
 })
 
-app.get('/:id', (req, res) => {
-    const product = products.find(p => p.id == req.params.id)
-    res.render('details', { product: product })
-})
+// Handles post update
+app.get("/update/:id", (req, res) => {
+  const productIndex = products.findIndex((p) => p.id == req.params.id);
+  const product = products[productIndex];
+  res.render("update", { product: product });
+});
+
+app.post("/update/:id", urlencodedParser, (req, res) => {
+  const productIndex = products.findIndex((p) => p.id == req.params.id);
+  let tempProduct = products[productIndex]
+  const body = req.body;
+  tempProduct = {...tempProduct, ...body}
+
+  products.splice(productIndex, 1, tempProduct)
+  res.redirect(`/${req.params.id}`);
+});
+// End of update section
+
+app.get("/:id", (req, res) => {
+  const product = products.find((p) => p.id == req.params.id);
+  res.render("details", { product: product });
+});
+
+app.get("/delete/:id", (req, res) => {
+  const productIndex = products.findIndex((p) => req.params.id);
+  products.splice(productIndex, 1);
+  res.redirect("/");
+});
 
 app.get('/delete/:id', (req, res) => {
     const productIndex = products.findIndex(p => p.id == req.params.id)
@@ -53,5 +88,5 @@ app.get('/delete/:id', (req, res) => {
 })
 
 app.listen(port, () => {
-    console.log(`Server is listening on port ${port}`)
-})
+  console.log(`Server is listening on port ${port}`);
+});

express-inmemory-crud/views/details.pug

@@ -8,4 +8,5 @@ block content
             img.card-img-top(src=product.image alt=product.name)
             .card-body
                 h5.card-title= product.name
-                p.card-text= product.description
+                p.card-text= product.description
+                a.btn.btn-info(href=`/update/${product.id}`) Update

express-inmemory-crud/views/index.pug

@@ -17,5 +17,5 @@ html(lang='en')
                         .card-body
                             h5.card-title= product.name
                             p.card-text= product.description
-                            a.btn.btn-info(href='/' + product.id) Details
-                            a.btn.btn-danger(href='/delete/' + product.id) Delete
+                            a.btn.btn-info(href='/' + product.id, style="margin-right: 10px") Details
+                            a.btn.btn-danger(href='/delete/' + product.id) Delete

express-inmemory-crud/views/update.pug

@@ -0,0 +1,25 @@
+extend ./template.pug
+
+block content
+    a.btn.btn-primary(href='/') Home
+    hr
+    h1 Update product
+    hr
+    form(method="post" action=`/update/${product.id}`)
+        .form-group.row
+            label.col-sm-2.col-form-label(for='name') Name
+            .col-sm-10
+                input#name.form-control(type='text' name="name" value=product.name)
+        .form-group.row
+            label.col-sm-2.col-form-label(for='image') Image
+            .col-sm-10
+                input#image.form-control(type='text' name="image" value=product.image)
+        .form-group.row
+            label.col-sm-2.col-form-label(for='description') Description
+            .col-sm-10
+                input#description.form-control(type='text' name="description" value=product.description)
+
+        .form-group.row
+            .col-sm-10
+                a.btn.btn-danger(href=`/${product.id}` style="margin-right: 20px") Cancel 
+                button.btn.btn-primary(type='submit') Save