Merge remote-tracking branch 'origin/main'

moevm · Dec 10, 2024 · 0edea7d · 0edea7d
2 parents caae6c2 + 6c2ca18
commit 0edea7d
Show file tree

Hide file tree

Showing 37 changed files with 1,362 additions and 168 deletions.
diff --git a/frontend/src/components/BookCard.js b/frontend/src/components/BookCard.js
@@ -1,12 +1,22 @@
 import React from 'react';
 import '../css/BookCard.css';
+import {Link} from "react-router-dom";
 
 const BookCard = ({  name, year, authorName, }) => {
+    const encodeParam = (param) => encodeURIComponent(param);
     return (
         <div className="book-card">
-            <p className="book-text">{name}</p>
+            <p className="book-text">
+                <Link to={`/book/${encodeParam(name)}`} className="link">
+                    {name}
+                </Link>
+            </p>
             <div className="book-details">
-                <span className="author">{authorName}</span>
+                <span className="author">
+                    <Link to={`/author/${encodeParam(authorName)}`} className="link">
+                            {authorName}
+                    </Link>
+                </span>
                 <span className="year">{year} г</span>
             </div>
         </div>

diff --git a/frontend/src/components/CitationCard.js b/frontend/src/components/CitationCard.js
@@ -1,15 +1,40 @@
 import React from 'react';
 import '../css/CitationCard.css';
+import {Link} from "react-router-dom";
+
+const CitationCard = ({ id, quote, authorName, book, hero }) => {
+
+    const encodeParam = (param) => encodeURIComponent(param);
 
-const CitationCard = ({ quote, authorName, book, hero }) => {
     return (
         <div className="citation-card">
-            <p className="citation-text">{quote}</p>
+            <p className="citation-text">
+                <Link to={`/quote/${id}`} className="citation-link">
+                    {quote}
+                </Link>
+            </p>
             <div className="citation-details">
-                <span className="hero">© {hero || "Слова автора"}</span>
-                <span className="book">{book.name}</span>
+                <span className="hero">
+                    ©{' '}
+                    {hero ? (
+                        <Link to={`/hero/${encodeParam(hero)}`} className="citation-link">
+                            {hero}
+                        </Link>
+                    ) : (
+                        "Слова автора"
+                    )}
+                </span>
+                <span className="book">
+                    <Link to={`/book/${encodeParam(book.name)}`} className="citation-link">
+                        {book.name}
+                    </Link>
+                </span>
                 <span className="book_year">{book.year} г</span>
-                <span className="author">{authorName}</span>
+                <span className="author">
+                    <Link to={`/author/${encodeParam(authorName)}`} className="citation-link">
+                        {authorName}
+                    </Link>
+                </span>
             </div>
         </div>
     );

diff --git a/frontend/src/components/DetailsAuthorCard.js b/frontend/src/components/DetailsAuthorCard.js
@@ -0,0 +1,36 @@
+import {Link} from "react-router-dom";
+import React from "react";
+import "../css/DetailsAuthorCard.css"
+
+const DetailsAuthorCard = ({authorName, books, totalQuotes}) => {
+
+    const encodeParam = (param) => encodeURIComponent(param);
+
+
+    return (
+        <div className="details-author-card">
+            <p className="details-author-text">{authorName}</p>
+            <div className="details-author-details">
+                <div className="books-container">
+                    <span className="title-book">Произведения:</span>
+                    <span className="book-list">
+                        {books.map((book, index) => (
+                            <React.Fragment key={`${book.name}-${book.year}`}>
+                                <Link to={`/book/${encodeParam(book.name)}`} className="author-link">
+                                    {book.name}
+                                </Link>
+                                {index < books.length - 1 && ', '}
+                            </React.Fragment>
+                        ))}
+                    </span>
+                </div>
+                <div>
+                    <span className="title-count">Количество цитат:</span>
+                    <span className="count">{totalQuotes}</span>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default DetailsAuthorCard;
diff --git a/frontend/src/components/DetailsBookCard.js b/frontend/src/components/DetailsBookCard.js
@@ -0,0 +1,50 @@
+import React from "react";
+import {Link} from "react-router-dom";
+import "../css/DetailsBookCard.css"
+
+const DetailsBookCard = ({bookName, year, heroes, author, totalQuotes}) => {
+
+    const encodeParam = (param) => encodeURIComponent(param);
+
+
+    return (
+        <div className="details-book-card">
+            <p className="details-book-text">{bookName}</p>
+            <div className="details-book-details">
+                <div className="books-container">
+                    <span className="title-author">Автор произведения:</span>
+                    <span>
+                        <Link to={`/author/${encodeParam(author)}`} className="book-link">
+                            {author}
+                        </Link>
+                    </span>
+                </div>
+                <div>
+                    <span className="title-year">Год публикации:</span>
+                    <span className="year">{year}</span>
+                </div>
+
+                <div className="books-container">
+                    <span className="title-heroe">Герои произведения:</span>
+                    <span className="heroe-list">
+                        {heroes.map((hero, index) => (
+                            <React.Fragment key={hero}>
+                                <Link to={`/hero/${encodeParam(hero)}`} className="book-link">
+                                    {hero}
+                                </Link>
+                                {index < heroes.length - 1 && ', '}
+                            </React.Fragment>
+                        ))}
+                    </span>
+                </div>
+
+                <div>
+                    <span className="title-count">Количество цитат:</span>
+                    <span className="book-count">{totalQuotes}</span>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default DetailsBookCard;
diff --git a/frontend/src/components/DetailsCitationCard.js b/frontend/src/components/DetailsCitationCard.js
@@ -0,0 +1,51 @@
+import React from "react";
+import "../css/DetailsCitationCard.css"
+import {Link} from "react-router-dom";
+
+const DetailsCitationCard = ({quote, authorName, book, hero}) => {
+
+    const encodeParam = (param) => encodeURIComponent(param);
+
+
+    return (
+        <div className="details-citation-card">
+            <p className="details-citation-text">{quote}</p>
+            <div className="details-citation-details">
+                <div>
+                    <span className="title-hero">Кому принадлежит:</span>
+                    <span className="hero-d">
+                        {hero ? (
+                            <Link to={`/hero/${encodeParam(hero)}`} className="citation-link">
+                                {hero}
+                            </Link>
+                        ) : (
+                            "Слова автора"
+                        )}
+                    </span>
+                </div>
+                <div>
+                    <span className="title-author">Автор произведения:</span>
+                    <span className="author-d">
+                        <Link to={`/author/${encodeParam(authorName)}`} className="citation-link">
+                            {authorName}
+                        </Link>
+                    </span>
+                </div>
+                <div>
+                    <span className="title-book">Произведение:</span>
+                    <span className="book-d">
+                        <Link to={`/book/${encodeParam(book.name)}`} className="citation-link">
+                            {book.name}
+                        </Link>
+                    </span>
+                </div>
+                <div>
+                    <span className="title-book_year">Год публикации:</span>
+                    <span className="book_year-d">{book.year}</span>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default DetailsCitationCard;
diff --git a/frontend/src/components/DetailsHeroCard.js b/frontend/src/components/DetailsHeroCard.js
@@ -0,0 +1,42 @@
+import {Link} from "react-router-dom";
+import React from "react";
+import "../css/DetailsHeroCard.css"
+
+const DetailsHeroCard = ({heroName, books, authors}) => {
+    const encodeParam = (param) => encodeURIComponent(param);
+
+    return (
+        <div className="details-hero-card">
+            <p className="details-hero-text">{heroName}</p>
+            <div className="details-hero-details">
+                <div>
+                    <span className="title-hero">Герой произведения:</span>
+                    <span className="hero-d">
+                        <Link to={`/book/${encodeParam(books[0].name)}`} className="hero-link">
+                            {books[0].name}
+                        </Link>
+                    </span>
+                </div>
+                <div>
+                    <span className="title-author">Автор произведения:</span>
+                    <span className="author-d">
+                        <Link to={`/author/${encodeParam(authors)}`} className="hero-link">
+                            {authors}
+                        </Link>
+                    </span>
+                </div>
+                <div>
+                    <span className="title-book_year">Год публикации:</span>
+                    <span className="book_year-d">{books[0].year} г</span>
+                </div>
+
+                {/*<div>*/}
+                {/*    <span className="title-count">Количество цитат:</span>*/}
+                {/*    <span className="book-count">{totalQuotesByHero}</span>*/}
+                {/*</div>*/}
+            </div>
+        </div>
+    );
+};
+
+export default DetailsHeroCard;
diff --git a/frontend/src/components/HeroCard.js b/frontend/src/components/HeroCard.js
@@ -1,13 +1,30 @@
 import React from 'react';
 import '../css/HeroCard.css';
+import {Link} from "react-router-dom";
+
+const HeroCard = ({authorName, book, hero}) => {
+
+    const encodeParam = (param) => encodeURIComponent(param);
+
 
-const HeroCard = ({ authorName, book, hero }) => {
     return (
         <div className="hero-card">
-            <p className="hero-text">{hero}</p>
+            <p className="hero-text">
+                <Link to={`/hero/${encodeParam(hero)}`} className="link">
+                    {hero}
+                </Link>
+            </p>
             <div className="hero-details">
-                <span className="author">{authorName}</span>
-                <span className="book">{book.name}</span>
+                <span className="author">
+                    <Link to={`/author/${encodeParam(authorName)}`} className="link">
+                            {authorName}
+                    </Link>
+                </span>
+                <span className="book">
+                    <Link to={`/book/${encodeParam(book.name)}`} className="link">
+                            {book.name}
+                    </Link>
+                </span>
             </div>
         </div>
     );

diff --git a/frontend/src/components/Sidebar.js b/frontend/src/components/Sidebar.js
@@ -3,8 +3,9 @@ import '../css/Sidebar.css';
 import YearSlider from "./YearSlider";
 import {faChevronDown, faChevronUp, faPlus} from "@fortawesome/free-solid-svg-icons";
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import SearchBar from "./SearchBar";
 
-const Sidebar = ({onFilterChange}) => {
+const Sidebar = ({ onFilterChange }) => {
     const [authors, setAuthors] = useState([]);
     const [books, setBooks] = useState([]);
     const [heroes, setHeroes] = useState([]);
@@ -13,6 +14,10 @@ const Sidebar = ({onFilterChange}) => {
     const [selectedHeroes, setSelectedHeroes] = useState([]);
     const [yearRange, setYearRange] = useState([]);
 
+    const [authorSearch, setAuthorSearch] = useState("");
+    const [bookSearch, setBookSearch] = useState("");
+    const [heroSearch, setHeroSearch] = useState("");
+
     const defaultDisplayCount = 10;
     const [displayCount, setDisplayCount] = useState({
         books: defaultDisplayCount,
@@ -80,6 +85,25 @@ const Sidebar = ({onFilterChange}) => {
         return array.includes(value) ? array.filter(item => item !== value) : [...array, value];
     };
 
+    const handleSearchChange = (category, value) => {
+        if (category === 'author') {
+            setAuthorSearch(value);
+            onFilterChange({
+                authorPartial: value,
+            });
+        } else if (category === 'book') {
+            setBookSearch(value);
+            onFilterChange({
+                bookPartial: value,
+            });
+        } else if (category === 'hero') {
+            setHeroSearch(value);
+            onFilterChange({
+                heroPartial: value,
+            });
+        }
+    };
+
     const handleYearRangeChange = (newRange) => {
         // setYearRange(newRange);
         onFilterChange({bookYear: newRange});
@@ -110,9 +134,10 @@ const Sidebar = ({onFilterChange}) => {
     return (
         <div className="sidebar">
             <div className="filter-section">
-                <h3 onClick={() => toggleFilterVisibility('books')} style={{cursor: 'pointer'}}>
+                <SearchBar placeholder="Поиск по произведению" onSearch={(value) => handleSearchChange('book', value)} />
+                <h3 onClick={() => toggleFilterVisibility('books')} style={{ cursor: 'pointer' }}>
                     Произведение
-                    <FontAwesomeIcon icon={filterVisibility.books ? faChevronUp : faChevronDown} className="icon"/>
+                    <FontAwesomeIcon icon={filterVisibility.books ? faChevronUp : faChevronDown} className="icon" />
                 </h3>
                 {filterVisibility.books && (
                     <div className="filters">
@@ -137,9 +162,10 @@ const Sidebar = ({onFilterChange}) => {
             </div>
 
             <div className="filter-section">
-                <h3 onClick={() => toggleFilterVisibility('authors')} style={{cursor: 'pointer'}}>
+                <SearchBar placeholder="Поиск по автору" onSearch={(value) => handleSearchChange('author', value)} />
+                <h3 onClick={() => toggleFilterVisibility('authors')} style={{ cursor: 'pointer' }}>
                     Автор
-                    <FontAwesomeIcon icon={filterVisibility.authors ? faChevronUp : faChevronDown} className="icon"/>
+                    <FontAwesomeIcon icon={filterVisibility.authors ? faChevronUp : faChevronDown} className="icon" />
                 </h3>
                 {filterVisibility.authors && (
                     <div className="filters">
@@ -163,12 +189,13 @@ const Sidebar = ({onFilterChange}) => {
                 )}
             </div>
 
-            <YearSlider onYearRangeChange={handleYearRangeChange} initialRange={yearRange}/>
+            <YearSlider onYearRangeChange={handleYearRangeChange} initialRange={yearRange} />
 
             <div className="filter-section">
-                <h3 onClick={() => toggleFilterVisibility('heroes')} style={{cursor: 'pointer'}}>
+                <SearchBar placeholder="Поиск по герою" onSearch={(value) => handleSearchChange('hero', value)} />
+                <h3 onClick={() => toggleFilterVisibility('heroes')} style={{ cursor: 'pointer' }}>
                     Герой
-                    <FontAwesomeIcon icon={filterVisibility.heroes ? faChevronUp : faChevronDown} className="icon"/>
+                    <FontAwesomeIcon icon={filterVisibility.heroes ? faChevronUp : faChevronDown} className="icon" />
                 </h3>
                 {filterVisibility.heroes && (
                     <div className="filters">