feat: implement product save functionality with frontend-backend integration

.gitignore

@@ -1,4 +1,8 @@
 04_poc
+**/*del
+**/*bak
+**/*copy*
+
 
 # Created by https://www.toptal.com/developers/gitignore/api/node,python,nextjs
 # Edit at https://www.toptal.com/developers/gitignore?templates=node,python,nextjs

03_source/cms_backend/package.json

@@ -45,6 +45,7 @@
     "dayjs": "^1.11.13",
     "es-toolkit": "^1.33.0",
     "jose": "^6.0.10",
+    "lodash": "^4.17.21",
     "next": "^14.2.26",
     "pg": "^8.16.0",
     "prisma": "^5.6.0",
@@ -56,6 +57,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.23.0",
+    "@types/lodash": "^4.17.17",
     "@types/node": "^22.13.13",
     "@types/react": "^18.3.20",
     "@types/react-dom": "^18.3.5",

03_source/cms_backend/src/app/api/product/details/route.ts

@@ -1,25 +1,32 @@
+// src/app/api/product/details/route.ts
+
 import type { NextRequest } from 'next/server';
 
 import { logger } from 'src/utils/logger';
 import { STATUS, response, handleError } from 'src/utils/response';
 
-import { _products } from 'src/_mock/_product';
+import prisma from '../../../lib/prisma';
 
 // ----------------------------------------------------------------------
 
-export const runtime = 'edge';
-
 /** **************************************
  * Get product details
  *************************************** */
 export async function GET(req: NextRequest) {
   try {
     const { searchParams } = req.nextUrl;
+
+    // RULES: productId must exist
     const productId = searchParams.get('productId');
+    if (!productId) {
+      return response({ message: 'Product ID is required!' }, STATUS.BAD_REQUEST);
+    }
 
-    const products = _products();
-
-    const product = products.find((productItem) => productItem.id === productId);
+    // NOTE: productId confirmed exist, run below
+    const product = await prisma.productItem.findFirst({
+      include: { reviews: true },
+      where: { id: productId },
+    });
 
     if (!product) {
       return response({ message: 'Product not found!' }, STATUS.NOT_FOUND);

03_source/cms_backend/src/app/api/product/list/route.ts

@@ -1,3 +1,4 @@
+// src/app/api/product/list/route.ts
 import { logger } from 'src/utils/logger';
 import { STATUS, response, handleError } from 'src/utils/response';
 

03_source/cms_backend/src/app/api/product/saveProduct/route.ts

@@ -0,0 +1,129 @@
+// src/app/api/product/saveProduct/route.ts
+//
+// PURPOSE:
+// save product to db by id
+//
+// RULES:
+// T.B.A.
+
+import type { NextRequest } from 'next/server';
+
+import { STATUS, response, handleError } from 'src/utils/response';
+
+import prisma from '../../../lib/prisma';
+
+// ----------------------------------------------------------------------
+
+/** **************************************
+ * GET - Products
+ *************************************** */
+export async function POST(req: NextRequest) {
+  // logger('[Product] list', products.length);
+  const { data } = await req.json();
+
+  try {
+    const products = await prisma.productItem.update({
+      data: {
+        name: data.name,
+        sku: data.sku,
+        code: data.code,
+        price: data.price,
+        taxes: data.taxes,
+        tags: data.tags,
+        sizes: data.sizes,
+        publish: data.publish,
+        gender: data.gender,
+        coverUrl: data.coverUrl,
+        images: data.images,
+        colors: data.colors,
+        quantity: data.quantity,
+        category: data.category,
+        available: data.available,
+        totalSold: data.totalSold,
+        description: data.description,
+        totalRatings: data.totalRatings,
+        totalReviews: data.totalReviews,
+        inventoryType: data.inventoryType,
+        subDescription: data.subDescription,
+        priceSale: data.priceSale,
+        //
+        newLabel: {
+          content: data.newLabel?.content || '',
+          enabled: data.newLabel?.enabled ?? false,
+        },
+        saleLabel: {
+          content: data.saleLabel?.content || '',
+          enabled: data.saleLabel?.enabled ?? false,
+        },
+        ratings: {
+          set: data.ratings.map((rating: { name: string; starCount: number; reviewCount: number }) => ({
+            name: rating.name,
+            starCount: rating.starCount,
+            reviewCount: rating.reviewCount,
+          })),
+        },
+      },
+      where: { id: data.id },
+    });
+
+    return response({ hello: 'world', data }, STATUS.OK);
+  } catch (error) {
+    console.log({ hello: 'world', data });
+    return handleError('Product - Get list', error);
+  }
+}
+
+export type IProductItem = {
+  id: string;
+  sku: string;
+  name: string;
+  code: string;
+  price: number;
+  taxes: number;
+  tags: string[];
+  sizes: string[];
+  publish: string;
+  gender: string[];
+  coverUrl: string;
+  images: string[];
+  colors: string[];
+  quantity: number;
+  category: string;
+  available: number;
+  totalSold: number;
+  description: string;
+  totalRatings: number;
+  totalReviews: number;
+  // createdAt: IDateValue;
+  inventoryType: string;
+  subDescription: string;
+  priceSale: number | null;
+  // reviews: IProductReview[];
+  newLabel: {
+    content: string;
+    enabled: boolean;
+  };
+  saleLabel: {
+    content: string;
+    enabled: boolean;
+  };
+  ratings: {
+    name: string;
+    starCount: number;
+    reviewCount: number;
+  }[];
+};
+
+export type IDateValue = string | number | null;
+
+export type IProductReview = {
+  id: string;
+  name: string;
+  rating: number;
+  comment: string;
+  helpful: number;
+  avatarUrl: string;
+  postedAt: IDateValue;
+  isPurchased: boolean;
+  attachments?: string[];
+};

03_source/cms_backend/yarn.lock

@@ -780,6 +780,11 @@
   resolved "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz"
   integrity sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==
 
+"@types/lodash@^4.17.17":
+  version "4.17.17"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.17.17.tgz#fb85a04f47e9e4da888384feead0de05f7070355"
+  integrity sha512-RRVJ+J3J+WmyOTqnz3PiBLA501eKwXl2noseKOrNo/6+XEHjTAxO4xHvxQB6QuNm+s4WRbn6rSiap8+EA+ykFQ==
+
 "@types/node@^22.13.13":
   version "22.13.13"
   resolved "https://registry.npmjs.org/@types/node/-/node-22.13.13.tgz"
@@ -2428,6 +2433,11 @@ lodash.merge@^4.6.2:
   resolved "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz"
   integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
 
+lodash@^4.17.21:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
+
 loose-envify@^1.1.0, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz"

03_source/frontend/src/actions/product.ts

@@ -4,7 +4,7 @@ import type { IProductItem } from 'src/types/product';
 import useSWR from 'swr';
 import { useMemo } from 'react';
 
-import { fetcher, endpoints } from 'src/lib/axios';
+import axiosInstance, { fetcher, endpoints } from 'src/lib/axios';
 
 // ----------------------------------------------------------------------
 
@@ -90,3 +90,74 @@ export function useSearchProducts(query: string) {
 
   return memoizedValue;
 }
+
+// ----------------------------------------------------------------------
+
+type SaveProductData = {
+  id: string;
+  sku: string;
+  name: string;
+  code: string;
+  price: number;
+  taxes: number;
+  tags: string[];
+  sizes: string[];
+  publish: string;
+  gender: string[];
+  coverUrl: string;
+  images: string[];
+  colors: string[];
+  quantity: number;
+  category: string;
+  available: number;
+  totalSold: number;
+  description: string;
+  totalRatings: number;
+  totalReviews: number;
+  inventoryType: string;
+  subDescription: string;
+  priceSale: number | null;
+  newLabel: {
+    content: string;
+    enabled: boolean;
+  };
+  saleLabel: {
+    content: string;
+    enabled: boolean;
+  };
+  ratings: {
+    name: string;
+    starCount: number;
+    reviewCount: number;
+  }[];
+};
+export async function saveProduct(productId: string, saveProductData: SaveProductData) {
+  console.log('save product ?');
+  // const url = productId ? [endpoints.product.details, { params: { productId } }] : '';
+
+  const res = await axiosInstance.post('http://localhost:7272/api/product/saveProduct', {
+    data: saveProductData,
+  });
+
+  return res;
+
+  // const url = productId ? [endpoints.product.details, { params: { productId } }] : '';
+
+  // const { data, isLoading, error, isValidating } = useSWR<SaveProductData>(
+  //   url,
+  //   fetcher,
+  //   swrOptions
+  // );
+
+  // const memoizedValue = useMemo(
+  //   () => ({
+  //     product: data?.product,
+  //     productLoading: isLoading,
+  //     productError: error,
+  //     productValidating: isValidating,
+  //   }),
+  //   [data?.product, error, isLoading, isValidating]
+  // );
+
+  // return memoizedValue;
+}

03_source/frontend/src/components/mega-menu/components/nav-dropdown-content.tsx

@@ -6,11 +6,11 @@ import Typography from '@mui/material/Typography';
 
 import { RouterLink } from 'src/routes/components';
 
+import { NavUl } from './nav-elements';
 import { Iconify } from '../../iconify';
 import { NavSubList } from './nav-sub-list';
 import { megaMenuClasses } from '../styles';
 import { NavCarousel } from './nav-carousel';
-import { NavUl } from './nav-elements';
 
 import type { NavListProps } from '../types';
 

03_source/frontend/src/pages/dashboard/product/edit.tsx

@@ -13,6 +13,7 @@ export default function Page() {
   const { id = '' } = useParams();
 
   const { product } = useGetProduct(id);
+  console.log({ id });
 
   return (
     <>

03_source/frontend/src/sections/calendar/hooks/use-calendar.ts

@@ -1,7 +1,7 @@
 import type FullCalendar from '@fullcalendar/react';
 import type { EventResizeDoneArg } from '@fullcalendar/interaction/index.js';
-import type { EventDropArg, DateSelectArg, EventClickArg } from '@fullcalendar/core/index.js';
 import type { ICalendarView, ICalendarRange, ICalendarEvent } from 'src/types/calendar';
+import type { EventDropArg, DateSelectArg, EventClickArg } from '@fullcalendar/core/index.js';
 
 import { useRef, useState, useCallback } from 'react';
 

03_source/frontend/src/sections/calendar/view/calendar-view.tsx

@@ -2,13 +2,13 @@ import type { Theme, SxProps } from '@mui/material/styles';
 import type { ICalendarEvent, ICalendarFilters } from 'src/types/calendar';
 
 import Calendar from '@fullcalendar/react';
+import { useEffect, startTransition } from 'react';
 import listPlugin from '@fullcalendar/list/index.js';
 import dayGridPlugin from '@fullcalendar/daygrid/index.js';
-import { useEffect, startTransition } from 'react';
 import timeGridPlugin from '@fullcalendar/timegrid/index.js';
 import timelinePlugin from '@fullcalendar/timeline/index.js';
-import interactionPlugin from '@fullcalendar/interaction/index.js';
 import { useBoolean, useSetState } from 'minimal-shared/hooks';
+import interactionPlugin from '@fullcalendar/interaction/index.js';
 
 import Box from '@mui/material/Box';
 import Card from '@mui/material/Card';

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

@@ -23,6 +23,7 @@ import FormControlLabel from '@mui/material/FormControlLabel';
 import { paths } from 'src/routes/paths';
 import { useRouter } from 'src/routes/hooks';
 
+import { saveProduct } from 'src/actions/product';
 import {
   _tags,
   PRODUCT_SIZE_OPTIONS,
@@ -44,7 +45,7 @@ export const NewProductSchema = zod.object({
   description: schemaHelper
     .editor({ message: 'Description is required!' })
     .min(100, { message: 'Description must be at least 100 characters' })
-    .max(500, { message: 'Description must be less than 500 characters' }),
+    .max(50000, { message: 'Description must be less than 50000 characters' }),
   images: schemaHelper.files({ message: 'Images is required!' }),
   code: zod.string().min(1, { message: 'Product code is required!' }),
   sku: zod.string().min(1, { message: 'Product sku is required!' }),
@@ -127,6 +128,8 @@ export function ProductNewEditForm({ currentProduct }: Props) {
 
   const values = watch();
 
+  // const saveProduct = useSaveProduct('e99f09a7-dd88-49d5-b1c8-1daf80c2d7b01');
+
   const onSubmit = handleSubmit(async (data) => {
     const updatedData = {
       ...data,
@@ -136,7 +139,14 @@ export function ProductNewEditForm({ currentProduct }: Props) {
     try {
       await new Promise((resolve) => setTimeout(resolve, 500));
       reset();
+
+      if (currentProduct) {
+        console.log('save product');
+        await saveProduct(currentProduct.id, values);
+      }
+
       toast.success(currentProduct ? 'Update success!' : 'Create success!');
+
       router.push(paths.dashboard.product.root);
       console.info('DATA', updatedData);
     } catch (error) {