clean up css

Author: oelbaga

package-lock.json

@@ -16,6 +16,7 @@
     "next": "13.1.6",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-icons": "^4.7.1",
     "sass": "^1.58.0"
   }
 }

package.json

@@ -1,4 +1,5 @@
 import { useEffect, useState, useRef } from "react";
+import { CiTrash } from "react-icons/ci";
 import Head from "next/head";
 import Image from "next/image";
 import styles from "@/styles/Home.module.scss";
@@ -16,7 +17,7 @@ export default function Home() {
   const [deletedError, setDeletedError] = useState(false);
 
   async function addProduct() {
-    const productName = productNameRef.current.value;
+    const productName = productNameRef.current.value.trim();
     if (productName.length < 3) return;
     const postData = {
       method: "POST",
@@ -62,16 +63,15 @@ export default function Home() {
     console.log(response);
   }
 
-  async function deleteProduct() {
-    const productIDToDelete = productIDToDeleteRef.current.value;
-    if (!productIDToDelete.length) return;
+  async function deleteProduct(id) {
+    if (!id) return;
     const postData = {
       method: "DELETE",
       headers: {
         "Content-Type": "application/json",
       },
       body: JSON.stringify({
-        product_id: productIDToDelete,
+        product_id: id,
       }),
     };
     const res = await fetch(
@@ -87,8 +87,8 @@ export default function Home() {
   }
 
   async function updateProduct() {
-    const productIDToUpdate = productIDToUpdateRef.current.value;
-    const productNameToUpdate = productNameToUpdateRef.current.value;
+    const productIDToUpdate = productIDToUpdateRef.current.value.trim();
+    const productNameToUpdate = productNameToUpdateRef.current.value.trim();
     if (!productIDToUpdate.length) return;
     const postData = {
       method: "PATCH",
@@ -138,23 +138,45 @@ export default function Home() {
         <title>CRUD NEXT.JS Tutorial with Next JS API endpoints</title>
       </Head>
       <div className={styles.container}>
-        <h1>CRUD Next.Js API Demo</h1>
-        <p>
-          Create, Read, Update, Delete database data in React, Node and Next.JS
-          by Omar Elbaga{" "}
-          <a
-            href="https://github.com/oelbaga/nextjs-mysql"
-            target="_blank"
-            rel="noreferrer"
-          >
-            GitHub
-          </a>
-        </p>
-        <div className={styles.heading}>
-          <a href="/api/products" target="_blank" rel="noreferrer">
-            Database API data
-          </a>
-        </div>
+        <section className={styles.main}>
+          <h1>CRUD Next.Js API Demo</h1>
+          <p>
+            Create, Read, Update, Delete database data in React, Node and
+            Next.JS by Omar Elbaga{" "}
+            <a
+              href="https://github.com/oelbaga/nextjs-mysql"
+              target="_blank"
+              rel="noreferrer"
+            >
+              GitHub
+            </a>
+          </p>
+          <div className={styles.heading}>
+            <a href="/api/products" target="_blank" rel="noreferrer">
+              Database API data
+            </a>
+          </div>
+        </section>
+        <section>
+          <div className={styles.read}>
+            <h2>Read</h2>
+            <div className={styles.products}>
+              {products.map((item, index) => {
+                return (
+                  <div key={item.product_id} className={styles.product}>
+                    <span>product_id</span>: {item.product_id} <br />{" "}
+                    <span>product_name</span>: {item.product_name}{" "}
+                    <CiTrash
+                      className={styles.icons}
+                      onClick={() => deleteProduct(item.product_id)}
+                    />
+                  </div>
+                );
+              })}
+              {!products.length ? <>No products found</> : null}
+            </div>
+          </div>
+        </section>
         <section>
           <div className={styles.create}>
             <h2>Create</h2>
@@ -173,21 +195,6 @@ export default function Home() {
             </div>
           </div>
         </section>
-        <section>
-          <div className={styles.read}>
-            <h2>Read</h2>
-            <div className={styles.products}>
-              {products.map((item, index) => {
-                return (
-                  <div key={item.product_id} className={styles.product}>
-                    <span>Id</span>:{item.product_id} <br /> <span>Name</span>:
-                    {item.product_name}
-                  </div>
-                );
-              })}
-            </div>
-          </div>
-        </section>
         <section>
           <div className={styles.update}>
             <h2>Update</h2>
@@ -225,22 +232,26 @@ export default function Home() {
                 className={`${styles.button} ${styles.warning}`}
                 value="Delete"
                 type="button"
-                onClick={deleteProduct}
+                onClick={() =>
+                  deleteProduct(productIDToDeleteRef.current.value)
+                }
               />
             </div>
           </div>
         </section>
-        <p>
-          Create, Read, Update, Delete database data in React, Node and Next.JS
-          by Omar Elbaga{" "}
-          <a
-            href="https://github.com/oelbaga/nextjs-mysql"
-            target="_blank"
-            rel="noreferrer"
-          >
-            GitHub
-          </a>
-        </p>
+        <footer>
+          <p>
+            Create, Read, Update, Delete database data in React, Node and
+            Next.JS by Omar Elbaga{" "}
+            <a
+              href="https://github.com/oelbaga/nextjs-mysql"
+              target="_blank"
+              rel="noreferrer"
+            >
+              GitHub
+            </a>
+          </p>
+        </footer>
       </div>
     </>
   );

src/pages/index.js

@@ -24,12 +24,28 @@
       border-bottom: 1px solid black;
     }
   }
+  footer {
+    margin: 0 auto;
+    padding: 1rem 1rem 1rem;
+    max-width: 800px;
+  }
   section {
+    margin: 0 auto;
     padding: 1rem 1rem 1rem;
     max-width: 800px;
     border-top: 5px solid black;
+    &.main {
+      border-top: 0px;
+      padding: 0rem 1rem 0.5rem;
+      @include mixin.tablet {
+        padding: 0rem 1rem 1rem;
+      }
+    }
     @include mixin.tablet {
-      padding: 2.5rem 3rem 2.8rem;
+      padding: 2.5rem 1rem 2.8rem;
+    }
+    .icons {
+      cursor: pointer;
     }
     .success {
       margin-bottom: 1rem;
@@ -42,9 +58,13 @@
       color: rgb(175, 3, 3);
     }
     .products {
+      height: 100px;
+      overflow: scroll;
       .product {
         line-height: 1.5;
         margin-bottom: 1rem;
+        padding-bottom: 0.4rem;
+        border-bottom: 1px solid grey;
         span {
           font-weight: 600;
         }
@@ -97,6 +117,9 @@
         cursor: pointer;
         font-weight: 600;
         text-transform: uppercase;
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        appearance: none;
         @include mixin.tablet {
           letter-spacing: 0.56em;
           line-height: 2.7;