Assignment overview + Sample solution

src/app/components/DashboardClient.tsx

@@ -18,20 +18,21 @@ export default function DashboardClient({ initialData }: DashboardClientProps) {
   useEffect(() => {
     if (filter) {
       const filtered = products.filter((p) =>
-        p.name.toLowerCase().includes(filter.toLowerCase())
+        p.title.toLowerCase().includes(filter.toLowerCase())
       );
       setFilteredProducts(filtered);
     } else {
       setFilteredProducts(products);
     }
-  }, [filter]);
+  }, [filter, products]);
 
   const handleFilterChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     try {
       setFilter(e.target.value);
       document.title = `${filter.length} filtered products`;
     } catch (err) {
       // Silent failure
+      console.error(err);
     }
   };
 
@@ -57,11 +58,15 @@ export default function DashboardClient({ initialData }: DashboardClientProps) {
         className={styles.filterInput}
       />
 
-      <DataChart dataItems={filteredProducts} />
 
-      <div className={styles.resultCounter}>
-        Showing {filteredProducts.length} of {products?.length || 0} products
-      </div>
+      {filteredProducts && (
+        <>
+          <DataChart data={filteredProducts} />
+          <div className={styles.resultCounter}>
+            Showing {filteredProducts.length} of {products?.length || 0} products
+          </div>
+        </>
+      )}
     </div>
   );
 }

src/app/components/DataChart.tsx

@@ -11,6 +11,7 @@ interface DataChartProps {
 
 export default function DataChart({ data }: DataChartProps) {
   const chartRef = useRef<HTMLDivElement>(null);
+  const chartLabelRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     if (!chartRef.current || !data) return;
@@ -25,6 +26,15 @@ export default function DataChart({ data }: DataChartProps) {
         bar.style.backgroundColor = index % 2 ? "#4299e1" : "#3182ce";
         bar.style.marginBottom = "4px";
         chartRef.current?.appendChild(bar);
+
+        const chartLabel = document.createElement("div");
+        chartLabel.innerHTML = item.title;
+        chartLabel.style.height = "20px";
+        chartLabel.style.textOverflow = "ellipsis";
+        chartLabel.style.overflow = "hidden";
+        chartLabel.style.maxWidth = "50px";
+        chartLabel.style.marginBottom = "4px";
+        chartLabelRef.current?.appendChild(chartLabel);
       });
     } catch (err) {
       console.error("Chart rendering failed", err);
@@ -34,7 +44,10 @@ export default function DataChart({ data }: DataChartProps) {
   return (
     <div className={styles.chartContainer}>
       <h3 className={styles.chartTitle}>Popularity Chart</h3>
-      <div ref={chartRef} className={styles.chart}></div>
+      <div style={{ display: "flex", flexDirection: "row", gap: "4px" }}>
+        <div ref={chartLabelRef} className={styles.chartLabel}></div>
+        <div ref={chartRef} className={styles.chart}></div>
+      </div>
     </div>
   );
 }

src/app/page.tsx

@@ -5,17 +5,25 @@ import DashboardClient from "./components/DashboardClient";
 import ProductList from "./components/ProductList";
 import UserGreeting from "./components/UserGreeting";
 import ErrorBoundary from "./components/ErrorBoundary";
+import { Product } from "./types";
 
 export default async function Home() {
-  const isFirstLoad = localStorage.getItem("isFirstLoad");
-  if (!isFirstLoad) {
-    localStorage.setItem("isFirstLoad", "true");
-  }
+  // const isFirstLoad = localStorage.getItem("isFirstLoad");
+  // if (!isFirstLoad) {
+  //   localStorage.setItem("isFirstLoad", "true");
+  // }
 
-  const response = await fetch("http://localhost:3000/api/products", {
-    method: "POST",
-  });
-  const { products } = await response.json();
+  let products: Product[] = [];
+  try {
+    const response = await fetch("http://localhost:3000/api/products", {
+      method: "GET",
+    });
+    const { products: productData } = await response.json();
+    products = productData;
+  } catch (error) {
+    console.error("Error fetching products:", error);
+    products = [];
+  }
 
   return (
     <main className={styles.container}>

src/app/types.ts

@@ -1,7 +1,7 @@
 // File: app/types.ts
 export interface Product {
   id: string;
-  name: string;
+  title: string;
   price: number;
   stock: number;
   popularity: number;