07_js-debug/agenda.md

@@ -688,7 +688,7 @@ Projektarbeit
 - Debugging-Techniken – Chrome Debugger
 - Webentwickler Developer Tools
 - Einrichtung von Eslint und AirBnB-Richtlinien
-- Debugging-Techniken – VSCode Debugger
+
 
 **Übungen:**
 Projektarbeit
@@ -700,6 +700,7 @@ Projektarbeit
 
 **Inhalt:**
 
+- Debugging-Techniken – VSCode Debugger
 - Einführung in Vitest und Unit Testing
 - Installieren von Vitest und Schreiben unseres ersten Tests
 - Einführung in die React Testing Library

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>

07_js-debug/unterricht/tag42/03_website-bundled-eslint/assets/js/lint-report.js

@@ -1,5 +1,5 @@
 (() => {
-  const findings = [{"file":"dev/js/modules/Counter.js","line":22,"column":37,"rule":"no-use-before-define","message":"'onClickIncrement' was used before it was defined."},{"file":"dev/js/modules/ternaryLintExample.js","line":39,"column":12,"rule":"@stylistic/no-extra-parens","message":"Unnecessary parentheses around expression."}];
+  const findings = [{"file":"dev/js/modules/Counter.js","line":22,"column":37,"rule":"no-use-before-define","message":"'onClickIncrement' was used before it was defined."}];
   if (findings.length === 0) {
     return;
   }

07_js-debug/unterricht/tag42/03_website-bundled-eslint/eslint.config.mjs

@@ -48,6 +48,7 @@ export default [
       'no-extra-parens': 'off',
       'no-nested-ternary': 'off',
       'no-use-before-define': 'off',
+      'no-plusplus': 'off',
       // Erzwingt Klammern um die Ternary-Bedingung. Stylistic kann das nur erlauben.
       'local/ternary-condition-parens': 'error',