refact: UsersIdPage -> UserPage
This commit is contained in:
parent
9338c65040
commit
98178731b9
GPG key ID:
0251623741027CFC
4 changed files with 187 additions and 355 deletions
|
|
@ -1,13 +1,12 @@
|
|||
import React from "react";
|
||||
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
|
||||
import UsersIdPage from "./pages/UsersIdPage/UsersIdPage";
|
||||
import UserPage from "./pages/UserPage/UserPage";
|
||||
import TitlesPage from "./pages/TitlesPage/TitlesPage";
|
||||
import TitlePage from "./pages/TitlePage/TitlePage";
|
||||
import { LoginPage } from "./pages/LoginPage/LoginPage";
|
||||
import { Header } from "./components/Header/Header";
|
||||
|
||||
const App: React.FC = () => {
|
||||
// Получаем username из localStorage
|
||||
const username = localStorage.getItem("username") || undefined;
|
||||
const userId = localStorage.getItem("userId");
|
||||
|
||||
|
|
@ -15,17 +14,20 @@ const App: React.FC = () => {
|
|||
<Router>
|
||||
<Header username={username} />
|
||||
<Routes>
|
||||
{/* auth */}
|
||||
<Route path="/login" element={<LoginPage />} />
|
||||
<Route path="/signup" element={<LoginPage />} />
|
||||
{/*<Route path="/signup" element={<LoginPage />} />*/}
|
||||
|
||||
{/* /profile рендерит UsersIdPage с id из localStorage */}
|
||||
{/* users */}
|
||||
{/*<Route path="/users" element={<UsersPage />} />*/}
|
||||
<Route path="/users/:id" element={<UserPage />} />
|
||||
<Route
|
||||
path="/profile"
|
||||
element={userId ? <UsersIdPage userId={userId} /> : <LoginPage />}
|
||||
element={userId ? <UserPage userId={userId} /> : <LoginPage />}
|
||||
/>
|
||||
|
||||
<Route path="/users/:id" element={<UsersIdPage />} />
|
||||
|
||||
{/* titles */}
|
||||
<Route path="/titles" element={<TitlesPage />} />
|
||||
<Route path="/titles/:id" element={<TitlePage />} />
|
||||
</Routes>
|
||||
|
|
|
|||
|
|
@ -1,103 +0,0 @@
|
|||
body,
|
||||
html {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
background-color: #777;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
#root {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.header {
|
||||
width: 100vw;
|
||||
padding: 30px 40px;
|
||||
background: #f7f7f7;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 25px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.avatarWrapper {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
min-width: 120px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #ddd;
|
||||
}
|
||||
|
||||
.avatarImg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.avatarPlaceholder {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
background: #ccc;
|
||||
font-size: 42px;
|
||||
font-weight: bold;
|
||||
color: #555;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.userInfo {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.nickname {
|
||||
font-size: 18px;
|
||||
color: #666;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 100vw;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 0%;
|
||||
/* margin: 25px auto; */
|
||||
/* padding: 0 20px; */
|
||||
}
|
||||
|
||||
.content {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.desc {
|
||||
font-size: 18px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.created {
|
||||
font-size: 16px;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.loader,
|
||||
.error {
|
||||
text-align: center;
|
||||
margin-top: 40px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
|
@ -1,67 +1,183 @@
|
|||
import React, { useEffect, useState } from "react";
|
||||
import { useParams } from "react-router-dom"; // <-- import
|
||||
// pages/UserPage/UserPage.tsx
|
||||
import { useEffect, useState } from "react";
|
||||
import { useParams } from "react-router-dom";
|
||||
import { DefaultService } from "../../api/services/DefaultService";
|
||||
import type { User } from "../../api/models/User";
|
||||
import styles from "./UserPage.module.css";
|
||||
import { SearchBar } from "../../components/SearchBar/SearchBar";
|
||||
import { TitlesSortBox } from "../../components/TitlesSortBox/TitlesSortBox";
|
||||
import { LayoutSwitch } from "../../components/LayoutSwitch/LayoutSwitch";
|
||||
import { ListView } from "../../components/ListView/ListView";
|
||||
import { UserTitleCardSquare } from "../../components/cards/UserTitleCardSquare";
|
||||
import { UserTitleCardHorizontal } from "../../components/cards/UserTitleCardHorizontal";
|
||||
import type { User, UserTitle, CursorObj, TitleSort } from "../../api";
|
||||
|
||||
const PAGE_SIZE = 10;
|
||||
|
||||
type UserPageProps = {
|
||||
userId?: string;
|
||||
};
|
||||
|
||||
export default function UserPage({ userId }: UserPageProps) {
|
||||
const params = useParams();
|
||||
const id = userId || params?.id;
|
||||
|
||||
const UserPage: React.FC = () => {
|
||||
const { id } = useParams<{ id: string }>(); // <-- get user id from URL
|
||||
const [user, setUser] = useState<User | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [loadingUser, setLoadingUser] = useState(true);
|
||||
const [errorUser, setErrorUser] = useState<string | null>(null);
|
||||
|
||||
// Для списка тайтлов
|
||||
const [titles, setTitles] = useState<UserTitle[]>([]);
|
||||
const [nextPage, setNextPage] = useState<UserTitle[]>([]);
|
||||
const [cursor, setCursor] = useState<CursorObj | null>(null);
|
||||
const [loadingTitles, setLoadingTitles] = useState(true);
|
||||
const [loadingMore, setLoadingMore] = useState(false);
|
||||
const [search, setSearch] = useState("");
|
||||
const [sort, setSort] = useState<TitleSort>("id");
|
||||
const [sortForward, setSortForward] = useState(true);
|
||||
const [layout, setLayout] = useState<"square" | "horizontal">("square");
|
||||
|
||||
// --- Получение данных пользователя ---
|
||||
useEffect(() => {
|
||||
const fetchUser = async () => {
|
||||
if (!id) return;
|
||||
|
||||
const getUserInfo = async () => {
|
||||
setLoadingUser(true);
|
||||
try {
|
||||
const userInfo = await DefaultService.getUsersId(id, "all"); // <-- use dynamic id
|
||||
setUser(userInfo);
|
||||
} catch (err) {
|
||||
const result = await DefaultService.getUsersId(id, "all");
|
||||
setUser(result);
|
||||
setErrorUser(null);
|
||||
} catch (err: any) {
|
||||
console.error(err);
|
||||
setError("Failed to fetch user info.");
|
||||
setErrorUser(err?.message || "Failed to fetch user data");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
setLoadingUser(false);
|
||||
}
|
||||
};
|
||||
getUserInfo();
|
||||
fetchUser();
|
||||
}, [id]);
|
||||
|
||||
if (loading) return <div className={styles.loader}>Loading...</div>;
|
||||
if (error) return <div className={styles.error}>{error}</div>;
|
||||
if (!user) return <div className={styles.error}>User not found.</div>;
|
||||
// --- Получение списка тайтлов пользователя ---
|
||||
const fetchPage = async (cursorObj: CursorObj | null) => {
|
||||
if (!id) return { items: [], nextCursor: null };
|
||||
const cursorStr = cursorObj
|
||||
? btoa(JSON.stringify(cursorObj)).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "")
|
||||
: "";
|
||||
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<div className={styles.header}>
|
||||
<div className={styles.avatarWrapper}>
|
||||
{user.image?.image_path ? (
|
||||
<img
|
||||
src={`/images/${user.image.image_path}.png`}
|
||||
alt="User Avatar"
|
||||
className={styles.avatarImg}
|
||||
/>
|
||||
) : (
|
||||
<div className={styles.avatarPlaceholder}>
|
||||
{user.disp_name?.[0] || "U"}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className={styles.userInfo}>
|
||||
<h1 className={styles.name}>{user.disp_name || user.nickname}</h1>
|
||||
<p className={styles.nickname}>@{user.nickname}</p>
|
||||
{/* <p className={styles.created}>
|
||||
Joined: {new Date(user.creation_date).toLocaleDateString()}
|
||||
</p> */}
|
||||
</div>
|
||||
|
||||
<div className={styles.content}>
|
||||
{user.user_desc && <p className={styles.desc}>{user.user_desc}</p>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
try {
|
||||
const result = await DefaultService.getUsersTitles(
|
||||
id,
|
||||
cursorStr,
|
||||
sort,
|
||||
sortForward,
|
||||
search.trim() || undefined,
|
||||
undefined, // status фильтр, можно добавить
|
||||
undefined, // watchStatus
|
||||
undefined, // rating
|
||||
undefined, // myRate
|
||||
undefined, // releaseYear
|
||||
undefined, // releaseSeason
|
||||
PAGE_SIZE,
|
||||
"all"
|
||||
);
|
||||
|
||||
if (!result?.data?.length) return { items: [], nextCursor: null };
|
||||
|
||||
return { items: result.data, nextCursor: result.cursor ?? null };
|
||||
} catch (err: any) {
|
||||
if (err.status === 204) return { items: [], nextCursor: null };
|
||||
throw err;
|
||||
}
|
||||
};
|
||||
|
||||
export default UserPage;
|
||||
// Инициализация: загружаем сразу две страницы
|
||||
useEffect(() => {
|
||||
const initLoad = async () => {
|
||||
setLoadingTitles(true);
|
||||
setTitles([]);
|
||||
setNextPage([]);
|
||||
setCursor(null);
|
||||
|
||||
const firstPage = await fetchPage(null);
|
||||
const secondPage = firstPage.nextCursor ? await fetchPage(firstPage.nextCursor) : { items: [], nextCursor: null };
|
||||
|
||||
setTitles(firstPage.items);
|
||||
setNextPage(secondPage.items);
|
||||
setCursor(secondPage.nextCursor);
|
||||
setLoadingTitles(false);
|
||||
};
|
||||
initLoad();
|
||||
}, [id, search, sort, sortForward]);
|
||||
|
||||
const handleLoadMore = async () => {
|
||||
if (nextPage.length === 0) {
|
||||
setLoadingMore(false);
|
||||
return;
|
||||
}
|
||||
setLoadingMore(true);
|
||||
|
||||
setTitles(prev => [...prev, ...nextPage]);
|
||||
setNextPage([]);
|
||||
|
||||
if (cursor) {
|
||||
try {
|
||||
const next = await fetchPage(cursor);
|
||||
if (next.items.length > 0) setNextPage(next.items);
|
||||
setCursor(next.nextCursor);
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
}
|
||||
|
||||
setLoadingMore(false);
|
||||
};
|
||||
|
||||
// const getAvatarUrl = (avatarId?: number) => (avatarId ? `/api/images/${avatarId}` : "/default-avatar.png");
|
||||
|
||||
return (
|
||||
<div className="w-full min-h-screen bg-gray-50 p-6 flex flex-col items-center">
|
||||
|
||||
{/* --- Карточка пользователя --- */}
|
||||
{loadingUser && <div className="mt-10 text-xl font-medium">Loading user...</div>}
|
||||
{errorUser && <div className="mt-10 text-red-600 font-medium">{errorUser}</div>}
|
||||
{user && (
|
||||
<div className="bg-white shadow-lg rounded-xl p-6 w-full max-w-sm flex flex-col items-center mb-8">
|
||||
<img src={user.image?.image_path} alt={user.nickname} className="w-32 h-32 rounded-full object-cover mb-4" />
|
||||
<h2 className="text-2xl font-bold mb-2">{user.disp_name || user.nickname}</h2>
|
||||
{user.mail && <p className="text-gray-600 mb-2">{user.mail}</p>}
|
||||
{user.user_desc && <p className="text-gray-700 text-center">{user.user_desc}</p>}
|
||||
{user.creation_date && <p className="text-gray-400 mt-4 text-sm">Registered: {new Date(user.creation_date).toLocaleDateString()}</p>}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* --- Панель поиска, сортировки и лейаута --- */}
|
||||
<div className="w-full sm:w-4/5 flex flex-col sm:flex-row gap-4 mb-6 items-center">
|
||||
<SearchBar placeholder="Search titles..." search={search} setSearch={setSearch} />
|
||||
<LayoutSwitch layout={layout} setLayout={setLayout} />
|
||||
<TitlesSortBox sort={sort} setSort={setSort} sortForward={sortForward} setSortForward={setSortForward} />
|
||||
</div>
|
||||
|
||||
{/* --- Список тайтлов --- */}
|
||||
{loadingTitles && <div className="mt-6 font-medium text-black">Loading titles...</div>}
|
||||
{!loadingTitles && titles.length === 0 && <div className="mt-6 font-medium text-black">No titles found.</div>}
|
||||
|
||||
{titles.length > 0 && (
|
||||
<>
|
||||
<ListView<UserTitle>
|
||||
items={titles}
|
||||
layout={layout}
|
||||
hasMore={!!cursor || nextPage.length > 1}
|
||||
loadingMore={loadingMore}
|
||||
onLoadMore={handleLoadMore}
|
||||
renderItem={(title, layout) =>
|
||||
layout === "square" ? <UserTitleCardSquare title={title} /> : <UserTitleCardHorizontal title={title} />
|
||||
}
|
||||
/>
|
||||
|
||||
{!cursor && nextPage.length === 0 && (
|
||||
<div className="mt-6 font-medium text-black">
|
||||
Результатов больше нет, было найдено {titles.length} тайтлов.
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,183 +0,0 @@
|
|||
// pages/UserPage/UserPage.tsx
|
||||
import { useEffect, useState } from "react";
|
||||
import { useParams } from "react-router-dom";
|
||||
import { DefaultService } from "../../api/services/DefaultService";
|
||||
import { SearchBar } from "../../components/SearchBar/SearchBar";
|
||||
import { TitlesSortBox } from "../../components/TitlesSortBox/TitlesSortBox";
|
||||
import { LayoutSwitch } from "../../components/LayoutSwitch/LayoutSwitch";
|
||||
import { ListView } from "../../components/ListView/ListView";
|
||||
import { UserTitleCardSquare } from "../../components/cards/UserTitleCardSquare";
|
||||
import { UserTitleCardHorizontal } from "../../components/cards/UserTitleCardHorizontal";
|
||||
import type { User, UserTitle, CursorObj, TitleSort } from "../../api";
|
||||
|
||||
const PAGE_SIZE = 10;
|
||||
|
||||
type UsersIdPageProps = {
|
||||
userId?: string;
|
||||
};
|
||||
|
||||
export default function UsersIdPage({ userId }: UsersIdPageProps) {
|
||||
const params = useParams();
|
||||
const id = userId || params?.id;
|
||||
|
||||
const [user, setUser] = useState<User | null>(null);
|
||||
const [loadingUser, setLoadingUser] = useState(true);
|
||||
const [errorUser, setErrorUser] = useState<string | null>(null);
|
||||
|
||||
// Для списка тайтлов
|
||||
const [titles, setTitles] = useState<UserTitle[]>([]);
|
||||
const [nextPage, setNextPage] = useState<UserTitle[]>([]);
|
||||
const [cursor, setCursor] = useState<CursorObj | null>(null);
|
||||
const [loadingTitles, setLoadingTitles] = useState(true);
|
||||
const [loadingMore, setLoadingMore] = useState(false);
|
||||
const [search, setSearch] = useState("");
|
||||
const [sort, setSort] = useState<TitleSort>("id");
|
||||
const [sortForward, setSortForward] = useState(true);
|
||||
const [layout, setLayout] = useState<"square" | "horizontal">("square");
|
||||
|
||||
// --- Получение данных пользователя ---
|
||||
useEffect(() => {
|
||||
const fetchUser = async () => {
|
||||
if (!id) return;
|
||||
setLoadingUser(true);
|
||||
try {
|
||||
const result = await DefaultService.getUsersId(id, "all");
|
||||
setUser(result);
|
||||
setErrorUser(null);
|
||||
} catch (err: any) {
|
||||
console.error(err);
|
||||
setErrorUser(err?.message || "Failed to fetch user data");
|
||||
} finally {
|
||||
setLoadingUser(false);
|
||||
}
|
||||
};
|
||||
fetchUser();
|
||||
}, [id]);
|
||||
|
||||
// --- Получение списка тайтлов пользователя ---
|
||||
const fetchPage = async (cursorObj: CursorObj | null) => {
|
||||
if (!id) return { items: [], nextCursor: null };
|
||||
const cursorStr = cursorObj
|
||||
? btoa(JSON.stringify(cursorObj)).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "")
|
||||
: "";
|
||||
|
||||
try {
|
||||
const result = await DefaultService.getUsersTitles(
|
||||
id,
|
||||
cursorStr,
|
||||
sort,
|
||||
sortForward,
|
||||
search.trim() || undefined,
|
||||
undefined, // status фильтр, можно добавить
|
||||
undefined, // watchStatus
|
||||
undefined, // rating
|
||||
undefined, // myRate
|
||||
undefined, // releaseYear
|
||||
undefined, // releaseSeason
|
||||
PAGE_SIZE,
|
||||
"all"
|
||||
);
|
||||
|
||||
if (!result?.data?.length) return { items: [], nextCursor: null };
|
||||
|
||||
return { items: result.data, nextCursor: result.cursor ?? null };
|
||||
} catch (err: any) {
|
||||
if (err.status === 204) return { items: [], nextCursor: null };
|
||||
throw err;
|
||||
}
|
||||
};
|
||||
|
||||
// Инициализация: загружаем сразу две страницы
|
||||
useEffect(() => {
|
||||
const initLoad = async () => {
|
||||
setLoadingTitles(true);
|
||||
setTitles([]);
|
||||
setNextPage([]);
|
||||
setCursor(null);
|
||||
|
||||
const firstPage = await fetchPage(null);
|
||||
const secondPage = firstPage.nextCursor ? await fetchPage(firstPage.nextCursor) : { items: [], nextCursor: null };
|
||||
|
||||
setTitles(firstPage.items);
|
||||
setNextPage(secondPage.items);
|
||||
setCursor(secondPage.nextCursor);
|
||||
setLoadingTitles(false);
|
||||
};
|
||||
initLoad();
|
||||
}, [id, search, sort, sortForward]);
|
||||
|
||||
const handleLoadMore = async () => {
|
||||
if (nextPage.length === 0) {
|
||||
setLoadingMore(false);
|
||||
return;
|
||||
}
|
||||
setLoadingMore(true);
|
||||
|
||||
setTitles(prev => [...prev, ...nextPage]);
|
||||
setNextPage([]);
|
||||
|
||||
if (cursor) {
|
||||
try {
|
||||
const next = await fetchPage(cursor);
|
||||
if (next.items.length > 0) setNextPage(next.items);
|
||||
setCursor(next.nextCursor);
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
}
|
||||
|
||||
setLoadingMore(false);
|
||||
};
|
||||
|
||||
// const getAvatarUrl = (avatarId?: number) => (avatarId ? `/api/images/${avatarId}` : "/default-avatar.png");
|
||||
|
||||
return (
|
||||
<div className="w-full min-h-screen bg-gray-50 p-6 flex flex-col items-center">
|
||||
|
||||
{/* --- Карточка пользователя --- */}
|
||||
{loadingUser && <div className="mt-10 text-xl font-medium">Loading user...</div>}
|
||||
{errorUser && <div className="mt-10 text-red-600 font-medium">{errorUser}</div>}
|
||||
{user && (
|
||||
<div className="bg-white shadow-lg rounded-xl p-6 w-full max-w-sm flex flex-col items-center mb-8">
|
||||
<img src={user.image?.image_path} alt={user.nickname} className="w-32 h-32 rounded-full object-cover mb-4" />
|
||||
<h2 className="text-2xl font-bold mb-2">{user.disp_name || user.nickname}</h2>
|
||||
{user.mail && <p className="text-gray-600 mb-2">{user.mail}</p>}
|
||||
{user.user_desc && <p className="text-gray-700 text-center">{user.user_desc}</p>}
|
||||
{user.creation_date && <p className="text-gray-400 mt-4 text-sm">Registered: {new Date(user.creation_date).toLocaleDateString()}</p>}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* --- Панель поиска, сортировки и лейаута --- */}
|
||||
<div className="w-full sm:w-4/5 flex flex-col sm:flex-row gap-4 mb-6 items-center">
|
||||
<SearchBar placeholder="Search titles..." search={search} setSearch={setSearch} />
|
||||
<LayoutSwitch layout={layout} setLayout={setLayout} />
|
||||
<TitlesSortBox sort={sort} setSort={setSort} sortForward={sortForward} setSortForward={setSortForward} />
|
||||
</div>
|
||||
|
||||
{/* --- Список тайтлов --- */}
|
||||
{loadingTitles && <div className="mt-6 font-medium text-black">Loading titles...</div>}
|
||||
{!loadingTitles && titles.length === 0 && <div className="mt-6 font-medium text-black">No titles found.</div>}
|
||||
|
||||
{titles.length > 0 && (
|
||||
<>
|
||||
<ListView<UserTitle>
|
||||
items={titles}
|
||||
layout={layout}
|
||||
hasMore={!!cursor || nextPage.length > 1}
|
||||
loadingMore={loadingMore}
|
||||
onLoadMore={handleLoadMore}
|
||||
renderItem={(title, layout) =>
|
||||
layout === "square" ? <UserTitleCardSquare title={title} /> : <UserTitleCardHorizontal title={title} />
|
||||
}
|
||||
/>
|
||||
|
||||
{!cursor && nextPage.length === 0 && (
|
||||
<div className="mt-6 font-medium text-black">
|
||||
Результатов больше нет, было найдено {titles.length} тайтлов.
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue