From 3132c1fa3c3a44d0925198ae67651cb009861a58 Mon Sep 17 00:00:00 2001
From: Michael Irwin <mikesir87@gmail.com>
Date: Mon, 23 Dec 2024 16:19:58 -0500
Subject: [PATCH] Add empty text to webapp when no products exist in the
 catalog

---
 dev/webapp/src/App.jsx | 48 ++++++++++++++++++++++++------------------
 1 file changed, 27 insertions(+), 21 deletions(-)

diff --git a/dev/webapp/src/App.jsx b/dev/webapp/src/App.jsx
index cbb3b5f..1321b12 100644
--- a/dev/webapp/src/App.jsx
+++ b/dev/webapp/src/App.jsx
@@ -49,27 +49,33 @@ function App() {
       </p>
 
       {catalog ? (
-        <table>
-          <thead>
-            <tr>
-              <th>ID</th>
-              <th>Name</th>
-              <th>Price</th>
-              <th>UPC</th>
-              <th>Inventory</th>
-              <th>Image</th>
-            </tr>
-          </thead>
-          <tbody>
-            {catalog.map((product) => (
-              <ProductRow
-                key={product.id}
-                product={product}
-                onChange={() => fetchCatalog()}
-              />
-            ))}
-          </tbody>
-        </table>
+        <>
+          {catalog.length === 0 ? (
+            <em>There are no products... yet!</em>
+          ) : (
+            <table>
+              <thead>
+                <tr>
+                  <th>ID</th>
+                  <th>Name</th>
+                  <th>Price</th>
+                  <th>UPC</th>
+                  <th>Inventory</th>
+                  <th>Image</th>
+                </tr>
+              </thead>
+              <tbody>
+                {catalog.map((product) => (
+                  <ProductRow
+                    key={product.id}
+                    product={product}
+                    onChange={() => fetchCatalog()}
+                  />
+                ))}
+              </tbody>
+            </table>
+          )}
+        </>
       ) : (
         <p>Loading catalog...</p>
       )}