nihonium/nyanimedb
1
0
Fork 1
Code Issues 10 Pull requests Releases Packages 3 Activity Actions

Merge branch 'dev' into dev-ars

Browse source
This commit is contained in:
Iron_Felix 2025-11-22 08:36:34 +03:00
commit 8427288daf
44 changed files with 1303 additions and 1272 deletions
Download patch file Download diff file Expand all files Collapse all files

10
modules/backend/queries.sql
View file

@ -78,7 +78,10 @@ SELECT
t.*,
i.storage_type::text as title_storage_type,
i.image_path as title_image_path,
jsonb_agg(g.tag_name)'[]'::jsonb as tag_names,
COALESCE(
jsonb_agg(g.tag_names) FILTER (WHERE g.tag_names IS NOT NULL),
'[]'::jsonb
) as tag_names,
s.studio_name as studio_name,
s.illust_id as studio_illust_id,
s.studio_desc as studio_desc,
@ -101,7 +104,10 @@ SELECT
t.*,
i.storage_type::text as title_storage_type,
i.image_path as title_image_path,
jsonb_agg(g.tag_name)'[]'::jsonb as tag_names,
COALESCE(
jsonb_agg(g.tag_names) FILTER (WHERE g.tag_names IS NOT NULL),
'[]'::jsonb
) as tag_names,
s.studio_name as studio_name,
s.illust_id as studio_illust_id,
s.studio_desc as studio_desc,

891
modules/frontend/package-lock.json generated
View file

File diff suppressed because it is too large Load diff

6
modules/frontend/package.json
View file

@ -10,10 +10,14 @@
"preview": "vite preview"
},
"dependencies": {
"@headlessui/react": "^2.2.9",
"@heroicons/react": "^2.2.0",
"@tailwindcss/vite": "^4.1.17",
"axios": "^1.12.2",
"react": "^19.1.1",
"react-dom": "^19.1.1",
"react-router-dom": "^7.9.4"
"react-router-dom": "^7.9.4",
"tailwindcss": "^4.1.17"
},
"devDependencies": {
"@eslint/js": "^9.36.0",

42
modules/frontend/src/App.css
View file

@ -1,42 +0,0 @@
#root {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
text-align: center;
}
.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
transition: filter 300ms;
}
.logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.react:hover {
filter: drop-shadow(0 0 2em #61dafbaa);
}
@keyframes logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: no-preference) {
a:nth-of-type(2) .logo {
animation: logo-spin infinite 20s linear;
}
}
.card {
padding: 2em;
}
.read-the-docs {
color: #888;
}

3
modules/frontend/src/App.tsx
View file

