98 lines
2.9 KiB
TypeScript
98 lines
2.9 KiB
TypeScript
import { App, Empty, Input, Spin } from 'antd';
|
|
import { useEffect, useState } from 'react';
|
|
import { useSearchParams } from 'react-router-dom';
|
|
import { spacing } from '@/design/tokens/spacing';
|
|
import { usersApi } from '@/services/usersApi';
|
|
import type { UserDetails } from '@/types/user';
|
|
import UserInfoCard from '@/pages/Profile/UserInfoCard';
|
|
import StatCardsRow from '@/pages/Profile/StatCards';
|
|
import ProfileTabs from '@/pages/Profile/ProfileTabs';
|
|
|
|
type SearchStatus = 'idle' | 'loading' | 'error' | 'success';
|
|
|
|
interface FetchResult {
|
|
uuid: string;
|
|
status: 'success' | 'error';
|
|
user: UserDetails | null;
|
|
}
|
|
|
|
const UUID_PARAM = 'uuid';
|
|
|
|
const Profile = () => {
|
|
const { message } = App.useApp();
|
|
const [searchParams, setSearchParams] = useSearchParams();
|
|
const uuid = searchParams.get(UUID_PARAM) ?? '';
|
|
const [result, setResult] = useState<FetchResult | null>(null);
|
|
|
|
const handleSearch = (value: string) => {
|
|
const trimmed = value.trim();
|
|
|
|
if (!trimmed) {
|
|
message.warning('شناسه (UUID) کاربر را وارد کنید');
|
|
return;
|
|
}
|
|
|
|
setSearchParams({ [UUID_PARAM]: trimmed });
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (!uuid) {
|
|
return;
|
|
}
|
|
|
|
usersApi
|
|
.getUserDetails(uuid)
|
|
.then((details) => {
|
|
setResult({ uuid, status: 'success', user: details });
|
|
})
|
|
.catch(() => {
|
|
setResult({ uuid, status: 'error', user: null });
|
|
message.error('کاربری با این شناسه یافت نشد');
|
|
});
|
|
}, [uuid, message]);
|
|
|
|
const isCurrent = result?.uuid === uuid;
|
|
const status: SearchStatus = !uuid ? 'idle' : isCurrent ? result.status : 'loading';
|
|
const user = isCurrent ? result.user : null;
|
|
|
|
return (
|
|
<div>
|
|
<div style={{ marginBottom: spacing.md }}>
|
|
<Input.Search
|
|
placeholder="جستجو بر اساس شناسه (UUID) کاربر"
|
|
defaultValue={uuid}
|
|
onSearch={handleSearch}
|
|
enterButton="جستجو"
|
|
size="large"
|
|
loading={status === 'loading'}
|
|
style={{ maxWidth: 480 }}
|
|
/>
|
|
</div>
|
|
|
|
{status === 'idle' && (
|
|
<Empty description="برای مشاهده اطلاعات، شناسه (UUID) کاربر را جستجو کنید" style={{ padding: spacing.xl }} />
|
|
)}
|
|
|
|
{status === 'loading' && (
|
|
<div style={{ display: 'flex', justifyContent: 'center', padding: spacing.xl }}>
|
|
<Spin size="large" />
|
|
</div>
|
|
)}
|
|
|
|
{status === 'error' && <Empty description="کاربری با این شناسه یافت نشد" style={{ padding: spacing.xl }} />}
|
|
|
|
{status === 'success' && user && (
|
|
<>
|
|
<div style={{ display: 'flex', flexWrap: 'wrap', gap: spacing.md }}>
|
|
<UserInfoCard user={user} />
|
|
<StatCardsRow />
|
|
</div>
|
|
|
|
<ProfileTabs style={{ marginTop: spacing.lg }} />
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Profile;
|