saritasa-nest · TebyakinaEkaterina · Aug 15, 2024 · Aug 15, 2024 · Aug 15, 2024 · Aug 15, 2024
diff --git a/.github/workflows/preview.yml b/.github/workflows/preview.yml
@@ -27,9 +27,9 @@ jobs:
         npm ci
         PR_NUMBER=$(echo $GITHUB_REF | awk 'BEGIN { FS = "/" } ; { print $3 }')
         REPO_NAME=camp-js-2024-ekaterina-tebyakina
-        npm run angular:build -- --baseHref=/$REPO_NAME/pr-preview/pr-$PR_NUMBER/
+        npm run react:build -- --base=/$REPO_NAME/pr-preview/pr-$PR_NUMBER/
 
     - name: Deploy preview
       uses: rossjrw/pr-preview-action@v1
       with:
-        source-dir: dist/apps/angular
+        source-dir: dist/apps/react
diff --git a/apps/react/index.html b/apps/react/index.html
@@ -7,15 +7,15 @@
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
-      content="Web site created using create-react-app"
+      content="Web site with information about anime"
     />
     <link rel="apple-touch-icon" href="logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="manifest.json" />
-    <title>React App</title>
+    <title>Anime App</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/apps/react/src/App.tsx b/apps/react/src/App.tsx
@@ -5,6 +5,9 @@ import { BrowserRouter } from 'react-router-dom';
 
 import { RootRouter } from './routes/RootRouter';
 import { store } from './store';
+import { Header } from './components/header';
+
+import './theme/styles.css';
 
 /**
  * App component.
@@ -14,6 +17,7 @@ export const App: FC = () => (
 		<BrowserRouter>
 			<div>
 				<Suspense fallback={<div>Brrr... here should be your loader component</div>}>
+					<Header />
 					<RootRouter />
 				</Suspense>
 			</div>

diff --git a/apps/react/src/components/header/Header.module.css b/apps/react/src/components/header/Header.module.css
@@ -0,0 +1,23 @@
+/* Used important to override material styles. */
+.header {
+	width: 100%;
+	height: var(--header-height);
+	padding: 0 var(--space-m);
+	background-color: var(--primary-background-color) !important;
+	color: var(--primary-font-color) !important;
+	display: flex;
+	flex-direction: row !important;
+	justify-content: space-between;
+	align-items: center;
+}
+
+.header__title {
+	font-size: var(--font-size-xl);
+	font-weight: var(--font-weight-semibold);
+}
+
+.header__nav {
+	display: flex;
+	flex-direction: row;
+	gap: var(--space-m);
+}
diff --git a/apps/react/src/components/header/Header.tsx b/apps/react/src/components/header/Header.tsx
@@ -0,0 +1,56 @@
+import { FC, memo } from 'react';
+import { Link, useLocation } from 'react-router-dom';
+import AppBar from '@mui/material/AppBar';
+import Chip from '@mui/material/Chip';
+import Stack from '@mui/material/Stack';
+import Box from '@mui/material/Box';
+
+import styles from './Header.module.css';
+
+/** Header component. */
+const HeaderComponent: FC = () => {
+
+	const location = useLocation();
+
+	const isActive = (path: string) => location.pathname.startsWith(path);
+
+	return (
+		<AppBar
+			position="static"
+			className={styles.header}
+		>
+			<nav className={styles.header__nav}>
+				<h1 className={styles.header__title}>Anime App</h1>
+				<Stack direction="row" spacing={1}>
+					<Chip
+						label="Anime"
+						variant={isActive('/anime') ? 'filled' : 'outlined'}
+						component={Link}
+						to="/anime"
+						clickable
+					/>
+					<Chip
+						label="Genres"
+						variant={isActive('/genres') ? 'filled' : 'outlined'}
+						component={Link}
+						to="/genres"
+						clickable
+					/>
+					<Chip
+						label="Studios"
+						variant={isActive('/studios') ? 'filled' : 'outlined'}
+						component={Link}
+						to="/studios"
+						clickable
+					/>
+				</Stack>
+			</nav>
+			<Box>Authorization menu</Box>
+		</AppBar>
+	);
+};
+
+/**
+ * Memorized header.
+ */
+export const Header = memo(HeaderComponent);
diff --git a/apps/react/src/components/header/index.ts b/apps/react/src/components/header/index.ts
@@ -0,0 +1 @@
+export { Header } from './Header';
diff --git a/apps/react/src/features/anime/pages/AnimePage.tsx b/apps/react/src/features/anime/pages/AnimePage.tsx
@@ -0,0 +1,13 @@
+import { memo, FC } from 'react';
+
+/** Anime page component. */
+const AnimePageComponent: FC = () => (
+	<>
+		<h1>Anime</h1>
+	</>
+);
+
+/**
+ * Memorized anime page component.
+ */
+export const AnimePage = memo(AnimePageComponent);
diff --git a/apps/react/src/features/anime/pages/index.ts b/apps/react/src/features/anime/pages/index.ts
@@ -0,0 +1 @@
+export { AnimePage } from './AnimePage';
diff --git a/apps/react/src/features/anime/routes.tsx b/apps/react/src/features/anime/routes.tsx
@@ -0,0 +1,18 @@
+import { lazy } from 'react';
+import { Navigate, RouteObject } from 'react-router-dom';
+
+const AnimePage = lazy(() => import('./pages/AnimePage').then(module => ({ default: module.AnimePage })));
+
+/**
+ * Route object for AnimePage.
+ */
+export const animeRoutes: RouteObject[] = [
+	{
+		path: 'anime',
+		element: <AnimePage />,
+	},
+	{
+		path: '*',
+		element: <Navigate to="AnimePage" />,
+	},
+];
diff --git a/apps/react/src/features/genres/components/GenreCard/GenreCard.module.css b/apps/react/src/features/genres/components/GenreCard/GenreCard.module.css
@@ -1,3 +1,14 @@
 .card {
-	background-color: aliceblue;
+	padding: var(--space-m);
+	height: 100%;
+}
+
+.card__title {
+	font-size: var(--font-size-lg);
+	font-weight: var(--font-weight-semibold);
+	padding: var(--space-s) 0;
+}
+
+.card__information {
+	padding: var(--space-s) 0;
 }