@ -2,10 +2,13 @@ import React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import UserPage from "./pages/UserPage/UserPage";
import TitlesPage from "./pages/TitlesPage/TitlesPage";
import { Header } from "./components/Header/Header";
const App: React.FC = () => {
const username = "nihonium";
return (
<Router>
<Header username={username} />
<Routes>
<Route path="/users/:id" element={<UserPage />} />
<Route path="/titles" element={<TitlesPage />} />

9
modules/frontend/src/api/index.ts
View file

@ -8,16 +8,19 @@ export { OpenAPI } from './core/OpenAPI';
export type { OpenAPIConfig } from './core/OpenAPI';
export type { cursor } from './models/cursor';
export type { CursorObj } from './models/CursorObj';
export type { Image } from './models/Image';
export { ReleaseSeason } from './models/ReleaseSeason';
export type { ReleaseSeason } from './models/ReleaseSeason';
export type { Review } from './models/Review';
export type { Studio } from './models/Studio';
export type { Tag } from './models/Tag';
export type { Tags } from './models/Tags';
export type { Title } from './models/Title';
export { TitleStatus } from './models/TitleStatus';
export type { title_sort } from './models/title_sort';
export type { TitleSort } from './models/TitleSort';
export type { TitleStatus } from './models/TitleStatus';
export type { User } from './models/User';
export type { UserTitle } from './models/UserTitle';
export { UserTitleStatus } from './models/UserTitleStatus';
export type { UserTitleStatus } from './models/UserTitleStatus';
export { DefaultService } from './services/DefaultService';

6
modules/frontend/src/api_/models/cursor.ts → modules/frontend/src/api/models/CursorObj.ts
View file

@ -2,4 +2,8 @@
/* istanbul ignore file */
/* tslint:disable */
/* eslint-disable */
export type cursor = string;
export type CursorObj = {
id: number;
param?: string;
};

7
modules/frontend/src/api/models/ReleaseSeason.ts
View file

@ -5,9 +5,4 @@
/**
* Title release season
*/
export enum ReleaseSeason {
WINTER = 'winter',
SPRING = 'spring',
SUMMER = 'summer',
FALL = 'fall',
}
export type ReleaseSeason = 'winter' | 'spring' | 'summer' | 'fall';

5
modules/frontend/src/api_/models/Tags.ts → modules/frontend/src/api/models/TitleSort.ts
View file

@ -2,8 +2,7 @@
/* istanbul ignore file */
/* tslint:disable */
/* eslint-disable */
import type { Tag } from './Tag';
/**
* Array of localized tags
* Title sort order
*/
export type Tags = Array<Tag>;
export type TitleSort = 'id' | 'year' | 'rating' | 'views';

6
modules/frontend/src/api/models/TitleStatus.ts
View file

@ -5,8 +5,4 @@
/**
* Title status
*/
export enum TitleStatus {
FINISHED = 'finished',
ONGOING = 'ongoing',
PLANNED = 'planned',
}
export type TitleStatus = 'finished' | 'ongoing' | 'planned';

4
modules/frontend/src/api/models/User.ts
View file

@ -6,11 +6,11 @@ export type User = {
/**
* Unique user ID (primary key)
*/
id: number;
id?: number;
/**
* ID of the user avatar (references images table)
*/
avatar_id?: number | null;
avatar_id?: number;
/**
* User email
*/

7
modules/frontend/src/api/models/UserTitleStatus.ts
View file

@ -5,9 +5,4 @@
/**
* User's title status
*/
export enum UserTitleStatus {
FINISHED = 'finished',
PLANNED = 'planned',
DROPPED = 'dropped',
IN_PROGRESS = 'in-progress',
}
export type UserTitleStatus = 'finished' | 'planned' | 'dropped' | 'in-progress';

3
modules/frontend/src/api_/models/Title.ts → modules/frontend/src/api/models/title_sort.ts
View file

@ -2,4 +2,5 @@
/* istanbul ignore file */
/* tslint:disable */
/* eslint-disable */
export type Title = Record<string, any>;
import type { TitleSort } from './TitleSort';
export type title_sort = TitleSort;

48
modules/frontend/src/api/services/DefaultService.ts
View file

@ -2,17 +2,23 @@
/* istanbul ignore file */
/* tslint:disable */
/* eslint-disable */
import type { CursorObj } from '../models/CursorObj';
import type { ReleaseSeason } from '../models/ReleaseSeason';
import type { Title } from '../models/Title';
import type { TitleSort } from '../models/TitleSort';
import type { TitleStatus } from '../models/TitleStatus';
import type { User } from '../models/User';
import type { UserTitle } from '../models/UserTitle';
import type { UserTitleStatus } from '../models/UserTitleStatus';
import type { CancelablePromise } from '../core/CancelablePromise';
import { OpenAPI } from '../core/OpenAPI';
import { request as __request } from '../core/request';
export class DefaultService {
/**
* Get titles
* @param cursor
* @param sort
* @param sortForward
* @param word
* @param status
* @param rating
@ -21,10 +27,13 @@ export class DefaultService {
* @param limit
* @param offset
* @param fields
* @returns Title List of titles
* @returns any List of titles with cursor
* @throws ApiError
*/
public static getTitles(
cursor?: string,
sort?: TitleSort,
sortForward: boolean = true,
word?: string,
status?: TitleStatus,
rating?: number,
@ -33,11 +42,20 @@ export class DefaultService {
limit: number = 10,
offset?: number,
fields: string = 'all',
): CancelablePromise<Array<Title>> {
): CancelablePromise<{
/**
* List of titles
*/
data: Array<Title>;
cursor: CursorObj;
}> {
return __request(OpenAPI, {
method: 'GET',
url: '/titles',
query: {
'cursor': cursor,
'sort': sort,
'sort_forward': sortForward,
'word': word,
'status': status,
'rating': rating,
@ -111,9 +129,13 @@ export class DefaultService {
* Get user titles
* @param userId
* @param cursor
* @param query
* @param word
* @param status
* @param watchStatus
* @param rating
* @param releaseYear
* @param releaseSeason
* @param limit
* @param offset
* @param fields
* @returns UserTitle List of user titles
* @throws ApiError
@ -121,22 +143,30 @@ export class DefaultService {
public static getUsersTitles(
userId: string,
cursor?: string,
query?: string,
word?: string,
status?: TitleStatus,
watchStatus?: UserTitleStatus,
rating?: number,
releaseYear?: number,
releaseSeason?: ReleaseSeason,
limit: number = 10,
offset?: number,
fields: string = 'all',
): CancelablePromise<Array<UserTitle>> {
return __request(OpenAPI, {
method: 'GET',
url: '/users/{user_id}/titles',
url: '/users/{user_id}/titles/',
path: {
'user_id': userId,
},
query: {
'cursor': cursor,
'query': query,
'word': word,
'status': status,
'watch_status': watchStatus,
'rating': rating,
'release_year': releaseYear,
'release_season': releaseSeason,
'limit': limit,
'offset': offset,
'fields': fields,
},
errors: {

25
modules/frontend/src/api_/core/ApiError.ts
View file

@ -1,25 +0,0 @@
/* generated using openapi-typescript-codegen -- do not edit */
/* istanbul ignore file */
/* tslint:disable */
/* eslint-disable */
import type { ApiRequestOptions } from './ApiRequestOptions';
import type { ApiResult } from './ApiResult';
export class ApiError extends Error {
public readonly url: string;
public readonly status: number;
public readonly statusText: string;
public readonly body: any;
public readonly request: ApiRequestOptions;
constructor(request: ApiRequestOptions, response: ApiResult, message: string) {
super(message);
this.name = 'ApiError';
this.url = response.url;
this.status = response.status;
this.statusText = response.statusText;
this.body = response.body;
this.request = request;
}
}

17
modules/frontend/src/api_/core/ApiRequestOptions.ts
View file

@ -1,17 +0,0 @@
/* generated using openapi-typescript-codegen -- do not edit */
/* istanbul ignore file */
/* tslint:disable */
/* eslint-disable */
export type ApiRequestOptions = {
readonly method: 'GET' | 'PUT' | 'POST' | 'DELETE' | 'OPTIONS' | 'HEAD' | 'PATCH';
readonly url: string;
readonly path?: Record<string, any>;
readonly cookies?: Record<string, any>;
readonly headers?: Record<string, any>;
readonly query?: Record<string, any>;
readonly formData?: Record<string, any>;
readonly body?: any;
readonly mediaType?: string;
readonly responseHeader?: string;
readonly errors?: Record<number, string>;
};

11
modules/frontend/src/api_/core/ApiResult.ts
View file

@ -1,11 +0,0 @@
/* generated using openapi-typescript-codegen -- do not edit */
/* istanbul ignore file */
/* tslint:disable */
/* eslint-disable */
export type ApiResult = {
readonly url: string;
readonly ok: boolean;
readonly status: number;
readonly statusText: string;
readonly body: any;
};

131
modules/frontend/src/api_/core/CancelablePromise.ts
View file

@ -1,131 +0,0 @@
/* generated using openapi-typescript-codegen -- do not edit */
/* istanbul ignore file */
/* tslint:disable */
/* eslint-disable */
export class CancelError extends Error {
constructor(message: string) {
super(message);
this.name = 'CancelError';
}
public get isCancelled(): boolean {
return true;
}
}
export interface OnCancel {
readonly isResolved: boolean;
readonly isRejected: boolean;
readonly isCancelled: boolean;
(cancelHandler: () => void): void;
}
export class CancelablePromise<T> implements Promise<T> {
#isResolved: boolean;
#isRejected: boolean;
#isCancelled: boolean;
readonly #cancelHandlers: (() => void)[];
readonly #promise: Promise<T>;
#resolve?: (value: T | PromiseLike<T>) => void;
#reject?: (reason?: any) => void;
constructor(
executor: (
resolve: (value: T | PromiseLike<T>) => void,
reject: (reason?: any) => void,
onCancel: OnCancel
) => void
) {
this.#isResolved = false;
this.#isRejected = false;
this.#isCancelled = false;
this.#cancelHandlers = [];
this.#promise = new Promise<T>((resolve, reject) => {
this.#resolve = resolve;
this.#reject = reject;
const onResolve = (value: T | PromiseLike<T>): void => {
if (this.#isResolved || this.#isRejected || this.#isCancelled) {
return;
}
this.#isResolved = true;
if (this.#resolve) this.#resolve(value);
};
const onReject = (reason?: any): void => {
if (this.#isResolved || this.#isRejected || this.#isCancelled) {
return;
}
this.#isRejected = true;
if (this.#reject) this.#reject(reason);
};
const onCancel = (cancelHandler: () => void): void => {
if (this.#isResolved || this.#isRejected || this.#isCancelled) {
return;
}
this.#cancelHandlers.push(cancelHandler);
};
Object.defineProperty(onCancel, 'isResolved', {
get: (): boolean => this.#isResolved,
});
Object.defineProperty(onCancel, 'isRejected', {
get: (): boolean => this.#isRejected,
});
Object.defineProperty(onCancel, 'isCancelled', {
get: (): boolean => this.#isCancelled,
});
return executor(onResolve, onReject, onCancel as OnCancel);
});
}
get [Symbol.toStringTag]() {
return "Cancellable Promise";
}
public then<TResult1 = T, TResult2 = never>(
onFulfilled?: ((value: T) => TResult1 | PromiseLike<TResult1>) | null,
onRejected?: ((reason: any) => TResult2 | PromiseLike<TResult2>) | null
): Promise<TResult1 | TResult2> {
return this.#promise.then(onFulfilled, onRejected);
}
public catch<TResult = never>(
onRejected?: ((reason: any) => TResult | PromiseLike<TResult>) | null
): Promise<T | TResult> {
return this.#promise.catch(onRejected);
}
public finally(onFinally?: (() => void) | null): Promise<T> {
return this.#promise.finally(onFinally);
}
public cancel(): void {
if (this.#isResolved || this.#isRejected || this.#isCancelled) {
return;
}
this.#isCancelled = true;
if (this.#cancelHandlers.length) {
try {
for (const cancelHandler of this.#cancelHandlers) {
cancelHandler();
}
} catch (error) {
console.warn('Cancellation threw an error', error);
return;
}
}
this.#cancelHandlers.length = 0;
if (this.#reject) this.#reject(new CancelError('Request aborted'));
}
public get isCancelled(): boolean {
return this.#isCancelled;
}
}

32
modules/frontend/src/api_/core/OpenAPI.ts
View file

@ -1,32 +0,0 @@
/* generated using openapi-typescript-codegen -- do not edit */
/* istanbul ignore file */
/* tslint:disable */
/* eslint-disable */
import type { ApiRequestOptions } from './ApiRequestOptions';
type Resolver<T> = (options: ApiRequestOptions) => Promise<T>;
type Headers = Record<string, string>;
export type OpenAPIConfig = {
BASE: string;
VERSION: string;
WITH_CREDENTIALS: boolean;
CREDENTIALS: 'include' | 'omit' | 'same-origin';
TOKEN?: string | Resolver<string> | undefined;
USERNAME?: string | Resolver<string> | undefined;
PASSWORD?: string | Resolver<string> | undefined;
HEADERS?: Headers | Resolver<Headers> | undefined;
ENCODE_PATH?: ((path: string) => string) | undefined;
};
export const OpenAPI: OpenAPIConfig = {
BASE: '/api/v1',
VERSION: '1.0.0',
WITH_CREDENTIALS: false,
CREDENTIALS: 'include',
TOKEN: undefined,
USERNAME: undefined,
PASSWORD: undefined,
HEADERS: undefined,
ENCODE_PATH: undefined,
};

323
modules/frontend/src/api_/core/request.ts
View file

@ -1,323 +0,0 @@
/* generated using openapi-typescript-codegen -- do not edit */
/* istanbul ignore file */
/* tslint:disable */
/* eslint-disable */
import axios from 'axios';
import type { AxiosError, AxiosRequestConfig, AxiosResponse, AxiosInstance } from 'axios';
import FormData from 'form-data';
import { ApiError } from './ApiError';
import type { ApiRequestOptions } from './ApiRequestOptions';
import type { ApiResult } from './ApiResult';
import { CancelablePromise } from './CancelablePromise';
import type { OnCancel } from './CancelablePromise';
import type { OpenAPIConfig } from './OpenAPI';
export const isDefined = <T>(value: T | null | undefined): value is Exclude<T, null | undefined> => {
return value !== undefined && value !== null;
};
export const isString = (value: any): value is string => {
return typeof value === 'string';
};
export const isStringWithValue = (value: any): value is string => {
return isString(value) && value !== '';
};
export const isBlob = (value: any): value is Blob => {
return (
typeof value === 'object' &&
typeof value.type === 'string' &&
typeof value.stream === 'function' &&
typeof value.arrayBuffer === 'function' &&
typeof value.constructor === 'function' &&
typeof value.constructor.name === 'string' &&
/^(Blob|File)$/.test(value.constructor.name) &&
/^(Blob|File)$/.test(value[Symbol.toStringTag])
);
};
export const isFormData = (value: any): value is FormData => {
return value instanceof FormData;
};
export const isSuccess = (status: number): boolean => {
return status >= 200 && status < 300;
};
export const base64 = (str: string): string => {
try {
return btoa(str);
} catch (err) {
// @ts-ignore
return Buffer.from(str).toString('base64');
}
};
export const getQueryString = (params: Record<string, any>): string => {
const qs: string[] = [];
const append = (key: string, value: any) => {
qs.push(`${encodeURIComponent(key)}=${encodeURIComponent(String(value))}`);
};
const process = (key: string, value: any) => {
if (isDefined(value)) {
if (Array.isArray(value)) {
value.forEach(v => {
process(key, v);
});
} else if (typeof value === 'object') {
Object.entries(value).forEach(([k, v]) => {
process(`${key}[${k}]`, v);
});
} else {
append(key, value);
}
}
};
Object.entries(params).forEach(([key, value]) => {
process(key, value);
});
if (qs.length > 0) {
return `?${qs.join('&')}`;
}
return '';
};
const getUrl = (config: OpenAPIConfig, options: ApiRequestOptions): string => {
const encoder = config.ENCODE_PATH || encodeURI;
const path = options.url
.replace('{api-version}', config.VERSION)
.replace(/{(.*?)}/g, (substring: string, group: string) => {
if (options.path?.hasOwnProperty(group)) {
return encoder(String(options.path[group]));
}
return substring;
});
const url = `${config.BASE}${path}`;
if (options.query) {
return `${url}${getQueryString(options.query)}`;
}
return url;
};
export const getFormData = (options: ApiRequestOptions): FormData | undefined => {
if (options.formData) {
const formData = new FormData();
const process = (key: string, value: any) => {
if (isString(value) || isBlob(value)) {
formData.append(key, value);
} else {
formData.append(key, JSON.stringify(value));
}
};
Object.entries(options.formData)
.filter(([_, value]) => isDefined(value))
.forEach(([key, value]) => {
if (Array.isArray(value)) {
value.forEach(v => process(key, v));
} else {
process(key, value);
}
});
return formData;
}
return undefined;
};
type Resolver<T> = (options: ApiRequestOptions) => Promise<T>;
export const resolve = async <T>(options: ApiRequestOptions, resolver?: T | Resolver<T>): Promise<T | undefined> => {
if (typeof resolver === 'function') {
return (resolver as Resolver<T>)(options);
}
return resolver;
};
export const getHeaders = async (config: OpenAPIConfig, options: ApiRequestOptions, formData?: FormData): Promise<Record<string, string>> => {
const [token, username, password, additionalHeaders] = await Promise.all([
resolve(options, config.TOKEN),
resolve(options, config.USERNAME),
resolve(options, config.PASSWORD),
resolve(options, config.HEADERS),
]);
const formHeaders = typeof formData?.getHeaders === 'function' && formData?.getHeaders() || {}
const headers = Object.entries({
Accept: 'application/json',
...additionalHeaders,
...options.headers,
...formHeaders,
})
.filter(([_, value]) => isDefined(value))
.reduce((headers, [key, value]) => ({
...headers,
[key]: String(value),
}), {} as Record<string, string>);
if (isStringWithValue(token)) {
headers['Authorization'] = `Bearer ${token}`;
}
if (isStringWithValue(username) && isStringWithValue(password)) {
const credentials = base64(`${username}:${password}`);
headers['Authorization'] = `Basic ${credentials}`;
}
if (options.body !== undefined) {
if (options.mediaType) {
headers['Content-Type'] = options.mediaType;
} else if (isBlob(options.body)) {
headers['Content-Type'] = options.body.type || 'application/octet-stream';
} else if (isString(options.body)) {
headers['Content-Type'] = 'text/plain';
} else if (!isFormData(options.body)) {
headers['Content-Type'] = 'application/json';
}
}
return headers;
};
export const getRequestBody = (options: ApiRequestOptions): any => {
if (options.body) {
return options.body;
}
return undefined;
};
export const sendRequest = async <T>(
config: OpenAPIConfig,
options: ApiRequestOptions,
url: string,
body: any,
formData: FormData | undefined,
headers: Record<string, string>,
onCancel: OnCancel,
axiosClient: AxiosInstance
): Promise<AxiosResponse<T>> => {
const source = axios.CancelToken.source();
const requestConfig: AxiosRequestConfig = {
url,
headers,
data: body ?? formData,
method: options.method,
withCredentials: config.WITH_CREDENTIALS,
withXSRFToken: config.CREDENTIALS === 'include' ? config.WITH_CREDENTIALS : false,
cancelToken: source.token,
};
onCancel(() => source.cancel('The user aborted a request.'));
try {
return await axiosClient.request(requestConfig);
} catch (error) {
const axiosError = error as AxiosError<T>;
if (axiosError.response) {
return axiosError.response;
}
throw error;
}
};
export const getResponseHeader = (response: AxiosResponse<any>, responseHeader?: string): string | undefined => {
if (responseHeader) {
const content = response.headers[responseHeader];
if (isString(content)) {
return content;
}
}
return undefined;
};
export const getResponseBody = (response: AxiosResponse<any>): any => {
if (response.status !== 204) {
return response.data;
}
return undefined;
};
export const catchErrorCodes = (options: ApiRequestOptions, result: ApiResult): void => {
const errors: Record<number, string> = {
400: 'Bad Request',
401: 'Unauthorized',
403: 'Forbidden',
404: 'Not Found',
500: 'Internal Server Error',
502: 'Bad Gateway',
503: 'Service Unavailable',
...options.errors,
}
const error = errors[result.status];
if (error) {
throw new ApiError(options, result, error);
}
if (!result.ok) {
const errorStatus = result.status ?? 'unknown';
const errorStatusText = result.statusText ?? 'unknown';
const errorBody = (() => {
try {
return JSON.stringify(result.body, null, 2);
} catch (e) {
return undefined;
}
})();
throw new ApiError(options, result,
`Generic Error: status: ${errorStatus}; status text: ${errorStatusText}; body: ${errorBody}`
);
}
};
/**
* Request method
* @param config The OpenAPI configuration object
* @param options The request options from the service
* @param axiosClient The axios client instance to use
* @returns CancelablePromise<T>
* @throws ApiError
*/
export const request = <T>(config: OpenAPIConfig, options: ApiRequestOptions, axiosClient: AxiosInstance = axios): CancelablePromise<T> => {
return new CancelablePromise(async (resolve, reject, onCancel) => {
try {
const url = getUrl(config, options);
const formData = getFormData(options);
const body = getRequestBody(options);
const headers = await getHeaders(config, options, formData);
if (!onCancel.isCancelled) {
const response = await sendRequest<T>(config, options, url, body, formData, headers, onCancel, axiosClient);
const responseBody = getResponseBody(response);
const responseHeader = getResponseHeader(response, options.responseHeader);
const result: ApiResult = {
url,
ok: isSuccess(response.status),
status: response.status,
statusText: response.statusText,
body: responseHeader ?? responseBody,
};
catchErrorCodes(options, result);
resolve(result.body);
}
} catch (error) {
reject(error);
}
});
};

23
modules/frontend/src/api_/index.ts
View file

@ -1,23 +0,0 @@
/* generated using openapi-typescript-codegen -- do not edit */
/* istanbul ignore file */
/* tslint:disable */
/* eslint-disable */
export { ApiError } from './core/ApiError';
export { CancelablePromise, CancelError } from './core/CancelablePromise';
export { OpenAPI } from './core/OpenAPI';
export type { OpenAPIConfig } from './core/OpenAPI';
export type { cursor } from './models/cursor';
export type { Image } from './models/Image';
export { ReleaseSeason } from './models/ReleaseSeason';
export type { Review } from './models/Review';
export type { Studio } from './models/Studio';
export type { Tag } from './models/Tag';
export type { Tags } from './models/Tags';
export type { Title } from './models/Title';
export { TitleStatus } from './models/TitleStatus';
export type { User } from './models/User';
export type { UserTitle } from './models/UserTitle';
export { UserTitleStatus } from './models/UserTitleStatus';
export { DefaultService } from './services/DefaultService';

10
modules/frontend/src/api_/models/Image.ts
View file

@ -1,10 +0,0 @@
/* generated using openapi-typescript-codegen -- do not edit */
/* istanbul ignore file */
/* tslint:disable */
/* eslint-disable */
export type Image = {
id?: number;
storage_type?: string;
image_path?: string;
};

13
modules/frontend/src/api_/models/ReleaseSeason.ts
View file

@ -1,13 +0,0 @@
/* generated using openapi-typescript-codegen -- do not edit */
/* istanbul ignore file */
/* tslint:disable */
/* eslint-disable */
/**
* Title release season
*/
export enum ReleaseSeason {
WINTER = 'winter',
SPRING = 'spring',
SUMMER = 'summer',
FALL = 'fall',
}

5
modules/frontend/src/api_/models/Review.ts
View file

@ -1,5 +0,0 @@
/* generated using openapi-typescript-codegen -- do not edit */
/* istanbul ignore file */
/* tslint:disable */
/* eslint-disable */
export type Review = Record<string, any>;

12
modules/frontend/src/api_/models/Studio.ts
View file

@ -1,12 +0,0 @@
/* generated using openapi-typescript-codegen -- do not edit */
/* istanbul ignore file */
/* tslint:disable */
/* eslint-disable */
import type { Image } from './Image';
export type Studio = {
id: number;
name: string;
poster?: Image;
description?: string;
};

8
modules/frontend/src/api_/models/Tag.ts
View file

@ -1,8 +0,0 @@
/* generated using openapi-typescript-codegen -- do not edit */
/* istanbul ignore file */
/* tslint:disable */
/* eslint-disable */
/**
* A localized tag: keys are language codes (ISO 639-1), values are tag names
*/
export type Tag = Record<string, string>;

12
modules/frontend/src/api_/models/TitleStatus.ts
View file

@ -1,12 +0,0 @@
/* generated using openapi-typescript-codegen -- do not edit */
/* istanbul ignore file */
/* tslint:disable */
/* eslint-disable */
/**
* Title status
*/
export enum TitleStatus {
FINISHED = 'finished',
ONGOING = 'ongoing',
PLANNED = 'planned',
}

35
modules/frontend/src/api_/models/User.ts
View file

@ -1,35 +0,0 @@
/* generated using openapi-typescript-codegen -- do not edit */
/* istanbul ignore file */
/* tslint:disable */
/* eslint-disable */
export type User = {
/**
* Unique user ID (primary key)
*/
id: number;
/**
* ID of the user avatar (references images table)
*/
avatar_id?: number | null;
/**
* User email
*/
mail?: string;
/**
* Username (alphanumeric + _ or -)
*/
nickname: string;
/**
* Display name
*/
disp_name?: string;
/**
* User description
*/
user_desc?: string;
/**
* Timestamp when the user was created
*/
creation_date?: string;
};

5
modules/frontend/src/api_/models/UserTitle.ts
View file

@ -1,5 +0,0 @@
/* generated using openapi-typescript-codegen -- do not edit */
/* istanbul ignore file */
/* tslint:disable */
/* eslint-disable */
export type UserTitle = Record<string, any>;

13
modules/frontend/src/api_/models/UserTitleStatus.ts
View file

@ -1,13 +0,0 @@
/* generated using openapi-typescript-codegen -- do not edit */
/* istanbul ignore file */
/* tslint:disable */
/* eslint-disable */
/**
* User's title status
*/
export enum UserTitleStatus {
FINISHED = 'finished',
PLANNED = 'planned',
DROPPED = 'dropped',
IN_PROGRESS = 'in-progress',
}

148
modules/frontend/src/api_/services/DefaultService.ts
View file

@ -1,148 +0,0 @@
/* generated using openapi-typescript-codegen -- do not edit */
/* istanbul ignore file */
/* tslint:disable */
/* eslint-disable */
import type { ReleaseSeason } from '../models/ReleaseSeason';
import type { Title } from '../models/Title';
import type { TitleStatus } from '../models/TitleStatus';
import type { User } from '../models/User';
import type { UserTitle } from '../models/UserTitle';
import type { CancelablePromise } from '../core/CancelablePromise';
import { OpenAPI } from '../core/OpenAPI';
import { request as __request } from '../core/request';
export class DefaultService {
/**
* Get titles
* @param word
* @param status
* @param rating
* @param releaseYear
* @param releaseSeason
* @param limit
* @param offset
* @param fields
* @returns Title List of titles
* @throws ApiError
*/
public static getTitles(
word?: string,
status?: TitleStatus,
rating?: number,
releaseYear?: number,
releaseSeason?: ReleaseSeason,
limit: number = 10,
offset?: number,
fields: string = 'all',
): CancelablePromise<Array<Title>> {
return __request(OpenAPI, {
method: 'GET',
url: '/titles',
query: {
'word': word,
'status': status,
'rating': rating,
'release_year': releaseYear,
'release_season': releaseSeason,
'limit': limit,
'offset': offset,
'fields': fields,
},
errors: {
400: `Request params are not correct`,
500: `Unknown server error`,
},
});
}
/**
* Get title description
* @param titleId
* @param fields
* @returns Title Title description
* @throws ApiError
*/
public static getTitles1(
titleId: number,
fields: string = 'all',
): CancelablePromise<Title> {
return __request(OpenAPI, {
method: 'GET',
url: '/titles/{title_id}',
path: {
'title_id': titleId,
},
query: {
'fields': fields,
},
errors: {
400: `Request params are not correct`,
404: `Title not found`,
500: `Unknown server error`,
},
});
}
/**
* Get user info
* @param userId
* @param fields
* @returns User User info
* @throws ApiError
*/
public static getUsers(
userId: string,
fields: string = 'all',
): CancelablePromise<User> {
return __request(OpenAPI, {
method: 'GET',
url: '/users/{user_id}',
path: {
'user_id': userId,
},
query: {
'fields': fields,
},
errors: {
400: `Request params are not correct`,
404: `User not found`,
500: `Unknown server error`,
},
});
}
/**
* Get user titles
* @param userId
* @param cursor
* @param query
* @param limit
* @param offset
* @param fields
* @returns UserTitle List of user titles
* @throws ApiError
*/
public static getUsersTitles(
userId: string,
cursor?: string,
query?: string,
limit: number = 10,
offset?: number,
fields: string = 'all',
): CancelablePromise<Array<UserTitle>> {
return __request(OpenAPI, {
method: 'GET',
url: '/users/{user_id}/titles',
path: {
'user_id': userId,
},
query: {
'cursor': cursor,
'query': query,
'limit': limit,
'offset': offset,
'fields': fields,
},
errors: {
400: `Request params are not correct`,
500: `Unknown server error`,
},
});
}
}

90
modules/frontend/src/components/Header/Header.tsx Normal file
View file

@ -0,0 +1,90 @@
import React, { useState } from "react";
import { Link } from "react-router-dom";
import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/solid";
type HeaderProps = {
username?: string;
};
export const Header: React.FC<HeaderProps> = ({ username }) => {
const [menuOpen, setMenuOpen] = useState(false);
const toggleMenu = () => setMenuOpen(!menuOpen);
return (
<header className="w-full bg-white shadow-md fixed top-0 left-0 z-50">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex justify-between h-16 items-center">
{/* Левый блок — логотип / название */}
<div className="flex-shrink-0">
<Link to="/" className="text-xl font-bold text-gray-800 hover:text-blue-600">
NyanimeDB
</Link>
</div>
{/* Центр — ссылки на разделы (desktop) */}
<nav className="hidden md:flex space-x-4">
<Link to="/titles" className="text-gray-700 hover:text-blue-600">
Titles
</Link>
<Link to="/users" className="text-gray-700 hover:text-blue-600">
Users
</Link>
<Link to="/about" className="text-gray-700 hover:text-blue-600">
About
</Link>
</nav>
{/* Правый блок — профиль */}
<div className="hidden md:flex items-center space-x-4">
{username ? (
<Link to="/profile" className="text-gray-700 hover:text-blue-600 font-medium">
{username}
</Link>
) : (
<Link to="/login" className="text-gray-700 hover:text-blue-600 font-medium">
Login
</Link>
)}
</div>
{/* Бургер для мобильного */}
<div className="md:hidden flex items-center">
<button
onClick={toggleMenu}
className="p-2 rounded-md hover:bg-gray-200 transition"
>
{menuOpen ? (
<XMarkIcon className="w-6 h-6 text-gray-800" />
) : (
<Bars3Icon className="w-6 h-6 text-gray-800" />
)}
</button>
</div>
</div>
</div>
{/* Мобильное меню */}
{menuOpen && (
<div className="md:hidden bg-white border-t border-gray-200 shadow-md">
<nav className="flex flex-col p-4 space-y-2">
<Link to="/titles" className="text-gray-700 hover:text-blue-600" onClick={() => setMenuOpen(false)}>Titles</Link>
<Link to="/users" className="text-gray-700 hover:text-blue-600" onClick={() => setMenuOpen(false)}>Users</Link>
<Link to="/about" className="text-gray-700 hover:text-blue-600" onClick={() => setMenuOpen(false)}>About</Link>
{username ? (
<Link to="/profile" className="text-gray-700 hover:text-blue-600 font-medium" onClick={() => setMenuOpen(false)}>
{username}
</Link>
) : (
<Link to="/login" className="text-gray-700 hover:text-blue-600 font-medium" onClick={() => setMenuOpen(false)}>
Login
</Link>
)}
</nav>
</div>
)}
</header>
);
};

28
modules/frontend/src/components/LayoutSwitch/LayoutSwitch.tsx Normal file
View file

@ -0,0 +1,28 @@
import React from "react";
import { Squares2X2Icon, Bars3Icon } from "@heroicons/react/24/solid";
export type LayoutSwitchProps = {
layout: "square" | "horizontal"
setLayout: (value: React.SetStateAction<"square" | "horizontal">) => void
};
export function LayoutSwitch({
layout,
setLayout
}: LayoutSwitchProps) {
return (
<div className="flex justify-end">
<button
className="p-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition"
onClick={() =>
setLayout(prev => (prev === "square" ? "horizontal" : "square"))
}>
{layout === "square"
? <Squares2X2Icon className="w-6 h-6" />
: <Bars3Icon className="w-6 h-6" />
}
</button>
</div>
);
}

68
modules/frontend/src/components/ListView/ListView.tsx
View file

@ -1,51 +1,47 @@
import React from "react";
interface ListViewProps<TItem> {
hook: ReturnType<typeof import("./useListView.tsx").useListView<TItem>>;
renderHorizontal: (item: TItem) => React.ReactNode;
renderSquare: (item: TItem) => React.ReactNode;
}
export type ListViewProps<T> = {
items: T[];
layout: "square" | "horizontal";
renderItem: (item: T, layout: "square" | "horizontal") => React.ReactNode;
onLoadMore: () => void;
hasMore: boolean;
loadingMore: boolean;
};
export function ListView<TItem>({
hook,
renderHorizontal,
renderSquare
}: ListViewProps<TItem>) {
const { items, search, setSearch, viewMode, setViewMode, loadMore, hasMore } = hook;
export function ListView<T>({
items,
layout,
renderItem,
onLoadMore,
hasMore,
loadingMore
}: ListViewProps<T>) {
return (
<div>
{/* Search + Layout Switcher */}
<div style={{ display: "flex", gap: 8, marginBottom: 16 }}>
<input
placeholder="Search..."
value={search}
onChange={e => setSearch(e.target.value)}
/>
<button onClick={() => setViewMode("horizontal")}>Horizontal</button>
<button onClick={() => setViewMode("square")}>Square</button>
</div>
<div className="w-full flex flex-col items-center">
{/* Items */}
<div
style={{
display: "grid",
gridTemplateColumns: viewMode === "square" ? "repeat(auto-fill, 160px)" : "1fr",
gap: 12
}}
className={`w-full sm:w-4/5 grid gap-6 ${
layout === "square"
? "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4"
: "grid-cols-1"
}`}
>
{items.map(item =>
viewMode === "horizontal"
? renderHorizontal(item)
: renderSquare(item)
)}
{items.map(item => renderItem(item, layout))}
</div>
{/* Load More */}
{hasMore && (
<button onClick={loadMore} style={{ marginTop: 16 }}>
Load More
<div className="mt-8">
<button
className="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition disabled:opacity-50"
disabled={loadingMore}
onClick={onLoadMore}
>
{loadingMore ? "Loading..." : "Load More"}
</button>
</div>
)}
</div>
);

37
modules/frontend/src/components/ListView/useListView.tsx
View file

@ -1,37 +0,0 @@
import { useState, useEffect } from "react";
import type { FetchFunction } from "../../types/list";
export function useListView<TItem>(fetchFn: FetchFunction<TItem>) {
const [items, setItems] = useState<TItem[]>([]);
const [cursor, setCursor] = useState<string | undefined>();
const [search, setSearch] = useState("");
const [viewMode, setViewMode] = useState<"horizontal" | "square">("horizontal");
const [isLoading, setIsLoading] = useState(false);
useEffect(() => {
loadItems(true);
}, [search]);
const loadItems = async (reset = false) => {
setIsLoading(true);
const result = await fetchFn({
search,
cursor: reset ? undefined : cursor,
});
setItems(prev => reset ? result.items : [...prev, ...result.items]);
setCursor(result.nextCursor);
setIsLoading(false);
};
return {
items,
search,
setSearch,
viewMode,
setViewMode,
loadMore: () => loadItems(),
hasMore: Boolean(cursor),
isLoading,
};
}

34
modules/frontend/src/components/SearchBar/SearchBar.tsx Normal file
View file

@ -0,0 +1,34 @@
type SearchBarProps = {
placeholder?: string;
search: string;
setSearch: (value: string) => void;
};
export function SearchBar({
placeholder = "Search...",
search,
setSearch,
}: SearchBarProps) {
return (
<div className="w-full">
<input
type="text"
value={search}
placeholder={placeholder}
onChange={(e) => setSearch(e.target.value)}
className="
w-full
px-4
py-2
border
border-gray-300
rounded-lg
focus:outline-none
focus:ring-2
focus:ring-blue-500
text-black
"
/>
</div>
);
}

67
modules/frontend/src/components/TitlesSortBox/TitlesSortBox.tsx Normal file
View file

@ -0,0 +1,67 @@
import { useState } from "react";
import type { TitleSort } from "../../api";
import { ChevronDownIcon, ArrowUpIcon, ArrowDownIcon } from "@heroicons/react/24/solid";
type TitlesSortBoxProps = {
sort: TitleSort;
setSort: (value: TitleSort) => void;
sortForward: boolean;
setSortForward: (value: boolean) => void;
};
const SORT_OPTIONS: TitleSort[] = ["id", "rating", "year", "views"];
export function TitlesSortBox({
sort,
setSort,
sortForward,
setSortForward,
}: TitlesSortBoxProps) {
const [open, setOpen] = useState(false);
const toggleSortDirection = () => setSortForward(!sortForward);
const handleSortSelect = (newSort: TitleSort) => {
setSort(newSort);
setOpen(false);
};
return (
<div className="inline-flex relative z-50">
{/* Левая часть — смена направления */}
<button
onClick={toggleSortDirection}
className="px-4 py-2 flex items-center justify-center bg-gray-100 hover:bg-gray-200 border border-gray-300 rounded-l-lg transition"
>
{sortForward ? <ArrowUpIcon className="w-4 h-4 mr-1" /> : <ArrowDownIcon className="w-4 h-4 mr-1" />}
<span className="text-sm font-medium">Order</span>
</button>
{/* Правая часть — выбор параметра */}
<button
onClick={() => setOpen(!open)}
className="px-4 py-2 flex items-center justify-center bg-gray-100 hover:bg-gray-200 border border-gray-300 border-l-0 rounded-r-lg transition"
>
<span className="text-sm font-medium">{sort}</span>
<ChevronDownIcon className="w-4 h-4 ml-1" />
</button>
{/* Dropdown */}
{open && (
<ul className="absolute top-full left-0 mt-1 w-40 bg-white border border-gray-300 rounded-md shadow-lg z-[1000]">
{SORT_OPTIONS.map(option => (
<li key={option}>
<button
className={`w-full text-left px-4 py-2 hover:bg-gray-100 transition ${
option === sort ? "font-bold bg-gray-100" : ""
}`}
onClick={() => handleSortSelect(option)}
>
{option}
</button>
</li>
))}
</ul>
)}
</div>
);
}

10
modules/frontend/src/components/cards/TitleCardHorizontal.tsx
View file

@ -9,13 +9,13 @@ export function TitleCardHorizontal({ title }: { title: Title }) {
border: "1px solid #ddd",
borderRadius: 8
}}>
{title.posterUrl && (
<img src={title.posterUrl} width={80} />
{title.poster?.image_path && (
<img src={title.poster.image_path} width={80} />
)}
<div>
<h3>{title.name}</h3>
<p>{title.year} · {title.season} · Rating: {title.rating}</p>
<p>Status: {title.status}</p>
<h3>{title.title_names["en"]}</h3>
<p>{title.release_year} · {title.release_season} · Rating: {title.rating}</p>
<p>Status: {title.title_status}</p>
</div>
</div>
);

8
modules/frontend/src/components/cards/TitleCardSquare.tsx
View file

@ -10,12 +10,12 @@ export function TitleCardSquare({ title }: { title: Title }) {
borderRadius: 8,
textAlign: "center"
}}>
{title.posterUrl && (
<img src={title.posterUrl} width={140} />
{title.poster?.image_path && (
<img src={title.poster.image_path} width={140} />
)}
<div>
<h4>{title.name}</h4>
<small>{title.year} • {title.rating}</small>
<h4>{title.title_names["en"]}</h4>
<small>{title.release_year} • {title.rating}</small>
</div>
</div>
);

71
modules/frontend/src/index.css
View file

@ -1,68 +1,9 @@
:root {
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;
@import "tailwindcss";
color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: #242424;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a {
font-weight: 500;
color: #646cff;
text-decoration: inherit;
}
a:hover {
color: #535bf2;
}
body {
html, body, #root {
margin: 0;
display: flex;
place-items: center;
min-width: 320px;
min-height: 100vh;
}
h1 {
font-size: 3.2em;
line-height: 1.1;
}
button {
border-radius: 8px;
border: 1px solid transparent;
padding: 0.6em 1.2em;
font-size: 1em;
font-weight: 500;
font-family: inherit;
background-color: #1a1a1a;
cursor: pointer;
transition: border-color 0.25s;
}
button:hover {
border-color: #646cff;
}
button:focus,
button:focus-visible {
outline: 4px auto -webkit-focus-ring-color;
}
@media (prefers-color-scheme: light) {
:root {
color: #213547;
background-color: #ffffff;
}
a:hover {
color: #747bff;
}
button {
background-color: #f9f9f9;
}
padding: 0;
width: 100%;
height: 100%;
@apply text-black bg-white;
}

60
modules/frontend/src/pages/TitlesPage/TitlesPage.module.css
View file

@ -1,59 +1 @@
.container {
padding: 24px;
}
.header {
display: flex;
justify-content: space-between;
margin-bottom: 16px;
}
.searchInput {
padding: 8px;
width: 240px;
}
.list {
display: grid;
gap: 12px;
}
.card {
display: flex;
padding: 10px;
border: 1px solid #ddd;
border-radius: 8px;
gap: 12px;
}
.poster {
width: 80px;
height: 120px;
object-fit: cover;
border-radius: 4px;
}
.posterPlaceholder {
width: 80px;
height: 120px;
background: #eee;
display: flex;
align-items: center;
justify-content: center;
}
.cardInfo {
display: flex;
flex-direction: column;
}
.loadMore {
margin-top: 16px;
padding: 8px 16px;
}
.loader,
.error {
padding: 20px;
text-align: center;
}
@import "tailwindcss";

204
modules/frontend/src/pages/TitlesPage/TitlesPage.tsx
View file

@ -1,114 +1,154 @@
import React, { useEffect, useState } from "react";
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 type { Title } from "../../api/models/Title";
import styles from "./TitlesPage.module.css";
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";
const LIMIT = 20;
const PAGE_SIZE = 10;
const TitlesPage: React.FC = () => {
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 [offset, setOffset] = useState(0);
const [loading, setLoading] = useState(true);
const [loadingMore, setLoadingMore] = useState(false);
const [error, setError] = useState<string | null>(null);
const [sort, setSort] = useState<TitleSort>("id");
const [sortForward, setSortForward] = useState(true);
const [layout, setLayout] = useState<"square" | "horizontal">("square");
const fetchPage = async (cursorObj: CursorObj | null) => {
const cursorStr = cursorObj ? btoa(JSON.stringify(cursorObj)).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '') : "";
const fetchTitles = async (reset: boolean) => {
try {
if (reset) {
setLoading(true);
setOffset(0);
} else {
setLoadingMore(true);
}
const result = await DefaultService.getTitles(
search || undefined,
undefined, // status
undefined, // rating
undefined, // release_year
undefined, // release_season
LIMIT,
reset ? 0 : offset,
cursorStr,
sort,
sortForward,
search.trim() || undefined,
undefined,
undefined,
undefined,
undefined,
PAGE_SIZE,
undefined,
"all"
);
if (reset) {
setTitles(result);
} else {
setTitles(prev => [...prev, ...result]);
if ((result === undefined) || !result.data?.length) {
return { items: [], nextCursor: null };
}
if (result.length > 0) {
setOffset(prev => prev + LIMIT);
return {
items: result.data ?? [],
nextCursor: result.cursor ?? null
};
} catch (err: any) {
if (err.status === 204) {
return { items: [], nextCursor: null };
}
} catch (err) {
console.error(err);
setError("Failed to fetch titles.");
} finally {
setLoading(false);
setLoadingMore(false);
throw err;
}
};
// Инициализация: загружаем сразу две страницы
useEffect(() => {
fetchTitles(true);
}, [search]);
const initLoad = async () => {
setLoading(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);
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);
};
if (loading) return <div className={styles.loader}>Loading...</div>;
if (error) return <div className={styles.error}>{error}</div>;
return (
<div className={styles.container}>
<div className={styles.header}>
<h1>Titles</h1>
<div className="w-full min-h-screen bg-gray-50 p-6 flex flex-col items-center">
<input
className={styles.searchInput}
placeholder="Search titles..."
value={search}
onChange={e => setSearch(e.target.value)}
<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>
<div className={styles.list}>
{titles.map((t) => (
<div key={t.id} className={styles.card}>
{t.poster_id ? (
<img
src={`/images/${t.poster_id}.png`}
alt="Poster"
className={styles.poster}
/>
) : (
<div className={styles.posterPlaceholder}>No Image</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>
)}
<div className={styles.cardInfo}>
<h3 className={styles.titleName}>{t.name}</h3>
<p className={styles.meta}>
{t.release_year} • {t.release_season}
</p>
<p className={styles.rating}>Rating: {t.rating}</p>
<p className={styles.status}>{t.status}</p>
</div>
</div>
))}
</div>
{titles.length > 0 && (
<button
className={styles.loadMore}
onClick={() => fetchTitles(false)}
disabled={loadingMore}
>
{loadingMore ? "Loading..." : "Load More"}
</button>
<>
<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>
);
};
export default TitlesPage;
}

8
modules/frontend/vite.config.ts
View file

@ -1,11 +1,15 @@
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'
// https://vite.dev/config/
export default defineConfig({
plugins: [react()],
plugins: [
react(),
tailwindcss()
],
server: {
host: '127.0.0.1',
host: '0.0.0.0',
port: 8083,
},
})

14
sql/queries.sql.go
View file

@ -120,7 +120,10 @@ SELECT
t.id, t.title_names, t.studio_id, t.poster_id, t.title_status, t.rating, t.rating_count, t.release_year, t.release_season, t.season, t.episodes_aired, t.episodes_all, t.episodes_len,
i.storage_type::text as title_storage_type,
i.image_path as title_image_path,
jsonb_agg_strict(g.tag_name)'[]'::jsonb as tag_names,
COALESCE(
jsonb_agg(g.tag_names) FILTER (WHERE g.tag_names IS NOT NULL),
'[]'::jsonb
) as tag_names,
s.studio_name as studio_name,
s.illust_id as studio_illust_id,
s.studio_desc as studio_desc,
@ -155,7 +158,7 @@ type GetTitleByIDRow struct {
EpisodesLen []byte `json:"episodes_len"`
TitleStorageType string `json:"title_storage_type"`
TitleImagePath *string `json:"title_image_path"`
TagNames []byte `json:"tag_names"`
TagNames interface{} `json:"tag_names"`
StudioName *string `json:"studio_name"`
StudioIllustID *int64 `json:"studio_illust_id"`
StudioDesc *string `json:"studio_desc"`
@ -341,7 +344,10 @@ SELECT
t.id, t.title_names, t.studio_id, t.poster_id, t.title_status, t.rating, t.rating_count, t.release_year, t.release_season, t.season, t.episodes_aired, t.episodes_all, t.episodes_len,
i.storage_type::text as title_storage_type,
i.image_path as title_image_path,
jsonb_agg_strict(g.tag_name)'[]'::jsonb as tag_names,
COALESCE(
jsonb_agg(g.tag_names) FILTER (WHERE g.tag_names IS NOT NULL),
'[]'::jsonb
) as tag_names,
s.studio_name as studio_name,
s.illust_id as studio_illust_id,
s.studio_desc as studio_desc,
@ -482,7 +488,7 @@ type SearchTitlesRow struct {
EpisodesLen []byte `json:"episodes_len"`
TitleStorageType string `json:"title_storage_type"`
TitleImagePath *string `json:"title_image_path"`
TagNames []byte `json:"tag_names"`
TagNames interface{} `json:"tag_names"`
StudioName *string `json:"studio_name"`
StudioIllustID *int64 `json:"studio_illust_id"`
StudioDesc *string `json:"studio_desc"`