From cd5a93351bb44e66d4054af07a557956851c3a57 Mon Sep 17 00:00:00 2001
From: Eden Kirin <eden@ekirin.com>
Date: Mon, 15 Jan 2024 23:42:11 +0100
Subject: [PATCH] Products basics

---
 frontend/src/components/Products.js | 13 +++++++++++++
 frontend/src/pages/Home.js          | 10 +++++++++-
 2 files changed, 22 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/components/Products.js

diff --git a/frontend/src/components/Products.js b/frontend/src/components/Products.js
new file mode 100644
index 0000000..7d0030d
--- /dev/null
+++ b/frontend/src/components/Products.js
@@ -0,0 +1,13 @@
+import Typography from "@mui/material/Typography";
+
+function Products({ machineName, products, onSelect }) {
+    return (
+        <>
+            <Typography variant="h4" gutterBottom>
+                Products - {machineName}
+            </Typography>
+        </>
+    );
+}
+
+export { Products };
diff --git a/frontend/src/pages/Home.js b/frontend/src/pages/Home.js
index 8ca3ed6..8a179dd 100644
--- a/frontend/src/pages/Home.js
+++ b/frontend/src/pages/Home.js
@@ -5,9 +5,11 @@ import Grid from "@mui/material/Unstable_Grid2";
 
 import { machinesApi } from "../api";
 import { Machines } from "../components/Machines";
+import { Products } from "../components/Products";
 
 function Home() {
     const [machines, setMachines] = useState([]);
+    const [productsData, setProductsData] = useState(null);
 
     useEffect(() => {
         machinesApi.list().then((response) => {
@@ -19,6 +21,10 @@ function Home() {
         console.log("selected:", machineName);
         machinesApi.listProducts(machineId).then((response) => {
             console.log(response.data.products);
+            setProductsData({
+                machineName,
+                products: response.data.products,
+            });
         });
     };
 
@@ -27,7 +33,9 @@ function Home() {
             <Grid md={4}>
                 <Machines machines={machines} onSelect={onMachineSelect} />
             </Grid>
-            <Grid md={8}>...</Grid>
+            <Grid md={8}>
+                {productsData && <Products machineName={productsData.machineName} products={productsData.products} />}
+            </Grid>
         </Grid>
     );
 }