Not allowing to delete shopnote and items from the demo branch

README.md

@@ -48,7 +48,7 @@ You should have the application launched @ http://localhost:8888
 [![Netlify Status](https://api.netlify.com/api/v1/badges/9cdee8a1-a2de-4571-8733-760258100fae/deploy-status)](https://app.netlify.com/sites/shopnote/deploys)
 
 # Step-by-step approach
-A Step by Step guide to build `shopnote` kind of application is coming soon. Please stay tuned.
+[A Step by Step guide](https://css-tricks.com/how-to-create-a-client-serverless-jamstack-app-using-netlify-gatsby-and-fauna/) to build `shopnote` like application.
 
 # Important Links
 - [Netlify Functions](https://www.netlify.com/products/functions/)

src/components/item.js

@@ -1,8 +1,9 @@
 import React, { useState } from 'react';
 import { PlusCircle, XCircle, Save, Trash2 } from 'react-feather';
+import Alert from 'react-bootstrap/Alert';
 
 const Item = props => {
-
+    const [show, setShow] = useState(false);
     const [item, setItem] = useState(props.data);
     const [name, setName] = useState(item.name);
 
@@ -11,6 +12,19 @@ const Item = props => {
       setItem(changed);
     }
 
+    if (show) {
+      return (
+        <Alert variant="danger" onClose={() => setShow(false)} dismissible>
+          <Alert.Heading>I get that! You are trying to delete an Item.</Alert.Heading>
+          <p>
+            This is running from the demo branch where the delete capability is not
+            available. You can <a href="https://github.com/atapas/shopnote" target="_blank">checkout the master branch</a> and run the app locally
+            by following the instractions. You get to do All there!
+          </p>
+        </Alert>
+      );
+    }
+
     return (
       <>
       {
@@ -63,7 +77,7 @@ const Item = props => {
               <PlusCircle className="add" onClick={props.addItem}></PlusCircle>
             </span>
             <span>
-              <Trash2 className="delete" onClick={() => props.deleteItem(item['_id'])}></Trash2>
+              <Trash2 className="delete" onClick={() => setShow(true)}></Trash2>
             </span>
           </div>
         </li>

src/components/note.js

@@ -5,9 +5,12 @@ import { generate } from 'shortid';
 import { ShoppingBag, X } from 'react-feather';
 import Item from './item';
 
+import Alert from 'react-bootstrap/Alert';
+
 import moment from 'moment';
 
 const Note = props => {
+    const [show, setShow] = useState(false);
     const shopnote = props.data;
     const sortedByChecked = shopnote.items.data.sort((a,b) => a.checked - b.checked);
     const [items, setItems] = useState(sortedByChecked);
@@ -138,7 +141,18 @@ const Note = props => {
       return remainingItems;
     }
 
-
+    if (show) {
+      return (
+        <Alert variant="danger" onClose={() => setShow(false)} dismissible>
+          <Alert.Heading>I get that! You are trying to delete a Note</Alert.Heading>
+          <p>
+            This is running from the demo branch where the delete capability is not
+            available. You can <a href="https://github.com/atapas/shopnote" target="_blank">checkout the master branch</a> and run the app locally
+            by following the instractions. You get to do all there!
+          </p>
+        </Alert>
+      );
+    }
     return (
       <Card bg="dark" text="white" className="mb-2">
         <Card.Body>
@@ -147,10 +161,9 @@ const Note = props => {
               <ShoppingBag />
             </span>
             { shopnote.name }
-            {/*<span className="note-header-cancel">
-              <X onClick={() => props.deleteNote(shopnote["_id"])}/>
+            <span className="note-header-cancel">
+              <X onClick={() => setShow(true)}/>
             </span>
-            */}
           </Card.Title>
           <Card.Text>{ shopnote.description }</Card.Text>
           <ul className="item-container">