From a155c991c6877a347ef157d7e1fd99e3bf30ed7f Mon Sep 17 00:00:00 2001
From: TekH <h.tek@digitaldata.works>
Date: Wed, 2 Jul 2025 15:38:27 +0200
Subject: [PATCH] Add product fetching functionality to ProductsView

Updated `products-view.tsx` to use `useEffect` for fetching products from an API and manage them with a new state variable. Modified rendering logic to display fetched products instead of a mocked list.

Created/modified `product-service.ts` to include the `getProducts` function, simulating an API call that returns an array of product objects.
---
 .../dd-hub-react/src/api/product-service.ts   | 29 +++++++++++++++++++
 .../sections/product/view/products-view.tsx   | 15 ++++++++--
 2 files changed, 41 insertions(+), 3 deletions(-)
 create mode 100644 src/client/dd-hub-react/src/api/product-service.ts

diff --git a/src/client/dd-hub-react/src/api/product-service.ts b/src/client/dd-hub-react/src/api/product-service.ts
new file mode 100644
index 0000000..0f68455
--- /dev/null
+++ b/src/client/dd-hub-react/src/api/product-service.ts
@@ -0,0 +1,29 @@
+import { ProductItemProps } from "src/sections/product/product-item";
+
+/**
+ * send a request to the server to get the products
+ * @returns Array of products
+ */
+export function getProducts(): Promise<ProductItemProps[]> {
+    //TODO: Implement the API call using fetch or axios
+    return Promise.resolve([
+        {
+            id: '1',
+            name: "User Manager",
+            price: 0,
+            coverUrl: "/assets/images/product/product-default.webp",
+            status: "1.0.0",
+            colors: [],
+            priceSale: null
+        },
+        {
+            id: '2',
+            name: "Envelope Generator",
+            price: 0,
+            coverUrl: "/assets/images/product/product-default.webp",
+            status: "1.0.0",
+            colors: [],
+            priceSale: null
+        }
+    ]);
+}
\ No newline at end of file
diff --git a/src/client/dd-hub-react/src/sections/product/view/products-view.tsx b/src/client/dd-hub-react/src/sections/product/view/products-view.tsx
index 8b42910..502de72 100644
--- a/src/client/dd-hub-react/src/sections/product/view/products-view.tsx
+++ b/src/client/dd-hub-react/src/sections/product/view/products-view.tsx
@@ -1,4 +1,4 @@
-import { useState, useCallback } from 'react';
+import { useState, useCallback, useEffect } from 'react';
 
 import Box from '@mui/material/Box';
 import Grid from '@mui/material/Grid';
@@ -6,12 +6,13 @@ import Pagination from '@mui/material/Pagination';
 import Typography from '@mui/material/Typography';
 
 import { _products } from 'src/_mock';
+import { getProducts } from 'src/api/product-service';
 import { DashboardContent } from 'src/layouts/dashboard';
 
-import { ProductItem } from '../product-item';
 import { ProductSort } from '../product-sort';
 import { CartIcon } from '../product-cart-widget';
 import { ProductFilters } from '../product-filters';
+import { ProductItem, ProductItemProps } from '../product-item';
 
 import type { FiltersProps } from '../product-filters';
 
@@ -64,6 +65,8 @@ export function ProductsView() {
 
   const [filters, setFilters] = useState<FiltersProps>(defaultFilters);
 
+  const [products, setProducts] = useState<Array<ProductItemProps>>([]);
+
   const handleOpenFilter = useCallback(() => {
     setOpenFilter(true);
   }, []);
@@ -84,6 +87,12 @@ export function ProductsView() {
     (key) => filters[key as keyof FiltersProps] !== defaultFilters[key as keyof FiltersProps]
   );
 
+  useEffect(() => {
+    getProducts().then((res) => {
+      setProducts(res);
+    });
+  }, []);
+
   return (
     <DashboardContent>
       <CartIcon totalItems={8} />
@@ -139,7 +148,7 @@ export function ProductsView() {
       </Box>
 
       <Grid container spacing={3}>
-        {_products.map((product) => (
+        {products.map((product) => (
           <Grid key={product.id} size={{ xs: 12, sm: 6, md: 3 }}>
             <ProductItem product={product} />
           </Grid>