feat: /titles page with search and sort functionality. Website header added

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

@@ -1,52 +1,154 @@
+import { useEffect, useState } from "react";
 import { ListView } from "../../components/ListView/ListView";
+import { SearchBar } from "../../components/SearchBar/SearchBar";
+import { TitlesSortBox } from "../../components/TitlesSortBox/TitlesSortBox";
 import { DefaultService } from "../../api/services/DefaultService";
 import { TitleCardSquare } from "../../components/cards/TitleCardSquare";
 import { TitleCardHorizontal } from "../../components/cards/TitleCardHorizontal";
-import type { Title } from "../../api";
-import { useState } from "react";
+import type { CursorObj, Title, TitleSort } from "../../api";
+import { LayoutSwitch } from "../../components/LayoutSwitch/LayoutSwitch";
+
+const PAGE_SIZE = 10;
 
-const PAGE_SIZE = 20;
 export default function TitlesPage() {
+  const [titles, setTitles] = useState<Title[]>([]);
+  const [nextPage, setNextPage] = useState<Title[]>([]);
+  const [cursor, setCursor] = useState<CursorObj | null>(null);
   const [search, setSearch] = useState("");
+  const [loading, setLoading] = useState(true);
+  const [loadingMore, setLoadingMore] = useState(false);
+  const [sort, setSort] = useState<TitleSort>("id");
+  const [sortForward, setSortForward] = useState(true);
+  const [layout, setLayout] = useState<"square" | "horizontal">("square");
 
-  const loadTitles = async (cursor: string, limit: number) => {
-    const result = await DefaultService.getTitles(
-      cursor,
-      undefined,
-      true,
-      search,
-      undefined,
-      undefined,
-      undefined,
-      undefined,
-      limit,
-      undefined,
-      'all'
-    );
+  const fetchPage = async (cursorObj: CursorObj | null) => {
+    const cursorStr = cursorObj ? btoa(JSON.stringify(cursorObj)).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '') : "";
 
-    return {
-      items: result.data ?? [],
-      cursor: result.cursor ?? null,
-    };
+    try {
+      const result = await DefaultService.getTitles(
+        cursorStr,
+        sort,
+        sortForward,
+        search.trim() || undefined,
+        undefined,
+        undefined,
+        undefined,
+        undefined,
+        PAGE_SIZE,
+        undefined,
+        "all"
+      );
+
+      if ((result === undefined) || !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;
+    }
   };
 
-  return (
-    <div className="w-full min-h-screen bg-gray-50 p-6 text-black flex flex-col items-center">
-      
-      <h1 className="text-4xl font-bold mb-6 text-center">Titles</h1>
+  // Инициализация: загружаем сразу две страницы
+  useEffect(() => {
+    const initLoad = async () => {
+      setLoading(true);
+      setTitles([]);
+      setNextPage([]);
+      setCursor(null);
 
-      <ListView<Title>
-        pageSize={PAGE_SIZE}
-        fetchItems={loadTitles}
-        searchPlaceholder="Search titles..."
-        renderItem={(title, layout) =>
-          layout === "square"
-            ? <TitleCardSquare title={title} />
-            : <TitleCardHorizontal title={title} />
-        }
-        setSearch={setSearch}
-      />
+      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);
+      setLoading(false);
+    };
+
+    initLoad();
+  }, [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);
+    }
+  }
+
+  // Любой сценарий – выключаем loadingMore
+  setLoadingMore(false);
+};
+
+
+
+  return (
+    <div className="w-full min-h-screen bg-gray-50 p-6 flex flex-col items-center">
+
+      <h1 className="text-4xl font-bold mb-6 text-center text-black">Titles</h1>
+
+      <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>
+
+      {loading && <div className="mt-20 font-medium text-black">Loading...</div>}
+
+      {!loading && titles.length === 0 && (
+        <div className="mt-20 font-medium text-black">No titles found.</div>
+      )}
+
+      {titles.length > 0 && (
+        <>
+          <ListView<Title>
+            items={titles}
+            layout={layout}
+            hasMore={!!cursor || nextPage.length > 1}
+            loadingMore={loadingMore}
+            onLoadMore={handleLoadMore}
+            renderItem={(title, layout) =>
+              layout === "square"
+                ? <TitleCardSquare title={title} />
+                : <TitleCardHorizontal title={title} />
+            }
+          />
+
+          {!cursor && nextPage.length == 0 && (
+            <div className="mt-6 font-medium text-black">
+              Результатов больше нет, было найдено {titles.length} тайтлов.
+            </div>
+          )}
+        </>
+      )}
     </div>
   );
 }
-