diff --git a/apps/react/src/features/genres/components/GenreCard/GenreCard.tsx b/apps/react/src/features/genres/components/GenreCard/GenreCard.tsx
@@ -1,21 +1,40 @@
 import { memo, FC } from 'react';
-import { Genre } from '@js-camp/core/models/genre';
+import { useParams, Link, useLocation } from 'react-router-dom';
+import { Box, Button, Paper, Typography } from '@mui/material';
 
 import styles from './GenreCard.module.css';
 
-type Props = {
+/** Card with genre data. */
+const GenreCardComponent: FC = () => {
 
-	/** Genre. */
-	readonly genre: Genre;
-};
+	const location = useLocation();
+	const linkToEdit = `${location.pathname}/edit`;
+	const { id } = useParams<{ id: string; }>();
 
-/** Card with genre data. */
-const GenreCardComponent: FC<Props> = ({ genre }: Props) => (
-	<div className={styles.card}>
-		<h2>{genre.name}</h2>
-		<span>Id - {genre.id}</span>
-	</div>
-);
+	return (
+		<Paper
+			elevation={3}
+			className={styles.card}
+		>
+			<h2 className={styles.card__title}>
+				Item Name
+			</h2>
+			<Box>
+				<Typography className={styles.card__information}>
+					Information about item with id = {id}
+				</Typography>
+				<Button
+					variant="outlined"
+					component={Link}
+					to={linkToEdit}
+				>
+					Edit
+				</Button>
+			</Box>
+		</Paper>
+	);
+
+};
 
 /**
  * Memorized genre card.

diff --git a/apps/react/src/features/genres/components/GenreEditForm/GenreEditForm.tsx b/apps/react/src/features/genres/components/GenreEditForm/GenreEditForm.tsx
@@ -0,0 +1,13 @@
+import { FC, memo } from 'react';
+
+/** Genre edit form. */
+const GenreEditFormComponent: FC = () => (
+	<form>
+		Edit form
+	</form>
+);
+
+/**
+ * Memorized genre edit form.
+ */
+export const GenreEditForm = memo(GenreEditFormComponent);
diff --git a/apps/react/src/features/genres/components/GenreEditForm/index.ts b/apps/react/src/features/genres/components/GenreEditForm/index.ts
@@ -0,0 +1 @@
+export { GenreEditForm } from './GenreEditForm';
diff --git a/apps/react/src/features/genres/components/GenresFilterForm/GenresFilterForm.module.css b/apps/react/src/features/genres/components/GenresFilterForm/GenresFilterForm.module.css
@@ -0,0 +1,12 @@
+.form {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	gap: var(--space-xs);
+	padding: var(--space-s);
+}
+
+.form__field {
+	height: var(--form-field-height);
+	flex-grow: 1;
+}
diff --git a/apps/react/src/features/genres/components/GenresFilterForm/GenresFilterForm.tsx b/apps/react/src/features/genres/components/GenresFilterForm/GenresFilterForm.tsx
@@ -0,0 +1,20 @@
+import { memo, FC } from 'react';
+import { TextField } from '@mui/material';
+
+import styles from './GenresFilterForm.module.css';
+
+/** Genres filter form. */
+const GenresFilterFormComponent: FC = () => (
+	<form className={styles.form}>
+		<TextField
+			className={styles.form__field}
+			label="Search"
+			variant="outlined"
+		/>
+	</form>
+);
+
+/**
+ * Memorized filter form.
+ */
+export const GenresFilterForm = memo(GenresFilterFormComponent);
diff --git a/apps/react/src/features/genres/components/GenresFilterForm/index.ts b/apps/react/src/features/genres/components/GenresFilterForm/index.ts
@@ -0,0 +1 @@
+export { GenresFilterForm } from './GenresFilterForm';
diff --git a/apps/react/src/features/genres/components/GenresList/GenresList.module.css b/apps/react/src/features/genres/components/GenresList/GenresList.module.css
@@ -0,0 +1,15 @@
+.list {
+	width: 100%;
+	padding-top: 0 !important;
+}
+
+.list__item {
+	border: 1px var(--border-color) solid;
+	color: var(--primary-font-color);
+}
+
+.list__item:hover,
+.list__item:focus {
+	cursor: pointer;
+	background-color: var(--hover-color);
+}
diff --git a/apps/react/src/features/genres/components/GenresList/GenresList.tsx b/apps/react/src/features/genres/components/GenresList/GenresList.tsx
@@ -0,0 +1,38 @@
+import { memo, FC } from 'react';
+import { Link } from 'react-router-dom';
+import { Genre } from '@js-camp/core/models/genre';
+import { List, ListItem, IconButton, ListItemText } from '@mui/material';
+import DeleteIcon from '@mui/icons-material/Delete';
+
+import styles from './GenresList.module.css';
+
+type Props = {
+
+	/** Genres. */
+	readonly genres: Genre[];
+};
+
+/** Genres list.  */
+const GenresListComponent: FC<Props> = ({ genres }: Props) => (
+	<List className={styles.list}>
+		{ genres.map(genre =>
+			<ListItem
+				key={genre.id}
+				className={styles.list__item}
+				secondaryAction={
+					<IconButton edge="end" aria-label="delete">
+						<DeleteIcon />
+					</IconButton>
+				}
+				component={Link}
+				to={`/genres/${genre.id}`}
+			>
+				<ListItemText primary={genre.name} />
+			</ListItem>) }
+	</List>
+);
+
+/**
+ * Memorized genres list.
+ */
+export const GenresList = memo(GenresListComponent);
diff --git a/apps/react/src/features/genres/components/GenresList/index.ts b/apps/react/src/features/genres/components/GenresList/index.ts
@@ -0,0 +1 @@
+export { GenresList } from './GenresList';
diff --git a/apps/react/src/features/genres/pages/GenresPage/GenresPage.module.css b/apps/react/src/features/genres/pages/GenresPage/GenresPage.module.css
@@ -0,0 +1,23 @@
+.main {
+	display: flex;
+	flex-direction: row;
+	width: 100%;
+	height: calc(100vh - var(--header-height));
+}
+
+.main__section {
+	min-width: 320px;
+	border: 1px var(--border-color) solid;
+}
+
+.main__section__list {
+	flex-grow: 1;
+	overflow-y: auto;
+	border: 1px var(--border-color) solid;
+	height: calc(100% - var(--form-field-height) - (2 * var(--space-s)));
+}
+
+.main__details {
+	width: 100%;
+	padding: var(--space-m);
+}