fixed some ui, refactored code

2025-12-13 00:05:43 +05:00
parent 5085c0cffd
commit 633a3c9d47
30 changed files with 1274 additions and 923 deletions
--- a/components/icons.tsx
+++ b/components/icons.tsx
@@ -2,7 +2,6 @@ export const FavoriteIcon = () => (
  <svg
    fill="gray"
    aria-hidden="true"
-    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium mui-1sekacc"
    data-testid="FavoriteBorderIcon"
    viewBox="0 0 24 24"
  >
@@ -13,7 +12,7 @@ export const OrderIcon = () => (
  <svg
    fill="gray"
    aria-hidden="true"
-    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium mui-1sekacc"
+
    data-testid="LocalShippingIcon"
    viewBox="0 0 24 24"
  >
@@ -24,7 +23,7 @@ export const CartIcon = () => (
  <svg
    fill="gray"
    aria-hidden="true"
-    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium mui-1sekacc"
+   
    data-testid="ShoppingBasketIcon"
    viewBox="0 0 24 24"
  >
@@ -35,7 +34,7 @@ export const CategoryIcon = () => (
  <svg
    fill="white"
    aria-hidden="true"
-    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium mui-nfmerv"
+ 
    data-testid="WidgetsIcon"
    viewBox="0 0 24 24"
  >
@@ -46,7 +45,7 @@ export const SearchIcon = () => (
  <svg
    fill="white"
    aria-hidden="true"
-    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium mui-1sekacc"
+   
    data-testid="SearchIcon"
    viewBox="0 0 20 20"
  >
@@ -57,7 +56,7 @@ export const ProfileIcon = () => (
  <svg
    fill="gray"
    aria-hidden="true"
-    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium mui-1sekacc"
+   
    data-testid="FaceIcon"
    viewBox="0 0 24 24"
  >
--- a/components/layout/Header.tsx
+++ b/components/layout/Header.tsx
@@ -11,9 +11,11 @@ import SearchBar from "./ui/SearchBar";
 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 { useTranslations } from "next-intl";
 import { CategoryIcon } from "../icons";
+import { useRouter } from "next/navigation";

 interface HeaderProps {
  locale?: string;
@@ -25,6 +27,7 @@ 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();
@@ -53,6 +56,10 @@ export default function Header({ locale = "ru" }: HeaderProps) {
    setIsCategoryOpen(false);
  }, []);

+  const handleProfileClick = useCallback(() => {
+    router.push(`/${locale}/me`);
+  }, [router, locale]);
+
  if (!isClient) return null;

  return (
@@ -103,8 +110,6 @@ export default function Header({ locale = "ru" }: HeaderProps) {
              locale={locale}
            />

-       
-
            <ActionButtons
              isAuthenticated={isAuthenticated}
              onAuthClick={handleAuthClick}
@@ -124,6 +129,21 @@ export default function Header({ locale = "ru" }: HeaderProps) {
      />

      <AuthDialog isOpen={isLoginOpen} onClose={() => setIsLoginOpen(false)} />
+
+      <MobileBottomNav
+        locale={locale}
+        isAuthenticated={isAuthenticated}
+        translations={{
+          catalog: t("common.catalog"),
+          favorites: t("common.favorites"),
+          orders: t("common.orders"),
+          cart: t("common.cart"),
+          login: t("common.login"),
+          profile: t("profile"),
+        }}
+        onLoginClick={() => setIsLoginOpen(true)}
+        onProfileClick={handleProfileClick}
+      />
    </>
  );
 }
--- a/components/layout/MobileBar.tsx
+++ b/components/layout/MobileBar.tsx
@@ -1,26 +1,32 @@
-"use client"
-
-import { useState, useEffect } from "react"
-import Link from "next/link"
-import { Menu, Heart, Truck, ShoppingCart, User } from "lucide-react"
-import { Button } from "@/components/ui/button"
-import { Badge } from "@/components/ui/badge"
-import { Sheet, SheetContent, SheetHeader, SheetTitle } from "@/components/ui/sheet"
-import { ScrollArea } from "@/components/ui/scroll-area"
-import { useCategories, useCart, useFavorites, useOrders } from "@/lib/hooks"
+"use client";

+import { useState, useEffect } from "react";
+import Link from "next/link";
+import { Menu, Heart, Truck, ShoppingCart, User } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/ui/sheet";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { useCategories, useCart, useFavorites, useOrders } from "@/lib/hooks";
+import { useRouter } from "next/navigation";
 interface MobileBottomNavProps {
-  locale?: string
-  isAuthenticated?: boolean
+  locale?: string;
+  isAuthenticated?: boolean;
  translations?: {
-    catalog: string
-    favorites: string
-    orders: string
-    cart: string
-    login: string
-    profile: string
-  }
-  onLoginClick?: () => void
+    catalog: string;
+    favorites: string;
+    orders: string;
+    cart: string;
+    login: string;
+    profile: string;
+  };
+  onLoginClick?: () => void;
+  onProfileClick?: () => void;
 }

 export default function MobileBottomNav({
@@ -28,15 +34,16 @@ export default function MobileBottomNav({
  isAuthenticated = false,
  translations,
  onLoginClick,
+  onProfileClick, // EKLENEN
 }: MobileBottomNavProps) {
-  const [isClient, setIsClient] = useState(false)
-  const [isCategoryOpen, setIsCategoryOpen] = useState(false)
-
-  const { data: categories = [] } = useCategories()
-  const { data: cartData } = useCart()
-  const { data: favoritesData } = useFavorites()
-  const { data: ordersData } = useOrders()
+  const [isClient, setIsClient] = useState(false);
+  const [isCategoryOpen, setIsCategoryOpen] = useState(false);

+  const { data: categories = [] } = useCategories();
+  const { data: cartData } = useCart();
+  const { data: favoritesData } = useFavorites();
+  const { data: ordersData } = useOrders();
+  const router = useRouter();
  const t = translations || {
    catalog: "Каталог",
    favorites: "Избранное",
@@ -44,21 +51,26 @@ export default function MobileBottomNav({
    cart: "Корзина",
    login: "Войти",
    profile: "Профиль",
-  }
+  };

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

  const handleAuthClick = () => {
    if (isAuthenticated) {
-      window.location.href = `/${locale}/me`
+      if (onProfileClick) {
+        onProfileClick();
+      } else {
+        router.push(`/${locale}/me`);
+        console.log("hello");
+      }
    } else if (onLoginClick) {
-      onLoginClick()
+      onLoginClick();
    }
-  }
+  };

-  if (!isClient) return null
+  if (!isClient) return null;

  return (
    <>
@@ -78,7 +90,11 @@ export default function MobileBottomNav({

          {/* Favorites Button */}
          <Link href="/favorites">
-            <Button variant="ghost" size="sm" className="relative flex-col gap-0.5 h-auto px-2 py-2">
+            <Button
+              variant="ghost"
+              size="sm"
+              className="relative flex-col gap-0.5 h-auto px-2 py-2"
+            >
              <div className="relative">
                <Heart className="h-5 w-5 text-gray-600" />
                <Badge
@@ -94,7 +110,11 @@ export default function MobileBottomNav({

          {/* Orders Button */}
          <Link href="/orders">
-            <Button variant="ghost" size="sm" className="relative flex-col gap-0.5 h-auto px-2 py-2">
+            <Button
+              variant="ghost"
+              size="sm"
+              className="relative flex-col gap-0.5 h-auto px-2 py-2"
+            >
              <div className="relative">
                <Truck className="h-5 w-5 text-gray-600" />
                <Badge
@@ -110,25 +130,46 @@ export default function MobileBottomNav({

          {/* Cart Button */}
          <Link href="/cart">
-            <Button variant="ghost" size="sm" className="relative flex-col gap-0.5 h-auto px-2 py-2">
+            <Button
+              variant="ghost"
+              size="sm"
+              className="relative flex-col gap-0.5 h-auto px-2 py-2"
+            >
              <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?.count || 0}
+                  {cartData?.data?.length || 0}
                </Badge>
              </div>
              <span className="text-xs text-gray-700">{t.cart}</span>
            </Button>
          </Link>

-          {/* Profile/Login Button */}
-          <Button variant="ghost" size="sm" className="flex-col gap-0.5 h-auto px-2 py-2" onClick={handleAuthClick}>
-            <User className="h-5 w-5 text-gray-600" />
-            <span className="text-xs text-gray-700">{isAuthenticated ? t.profile : t.login}</span>
-          </Button>
+          {isAuthenticated ? (
+            <Link href={`/${locale}/me`}>
+              <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>
+            </Link>
+          ) : (
+            <Button
+              variant="ghost"
+              size="sm"
+              className="flex-col gap-0.5 h-auto px-2 py-2"
+              onClick={onLoginClick}
+            >
+              <User className="h-5 w-5 text-gray-600" />
+              <span className="text-xs text-gray-700">{t.login}</span>
+            </Button>
+          )}
        </div>
      </div>

@@ -147,7 +188,6 @@ export default function MobileBottomNav({
                    onClick={() => setIsCategoryOpen(false)}
                    className="flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-gray-100 transition-colors font-semibold"
                  >
-                    {category.icon_class && <i className={`${category.icon_class} text-xl`}></i>}
                    <span>{category.name}</span>
                  </Link>

@@ -173,5 +213,5 @@ export default function MobileBottomNav({
        </SheetContent>
      </Sheet>
    </>
-  )
+  );
 }
--- a/components/layout/ui/ActionButtons.tsx
+++ b/components/layout/ui/ActionButtons.tsx
@@ -1,5 +1,5 @@
 "use client";
-
+import { useRouter } from "next/navigation";
 import { useMemo } from "react";
 import type React from "react";
 import Link from "next/link";
@@ -47,7 +47,7 @@ export default function ActionButtons({
 }: ActionButtonsProps) {
  const t = useTranslations();
  const { mutate: logout, isPending: isLoggingOut } = useLogout();
-
+  const router = useRouter();
  const { data: cartData, isLoading: cartLoading } = useCart();
  const { data: favoritesData, isLoading: favoritesLoading } = useFavorites();
  const { data: ordersData, isLoading: ordersLoading } = useOrders();
@@ -101,8 +101,7 @@ export default function ActionButtons({
        href: "/cart",
        badgeCount: cartCount,
        isLoading: cartLoading,
-      }
-      
+      },
    ],
    [
      ordersCount,
@@ -133,9 +132,7 @@ export default function ActionButtons({
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end">
-            <DropdownMenuItem
-              onClick={() => (window.location.href = `/${locale}/me`)}
-            >
+            <DropdownMenuItem onClick={() => router.push(`/${locale}/me`)}>
              <User className="mr-2 h-4 w-4" />
              {t("profile")}
            </DropdownMenuItem>
--- a/components/layout/ui/LanguageSelector.tsx
+++ b/components/layout/ui/LanguageSelector.tsx
@@ -2,6 +2,7 @@
 import { useRouter, usePathname } from "next/navigation";
 import Image from "next/image";
 import { useLocale } from "next-intl";
+import { useQueryClient } from "@tanstack/react-query";
 import {
  Select,
  SelectContent,
@@ -26,13 +27,18 @@ const LANGUAGES: Language[] = [
 export default function LanguageSelector() {
  const locale = useLocale();
  const router = useRouter();
-  const pathname = usePathname(); // Şu anki path'i al
+  const pathname = usePathname();
+  const queryClient = useQueryClient();
+
+  const handleLanguageChange = async (newLocale: string) => {
+    if (typeof window !== "undefined") {
+      (window as any).i18n = { language: newLocale };
+    }
+
+    queryClient.invalidateQueries();

-  const handleLanguageChange = (newLocale: string) => {
-    // Mevcut path'i yeni locale ile değiştir
-    // Örnek: /tm/cart -> /ru/cart
    const currentPath = pathname.replace(`/${locale}`, "");
-    router.push(`/${newLocale}${currentPath}`);
+    router.replace(`/${newLocale}${currentPath}`);
  };

  return (