last clicked book to store & Selected Books Sidebar to component for …

…testing
midudev · Aug 8, 2023 · d430423 · d430423
1 parent 24a3ad7
commit d430423
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 50 deletions.
diff --git a/pruebas/01-reading-list/foleas/src/App.tsx b/pruebas/01-reading-list/foleas/src/App.tsx
@@ -5,12 +5,12 @@ import PageRangeFilter from "./components/PageRangeFilter";
 import GenreFilter from "./components/GenreFilter";
 import { UseGetData } from "./hooks/useGetData";
 import SearchFilter from "./components/SearchFilter";
-import { Book } from "./types";
 import ColorThemeSwitch from "./components/ColorThemeSwitch";
 import { stickyTop, textColorAnimationClass } from "./utils/tailwind";
 import Paginator from "./components/Paginator";
 import { getMaxPage } from "./utils/books";
 import PerPageFilter from "./components/PerPageFilter";
+import SelectedBooksSidebar from "./components/SelectedBooksSidebar";
 
 function App() {
   const {
@@ -25,12 +25,12 @@ function App() {
     setFilteredBooks,
     selectedBooks,
     setSelectedBooks,
+    lastBookClicked,
+    setLastBookClicked,
   } = useStore();
 
   const { loading } = UseGetData("./books.json");
 
-  const [lastBookClicked, setLastBookClicked] = useState<string>("");
-
   useEffect(() => {
     if (!loading) {
       setFilteredBooks(
@@ -120,53 +120,7 @@ function App() {
                 })}
             </div>
           </div>
-          <div className={`lecture-books-wrapper p-5 pl-0 flex-1 max-h-full`}>
-            {selectedBooks.length > 0 && (
-              <div
-                className={`lecture-books-inner overflow-y-auto h-full ${
-                  selectedBooks.length &&
-                  "transition duration-300 border-black border bg-gray-300 dark:border-white dark:bg-gray-800 rounded-md"
-                }`}
-              >
-                <div
-                  className={`list-title rounded-md p-5 mb-5 bg-gray-300 ${stickyTop}`}
-                >
-                  <h2
-                    className={`text-3xl font-bold ${textColorAnimationClass}`}
-                  >
-                    Lista de Lectura
-                  </h2>
-                </div>
-                <div className="box-border pb-5 h-full lecture-books">
-                  <div className="pl-5 pr-5 grid grid-cols-4 sm:grid-cols-6 md:grid-cols-2 gap-10 pb-4">
-                    {selectedBooks.map((v, i) => {
-                      const selectedBook = books.find(
-                        ({ book: { ISBN } }) => ISBN === v
-                      ) as Book;
-                      if (!selectedBook) return false;
-                      const { ISBN, title, cover } = selectedBook.book;
-                      return (
-                        <BookCard
-                          key={ISBN}
-                          index={lastBookClicked === ISBN ? 0 : i}
-                          title={title}
-                          imageUrl={cover}
-                          showInfo={false}
-                          withRemoveBnt={true}
-                          onClickHandler={() => {
-                            setLastBookClicked(ISBN);
-                            setSelectedBooks(
-                              selectedBooks.filter((v) => v !== ISBN)
-                            );
-                          }}
-                        />
-                      );
-                    })}
-                  </div>
-                </div>
-              </div>
-            )}
-          </div>
+          <SelectedBooksSidebar />
         </>
       )}
     </main>

diff --git a/pruebas/01-reading-list/foleas/src/components/SelectedBooksSidebar/index.tsx b/pruebas/01-reading-list/foleas/src/components/SelectedBooksSidebar/index.tsx
@@ -0,0 +1,64 @@
+import { useStore } from "../../store/store";
+import { Book } from "../../types";
+import { stickyTop, textColorAnimationClass } from "../../utils/tailwind";
+import BookCard from "../common/BookCard";
+
+const SelectedBooksSidebar = () => {
+  const {
+    books,
+    selectedBooks,
+    setSelectedBooks,
+    lastBookClicked,
+    setLastBookClicked,
+  } = useStore();
+  return (
+    <div className={`lecture-books-wrapper p-5 pl-0 flex-1 max-h-full`}>
+      {selectedBooks.length > 0 && (
+        <div
+          className={`lecture-books-inner overflow-y-auto h-full ${
+            selectedBooks.length &&
+            "transition duration-300 border-black border bg-gray-300 dark:border-white dark:bg-gray-800 rounded-md"
+          }`}
+        >
+          <div
+            className={`list-title rounded-md p-5 mb-5 bg-gray-300 ${stickyTop}`}
+          >
+            <h2 className={`text-3xl font-bold ${textColorAnimationClass}`}>
+              Lista de Lectura
+            </h2>
+          </div>
+          <div className="box-border pb-5 h-full lecture-books">
+            <div
+              role="selected-books"
+              className="pl-5 pr-5 grid grid-cols-4 sm:grid-cols-6 md:grid-cols-2 gap-10 pb-4"
+            >
+              {selectedBooks.map((v, i) => {
+                const selectedBook = books.find(
+                  ({ book: { ISBN } }) => ISBN === v
+                ) as Book;
+                if (!selectedBook) return false;
+                const { ISBN, title, cover } = selectedBook.book;
+                return (
+                  <BookCard
+                    key={ISBN}
+                    index={lastBookClicked === ISBN ? 0 : i}
+                    title={title}
+                    imageUrl={cover}
+                    showInfo={false}
+                    withRemoveBnt={true}
+                    onClickHandler={() => {
+                      setLastBookClicked(ISBN);
+                      setSelectedBooks(selectedBooks.filter((v) => v !== ISBN));
+                    }}
+                  />
+                );
+              })}
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default SelectedBooksSidebar;
diff --git a/pruebas/01-reading-list/foleas/src/store/store.tsx b/pruebas/01-reading-list/foleas/src/store/store.tsx
@@ -67,4 +67,6 @@ export const useStore = create<Store>((set) => ({
       setLocalStorage("selectedBooks", selectedBooks);
       return { selectedBooks };
     }),
+  lastBookClicked: "",
+  setLastBookClicked: (lastBookClicked) => set(() => ({ lastBookClicked })),
 }));
diff --git a/pruebas/01-reading-list/foleas/src/store/storeTypes.d.ts b/pruebas/01-reading-list/foleas/src/store/storeTypes.d.ts
@@ -28,4 +28,6 @@ export type Store = {
   setFilteredBooks: (filteredBooks: Array<string>) => void;
   selectedBooks: Array<string>;
   setSelectedBooks: (selectedBooks: Array<string>) => void;
+  lastBookClicked: string;
+  setLastBookClicked: (lastBookClicked: string) => void;
 };