add description change

2 files changed, 46 insertions, 45 deletions

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);
 
-        if (value.length <= maxLength) {
-            setText(value);
+        const res = await changeDescription(about);
+
+        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>
+            <p className="font-medium text-light-violet 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}
+            <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]">