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.

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

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>