Merge branch 'front' into dev

modules/frontend/src/App.tsx

@@ -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>

modules/frontend/src/api/core/OpenAPI.ts

@@ -20,7 +20,7 @@ export type OpenAPIConfig = {
 };
 
 export const OpenAPI: OpenAPIConfig = {
-    BASE: 'http://10.1.0.65:8081/api/v1',
+    BASE: '/api/v1',
     VERSION: '1.0.0',
     WITH_CREDENTIALS: false,
     CREDENTIALS: 'include',

modules/frontend/src/pages/TitlesPage/TitlesPage.module.css

@@ -1 +0,0 @@
-@import "tailwindcss";

modules/frontend/src/pages/TitlesPage/TitlesPage.tsx

@@ -7,6 +7,7 @@ import { TitleCardSquare } from "../../components/cards/TitleCardSquare";
 import { TitleCardHorizontal } from "../../components/cards/TitleCardHorizontal";
 import type { CursorObj, Title, TitleSort } from "../../api";
 import { LayoutSwitch } from "../../components/LayoutSwitch/LayoutSwitch";
+import { Link } from "react-router-dom";
 
 const PAGE_SIZE = 10;
 
@@ -135,11 +136,11 @@ const handleLoadMore = async () => {
             hasMore={!!cursor || nextPage.length > 1}
             loadingMore={loadingMore}
             onLoadMore={handleLoadMore}
-            renderItem={(title, layout) =>
+            renderItem={(title, layout) => (
-              layout === "square"
+              <Link to={`/titles/${title.id}`} key={title.id} className="block">
-                ? <TitleCardSquare title={title} />
+                {layout === "square" ? <TitleCardSquare title={title} /> : <TitleCardHorizontal title={title} />}
-                : <TitleCardHorizontal title={title} />
+              </Link>
-            }
+            )}
           />
 
           {!cursor && nextPage.length == 0 && (

modules/frontend/src/pages/UserPage/UserPage.module.css

@@ -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;
-}

modules/frontend/src/pages/UserPage/UserPage.tsx

@@ -1,67 +1,184 @@
-import React, { useEffect, useState } from "react";
+// pages/UserPage/UserPage.tsx
-import { useParams } from "react-router-dom"; // <-- import
+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 { SearchBar } from "../../components/SearchBar/SearchBar";
-import styles from "./UserPage.module.css";
+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";
+import { Link } from "react-router-dom";
+
+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 [loadingUser, setLoadingUser] = useState(true);
-  const [error, setError] = useState<string | null>(null);
+  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);
-    const getUserInfo = async () => {
       try {
-        const userInfo = await DefaultService.getUsersId(id, "all"); // <-- use dynamic id
+        const result = await DefaultService.getUsersId(id, "all");
-        setUser(userInfo);
+        setUser(result);
-      } catch (err) {
+        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>;
+  const fetchPage = async (cursorObj: CursorObj | null) => {
-  if (!user) return <div className={styles.error}>User not found.</div>;
+    if (!id) return { items: [], nextCursor: null };
+    const cursorStr = cursorObj
+      ? btoa(JSON.stringify(cursorObj)).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "")
+      : "";
 
-  return (
+    try {
-    <div className={styles.container}>
+      const result = await DefaultService.getUsersTitles(
-      <div className={styles.header}>
+        id,
-        <div className={styles.avatarWrapper}>
+        cursorStr,
-          {user.image?.image_path ? (
+        sort,
-            <img
+        sortForward,
-              src={`/images/${user.image.image_path}.png`}
+        search.trim() || undefined,
-              alt="User Avatar"
+        undefined, // status фильтр, можно добавить
-              className={styles.avatarImg}
+        undefined, // watchStatus
-            />
+        undefined, // rating
-          ) : (
+        undefined, // myRate
-            <div className={styles.avatarPlaceholder}>
+        undefined, // releaseYear
-              {user.disp_name?.[0] || "U"}
+        undefined, // releaseSeason
-            </div>
+        PAGE_SIZE,
-          )}
+        "all"
-        </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>
       );
+
+      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);
+  };
+
+  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) => (
+              <Link to={`/titles/${title.title?.id}`} key={title.title?.id} className="block">
+                {layout === "square" ? <UserTitleCardSquare title={title} /> : <UserTitleCardHorizontal title={title} />}
+              </Link>
+            )}
+          />
+
+          {!cursor && nextPage.length === 0 && (
+            <div className="mt-6 font-medium text-black">
+              Результатов больше нет, было найдено {titles.length} тайтлов.
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  );
+}

modules/frontend/src/pages/UsersIdPage/UsersIdPage.tsx

@@ -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>
-  );
-}