From 50cbca3c307894c9fd55baec522b7b794d9ab805 Mon Sep 17 00:00:00 2001
From: l3wdfut4pwr <l3wdfut4pwr@gmail.com>
Date: Mon, 27 Apr 2026 14:18:18 +0300
Subject: add description change

---
 src/app/profile/[username]/page.tsx     |  2 +-
 src/components/settings/AboutMe.tsx     | 60 +++++++++++++++++++++++----------
 src/components/settings/ProfilePage.tsx | 33 +++---------------
 src/lib/api/ChangeDescription.tsx       | 45 +++++++++++++++++++++++++
 4 files changed, 93 insertions(+), 47 deletions(-)
 create mode 100644 src/lib/api/ChangeDescription.tsx

(limited to 'src')

diff --git a/src/app/profile/[username]/page.tsx b/src/app/profile/[username]/page.tsx
index cb79b7b..7eab697 100644
--- a/src/app/profile/[username]/page.tsx
+++ b/src/app/profile/[username]/page.tsx
@@ -49,7 +49,7 @@ export default async function Profile({ params }: ProfilePageProps) {
                             </p>
                         </div>
                         <div className="flex max-w-[800px] font-regular text-[12px] gap-1.25">
-                            <p>{profileUser.description}</p>
+                            <p>{profileUser.profile?.description}</p>
                         </div>
                         <div className="flex flex-row flex-end gap-1.25">
                             {icons
diff --git a/src/components/settings/AboutMe.tsx b/src/components/settings/AboutMe.tsx
index 769885a..bcb6f58 100644
--- a/src/components/settings/AboutMe.tsx
+++ b/src/components/settings/AboutMe.tsx
@@ -1,38 +1,62 @@
 import { useState } from 'react';
-import { ChangeEvent } from 'react';
-import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
+import { changeDescription } from '@/lib/api/ChangeDescription';
+
 export default function AboutMe() {
     const maxLength = 250;
-    const [text, setText] = useState('');
 
-    const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
-        const value = e.target.value;
+    const [about, setAbout] = useState('');
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+
+    const handleSave = async () => {
+        if (loading) return;
+
+        setLoading(true);
+        setError(null);
+
+        const res = await changeDescription(about);
 
-        if (value.length <= maxLength) {
-            setText(value);
+        if (res.error) {
+            setError(res.error.general);
         }
+
+        setLoading(false);
     };
 
     return (
         <div className="flex flex-col flex-start gap-[10px] w-[600px] h-[284px]">
-            <p className="font-medium text-light-violet gap-[10px] ml-[20px]">
-                ОБО МНЕ
-            </p>
-
-            <div className="flex flex-row flex-end p-[20px] w-[600px] h-[120px] border-solid border-[1px] rounded-[20px]">
-                <Input
-                    value={text}
-                    onChange={handleChange}
+            <p className="font-medium text-light-violet ml-[20px]">ОБО МНЕ</p>
+
+            <div className="flex flex-row p-[20px] w-[600px] h-[120px] border-solid border-[1px] rounded-[20px]">
+                <textarea
+                    value={about}
+                    onChange={(e) => setAbout(e.target.value)}
+                    maxLength={maxLength}
                     placeholder="Введите описание о себе"
+                    className="w-full h-full resize-none outline-none bg-transparent"
                 />
 
-                <p className="font-regular flex flex-row justify-center items-end ml-[10px] text-light-violet">
-                    {maxLength - text.length}
+                <p
+                    className={`ml-[10px] flex items-end ${
+                        maxLength - about.length <= 10
+                            ? 'text-red'
+                            : 'text-light-violet'
+                    }`}
+                >
+                    {maxLength - about.length}
                 </p>
             </div>
 
-            <Button className="w-[105px]">Сменить</Button>
+            {error && <p className="text-red text-sm ml-[20px]">{error}</p>}
+
+            <Button
+                className="w-[105px]"
+                onClick={handleSave}
+                disabled={loading}
+            >
+                {loading ? 'Сохранение...' : 'Сменить'}
+            </Button>
         </div>
     );
 }
diff --git a/src/components/settings/ProfilePage.tsx b/src/components/settings/ProfilePage.tsx
index 75370d2..1bb2f8d 100644
--- a/src/components/settings/ProfilePage.tsx
+++ b/src/components/settings/ProfilePage.tsx
@@ -3,6 +3,7 @@ import { Button } from '@/components/ui';
 import { Separator } from '@/components/ui';
 import { changeUsername } from './changeusername';
 import { useState } from 'react';
+import AboutMe from './AboutMe';
 export default function ProfilePage() {
     const maxLength = 250;
     const [about, setAbout] = useState('');
@@ -11,7 +12,9 @@ export default function ProfilePage() {
     return (
         <div className="flex flex-col flex-start gap-[20px] w-[900px] h-[804px]">
             <div className="flex flex-col flex-start gap-[10px] w-[310px] h-[123px]">
-                <p className="font-medium gap-[10px] ml-[20px]">НИКНЕЙМ</p>
+                <p className="font-medium text-light-violet gap-[10px] ml-[20px]">
+                    НИКНЕЙМ
+                </p>
 
                 <InputField
                     placeholder="Введите никнейм"
@@ -28,33 +31,7 @@ export default function ProfilePage() {
                 </Button>
             </div>
             <Separator className="bg-violet/50 h-[1px]" />
-            <div className="flex flex-col flex-start gap-[10px] w-[600px] h-[284px]">
-                <p className="font-medium text-light-violet gap-[10px] ml-[20px]">
-                    ОБО МНЕ
-                </p>
-
-                <div className="flex flex-row p-[20px] w-[600px] h-[120px] border-solid border-[1px] rounded-[20px]">
-                    <textarea
-                        value={about}
-                        onChange={(e) => setAbout(e.target.value)}
-                        maxLength={maxLength}
-                        placeholder="Введите описание о себе"
-                        className="w-full h-full resize-none outline-none bg-transparent"
-                    />
-
-                    <p
-                        className={`ml-[10px] flex items-end ${
-                            maxLength - about.length <= 10
-                                ? 'text-red'
-                                : 'text-light-violet'
-                        }`}
-                    >
-                        {maxLength - about.length}
-                    </p>
-                </div>
-
-                <Button className="w-[105px]">Сменить</Button>
-            </div>{' '}
+            <AboutMe />
             <Separator className="bg-violet/50 h-[1px]" />
             <div className="flex flex-col flex-start gap-[10px] w-[219px] h-[74px]">
                 <p className="font-medium text-light-violet ml-[20px]">
diff --git a/src/lib/api/ChangeDescription.tsx b/src/lib/api/ChangeDescription.tsx
new file mode 100644
index 0000000..e0b760a
--- /dev/null
+++ b/src/lib/api/ChangeDescription.tsx
@@ -0,0 +1,45 @@
+const API_URL = process.env.NEXT_PUBLIC_API_URL;
+
+export const changeDescription = async (description: string) => {
+    try {
+        const res = await fetch(`${API_URL}/api/users/description`, {
+            method: 'PATCH',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({ description }),
+            credentials: 'include',
+        });
+
+        if (!res.ok) {
+            let errorData: any = null;
+
+            try {
+                errorData = await res.json();
+            } catch {}
+
+            const detail = errorData?.detail;
+
+            return {
+                data: null,
+                error: {
+                    general: Array.isArray(detail)
+                        ? detail[0]?.msg
+                        : detail?.msg || 'Ошибка изменения описания',
+                },
+            };
+        }
+
+        const data = await res.json();
+
+        return {
+            data,
+            error: null,
+        };
+    } catch (err: any) {
+        return {
+            data: null,
+            error: { general: err.message },
+        };
+    }
+};
-- 
cgit v1.3-3-g829e