"implement product CRUD API endpoints and frontend integration"

03_source/frontend/src/sections/product/product-item.tsx

@@ -1,21 +1,16 @@
-import type { IProductItem } from 'src/types/product';
-
 import Box from '@mui/material/Box';
-import Link from '@mui/material/Link';
 import Card from '@mui/material/Card';
+import Fab, { fabClasses } from '@mui/material/Fab';
+import Link from '@mui/material/Link';
 import Stack from '@mui/material/Stack';
 import Tooltip from '@mui/material/Tooltip';
-import Fab, { fabClasses } from '@mui/material/Fab';
-
-import { RouterLink } from 'src/routes/components';
-
-import { fCurrency } from 'src/utils/format-number';
-
-import { Label } from 'src/components/label';
-import { Image } from 'src/components/image';
-import { Iconify } from 'src/components/iconify';
 import { ColorPreview } from 'src/components/color-utils';
-
+import { Iconify } from 'src/components/iconify';
+import { Image } from 'src/components/image';
+import { Label } from 'src/components/label';
+import { RouterLink } from 'src/routes/components';
+import type { IProductItem } from 'src/types/product';
+import { fCurrency } from 'src/utils/format-number';
 import { useCheckoutContext } from '../checkout/context';
 
 // ----------------------------------------------------------------------

03_source/frontend/src/sections/product/product-list.tsx

@@ -1,11 +1,8 @@
 import type { BoxProps } from '@mui/material/Box';
-import type { IProductItem } from 'src/types/product';
-
 import Box from '@mui/material/Box';
 import Pagination, { paginationClasses } from '@mui/material/Pagination';
-
 import { paths } from 'src/routes/paths';
-
+import type { IProductItem } from 'src/types/product';
 import { ProductItem } from './product-item';
 import { ProductItemSkeleton } from './product-skeleton';
 

03_source/frontend/src/sections/product/product-new-edit-form.tsx

@@ -21,7 +21,7 @@ import {
   PRODUCT_COLOR_NAME_OPTIONS,
   PRODUCT_SIZE_OPTIONS,
 } from 'src/_mock';
-import { createProduct, saveProduct } from 'src/actions/product';
+import { createProduct, updateProduct } from 'src/actions/product';
 import { Field, Form, schemaHelper } from 'src/components/hook-form';
 import { Iconify } from 'src/components/iconify';
 import { toast } from 'src/components/snackbar';
