07_js-debug/uebungen/u15_product-sales-table/src/App.tsx

@@ -1,14 +1,26 @@
 import { useState, useEffect } from 'react';
 
 import Table from './components/Table';
+import { Product } from './lib/datatypes';
 
 function App() {
   const [salesData, setSalesData] = useState(null);
 
   const fetchSalesData = async () => {
-    const response = await fetch('./src/lib/db/sales.json');
-    const data = await response.json();
-    setSalesData(data);
+    try {
+      const response = await fetch('./src/lib/db/sales.json');
+      if (!response.ok) {
+        throw Error('HTTP-Request went wrong');
+      }
+      const data = await response.json();
+      const filterData = data.filter((product: Product) => product !== null);
+      setSalesData(filterData);
+    } catch (error: unknown) {
+      if (error instanceof Error) {
+        console.error(error.message);
+        throw Error(error.message);
+      }
+    }
   };
 
   useEffect(() => {
@@ -21,17 +33,13 @@ function App() {
         <div className="header-container">
           <div className="header-title-wrapper">
             <h1 className="title">Product Sales</h1>
-            <p className="subtitle">
-              A table of product sales data for the current month.
-            </p>
+            <p className="subtitle">A table of product sales data for the current month.</p>
           </div>
         </div>
 
         <div className="table-wrapper">
           <div className="table-container">
-            <div className="table-box">
-              {salesData && <Table salesData={salesData} />}
-            </div>
+            <div className="table-box">{salesData && <Table salesData={salesData} />}</div>
           </div>
         </div>
       </div>

07_js-debug/uebungen/u15_product-sales-table/src/components/Table.tsx

@@ -2,6 +2,7 @@ import TableRow from './TableRow';
 import { Product } from '../lib/datatypes';
 
 const Table = ({ salesData }: { salesData: Product[] }) => {
+  console.log(salesData);
   return (
     <table className="divide-y divide-gray-300">
       <thead>