added debounce to - + buttons

2025-11-16 23:37:21 +05:00
parent f867896817
commit 4fe0fb3d4e
52 changed files with 2548 additions and 2253 deletions
--- a/components/layout/ui/ActionButtons.tsx
+++ b/components/layout/ui/ActionButtons.tsx
@@ -1,75 +1,134 @@
-"use client"
+"use client";

-import type React from "react"
-import Link from "next/link"
-import { User, Truck, Heart, ShoppingCart } from "lucide-react"
-import { Button } from "@/components/ui/button"
-import { Badge } from "@/components/ui/badge"
-import { useCart, useFavorites, useOrders } from "@/lib/hooks"
-import { Skeleton } from "@/components/ui/skeleton"
+import { useMemo } from "react";
+import type React from "react";
+import Link from "next/link";
+import { User, Truck, Heart, ShoppingCart, LogOut } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { useCart, useFavorites, useOrders } from "@/lib/hooks";
+import { Skeleton } from "@/components/ui/skeleton";
+import { useTranslations } from "next-intl";
+import { useLogout } from "@/lib/hooks/useAuth";

 interface ActionButtonsProps {
-  isAuthenticated: boolean
-  onAuthClick: () => void
-  translations: {
-    profile: string
-    login: string
-    orders: string
-    favorites: string
-    cart: string
-  }
+  isAuthenticated: boolean;
+  onAuthClick: () => void;
+  isLoading?: boolean;
+  locale?: string;
 }

 interface ActionButtonData {
-  icon: React.ReactNode
-  label: string
-  href?: string
-  onClick?: () => void
-  badgeCount?: number
-  isLoading?: boolean
+  icon: React.ReactNode;
+  label: string;
+  href?: string;
+  onClick?: () => void;
+  badgeCount?: number;
+  isLoading?: boolean;
 }

