Back button to Books List

karlosos · Dec 28, 2023 · f134bd9 · f134bd9
1 parent 2a95877
commit f134bd9
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 5 deletions.
diff --git 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
@@ -33,7 +33,7 @@ const BooksList = () => {
         <Wrapper ref={wrapperRef}>
             <BooksContainer>
                 {booksFiltered.map((book) => (
-                    <BookItem key={book.id} book={book} />
+                    <BookItem key={book.id} book={book} page={page} />
                 ))}
             </BooksContainer>
             <PaginationWrapper>

diff --git 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 (
         <Wrapper ref={wrapperRef}>
             <MainHeader>
+                {booksListPage && (
+                    <AdditionalButtons>
+                        <BackButton
+                            onClick={() => navigate(`/?page=${booksListPage}`)}
+                        >
+                            <ChevronLeft />
+                            Go back
+                        </BackButton>
+                    </AdditionalButtons>
+                )}
                 <Title as="h1">{title}</Title>
             </MainHeader>
             <Content>

diff --git 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;
+`