added empty pages

2025-12-15 17:55:34 +05:00
parent e886359c5c
commit 6d0064b106
22 changed files with 531 additions and 296 deletions
--- a/components/layout/Header.tsx
+++ b/components/layout/Header.tsx
@@ -12,10 +12,9 @@ import AuthDialog from "./ui/AuthDialog";
 import ActionButtons from "./ui/ActionButtons";
 import LanguageSelector from "./ui/LanguageSelector";
 import MobileBottomNav from "./MobileBar";
-import { useAuthStatus, useLogout } from "@/lib/hooks/useAuth";
+import { useAuthStatus } from "@/lib/hooks/useAuth";
 import { useTranslations } from "next-intl";
 import { CategoryIcon } from "../icons";
-import { useRouter } from "next/navigation";

 interface HeaderProps {
  locale?: string;
@@ -27,10 +26,10 @@ export default function Header({ locale = "ru" }: HeaderProps) {
  const [isMobileSearchOpen, setIsMobileSearchOpen] = useState(false);
  const [isLoginOpen, setIsLoginOpen] = useState(false);
  const t = useTranslations();
-  const router = useRouter();
+  

  const { isAuthenticated, isLoading } = useAuthStatus();
-  const { mutate: logout, isPending: isLoggingOut } = useLogout();
+  

  useEffect(() => {
    setIsClient(true);
@@ -44,9 +43,7 @@ export default function Header({ locale = "ru" }: HeaderProps) {
    }
  }, [isAuthenticated, locale]);

-  const handleLogout = useCallback(() => {
-    logout();
-  }, [logout]);
+ 

  const toggleCategoryMenu = useCallback(() => {
    setIsCategoryOpen((prev) => !prev);
@@ -56,9 +53,7 @@ export default function Header({ locale = "ru" }: HeaderProps) {
    setIsCategoryOpen(false);
  }, []);

-  const handleProfileClick = useCallback(() => {
-    router.push(`/${locale}/me`);
-  }, [router, locale]);
+

  if (!isClient) return null;

@@ -133,7 +128,10 @@ export default function Header({ locale = "ru" }: HeaderProps) {
      <MobileBottomNav
  locale={locale}
 
-  onLoginClick={() => setIsLoginOpen(true)}
+   onLoginClick={() => {
+    console.log('[Header] Opening login dialog');
+    setIsLoginOpen(true);
+  }}
 />
    </>
  );
--- a/components/layout/MobileBar.tsx
+++ b/components/layout/MobileBar.tsx
@@ -12,10 +12,13 @@ import {
  SheetTitle,
 } from "@/components/ui/sheet";
 import { ScrollArea } from "@/components/ui/scroll-area";
-import { useCategories, useCart, useFavorites, useOrders } from "@/lib/hooks";
+import { useCategories, useFavorites, useOrders } from "@/lib/hooks";
+import { useCartCount } from "@/features/cart/hooks/useCart";
 import { useRouter } from "next/navigation";
 import { useAuthStatus } from "@/lib/hooks/useAuth";
 import { useTranslations } from "next-intl";
+import AuthDialog from "./ui/AuthDialog";
+
 interface MobileBottomNavProps {
  locale?: string;
  translations?: {
@@ -36,29 +39,33 @@ export default function MobileBottomNav({
 }: MobileBottomNavProps) {
  const [isClient, setIsClient] = useState(false);
  const [isCategoryOpen, setIsCategoryOpen] = useState(false);
- const t = useTranslations();
-  // AUTH STATE DIRECTLY FROM HOOK - NOT FROM PROPS
+  const [isLoginOpen, setIsLoginOpen] = useState(false);
+  const t = useTranslations();
+
  const { isAuthenticated, isLoading: authLoading } = useAuthStatus();
-  
+
  const { data: categories = [] } = useCategories();
-  const { data: cartData } = useCart();
+
+  // OPTIMIZED: Use event-driven cart count instead of full cart data
+  const cartCount = useCartCount();
+
  const { data: favoritesData } = useFavorites();
  const { data: ordersData } = useOrders();
  const router = useRouter();

-  
-
  useEffect(() => {
    setIsClient(true);
  }, []);

-
-
  const handleProfileClick = (e: React.MouseEvent) => {
    e.preventDefault();
    e.stopPropagation();
-    
-    
+
+    console.log("[MobileBottomNav] Profile clicked", {
+      authLoading,
+      isAuthenticated,
+      hasOnLoginClick: !!onLoginClick,
+    });

    if (authLoading) {
      return;
@@ -68,7 +75,11 @@ export default function MobileBottomNav({
      router.push(`/${locale}/me`);
    } else {
      if (onLoginClick) {
+        console.log("[MobileBottomNav] Calling parent onLoginClick");
        onLoginClick();
+      } else {
+        console.log("[MobileBottomNav] Using local login dialog");
+        setIsLoginOpen(true);
      }
    }
  };
@@ -109,14 +120,18 @@ export default function MobileBottomNav({
          >
            <div className="relative">
              <Heart className="h-5 w-5 text-gray-600" />
-              <Badge
-                variant="destructive"
-                className="absolute -right-2 -top-2 h-4 w-4 flex items-center justify-center p-0 text-[10px]"
-              >
-                {favoritesData?.length || 0}
-              </Badge>
+              {(favoritesData?.length || 0) > 0 && (
+                <Badge
+                  variant="destructive"
+                  className="absolute -right-2 -top-2 h-4 w-4 flex items-center justify-center p-0 text-[10px]"
+                >
+                  {favoritesData?.length}
+                </Badge>
+              )}
            </div>
-            <span className="text-xs text-gray-700">{t("common.favorites")}</span>
+            <span className="text-xs text-gray-700">
+              {t("common.favorites")}
+            </span>
          </Button>

          {/* Orders Button */}
@@ -128,17 +143,19 @@ export default function MobileBottomNav({
          >
            <div className="relative">
              <Truck className="h-5 w-5 text-gray-600" />
-              <Badge
-                variant="destructive"
-                className="absolute -right-2 -top-2 h-4 w-4 flex items-center justify-center p-0 text-[10px]"
-              >
-                {ordersData?.length || 0}
-              </Badge>
+              {(ordersData?.length || 0) > 0 && (
+                <Badge
+                  variant="destructive"
+                  className="absolute -right-2 -top-2 h-4 w-4 flex items-center justify-center p-0 text-[10px]"
+                >
+                  {ordersData?.length}
+                </Badge>
+              )}
            </div>
            <span className="text-xs text-gray-700">{t("common.orders")}</span>
          </Button>

-          {/* Cart Button */}
+          {/* Cart Button - OPTIMIZED */}
          <Button
            variant="ghost"
            size="sm"
@@ -147,12 +164,14 @@ export default function MobileBottomNav({
          >
            <div className="relative">
              <ShoppingCart className="h-5 w-5 text-gray-600" />
-              <Badge
-                variant="destructive"
-                className="absolute -right-2 -top-2 h-4 w-4 flex items-center justify-center p-0 text-[10px]"
-              >
-                {cartData?.data?.length || 0}
-              </Badge>
+              {cartCount > 0 && (
+                <Badge
+                  variant="destructive"
+                  className="absolute -right-2 -top-2 h-4 w-4 flex items-center justify-center p-0 text-[10px]"
+                >
+                  {cartCount}
+                </Badge>
+              )}
            </div>
            <span className="text-xs text-gray-700">{t("common.cart")}</span>
          </Button>
@@ -167,7 +186,11 @@ export default function MobileBottomNav({
          >
            <User className="h-5 w-5 text-gray-600" />
            <span className="text-xs text-gray-700">
-              {authLoading ? "..." : (isAuthenticated ? t("profile") : t("login"))}
+              {authLoading
+                ? "..."
+                : isAuthenticated
+                ? t("common.profile")
+                : t("common.login")}
            </span>
          </Button>
        </div>
@@ -212,6 +235,9 @@ export default function MobileBottomNav({
          </ScrollArea>
        </SheetContent>
      </Sheet>
+
+      {/* Local Auth Dialog  */}
+      <AuthDialog isOpen={isLoginOpen} onClose={() => setIsLoginOpen(false)} />
    </>
  );
-}
+}
--- a/components/layout/ui/ActionButtons.tsx
+++ b/components/layout/ui/ActionButtons.tsx
@@ -12,7 +12,7 @@ import {
  DropdownMenuItem,
  DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { useCart, useFavorites, useOrders } from "@/lib/hooks";
+import { useCart, useFavorites, useOrders, useCartCount } from "@/lib/hooks";
 import { Skeleton } from "@/components/ui/skeleton";
 import { useTranslations } from "next-intl";
 import { useLogout } from "@/lib/hooks/useAuth";
@@ -53,10 +53,7 @@ export default function ActionButtons({
  const { data: ordersData, isLoading: ordersLoading } = useOrders();

  // Calculate cart count from cart items array
-  const cartCount = useMemo(() => {
-    if (!cartData?.data) return 0;
-    return cartData.data.length;
-  }, [cartData]);
+const cartCount = useCartCount()

  // Calculate favorites count
  const favoritesCount = useMemo(() => {
--- a/components/ui/checkbox.tsx
+++ b/components/ui/checkbox.tsx
@@ -14,7 +14,7 @@ function Checkbox({
    <CheckboxPrimitive.Root
      data-slot="checkbox"
      className={cn(
-        "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        "peer border-[#0041c4] dark:bg-input/30 data-[state=checked]:bg-[#005bff] data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-[#0041c4] focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
        className
      )}
      {...props}
--- a/components/ui/slider.tsx
+++ b/components/ui/slider.tsx
@@ -45,7 +45,7 @@ function Slider({
        <SliderPrimitive.Range
          data-slot="slider-range"
          className={cn(
-            "bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
+            "bg-[#005bff] absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
          )}
        />
      </SliderPrimitive.Track>