Products basics

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 };

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>
     );
 }