Add empty text to webapp when no products exist in the catalog

dockersamples · Dec 23, 2024 · 3132c1f · 3132c1f
1 parent fed72ad
commit 3132c1f
Showing 1 changed file with 27 additions and 21 deletions.
diff --git 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>
       )}