@@ -194,9 +194,6 @@ export function ProductNewEditForm({ currentProduct }: Props) {
     };
 
     try {
-      // await new Promise((resolve) => setTimeout(resolve, 500));
-      // reset();
-
       // sanitize file field
       for (let i = 0; i < values.images.length; i++) {
         const temp: any = values.images[i];
@@ -205,12 +202,14 @@ export function ProductNewEditForm({ currentProduct }: Props) {
         }
       }
 
+      const sanitizedValues: IProductItem = values as unknown as IProductItem;
+
       if (currentProduct) {
         // perform save
-        await saveProduct(currentProduct.id, values);
+        updateProduct(sanitizedValues);
       } else {
         // perform create
-        await createProduct(values);
+        createProduct(sanitizedValues);
       }
 
       toast.success(currentProduct ? 'Update success!' : 'Create success!');

03_source/frontend/src/sections/product/product-table-row.tsx

@@ -1,18 +1,14 @@
 // src/sections/product/product-table-row.tsx
-import type { GridCellParams } from '@mui/x-data-grid';
-
-import Box from '@mui/material/Box';
-import Link from '@mui/material/Link';
 import Avatar from '@mui/material/Avatar';
-import ListItemText from '@mui/material/ListItemText';
+import Box from '@mui/material/Box';
 import LinearProgress from '@mui/material/LinearProgress';
-
-import { RouterLink } from 'src/routes/components';
-
-import { fCurrency } from 'src/utils/format-number';
-import { fTime, fDate } from 'src/utils/format-time';
-
+import Link from '@mui/material/Link';
+import ListItemText from '@mui/material/ListItemText';
+import type { GridCellParams } from '@mui/x-data-grid';
 import { Label } from 'src/components/label';
+import { RouterLink } from 'src/routes/components';
+import { fCurrency } from 'src/utils/format-number';
+import { fDate, fTime } from 'src/utils/format-time';
 
 // ----------------------------------------------------------------------
 

03_source/frontend/src/sections/product/view/product-create-view.tsx

@@ -1,9 +1,6 @@
-import { paths } from 'src/routes/paths';
-
-import { DashboardContent } from 'src/layouts/dashboard';
-
 import { CustomBreadcrumbs } from 'src/components/custom-breadcrumbs';
-
+import { DashboardContent } from 'src/layouts/dashboard';
+import { paths } from 'src/routes/paths';
 import { ProductNewEditForm } from '../product-new-edit-form';
 
 // ----------------------------------------------------------------------

03_source/frontend/src/sections/product/view/product-edit-view.tsx

@@ -1,11 +1,7 @@
-import type { IProductItem } from 'src/types/product';
-
-import { paths } from 'src/routes/paths';
-
-import { DashboardContent } from 'src/layouts/dashboard';
-
 import { CustomBreadcrumbs } from 'src/components/custom-breadcrumbs';
-
+import { DashboardContent } from 'src/layouts/dashboard';
+import { paths } from 'src/routes/paths';
+import type { IProductItem } from 'src/types/product';
 import { ProductNewEditForm } from '../product-new-edit-form';
 
 // ----------------------------------------------------------------------

03_source/frontend/src/sections/product/view/product-list-view.tsx

@@ -35,9 +35,11 @@ import { EmptyContent } from 'src/components/empty-content';
 import { Iconify } from 'src/components/iconify';
 import { toast } from 'src/components/snackbar';
 import { DashboardContent } from 'src/layouts/dashboard';
+import { endpoints } from 'src/lib/axios';
 import { RouterLink } from 'src/routes/components';
 import { paths } from 'src/routes/paths';
 import type { IProductItem, IProductTableFilters } from 'src/types/product';
+import { mutate } from 'swr';
 import { ProductTableFiltersResult } from '../product-table-filters-result';
 import {
   RenderCellCreatedAt,
@@ -59,6 +61,8 @@ const HIDE_COLUMNS_TOGGLABLE = ['category', 'actions'];
 export function ProductListView() {
   const { t } = useTranslation();
 
+  const confirmDialog = useBoolean();
+
   const PRODUCT_STOCK_OPTIONS = [
     { value: 'in stock', label: t('In stock') },
     { value: 'low stock', label: t('Low stock') },
@@ -75,7 +79,7 @@ export function ProductListView() {
   const confirmDeleteSingleItemDialog = useBoolean();
   const [idToDelete, setIdToDelete] = useState<string | null>(null);
 
-  const { products, productsLoading, mutate } = useGetProducts();
+  const { products, productsLoading } = useGetProducts();
 
   const [tableData, setTableData] = useState<IProductItem[]>(products);
   const [selectedRowIds, setSelectedRowIds] = useState<GridRowSelectionModel>([]);
@@ -113,13 +117,29 @@ export function ProductListView() {
       toast.error('Delete failed!');
     }
 
-    // TODO: reload table here
-    mutate();
-
     // setTableData(deleteRow);
     setDeleteInProgress(false);
   }, [idToDelete, mutate]);
 
+  // NOTE: this is working using example from calendar
+  const handleDeleteRow = useCallback(
+    async (id: string) => {
+      try {
+        await deleteProduct(id);
+
+        // invalidate cache to reload list
+        await mutate(endpoints.product.list);
+
+        toast.success('Delete success!');
+      } catch (error) {
+        console.error(error);
+
+        toast.error('Delete error!');
+      }
+    },
+    [tableData]
+  );
+
   const handleDeleteRows = useCallback(() => {
     const deleteRows = tableData.filter((row) => !selectedRowIds.includes(row.id));
 

03_source/frontend/src/sections/product/view/product-shop-details-view.tsx

@@ -1,33 +1,28 @@
-import type { IProductItem } from 'src/types/product';
-import type { Theme, SxProps } from '@mui/material/styles';
-
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Card from '@mui/material/Card';
+import Container from '@mui/material/Container';
+import Grid from '@mui/material/Grid';
+import type { SxProps, Theme } from '@mui/material/styles';
+import Tab from '@mui/material/Tab';
+import Tabs from '@mui/material/Tabs';
+import Typography from '@mui/material/Typography';
 import { useTabs } from 'minimal-shared/hooks';
 import { varAlpha } from 'minimal-shared/utils';
-
-import Tab from '@mui/material/Tab';
-import Box from '@mui/material/Box';
-import Tabs from '@mui/material/Tabs';
-import Card from '@mui/material/Card';
-import Grid from '@mui/material/Grid';
-import Button from '@mui/material/Button';
-import Container from '@mui/material/Container';
-import Typography from '@mui/material/Typography';
-
-import { paths } from 'src/routes/paths';
-import { RouterLink } from 'src/routes/components';
-
-import { Iconify } from 'src/components/iconify';
-import { EmptyContent } from 'src/components/empty-content';
+import { useTranslation } from 'react-i18next';
 import { CustomBreadcrumbs } from 'src/components/custom-breadcrumbs';
-
-import { CartIcon } from '../cart-icon';
+import { EmptyContent } from 'src/components/empty-content';
+import { Iconify } from 'src/components/iconify';
+import { RouterLink } from 'src/routes/components';
+import { paths } from 'src/routes/paths';
+import type { IProductItem } from 'src/types/product';
 import { useCheckoutContext } from '../../checkout/context';
-import { ProductDetailsSkeleton } from '../product-skeleton';
-import { ProductDetailsReview } from '../product-details-review';
-import { ProductDetailsSummary } from '../product-details-summary';
+import { CartIcon } from '../cart-icon';
 import { ProductDetailsCarousel } from '../product-details-carousel';
 import { ProductDetailsDescription } from '../product-details-description';
-import { useTranslation } from 'react-i18next';
+import { ProductDetailsReview } from '../product-details-review';
+import { ProductDetailsSummary } from '../product-details-summary';
+import { ProductDetailsSkeleton } from '../product-skeleton';
 
 // ----------------------------------------------------------------------