-export default function ActionButtons({ isAuthenticated, onAuthClick, translations: t }: ActionButtonsProps) {
-  const { data: cartData, isLoading: cartLoading } = useCart()
-  const { data: favoritesData, isLoading: favoritesLoading } = useFavorites()
-  const { data: ordersData, isLoading: ordersLoading } = useOrders()
+export default function ActionButtons({ 
+  isAuthenticated, 
+  onAuthClick, 
+  isLoading: authLoading,
+  locale = "ru" 
+}: ActionButtonsProps) {
+  const t = useTranslations();
+  const { mutate: logout, isPending: isLoggingOut } = useLogout();
+  
+  const { data: cartData, isLoading: cartLoading } = useCart();
+  const { data: favoritesData, isLoading: favoritesLoading } = useFavorites();
+  const { data: ordersData, isLoading: ordersLoading } = useOrders();

-  const buttons: ActionButtonData[] = [
-    {
-      icon: <User className="h-5 w-5 text-gray-600" />,
-      label: isAuthenticated ? t.profile : t.login,
-      onClick: onAuthClick,
-    },
+  // Calculate cart count from cart items array
+  const cartCount = useMemo(() => {
+    if (!cartData?.data) return 0;
+    return cartData.data.length;
+  }, [cartData]);
+
+  // Calculate favorites count
+  const favoritesCount = useMemo(() => {
+    if (!favoritesData) return 0;
+    return Array.isArray(favoritesData) ? favoritesData.length : 0;
+  }, [favoritesData]);
+
+  // Calculate orders count
+  const ordersCount = useMemo(() => {
+    if (!ordersData) return 0;
+    return Array.isArray(ordersData) ? ordersData.length : 0;
+  }, [ordersData]);
+
+  const handleLogout = () => {
+    logout();
+  };
+
+  const buttons: ActionButtonData[] = useMemo(() => [
    {
      icon: <Truck className="h-5 w-5 text-gray-600" />,
-      label: t.orders,
+      label: t("common.orders"),
      href: "/orders",
-      badgeCount: ordersData?.length || 0,
+      badgeCount: ordersCount,
      isLoading: ordersLoading,
    },
    {
      icon: <Heart className="h-5 w-5 text-gray-600" />,
-      label: t.favorites,
+      label: t("common.favorites"),
      href: "/favorites",
-      badgeCount: favoritesData?.length || 0,
+      badgeCount: favoritesCount,
      isLoading: favoritesLoading,
    },
    {
      icon: <ShoppingCart className="h-5 w-5 text-gray-600" />,
-      label: t.cart,
+      label: t("common.cart"),
      href: "/cart",
-      badgeCount: cartData?.count || 0,
+      badgeCount: cartCount,
      isLoading: cartLoading,
    },
-  ]
+  ], [ordersCount, ordersLoading, favoritesCount, favoritesLoading, cartCount, cartLoading, t]);

  return (
    <div className="hidden items-center gap-1 md:flex">
+      {/* Profile/Login Button with Dropdown */}
+      {authLoading ? (
+        <div className="h-10 w-24 animate-pulse bg-gray-200 rounded" />
+      ) : isAuthenticated ? (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" size="sm" className="flex-col gap-0.5 h-auto px-2 py-2">
+              <User className="h-5 w-5 text-gray-600" />
+              <span className="text-xs text-gray-700">{t("profile")}</span>
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuItem onClick={() => (window.location.href = `/${locale}/me`)}>
+              <User className="mr-2 h-4 w-4" />
+              {t("profile")}
+            </DropdownMenuItem>
+            <DropdownMenuItem onClick={handleLogout} disabled={isLoggingOut}>
+              <LogOut className="mr-2 h-4 w-4" />
+              {isLoggingOut ? t("logging_out") : t("common.logout")}
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      ) : (
+        <Button variant="ghost" size="sm" className="flex-col gap-0.5 h-auto px-2 py-2" onClick={onAuthClick}>
+          <User className="h-5 w-5 text-gray-600" />
+          <span className="text-xs text-gray-700">{t("common.login")}</span>
+        </Button>
+      )}
+
+      {/* Other Action Buttons */}
      {buttons.map((button, index) => (
        <ActionButton key={index} {...button} />
      ))}
    </div>
-  )
+  );
 }

 function ActionButton({ icon, label, href, onClick, badgeCount, isLoading }: ActionButtonData) {
@@ -77,7 +136,7 @@ function ActionButton({ icon, label, href, onClick, badgeCount, isLoading }: Act
    <Button variant="ghost" size="sm" className="relative flex-col gap-0.5 h-auto px-2 py-2" onClick={onClick}>
      <div className="relative">
        {icon}
-        {badgeCount !== undefined && (
+        {badgeCount !== undefined && badgeCount > 0 && (
          <Badge
            variant="destructive"
            className="absolute -right-2 -top-2 h-4 w-4 flex items-center justify-center p-0 text-[10px]"
@@ -88,11 +147,11 @@ function ActionButton({ icon, label, href, onClick, badgeCount, isLoading }: Act
      </div>
      <span className="text-xs text-gray-700">{label}</span>
    </Button>
-  )
+  );

  if (href) {
-    return <Link href={href}>{buttonContent}</Link>
+    return <Link href={href}>{buttonContent}</Link>;
  }

-  return buttonContent
-}
+  return buttonContent;
+}
--- a/components/layout/ui/AuthDialog.tsx
+++ b/components/layout/ui/AuthDialog.tsx
@@ -1,79 +1,67 @@
-"use client"
+"use client";

-import React, { useState } from "react"
-import Image from "next/image"
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
-import { toast } from "sonner"
-import Logo from "@/public/logo.png"
-import { useLogin, useVerifyToken } from "@/lib/hooks/useAuth"
+import { useState, useCallback } from "react";
+import Image from "next/image";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { toast } from "sonner";
+import Logo from "@/public/logo.png";
+import { useLogin, useVerifyToken } from "@/lib/hooks/useAuth";
+import { useTranslations } from "next-intl";

 interface AuthDialogProps {
-  isOpen: boolean
-  onClose: () => void
-  translations: {
-    enterPhone: string
-    weWillSendCode: string
-    phone: string
-    code: string
-    send: string
-    verify: string
-    sending: string
-    verifying: string
-    invalidPhone: string
-    invalidCode: string
-    loginSuccess: string
-    codeSent: string
-  }
+  isOpen: boolean;
+  onClose: () => void;
 }

-export default function AuthDialog({ isOpen, onClose, translations: t }: AuthDialogProps) {
-  const [phone, setPhone] = useState("993")
-  const [otp, setOtp] = useState("")
-  const [otpSent, setOtpSent] = useState(false)
-  const [rawPhone, setRawPhone] = useState("")
+export default function AuthDialog({ isOpen, onClose }: AuthDialogProps) {
+  const [phone, setPhone] = useState("993");
+  const [otp, setOtp] = useState("");
+  const [otpSent, setOtpSent] = useState(false);
+  const [rawPhone, setRawPhone] = useState("");
+  const t = useTranslations();

-  const { mutate: login, isPending: isLoginLoading } = useLogin()
-  const { mutate: verifyToken, isPending: isVerifyLoading } = useVerifyToken()
+  const { mutate: login, isPending: isLoginLoading } = useLogin();
+  const { mutate: verifyToken, isPending: isVerifyLoading } = useVerifyToken();

-  const resetDialog = () => {
-    setOtpSent(false)
-    setPhone("993")
-    setOtp("")
-    setRawPhone("")
-    onClose()
-  }
+  const resetDialog = useCallback(() => {
+    setOtpSent(false);
+    setPhone("993");
+    setOtp("");
+    setRawPhone("");
+    onClose();
+  }, [onClose]);

-  const handleSendOtp = () => {
-    const cleanPhone = phone.replace(/\D/g, "")
+  const handleSendOtp = useCallback(() => {
+    const cleanPhone = phone.replace(/\D/g, "");
    
    if (cleanPhone.length !== 11 || !cleanPhone.startsWith("993")) {
-      toast.error(t.invalidPhone)
-      return
+      toast.error(t("invalid_phone"));
+      return;
    }

-    const phoneNumber = cleanPhone.substring(3)
-    setRawPhone(phoneNumber)
+    const phoneNumber = cleanPhone.substring(3);
+    setRawPhone(phoneNumber);

    login(
      { phone_number: phoneNumber },
      {
        onSuccess: () => {
-          toast.success(t.codeSent)
-          setOtpSent(true)
+          toast.success(t("code_sent"));
+          setOtpSent(true);
        },
        onError: (error: any) => {
-          toast.error(error?.response?.data?.message || "Hata oluştu")
+          toast.error(error?.response?.data?.message || t("error_occurred"));
        },
      }
-    )
-  }
+    );
+  }, [phone, login, t]);

-  const handleLogin = () => {
+  const handleLogin = useCallback(() => {
    if (otp.length < 4) {
-      toast.error(t.invalidCode)
-      return
+      toast.error(t("invalid_code"));
+      return;
    }

    verifyToken(
@@ -83,30 +71,30 @@ export default function AuthDialog({ isOpen, onClose, translations: t }: AuthDia
      },
      {
        onSuccess: () => {
-          toast.success(t.loginSuccess)
-          resetDialog()
-          window.location.reload()
+          toast.success(t("login_success"));
+          resetDialog();
+          window.location.reload();
        },
        onError: (error: any) => {
-          toast.error(error?.response?.data?.message || "Kod yanlış")
+          toast.error(error?.response?.data?.message || t("wrong_code"));
        },
      }
-    )
-  }
+    );
+  }, [otp, rawPhone, verifyToken, resetDialog, t]);

-  const handleKeyPress = (e: React.KeyboardEvent, action: () => void) => {
+  const handleKeyPress = useCallback((e: React.KeyboardEvent, action: () => void) => {
    if (e.key === "Enter") {
-      action()
+      action();
    }
-  }
+  }, []);

-  const formatPhoneInput = (value: string) => {
-    const cleaned = value.replace(/\D/g, "")
+  const formatPhoneInput = useCallback((value: string) => {
+    const cleaned = value.replace(/\D/g, "");
    if (!cleaned.startsWith("993")) {
-      return "993"
+      return "993";
    }
-    return cleaned.substring(0, 11)
-  }
+    return cleaned.substring(0, 11);
+  }, []);

  return (
    <Dialog open={isOpen} onOpenChange={resetDialog}>
@@ -117,15 +105,15 @@ export default function AuthDialog({ isOpen, onClose, translations: t }: AuthDia
              <Image src={Logo} alt="Logo" fill className="object-contain" />
            </div>
          </div>
-          <DialogTitle className="text-2xl text-center">{t.enterPhone}</DialogTitle>
-          <p className="text-center text-sm text-gray-600">{t.weWillSendCode}</p>
+          <DialogTitle className="text-2xl text-center">{t("common.enterPhone")}</DialogTitle>
+          <p className="text-center text-sm text-gray-600">{t("common.weWillSendCode")}</p>
        </DialogHeader>

        <div className="space-y-4 mt-4">
          <div>
            <Input
              type="tel"
-              placeholder={t.phone}
+              placeholder={t("common.phone")}
              value={phone}
              onChange={(e) => setPhone(formatPhoneInput(e.target.value))}
              className="h-12 rounded-xl"
@@ -133,13 +121,13 @@ export default function AuthDialog({ isOpen, onClose, translations: t }: AuthDia
              disabled={otpSent || isLoginLoading}
              maxLength={11}
            />
-            <p className="text-xs text-gray-500 mt-1">Format: 99365123456</p>
+            <p className="text-xs text-gray-500 mt-1">{t("phone_format")}</p>
          </div>

          {otpSent && (
            <Input
              type="text"
-              placeholder={t.code}
+              placeholder={t("common.code")}
              value={otp}
              onChange={(e) => setOtp(e.target.value.replace(/\D/g, "").substring(0, 6))}
              className="h-12 rounded-xl"
@@ -157,15 +145,15 @@ export default function AuthDialog({ isOpen, onClose, translations: t }: AuthDia
            disabled={isLoginLoading || isVerifyLoading}
          >
            {isLoginLoading
-              ? t.sending
+              ? t("sending")
              : isVerifyLoading
-                ? t.verifying
+                ? t("verifying")
                : otpSent
-                  ? t.verify
-                  : t.send}
+                  ? t("verify")
+                  : t("common.send")}
          </Button>
        </div>
      </DialogContent>
    </Dialog>
-  )
+  );
 }
--- a/components/layout/ui/CategoryMenu.tsx
+++ b/components/layout/ui/CategoryMenu.tsx
@@ -5,13 +5,7 @@ import Link from "next/link"
 import { useCategories } from "@/lib/hooks"
 import { Skeleton } from "@/components/ui/skeleton"

-interface Category {
-  id: number
-  name: string
-  slug: string
-  icon_class?: string
-  children?: Category[]
-}
+

 interface CategoryMenuProps {
  isOpen: boolean
--- a/components/layout/ui/SearchBar.tsx
+++ b/components/layout/ui/SearchBar.tsx
@@ -1,5 +1,7 @@
-import React, { useState } from "react";
-import { Search } from "lucide-react";
+"use client";
+
+import React, { useState, useEffect, useRef } from "react";
+import { Search, X, Loader2 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import {
@@ -8,6 +10,9 @@ import {
  DialogHeader,
  DialogTitle,
 } from "@/components/ui/dialog";
+import { useRouter } from "next/navigation";
+import { useSearchProducts } from "@/features/search/hooks/useSearch";
+import Image from "next/image";

 interface SearchBarProps {
  isMobile: boolean;
@@ -15,6 +20,7 @@ interface SearchBarProps {
  isOpen?: boolean;
  onClose?: () => void;
  className?: string;
+  locale?: string;
 }

 export default function SearchBar({
@@ -23,12 +29,89 @@ export default function SearchBar({
  isOpen,
  onClose,
  className = "",
+  locale = "ru",
 }: SearchBarProps) {
+  const router = useRouter();
  const [searchValue, setSearchValue] = useState("");
+  const [debouncedSearch, setDebouncedSearch] = useState("");
+  const [showResults, setShowResults] = useState(false);
+  const searchRef = useRef<HTMLDivElement>(null);
+
+  const { data, isLoading } = useSearchProducts({ q: debouncedSearch });
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedSearch(searchValue);
+    }, 300);
+
+    return () => clearTimeout(timer);
+  }, [searchValue]);
+
+  useEffect(() => {
+    if (debouncedSearch && data?.data && data.data.length > 0) {
+      setShowResults(true);
+    } else {
+      setShowResults(false);
+    }
+  }, [debouncedSearch, data]);
+
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (searchRef.current && !searchRef.current.contains(e.target as Node)) {
+        setShowResults(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);

  const handleSearch = (value: string) => {
    setSearchValue(value);
-    // Here you can add search logic or API call
+  };
+
+  const handleProductClick = (productId: number) => {
+    router.push(`/${locale}/product/${productId}`);
+    setSearchValue("");
+    setShowResults(false);
+    if (onClose) onClose();
+  };
+
+  const handleClearSearch = () => {
+    setSearchValue("");
+    setShowResults(false);
+  };
+
+  const SearchResults = () => {
+    if (!showResults || !data?.data) return null;
+
+    return (
+      <div className="absolute top-full left-0 right-0 mt-2 bg-white border rounded-xl shadow-lg max-h-[400px] overflow-y-auto z-50">
+        {data.data.map((product) => (
+          <button
+            key={product.id}
+            onClick={() => handleProductClick(product.id)}
+            className="w-full flex items-center gap-3 p-3 hover:bg-gray-50 transition-colors border-b last:border-b-0"
+          >
+            <div className="relative w-16 h-16 flex-shrink-0">
+              <Image
+                src={product.thumbnail}
+                alt={product.name}
+                fill
+                className="object-cover rounded-lg"
+              />
+            </div>
+            <div className="flex-1 text-left">
+              <p className="font-medium text-sm line-clamp-2">{product.name}</p>
+              <p className="text-sm text-gray-600 mt-1">
+                {product.price_amount} TMT
+              </p>
+              <p className="text-xs text-gray-500">{product.brand.name}</p>
+            </div>
+          </button>
+        ))}
+      </div>
+    );
  };

  if (isMobile) {
@@ -38,15 +121,19 @@ export default function SearchBar({
          <DialogHeader>
            <DialogTitle>{searchPlaceholder}</DialogTitle>
          </DialogHeader>
-          <div className="relative">
+          <div className="relative" ref={searchRef}>
            <Input
-              type="search"
+              type="text"
              placeholder={searchPlaceholder}
              value={searchValue}
              onChange={(e) => handleSearch(e.target.value)}
              className="h-10 rounded-xl focus:border-[#005bff] focus-visible:border-[#005bff] focus-visible:ring-0 active:border-[#005bff]"
              autoFocus
            />
+            {isLoading && (
+              <Loader2 className="absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 animate-spin text-gray-400" />
+            )}
+            <SearchResults />
          </div>
        </DialogContent>
      </Dialog>
@@ -54,15 +141,18 @@ export default function SearchBar({
  }

  return (
-    <div className={`bg-[#005bff] rounded-xl ${className}`}>
-      <div className="w-full">
+    <div className={`bg-[#005bff] rounded-xl flex items-center relative ${className}`} ref={searchRef}>
+      <div className="w-full relative">
        <Input
-          type="search"
+          type="text"
          placeholder={searchPlaceholder}
          value={searchValue}
          onChange={(e) => handleSearch(e.target.value)}
          className="border-[#005bff] w-full rounded-xl border-2 focus-visible:ring-0 bg-white px-2"
        />
+        {isLoading && (
+          <Loader2 className="absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 animate-spin text-gray-400" />
+        )}
      </div>
      <Button
        size="icon"
@@ -70,6 +160,7 @@ export default function SearchBar({
      >
        <Search className="h-5 w-5" />
      </Button>
+      <SearchResults />
    </div>
  );
 }