update

2026-03-13 13:54:45 +07:00
parent a8e30f32a0
commit 25111ff10e
120 changed files with 4213 additions and 4859 deletions
--- a/src/components/other/Header/HeaderBottom/index.tsx
+++ b/src/components/other/Header/HeaderBottom/index.tsx
@@ -1,5 +1,6 @@
 'use client';
-import React, { useState } from 'react';
+
+import React from 'react';
 import { FaBars } from 'react-icons/fa';
 import { menuData } from '../menuData';
 import Image from 'next/image';
@@ -30,7 +31,6 @@ const HeaderBottom: React.FC = () => {
                    <span className="cat-title line-clamp-1">{item.title}</span>
                  </Link>

-                  {/* Cấp 2 & Cấp 3 */}
                  {item.children && item.children.length > 0 && (
                    <div className="sub-menu-list">
                      {item.children.map((_children2) => (
@@ -38,7 +38,6 @@ const HeaderBottom: React.FC = () => {
                          <Link href={_children2.url} className="cat-2">
                            {_children2.title}
                          </Link>
-                          {/* Cấp 3 */}
                          {_children2.children && _children2.children.length > 0 && (
                            <>
                              {_children2.children.map((_children3) => (
--- a/src/components/other/Header/HeaderMid/index.tsx
+++ b/src/components/other/Header/HeaderMid/index.tsx
@@ -1,56 +1,39 @@
 'use client';
-import React, { useState, useEffect } from 'react';
+
+import React, { useEffect, useState, useSyncExternalStore } from 'react';
 import Image from 'next/image';
 import Link from 'next/link';
 import { FaMapMarkerAlt, FaBars } from 'react-icons/fa';
 import BoxShowroom from '@/components/Common/BoxShowroom';
 import BoxHotLine from '../../BoxHotline';

-import { TypeCartItem } from '@/types/cart';
 import { formatCurrency } from '@/lib/formatPrice';
+import {
+  getServerCartSnapshot,
+  readCartFromStorage,
+  subscribeCartStorage,
+} from '@/lib/cartStorage';

 const HeaderMid: React.FC = () => {
-  const [cartCount, setCartCount] = useState(() => {
-    const storedCart = localStorage.getItem('cart');
-    return storedCart ? JSON.parse(storedCart).length : 0;
-  });
-
-  const [cart, setCart] = useState<TypeCartItem[]>(() => {
-    const storedCart = localStorage.getItem('cart');
-    return storedCart ? JSON.parse(storedCart) : [];
-  });
-
-  const [cartQuantity, setCartQuantity] = useState(() => {
-    return cart.reduce((sum: number, item) => sum + Number(item.in_cart.quantity), 0);
-  });
-  const [cartTotal, setCartTotal] = useState(() => {
-    return cart.reduce((sum: number, item) => sum + Number(item.in_cart.total_price), 0);
-  });
-
+  const cart = useSyncExternalStore(
+    subscribeCartStorage,
+    readCartFromStorage,
+    getServerCartSnapshot,
+  );
  const [isFixed, setIsFixed] = useState(false);

  useEffect(() => {
-    const handleScroll = () => {
-      const distanceFromTop = window.scrollY;
-      if (distanceFromTop > 680) {
-        setIsFixed(true);
-      } else {
-        setIsFixed(false);
-      }
-    };
-
+    const handleScroll = () => setIsFixed(window.scrollY > 680);
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

-  const PopupAddress = () => {
-    const modal = document.getElementById('boxShowroom') as HTMLDialogElement;
-    modal?.showModal();
-  };
+  const cartCount = cart.length;
+  const cartQuantity = cart.reduce((sum, item) => sum + Number(item.in_cart.quantity), 0);
+  const cartTotal = cart.reduce((sum, item) => sum + Number(item.in_cart.total_price), 0);

-  const PopupHotLine = () => {
-    const modal = document.getElementById('boxHotline') as HTMLDialogElement;
-    modal?.showModal();
+  const openModal = (id: string) => {
+    (document.getElementById(id) as HTMLDialogElement)?.showModal();
  };

  return (
@@ -66,7 +49,10 @@ const HeaderMid: React.FC = () => {
              className="logo-header"
            />
          </Link>
-          <button className="icon-showroom flex items-center justify-center" onClick={PopupAddress}>
+          <button
+            className="icon-showroom flex items-center justify-center"
+            onClick={() => openModal('boxShowroom')}
+          >
            <FaMapMarkerAlt size={16} />
          </button>
        </div>
@@ -74,7 +60,7 @@ const HeaderMid: React.FC = () => {
          <div className="header-menu-category">
            <div className="box-title flex items-center justify-center gap-8">
              <FaBars size={16} />
-              <p className="title-menu font-weight-500">Danh mục sản phẩm</p>
+              <p className="title-menu font-medium">Danh mục sản phẩm</p>
            </div>
            <div className="cau-noi"></div>
          </div>
@@ -109,24 +95,24 @@ const HeaderMid: React.FC = () => {
              <p className="icon-item-tab flex items-center justify-center">
                <i className="sprite sprite-buildpc-header"></i>
              </p>
-              <span className="font-500">Xây dựng cấu hình</span>
+              <span className="font-medium">Xây dựng cấu hình</span>
            </Link>

            <button
-              onClick={PopupHotLine}
+              onClick={() => openModal('boxHotline')}
              className="item-tab-header flex flex-col items-center gap-4"
            >
              <p className="icon-item-tab flex items-center justify-center">
                <i className="sprite sprite-lienhe-header"></i>
              </p>
-              <span className="font-500">Khách hàng liên hệ</span>
+              <span className="font-medium">Khách hàng liên hệ</span>
            </button>

            <Link href="/tin-tuc" className="item-tab-header flex flex-col items-center gap-4">
              <p className="icon-item-tab flex items-center justify-center">
                <i className="sprite sprite-article-header"></i>
              </p>
-              <span className="font-weight-500">Tin tức công nghệ</span>
+              <span className="font-medium">Tin tức công nghệ</span>
            </Link>

            <div id="js-header-cart" className="relative">
@@ -135,15 +121,15 @@ const HeaderMid: React.FC = () => {
                  <i className="sprite sprite-cart-header"></i>
                  <u className="cart-count header-features-cart-amount">{cartCount}</u>
                </p>
-                <span className="font-weight-500">Giỏ hàng</span>
+                <span className="font-medium">Giỏ hàng</span>
              </Link>
              <div className="cau-noi"></div>
              <div className="cart-ttip" id="js-cart-tooltip">
                <div className="cart-ttip-item-container">
-                  {cart.map((item, index) => (
+                  {cart.map((item) => (
                    <div
                      className="compare-item js-compare-item flex items-center gap-2"
-                      key={index}
+                      key={item._id}
                    >
                      <Link className="img-compare" href={item.item_info.productUrl}>
                        <Image
@@ -164,29 +150,24 @@ const HeaderMid: React.FC = () => {
                          <b>x {item.in_cart.quantity}</b>
                          <b className="price-compare">
                            {item.in_cart.price == '0'
-                              ? 'Liên Hệ'
+                              ? 'Liên hệ'
                              : `${formatCurrency(item.in_cart.total_price)} đ`}
                          </b>
                        </div>
                      </div>
                    </div>
                  ))}
-                  {/* end item */}
                </div>
                <div className="cart-ttip-price flex items-center justify-end gap-2">
                  <p>Tổng tiền hàng</p>
-                  <p id="js-header-cart-quantity" className="font-[500]">
-                    ({cartQuantity} sản phẩm)
-                  </p>
-                  <p id="js-header-cart-total-price" className="font-bold">
-                    {formatCurrency(cartTotal)}đ
-                  </p>
+                  <p className="font-medium">({cartQuantity} sản phẩm)</p>
+                  <p className="font-bold">{formatCurrency(cartTotal)}đ</p>
                </div>
                <Link
                  href="/cart"
                  className="cart-ttip-price-button flex items-center justify-center"
                >
-                  <p className="font-bold">THANH TOÁN NGAY </p>
+                  <p className="font-bold">THANH TOÁN NGAY</p>
                </Link>
              </div>
            </div>
@@ -198,7 +179,7 @@ const HeaderMid: React.FC = () => {
              <p className="icon-item-tab flex items-center justify-center">
                <i className="sprite sprite-account-header"></i>
              </p>
-              <span className="font-[500]">Tài khoản</span>
+              <span className="font-medium">Tài khoản</span>
            </Link>
          </div>
        </div>