Feature/jc 720 anime list

apps/react/src/App.tsx

@@ -5,8 +5,10 @@ import { BrowserRouter } from 'react-router-dom';
 import { StyledEngineProvider } from '@mui/material';
 
 import { RootRouter } from './routes/RootRouter';
-import { Header } from './components/header/Header';
 import { store } from './store/store';
+import { Header } from './components/Header/Header';
+import { Progress } from './components/Progress/Progress';
+
 import './theme/styles.css';
 
 /** App component. */
@@ -15,12 +17,11 @@ export const App: FC = () => (
 		<BrowserRouter>
 			<div>
 				<StyledEngineProvider injectFirst>
-					<Suspense fallback={<div>Brrr... here should be your loader component</div>}>
-						<Header />
+					<Header />
+					<Suspense fallback={<Progress />}>
 						<RootRouter />
 					</Suspense>
 				</StyledEngineProvider>
-
 			</div>
 		</BrowserRouter>
 	</Provider>

apps/react/src/api/config.ts

@@ -1,6 +1,4 @@
-/**
- * Config for api url.
- */
+/** Config for api url. */
 export const CONFIG = {
 	apiUrl: import.meta.env.VITE_APP_API_BASE_URL ?? '',
 };

apps/react/src/api/dtos/animeFilterParamsDto.ts

@@ -0,0 +1,12 @@
+/** Params for request to the server. Contains data about anime list filters. */
+export type AnimeFilterParamsDto = {
+
+	/** String for searching anime. */
+	readonly search?: string;
+
+	/** Selected anime types for filtering anime. */
+	readonly type__in?: string;
+
+	/** Sorting settings for sorting anime. */
+	readonly ordering?: string;
+};

apps/react/src/api/dtos/animeSortDto.ts

@@ -0,0 +1,8 @@
+/** Anime sorting settings. Indicates by which field and in which direction the sorting is performed. */
+export enum AnimeSortDto {
+	AscendingEnglishTitle = 'title_eng',
+	DescendingEnglishTitle = '-title_eng',
+	AscendingStatus = 'status',
+	DescendingStatus = '-status',
+	None = '',
+}

apps/react/src/api/index.ts

@@ -2,9 +2,7 @@ import axios from 'axios';
 
 import { CONFIG } from './config';
 
-/**
- * Http const with base url.
- */
+/** Http const with base url. */
 export const http = axios.create({
 	baseURL: CONFIG.apiUrl,
 });

apps/react/src/api/mappers/animeFilterParamsMapper.ts

@@ -0,0 +1,24 @@
+import { AnimeFilterParams } from '@js-camp/react/models/animeFilterParams';
+import { AnimeTypeMapper } from '@js-camp/core/mappers/anime-type.mapper';
+import { AnimeType } from '@js-camp/core/models/anime-type';
+
+import { AnimeFilterParamsDto } from '../dtos/animeFilterParamsDto';
+
+import { AnimeSortMapper } from './animeSortMapper';
+
+export namespace AnimeFilterParamsMapper {
+
+	/**
+	 * Map anime filter params model to dto.
+	 * @param params - Model with anime filter params for UI.
+	 * @returns Anime filter params dto.
+	 */
+	export function toDto(params: AnimeFilterParams): AnimeFilterParamsDto {
+
+		return {
+			search: params.searchTerm,
+			ordering: AnimeSortMapper.toDto(params.sortingSettings),
+			type__in: params.selectedTypes.map((animeType: AnimeType) => AnimeTypeMapper.toDto(animeType)).join(','),
+		};
+	}
+}

apps/react/src/api/mappers/animeSortMapper.ts

@@ -0,0 +1,43 @@
+import { AnimeSort } from '@js-camp/react/models/animeSort';
+import { checkIsEnumMember } from '@js-camp/core/utils/check-is-enum.util';
+
+import { AnimeSortDto } from '../dtos/animeSortDto';
+
+export namespace AnimeSortMapper {
+	const ANIME_SORT_MAP_TO_DTO: Readonly<Record<AnimeSort, AnimeSortDto>> = {
+		[AnimeSort.AscendingEnglishTitle]: AnimeSortDto.AscendingEnglishTitle,
+		[AnimeSort.DescendingEnglishTitle]: AnimeSortDto.DescendingEnglishTitle,
+		[AnimeSort.AscendingStatus]: AnimeSortDto.AscendingStatus,
+		[AnimeSort.DescendingStatus]: AnimeSortDto.DescendingStatus,
+		[AnimeSort.None]: AnimeSortDto.None,
+	};
+
+	/**
+	 * Map anime sorting setting from model to dto.
+	 * @param sortingSettings  - Sorting settings model.
+	 * @returns Sorting settings dto.
+	 */
+	export function toDto(sortingSettings: AnimeSort): AnimeSortDto {
+		return ANIME_SORT_MAP_TO_DTO[sortingSettings];
+	}
+
+	/**
+	 * Map anime sorting setting from string to model.
+	 * @param sortingSettings  - Sorting settings string.
+	 * @returns Sorting settings model.
+	 */
+	export function fromString(sortingSettings: string): AnimeSort {
+		assertIsAnimeSort(sortingSettings);
+		return sortingSettings;
+	}
+
+	/**
+	 * Assert that value is typeof AnimeSort.
+	 * @param value - Value for checking.
+	 */
+	function assertIsAnimeSort(value: unknown): asserts value is AnimeSort {
+		if (!checkIsEnumMember(value, AnimeSort)) {
+			throw new Error(`${value} is not a valid AnimeSort!`);
+		}
+	}
+}

apps/react/src/api/services/animeService.ts

@@ -0,0 +1,36 @@
+import { Anime } from '@js-camp/core/models/anime';
+import { PaginationDto } from '@js-camp/core/dtos/pagination.dto';
+import { AnimeDto } from '@js-camp/core/dtos/anime.dto';
+import { AnimeMapper } from '@js-camp/core/mappers/anime.mapper';
+import { AnimeFilterParams } from '@js-camp/react/models/animeFilterParams';
+import { Pagination } from '@js-camp/core/models/pagination';
+import { PaginationMapper } from '@js-camp/core/mappers/pagination.mapper';
+
+import { http } from '..';
+import { AnimeFilterParamsMapper } from '../mappers/animeFilterParamsMapper';
+
+const ANIME_LIST_URL = 'anime/anime/list-cursor/';
+
+export namespace AnimeService {
+
+	/**
+	 * Fetches a list of anime.
+	 * @param params - Params for filtering anime.
+	 */
+	export async function fetchList(params: AnimeFilterParams): Promise<Pagination<Anime>> {
+		const { data } = await http.get<PaginationDto<AnimeDto>>(ANIME_LIST_URL, {
+			params: AnimeFilterParamsMapper.toDto(params),
+		});
+
+		return PaginationMapper.fromDto(data, AnimeMapper.fromDto);
+	}
+
+	/**
+	 * Fetches a new page of anime list.
+	 * @param newPageUrl - Url of new page.
+	 */
+	export async function fetchPageByUrl(newPageUrl: string): Promise<Pagination<Anime>> {
+		const { data } = await http.get<PaginationDto<AnimeDto>>(newPageUrl);
+		return PaginationMapper.fromDto(data, AnimeMapper.fromDto);
+	}
+}

apps/react/src/components/Progress/Progress.tsx

@@ -0,0 +1,12 @@
+import { FC, memo } from 'react';
+import { Box, CircularProgress } from '@mui/material';
+
+/** Component to show the loading process.  */
+const ProgressComponent: FC = () => (
+	<Box sx={{ display: 'flex', justifyContent: 'center', padding: 2 }}>
+		<CircularProgress />
+	</Box>
+);
+
+/** Memoized progress component. */
+export const Progress = memo(ProgressComponent);

apps/react/src/features/anime/components/AnimeCard/AnimeCard.module.css

@@ -0,0 +1,14 @@
+.card {
+	padding: var(--space-m);
+	height: 100%;
+}
+
+.title {
+	font-size: var(--font-size-lg);
+	font-weight: var(--font-weight-semibold);
+	padding: var(--space-s) 0;
+}
+
+.information {
+	padding: var(--space-s) 0;
+}

apps/react/src/features/anime/components/AnimeCard/AnimeCard.tsx

@@ -0,0 +1,42 @@
+import { memo, FC } from 'react';
+import { useParams, Link } from 'react-router-dom';
+import { Button, Paper, Typography } from '@mui/material';
+
+import { ANIME_PATH, EDIT_ANIME_PATH } from '../../routes';
+
+import styles from './AnimeCard.module.css';
+
+/** Card with anime data. */
+const AnimeCardComponent: FC = () => {
+
+	const { id } = useParams<{ id: string; }>();
+
+	const linkToEdit = `/${ANIME_PATH}/${id}/${EDIT_ANIME_PATH}`;
+
+	return (
+		<Paper
+			elevation={3}
+			className={styles.card}
+		>
+			<h2 className={styles.title}>
+				Item Name
+			</h2>
+			<div>
+				<Typography className={styles.information}>
+					Information about item with id = {id}
+				</Typography>
+				<Button
+					variant="outlined"
+					component={Link}
+					to={linkToEdit}
+				>
+					Edit
+				</Button>
+			</div>
+		</Paper>
+	);
+
+};
+
+/** Memoized anime card. */
+export const AnimeCard = memo(AnimeCardComponent);

apps/react/src/features/anime/components/AnimeEditForm/AnimeEditForm.tsx

@@ -0,0 +1,11 @@
+import { FC, memo } from 'react';
+
+/** Anime edit form. */
+const AnimeEditFormComponent: FC = () => (
+	<form>
+		Edit form
+	</form>
+);
+
+/** Memoized anime edit form. */
+export const AnimeEditForm = memo(AnimeEditFormComponent);

apps/react/src/features/anime/components/AnimeFilterForm/AnimeFilterForm.module.css

@@ -0,0 +1,13 @@
+.form {
+	display: flex;
+	flex-direction: column;
+	gap: var(--space-xs);
+	padding: var(--space-s);
+}
+
+.row {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	gap: var(--space-xs);
+}

apps/react/src/features/anime/components/AnimeFilterForm/AnimeFilterForm.tsx

@@ -0,0 +1,23 @@
+import { memo, FC } from 'react';
+
+import { AnimeSearchField } from '../AnimeSearchField/AnimeSearchField';
+import { AnimeTypesField } from '../AnimeTypesField/AnimeTypesField';
+import { AnimeSortField } from '../AnimeSortField/AnimeSortField';
+
+import styles from './AnimeFilterForm.module.css';
+
+/** Anime filter form. */
+const AnimeFilterFormComponent: FC = () => (
+	<form className={styles.form}>
+		<div className={styles.row}>
+			<AnimeSearchField />
+			<AnimeTypesField />
+		</div>
+		<div className={styles.row}>
+			<AnimeSortField />
+		</div>
+	</form>
+);
+
+/** Memoized filter form. */
+export const AnimeFilterForm = memo(AnimeFilterFormComponent);

apps/react/src/features/anime/components/AnimeList/AnimeList.module.css

@@ -0,0 +1,56 @@
+.list {
+	overflow-y: auto;
+	padding-top: 0;
+}
+
+.item {
+	border-top: 1px var(--border-color) solid;
+	color: var(--primary-font-color);
+	display: flex;
+	flex-direction: row;
+	gap: var(--space-s);
+	cursor: pointer;
+}
+
+.item:hover,
+.item:focus {
+	background-color: var(--hover-color);
+}
+
+.cover {
+	border-radius: 50%;
+	width: 80px;
+	height: 80px;
+	object-fit: cover;
+}
+
+.property {
+	display: flex;
+	align-items: center;
+	gap: var(--space-xs);
+}
+
+.propertyTitle {
+	white-space: nowrap;
+	font-size: var(--font-size-sm);
+	font-weight: var(--font-weight-semibold);
+}
+
+.propertyValue {
+	max-width: 100%;
+
+	/* Disable to use -webkit */
+	/* stylelint-disable-next-line value-no-vendor-prefix */
+	display: -webkit-box;
+	line-clamp: 1;
+	-webkit-line-clamp: 1;
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	font-size: var(--font-size-sm);
+	font-weight: var(--font-weight-regular);
+}
+
+.message {
+	text-align: center;
+}