update

2026-04-09 15:58:45 +07:00
parent 2d2bf85f83
commit 1713fdd89c
17 changed files with 985 additions and 210 deletions
--- a/.claude/settings.local.json
+++ b/.claude/settings.local.json
@@ -5,7 +5,9 @@
      "Bash(npm install:*)",
      "Bash(npx tsc:*)",
      "Bash(curl -s http://localhost:3000/tin-tuc)",
-      "Bash(grep '\"\"url\"\"' src/data/article/ListArticleNews.ts)"
+      "Bash(grep '\"\"url\"\"' src/data/article/ListArticleNews.ts)",
+      "Bash(cat src/features/Article/HomeArticlePage/index.tsx src/features/Article/CategoryPage/index.tsx src/features/Article/DetailPage/index.tsx src/features/Article/DetailPage/TocBox/index.tsx src/hooks/useApiData.ts src/app/[slug]/page.tsx src/features/Article/HomeArticlePage/BoxArticleMid/index.tsx src/features/Article/HomeArticlePage/BoxVideoArticle/index.tsx src/features/Article/HomeArticlePage/BoxArticleReview/index.tsx src/features/Article/ArticleTopLeft/index.tsx src/features/Article/ArticleTopRight/index.tsx src/components/Common/ItemArticle/index.tsx)",
+      "Bash(find /c/Users/APC/Downloads/work/nguyencongpc_nextjs/src -type f -name *.ts -o -name *.tsx)"
    ]
  }
 }
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -16,8 +16,11 @@
    "@fancyapps/ui": "^6.1.7",
    "@tippyjs/react": "^4.2.6",
    "@types/dompurify": "^3.0.5",
+    "cors": "^2.8.6",
    "date-fns": "^4.1.0",
    "dompurify": "^3.3.3",
+    "dotenv": "^17.3.1",
+    "express": "^5.2.1",
    "framer-motion": "^12.23.26",
    "lightgallery": "^2.9.0",
    "next": "^16.1.6",
@@ -37,6 +40,7 @@
    "eslint-config-next": "^16.1.6",
    "eslint-config-prettier": "^10.1.8",
    "msw": "^2.12.7",
+    "nodemon": "^3.1.14",
    "prettier": "^3.7.4",
    "prettier-plugin-tailwindcss": "^0.7.2",
    "tailwindcss": "^4.1.18",
--- a/src/app/[slug]/page.tsx
+++ b/src/app/[slug]/page.tsx
@@ -9,26 +9,14 @@ import ProductHotPage from '@/features/Product/ProductHot';
 import ArticlePage from '@/features/Article/HomeArticlePage';
 import ArticleCategoryPage from '@/features/Article/CategoryPage';
 import ArticleDetailPage from '@/features/Article/DetailPage';
