diff --git a/src/app/features/clippings/books-list/BookItem.jsx b/src/app/features/clippings/books-list/BookItem.jsx index 0f7f716..de25e50 100644 --- a/src/app/features/clippings/books-list/BookItem.jsx +++ b/src/app/features/clippings/books-list/BookItem.jsx @@ -25,7 +25,7 @@ import bookExport from './bookExport'; dayjs.extend(relativeTime); -const BookItem = ({ book }) => { +const BookItem = ({ book, page }) => { const store = useStore(); const dispatch = useDispatch(); const navigate = useNavigate(); @@ -43,7 +43,7 @@ const BookItem = ({ book }) => { const handleNavigateBook = () => { dispatch(setActiveSidebarItem(book.id.toString())); - navigate(`/highlights/${book.title}`); + navigate(`/highlights/${book.title}?booksListPage=${page}`); }; return ( diff --git a/src/app/features/clippings/books-list/BooksList.jsx b/src/app/features/clippings/books-list/BooksList.jsx index 5fd761d..76e3ab1 100644 --- a/src/app/features/clippings/books-list/BooksList.jsx +++ b/src/app/features/clippings/books-list/BooksList.jsx @@ -33,7 +33,7 @@ const BooksList = () => { {booksFiltered.map((book) => ( - + ))} diff --git a/src/app/features/clippings/highlights/HighlightsList.jsx b/src/app/features/clippings/highlights/HighlightsList.jsx index b2b5a26..d8c3dd5 100644 --- a/src/app/features/clippings/highlights/HighlightsList.jsx +++ b/src/app/features/clippings/highlights/HighlightsList.jsx @@ -1,9 +1,12 @@ +import { ChevronLeft } from 'lucide-react'; import React, { useRef } from 'react'; -import { useSearchParams } from 'react-router-dom'; +import { useNavigate, useSearchParams } from 'react-router-dom'; import { Pagination } from 'semantic-ui-react'; import HighlightItem from './HighlightItem'; import { + AdditionalButtons, + BackButton, Content, Footer, MainHeader, @@ -12,8 +15,10 @@ import { } from './HighlightsList.style'; const HighlightsList = ({ title, highlights, bookInfoVisible }) => { + const navigate = useNavigate(); const [searchParams, setSearchParams] = useSearchParams(); const page = searchParams.get('page') ?? 1; + const booksListPage = searchParams.get('booksListPage'); const wrapperRef = useRef(); const itemsPerPage = 20; @@ -28,6 +33,7 @@ const HighlightsList = ({ title, highlights, bookInfoVisible }) => { // eslint-disable-next-line no-shadow const handlePaginationChange = (e, { activePage }) => { setSearchParams({ + booksListPage, page: activePage, }); wrapperRef.current.scrollTo(0, 0); @@ -36,6 +42,16 @@ const HighlightsList = ({ title, highlights, bookInfoVisible }) => { return ( + {booksListPage && ( + + navigate(`/?page=${booksListPage}`)} + > + + Go back + + + )} {title} diff --git a/src/app/features/clippings/highlights/HighlightsList.style.jsx b/src/app/features/clippings/highlights/HighlightsList.style.jsx index fd740e6..a1b4df2 100644 --- a/src/app/features/clippings/highlights/HighlightsList.style.jsx +++ b/src/app/features/clippings/highlights/HighlightsList.style.jsx @@ -11,8 +11,9 @@ export const Wrapper = styled.div` `; export const MainHeader = styled.div` - padding-top: 24px; + padding-top: 22px; display: inline-flex; + flex-direction: column; position: sticky; top: 0; left: 0; @@ -22,6 +23,7 @@ export const MainHeader = styled.div` `; export const Title = styled(Header)` + margin-top: 5px; color: rgb(37, 56, 52); `; @@ -44,3 +46,32 @@ export const Footer = styled.div` box-shadow: -16px -1px 0 #e5e5e5; user-select: none; `; + +export const BackButton = styled.div` + background: #ffffff; + color: #4d5d50; + border: 1px solid #f2f6f3; + + border-radius: 4px; + display: flex; + align-items: center; + gap: 4px; + justify-content: center; + + padding: 4px 16px; + + &:hover { + background: #fafefc; + cursor: pointer; + } +`; + +export const BackButtonIcon = styled.div` + display: flex; + align-items: center; + justify-content: center; +`; + +export const AdditionalButtons = styled.div` + display: flex; +` \ No newline at end of file