summaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/app/profile/[username]/page.tsx2
-rw-r--r--src/components/settings/AboutMe.tsx58
-rw-r--r--src/components/settings/ProfilePage.tsx33
-rw-r--r--src/lib/api/ChangeDescription.tsx45
4 files changed, 92 insertions, 46 deletions
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);
- 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]">
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 },
+ };
+ }
+};