-import PreLoader from '@/components/Common/PreLoader';
-import { getResolvedPageType } from '@/lib/api/page';
-import { useApiData } from '@/hooks/useApiData';
+import { resolvePageType } from '@/lib/resolvePageType';

 export default function DynamicPage() {
  const { slug } = useParams();
+  if (typeof slug !== 'string' || slug.length === 0) return <NotFound />;
+
  const fullSlug = `/${slug}`;
-
-  const { data: pageType, isLoading } = useApiData(
-    () => getResolvedPageType(fullSlug),
-    [fullSlug],
-    {
-      initialData: '404',
-      enabled: typeof slug === 'string' && slug.length > 0,
-    },
-  );
-
-  if (isLoading) {
-    return <PreLoader />;
-  }
+  const pageType = resolvePageType(fullSlug);

  switch (pageType) {
    case 'category':
--- a/src/app/buildpc/BtnAction/index.tsx
+++ b/src/app/buildpc/BtnAction/index.tsx
@@ -40,7 +40,7 @@ const BtnAction = ({
      <div className="grid gap-5 xl:grid-cols-[0.9fr_1.1fr]">
        <div className="space-y-4">
          <div>
-            <p className="text-sm font-semibold uppercase tracking-[0.2em] text-white/45">
+            <p className="text-sm font-semibold tracking-[0.2em] text-white/45 uppercase">
              Tóm tắt cấu hình
            </p>
            <p className="mt-3 text-3xl font-semibold">
--- a/src/app/buildpc/page.tsx
+++ b/src/app/buildpc/page.tsx
@@ -38,11 +38,11 @@ export default async function BuildPcPage() {
              <div className="relative overflow-hidden rounded-[24px] bg-[linear-gradient(135deg,#7f1d1d_0%,#b91c1c_48%,#111827_100%)] p-6 text-white shadow-[0_22px_60px_rgba(127,29,29,0.28)]">
                <div className="absolute inset-y-0 right-0 w-40 bg-[radial-gradient(circle_at_top,rgba(255,255,255,0.3),transparent_65%)]" />
                <div className="relative space-y-4">
-                  <span className="inline-flex rounded-full border border-white/20 bg-white/10 px-3 py-1 text-xs font-semibold uppercase tracking-[0.24em] text-white/80">
+                  <span className="inline-flex rounded-full border border-white/20 bg-white/10 px-3 py-1 text-xs font-semibold tracking-[0.24em] text-white/80 uppercase">
                    Build PC theo nhu cầu
                  </span>
                  <div className="space-y-3">
-                    <h1 className="max-w-3xl text-3xl font-semibold leading-tight md:text-4xl">
+                    <h1 className="max-w-3xl text-3xl leading-tight font-semibold md:text-4xl">
                      {snapshot.title}
                    </h1>
                    <p className="max-w-2xl text-sm leading-6 text-white/80 md:text-base">
@@ -51,14 +51,14 @@ export default async function BuildPcPage() {
                  </div>
                  <div className="grid gap-3 sm:grid-cols-2">
                    <div className="rounded-2xl border border-white/15 bg-white/10 p-4">
-                      <p className="text-xs uppercase tracking-[0.24em] text-white/70">Số bước</p>
+                      <p className="text-xs tracking-[0.24em] text-white/70 uppercase">Số bước</p>
                      <p className="mt-2 text-2xl font-semibold">{snapshot.categories.length}</p>
                      <p className="mt-1 text-sm text-white/75">
                        Danh mục được chia theo từng linh kiện để lắp cấu hình nhanh hơn.
                      </p>
                    </div>
                    <div className="rounded-2xl border border-white/15 bg-white/10 p-4">
-                      <p className="text-xs uppercase tracking-[0.24em] text-white/70">
+                      <p className="text-xs tracking-[0.24em] text-white/70 uppercase">
                        Trạng thái dữ liệu
                      </p>
                      <p className="mt-2 text-2xl font-semibold">Live</p>
@@ -74,7 +74,7 @@ export default async function BuildPcPage() {
            <section className="rounded-[24px] border border-slate-200 bg-slate-50/80 p-4 md:p-5">
              <div className="mb-3 flex items-center justify-between gap-3">
                <div>
-                  <p className="text-sm font-semibold uppercase tracking-[0.18em] text-slate-500">
+                  <p className="text-sm font-semibold tracking-[0.18em] text-slate-500 uppercase">
                    Bộ cấu hình
                  </p>
                  <p className="mt-1 text-sm text-slate-600">
--- a/src/components/Cart/Home/ItemCart/index.tsx
+++ b/src/components/Cart/Home/ItemCart/index.tsx
@@ -28,7 +28,7 @@ export const ItemCart: React.FC<PropsCart> = ({ item, onUpdate, onDelete }) => {

  return (
    <div className="cart-item-info js-item-row flex justify-between">
-      <div className="cart-item-left flex">
+      <div className="cart-item-left flex gap-3">
        <Link className="cart-item-img relative" href={item.item_info.productUrl}>
          <Image
            src={item.item_info.productImage.large}
@@ -37,7 +37,7 @@ export const ItemCart: React.FC<PropsCart> = ({ item, onUpdate, onDelete }) => {
            width={100}
            height={100}
          />
-          {item.item_info.sale_rules?.type == 'deal' && (
+          {item.item_info.sale_rules?.type === 'deal' && (
            <Image
              className="icon-deal-cart lazy"
              src="https://nguyencongpc.vn/static/assets/nguyencong_2023/images/static-icon-cart-deal.png"
@@ -99,15 +99,9 @@ export const ItemCart: React.FC<PropsCart> = ({ item, onUpdate, onDelete }) => {
      </div>
      <div className="box-item-right flex flex-col items-end justify-between">
        <div className="price-cart-item">
-          {item.in_cart.price == '0' ? (
-            <p className="price cart-item-price item-cart-price js-total-item-price font-bold">
-              0 đ
-            </p>
-          ) : (
-            <p className="price cart-item-price item-cart-price js-total-item-price font-bold">
-              {formatCurrency(item.in_cart.total_price)} đ
-            </p>
-          )}
+          <p className="price cart-item-price item-cart-price js-total-item-price font-bold">
+            {item.in_cart.price === '0' ? '0' : formatCurrency(item.in_cart.total_price)} đ
+          </p>
        </div>
        <button
          onClick={() => onDelete(item._id)}
--- a/src/components/Cart/Home/index.tsx
+++ b/src/components/Cart/Home/index.tsx
@@ -1,6 +1,6 @@
 'use client';

-import { useRef, useState, useSyncExternalStore } from 'react';
+import { useCallback, useMemo, useRef, useState, useSyncExternalStore } from 'react';
 import Image from 'next/image';
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
@@ -29,42 +29,49 @@ const HomeCart = () => {

  const formRef = useRef<FormCartRef>(null);

-  const updateCartItem = (id: string, quantity: number) => {
-    const newCart = cart.map((item) =>
-      item._id === id
-        ? {
-            ...item,
-            in_cart: {
-              ...item.in_cart,
-              quantity: quantity.toString(),
-              total_price: quantity * Number(item.in_cart.price),
-            },
-          }
-        : item,
-    );
-    writeCartToStorage(newCart);
-  };
+  const updateCartItem = useCallback(
+    (id: string, quantity: number) => {
+      const newCart = cart.map((item) =>
+        item._id === id
+          ? {
+              ...item,
+              in_cart: {
+                ...item.in_cart,
+                quantity: quantity.toString(),
+                total_price: quantity * Number(item.in_cart.price),
+              },
+            }
+          : item,
+      );
+      writeCartToStorage(newCart);
+    },
+    [cart],
+  );

-  const deleteCartItem = (id: string) => {
-    if (!window.confirm('Bạn có chắc chắn xóa sản phẩm này không?')) return;
-    const newCart = cart.filter((item) => item._id !== id);
-    writeCartToStorage(newCart);
-  };
+  const deleteCartItem = useCallback(
+    (id: string) => {
+      if (!window.confirm('Bạn có chắc chắn xóa sản phẩm này không?')) return;
+      const newCart = cart.filter((item) => item._id !== id);
+      writeCartToStorage(newCart);
+    },
+    [cart],
+  );

-  const deleteCart = () => {
+  const deleteCart = useCallback(() => {
    if (!window.confirm('Bạn có chắc chắn xóa toàn bộ giỏ hàng không?')) return;
    clearCartStorage();
-  };
+  }, []);

-  const getTotalPrice = () => {
-    return formatCurrency(cart.reduce((sum, item) => sum + Number(item.in_cart.total_price), 0));
-  };
+  const totalPrice = useMemo(
+    () => formatCurrency(cart.reduce((sum, item) => sum + Number(item.in_cart.total_price), 0)),
+    [cart],
+  );

-  const handleClickOrder = () => {
+  const handleClickOrder = useCallback(() => {
    if (formRef.current?.validateForm()) {
      router.push('/send-cart');
    }
-  };
+  }, [router]);

  return (
    <>
@@ -134,14 +141,12 @@ const HomeCart = () => {
                  <p className="price-total1 flex items-center justify-between">
                    <b className="txt">Tổng cộng</b>
                    <b className="price js-total-before-fee-cart-price" id="total-cart-price">
-                      {getTotalPrice()} đ
+                      {totalPrice} đ
                    </b>
                  </p>
                  <p className="price-total2 flex items-center justify-between">
                    <b className="txt">Thành tiền</b>
-                    <b className="price color-red js-total-cart-price font-bold">
-                      {getTotalPrice()} đ
-                    </b>
+                    <b className="price color-red js-total-cart-price font-bold">{totalPrice} đ</b>
                  </p>
                  <span className="has-vat">(Giá đã bao gồm VAT)</span>
                </div>
--- a/src/components/Product/BoxFilter/index.tsx
+++ b/src/components/Product/BoxFilter/index.tsx
@@ -83,7 +83,9 @@ const BoxFilter: React.FC<BoxFilterProps> = ({ filters }) => {
            {primaryBrandFilter && (
              <div
                className={`item ${
-                  isFilterUrlActive(pathname, currentSearch, primaryBrandFilter.url) ? 'current' : ''
+                  isFilterUrlActive(pathname, currentSearch, primaryBrandFilter.url)
+                    ? 'current'
+                    : ''
                }`}
              >
                <div className="flex items-center">
--- a/src/features/Article/ArticleTopLeft/index.tsx
+++ b/src/features/Article/ArticleTopLeft/index.tsx
@@ -15,12 +15,10 @@ export const ArticleTopLeft = () => {
  return (
    <div className="flex gap-3">
      <div className="box-left">
-        {articles.slice(0, 1).map((item) => (
-          <ItemArticle item={item} key={item.id} />
-        ))}
+        {articles[0] && <ItemArticle item={articles[0]} key={articles[0].id} />}
      </div>
      <div className="box-right flex flex-1 flex-col gap-3">
-        {articles.slice(0, 4).map((item) => (
+        {articles.slice(1, 5).map((item) => (
          <ItemArticle item={item} key={item.id} />
        ))}
      </div>
--- a/src/features/Article/CategoryPage/index.tsx
+++ b/src/features/Article/CategoryPage/index.tsx
@@ -1,7 +1,6 @@
 'use client';

 import Link from 'next/link';
-import Image from 'next/image';

 import type { TypeArticleCatePage } from '@/types/article/TypeArticleCatePage';

@@ -96,29 +95,7 @@ const ArticleCategoryPage: React.FC<CategoryPageProps> = ({ slug }) => {
              <p className="title-box-article font-bold">Tin nổi bật</p>
              <div className="list-article-global flex flex-col gap-2">
                {articles.slice(0, 5).map((item) => (
-                  <div className="item-article flex gap-4" key={item.id}>
-                    <Link href={item.url} className="img-article boder-radius-10 relative">
-                      <Image
-                        className="boder-radius-10"
-                        src={item.image.original}
-                        fill
-                        alt={item.title}
-                      />
-
-                      <i className="sprite sprite-icon-play-video-detail icon-video-feature incon-play-youtube"></i>
-                      <i className="sprite sprite-play-youtube incon-play-youtube"></i>
-                    </Link>
-                    <div className="content-article content-article-item flex flex-1 flex-col">
-                      <Link href={item.url} className="title-article">
-                        <h3 className="line-clamp-2 font-[400]">{item.title}</h3>
-                      </Link>
-                      <p className="time-article flex items-center gap-2">
-                        <i className="sprite sprite-clock-item-article"></i>
-                        <span>{item.createDate}</span>
-                      </p>
-                      <p className="descreption-article line-clamp-2">{item.summary}</p>
-                    </div>
-                  </div>
+                  <ItemArticle item={item} key={item.id} />
                ))}
              </div>
            </div>
--- a/src/features/Article/DetailPage/TocBox/index.tsx
+++ b/src/features/Article/DetailPage/TocBox/index.tsx
@@ -11,9 +11,9 @@ type HeadingItem = {
 function convertToSlug(text: string) {
  return text
    .toLowerCase()
+    .replace(/đ/g, 'd') // phải xử lý trước NFD vì NFD sẽ phân rã đ thành ký tự khác
    .normalize('NFD')
    .replace(/[\u0300-\u036f]/g, '')
-    .replace(/đ/g, 'd')
    .replace(/[^\w ]+/g, '')
    .trim()
    .replace(/\s+/g, '-');
--- a/src/features/Article/DetailPage/index.tsx
+++ b/src/features/Article/DetailPage/index.tsx
@@ -57,7 +57,7 @@ const ArticleDetailPage: React.FC<DetailPageProps> = ({ slug }) => {
            <Link
              href={item.url}
              key={`${item.id}-${index}`}
-              className={`item-tab-article ${page.article_detail.categoryInfo[0].id === item.id ? 'active' : ''}`}
+              className={`item-tab-article ${page.article_detail.categoryInfo[0]?.id === item.id ? 'active' : ''}`}
            >
              <h2 className="title-cate-article font-[400]">{item.title}</h2>
            </Link>
@@ -75,7 +75,7 @@ const ArticleDetailPage: React.FC<DetailPageProps> = ({ slug }) => {
            </div>
          </div>

-          {page.article_other_same_category && (
+          {combinedList.length > 0 && (
            <div className="col-md-4">
              <div className="box-article-relay">
                <p className="title-ar">
--- a/src/features/Article/HomeArticlePage/BoxArticleMid/index.tsx
+++ b/src/features/Article/HomeArticlePage/BoxArticleMid/index.tsx
@@ -2,7 +2,6 @@

 import ItemArticle from '@/components/Common/ItemArticle';
 import Link from 'next/link';
-import Image from 'next/image';
 import { getArticles } from '@/lib/api/article';
 import { useApiData } from '@/hooks/useApiData';
 import type { ListArticle } from '@/types/article/TypeListArticle';
@@ -35,29 +34,7 @@ export const BoxArticleMid = () => {
          <p className="title-box-article font-bold">Tin nổi bật</p>
          <div className="list-article-hot">
            {articles.slice(0, 5).map((item) => (
-              <div className="item-article flex gap-4" key={item.id}>
-                <Link href={item.url} className="img-article boder-radius-10 relative">
-                  <Image
-                    className="boder-radius-10"
-                    src={item.image.original}
-                    fill
-                    alt={item.title}
-                  />
-
-                  <i className="sprite sprite-icon-play-video-detail icon-video-feature incon-play-youtube"></i>
-                  <i className="sprite sprite-play-youtube incon-play-youtube"></i>
-                </Link>
-                <div className="content-article content-article-item flex flex-1 flex-col">
-                  <Link href={item.url} className="title-article">
-                    <h3 className="line-clamp-2 font-[400]">{item.title}</h3>
-                  </Link>
-                  <p className="time-article flex items-center gap-2">
-                    <i className="sprite sprite-clock-item-article"></i>
-                    <span>{item.createDate}</span>
-                  </p>
-                  <p className="descreption-article line-clamp-2">{item.summary}</p>
-                </div>
-              </div>
+              <ItemArticle item={item} key={item.id} />
            ))}
          </div>
        </div>
--- a/src/features/Article/HomeArticlePage/BoxArticleReview/index.tsx
+++ b/src/features/Article/HomeArticlePage/BoxArticleReview/index.tsx
@@ -29,11 +29,11 @@ export const BoxArticleReview = () => {
            slidesPerView={3}
            loop={true}
          >
-            {articles.map((item) => (
+            {articles.slice(0, 9).map((item) => (
              <SwiperSlide key={item.id}>
                <div className="item-article">
                  <Link href={item.url} className="img-article">
-                    <Image src={item.image.original} fill alt={item.title} />
+                    <Image src={item.image.original} fill alt={item.title} sizes="(max-width: 768px) 100vw, 33vw" />
                  </Link>
                  <div className="content-article-item">
                    <Link href={item.url} className="title font-weight-500 line-clamp-2">
--- a/src/lib/api/article.ts
+++ b/src/lib/api/article.ts
@@ -8,17 +8,23 @@ function normalizeSlug(slug: string) {
  return slug.replace(/^\/+/, '');
 }

-export function getArticles() {
-  return apiFetch<ListArticle>('/articles');
+// Tạo hàm fetch có cache theo TTL — nhiều component gọi cùng lúc
+// sẽ share 1 request thay vì gửi nhiều request trùng lặp.
+function makeCache<T>(fetcher: () => Promise<T>, ttl = 30_000) {
+  let cache: Promise<T> | null = null;
+  return () => {
+    if (!cache) {
+      cache = fetcher().finally(() => {
+        setTimeout(() => { cache = null; }, ttl);
+      });
+    }
+    return cache;
+  };
 }

-export function getArticleVideos() {
-  return apiFetch<ListArticle>('/articles/videos');
-}
-
-export function getArticleCategories() {
-  return apiFetch<TypeArticleCategory[]>('/articles/categories');
-}
+export const getArticles = makeCache(() => apiFetch<ListArticle>('/articles'));
+export const getArticleVideos = makeCache(() => apiFetch<ListArticle>('/articles/videos'));
+export const getArticleCategories = makeCache(() => apiFetch<TypeArticleCategory[]>('/articles/categories'));

 export function getArticleCategoryDetail(slug: string) {
  return apiFetch<TypeArticleCatePage>(`/articles/categories/${normalizeSlug(slug)}`);
--- a/src/lib/api/client.ts
+++ b/src/lib/api/client.ts
@@ -23,7 +23,6 @@ export async function apiFetch<T>(
  try {
    const res = await fetch(`${API_URL}${path}`, {
      ...fetchOptions,
-      cache: 'no-store',
      signal: controller.signal,
    });