added debounce to - + buttons

features/profile/components/client-page.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useCallback, useMemo } from "react";
 import { LogOut } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -8,6 +9,7 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/com
 import { Skeleton } from "@/components/ui/skeleton";
 import { useUserProfile } from "@/lib/hooks";
 import { clearAuthToken } from "@/lib/api";
+import { useTranslations } from "next-intl";
 
 interface ProfilePageProps {
   params: Promise<{ locale: string }>;
@@ -15,48 +17,37 @@ interface ProfilePageProps {
 
 export default function ClientProfilePage(props: ProfilePageProps) {
   const { data: user, isLoading, error } = useUserProfile();
+  const t = useTranslations();
 
-  const translations = {
-    profile: "Профиль",
-    personalInfo: "Личная информация",
-    profileDescription: "Ваши данные профиля",
-    firstName: "Имя",
-    lastName: "Фамилия",
-    phone: "Номер телефона",
-    address: "Адрес",
-    logout: "Выйти",
-    loading: "Загрузка...",
-    errorLoading: "Не удалось загрузить профиль",
-    tryAgain: "Попробовать снова",
-  };
-
-  const handleLogout = () => {
+  const handleLogout = useCallback(() => {
     clearAuthToken();
     window.location.href = "/";
-  };
+  }, []);
+
+  const loadingSkeleton = useMemo(() => (
+    <div className="min-h-screen bg-gray-50 p-4 pt-20">
+      <div className="container mx-auto max-w-2xl">
+        <Skeleton className="h-10 w-48 mb-6" />
+        <Card className="shadow-lg mb-4">
+          <CardHeader>
+            <Skeleton className="h-6 w-32 mb-2" />
+            <Skeleton className="h-4 w-48" />
+          </CardHeader>
+          <CardContent className="space-y-4">
+            {[1, 2, 3, 4].map((i) => (
+              <div key={i} className="space-y-2">
+                <Skeleton className="h-4 w-24" />
+                <Skeleton className="h-10 w-full" />
+              </div>
+            ))}
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  ), []);
 
   if (isLoading) {
-    return (
-      <div className="min-h-screen bg-gray-50 p-4 pt-20">
-        <div className="container mx-auto max-w-2xl">
-          <Skeleton className="h-10 w-48 mb-6" />
-          <Card className="shadow-lg mb-4">
-            <CardHeader>
-              <Skeleton className="h-6 w-32 mb-2" />
-              <Skeleton className="h-4 w-48" />
-            </CardHeader>
-            <CardContent className="space-y-4">
-              {[1, 2, 3, 4].map((i) => (
-                <div key={i} className="space-y-2">
-                  <Skeleton className="h-4 w-24" />
-                  <Skeleton className="h-10 w-full" />
-                </div>
-              ))}
-            </CardContent>
-          </Card>
-        </div>
-      </div>
-    );
+    return loadingSkeleton;
   }
 
   if (error) {
@@ -64,8 +55,8 @@ export default function ClientProfilePage(props: ProfilePageProps) {
       <div className="min-h-screen bg-gray-50 flex items-center justify-center p-4">
         <Card className="w-full max-w-md">
           <CardContent className="pt-6 text-center">
-            <p className="text-red-600 mb-4">{translations.errorLoading}</p>
-            <Button onClick={() => window.location.reload()}>{translations.tryAgain}</Button>
+            <p className="text-red-600 mb-4">{t("error_loading_profile")}</p>
+            <Button onClick={() => window.location.reload()}>{t("try_again")}</Button>
           </CardContent>
         </Card>
       </div>
@@ -75,33 +66,33 @@ export default function ClientProfilePage(props: ProfilePageProps) {
   return (
     <div className="min-h-screen bg-gray-50 p-4 pt-20">
       <div className="container mx-auto max-w-2xl">
-        <h1 className="text-3xl font-bold mb-6">{translations.profile}</h1>
+        <h1 className="text-3xl font-bold mb-6">{t("profile")}</h1>
 
         <Card className="shadow-lg mb-4">
           <CardHeader>
-            <CardTitle>{translations.personalInfo}</CardTitle>
-            <CardDescription>{translations.profileDescription}</CardDescription>
+            <CardTitle>{t("personal_info")}</CardTitle>
+            <CardDescription>{t("profile_description")}</CardDescription>
           </CardHeader>
           <CardContent className="space-y-4">
             {user && (
               <>
                 <div className="space-y-2">
-                  <Label htmlFor="firstName">{translations.firstName}</Label>
+                  <Label htmlFor="firstName">{t("first_name")}</Label>
                   <Input id="firstName" value={user.first_name || ""} disabled className="bg-gray-50" />
                 </div>
 
                 <div className="space-y-2">
-                  <Label htmlFor="lastName">{translations.lastName}</Label>
+                  <Label htmlFor="lastName">{t("last_name")}</Label>
                   <Input id="lastName" value={user.last_name || ""} disabled className="bg-gray-50" />
                 </div>
 
                 <div className="space-y-2">
-                  <Label htmlFor="phone">{translations.phone}</Label>
+                  <Label htmlFor="phone">{t("phone_number")}</Label>
                   <Input id="phone" value={user.phone_number || ""} disabled className="bg-gray-50" />
                 </div>
 
                 <div className="space-y-2">
-                  <Label htmlFor="address">{translations.address}</Label>
+                  <Label htmlFor="address">{t("address")}</Label>
                   <Input id="address" value={user.address || ""} disabled className="bg-gray-50" />
                 </div>
               </>
@@ -116,7 +107,7 @@ export default function ClientProfilePage(props: ProfilePageProps) {
           className="w-full max-w-md flex items-center justify-center gap-2"
         >
           <LogOut className="h-5 w-5" />
-          {translations.logout}
+          {t("common.logout")}
         </Button>
       </div>
     </div>

features/profile/components/profile-content.tsx

@@ -1,66 +0,0 @@
-"use client"
-
-import { useState, useEffect } from "react"
-
-interface User {
-  first_name: string
-  last_name: string
-  phone: string
-  email?: string
-}
-
-interface ProfileContentProps {
-  locale: string
-}
-
-export default function ProfilePageContent({ locale }: ProfileContentProps) {
-  const [user, setUser] = useState<User | null>(null)
-  const [loading, setLoading] = useState(true)
-
-  const t = {
-    profile: "Профиль",
-    firstName: "Имя",
-    lastName: "Фамилия",
-    phone: "Номер телефона",
-    email: "Email",
-    logout: "Выйти",
-    loading: "Загрузка...",
-  }
-
-  useEffect(() => {
-    const fetchUserData = () => {
-      setTimeout(() => {
-        setUser({
-          first_name: "Иван",
-          last_name: "Иванов",
-          phone: "+99361234567",
-          email: "ivan@example.com",
-        })
-        setLoading(false)
-      }, 500)
-    }
-
-    fetchUserData()
-  }, [])
-
-  const handleLogout = () => {
-    window.location.href = "/"
-  }
-
-  if (loading) {
-    return (
-      <div className="min-h-screen bg-gray-50 flex items-center justify-center p-4">
-        <p className="text-lg text-gray-600">{t.loading}</p>
-      </div>
-    )
-  }
-
-  return (
-    <div className="min-h-screen bg-gray-50 p-4 pt-20">
-      <div className="container mx-auto max-w-2xl">
-        <h1 className="text-3xl font-bold mb-6">{t.profile}</h1>
-        {/* Profile content */}
-      </div>
-    </div>
-  )
-}