Add slider pages feature

midudev · Aug 28, 2023 · 38db579 · 38db579
1 parent b270ebf
commit 38db579
Show file tree

Hide file tree

Showing 4 changed files with 136 additions and 16 deletions.
diff --git a/pruebas/01-reading-list/axelauza97/bookshelves-app/components/components/BookList.js b/pruebas/01-reading-list/axelauza97/bookshelves-app/components/components/BookList.js
@@ -10,13 +10,13 @@ function BookList(props) {
       {/*Disponibles*/}
       {props.type !== "wish" &&
         props.books != null &&
-        props.books != undefined &&
+        props.books !== undefined &&
         props.books.map(
           (bookE, i) =>
             bookE.book.visible && (
               <div
                 key={i}
-                className={`${bookE.book.wish ? classes.darken : ""}`}
+                className={`${bookE.book.wish ? classes.darken : null}`}
                 onClick={() => clickHandler(bookE.book)}
               >
                 <Image
@@ -26,12 +26,14 @@ function BookList(props) {
                   src={bookE.book.cover}
                   alt={bookE.book.title}
                 />
+                <h1 className={classes.title}>{bookE.book.title}</h1>
+                <p className={classes.synopsis}>{bookE.book.synopsis}</p>
               </div>
             )
         )}
       {props.type === "wish" &&
         props.books != null &&
-        props.books != undefined &&
+        props.books !== undefined &&
         props.books.map(
           (bookE, i) =>
             bookE.book.visible &&
@@ -48,6 +50,8 @@ function BookList(props) {
                   src={bookE.book.cover}
                   alt={bookE.book.title}
                 />
+                <h1 className={classes.title}>{bookE.book.title}</h1>
+                <p className={classes.synopsis}>{bookE.book.synopsis}</p>
               </div>
             )
         )}

diff --git a/pruebas/01-reading-list/axelauza97/bookshelves-app/components/components/BookList.module.css b/pruebas/01-reading-list/axelauza97/bookshelves-app/components/components/BookList.module.css
@@ -17,16 +17,27 @@
 
 .darken:after {
   position: absolute;
-  height: 1rem;
-  width: 1rem;
+  /*height: 1rem;
+  width: 1rem;*/
   top: -0.5rem;
   bottom: 0rem;
-  left: 7rem;
+  left: 8rem;
   right: 0rem;
   content: "\274c";
   color: #fff;
 }
 
+.title {
+  font-size: 1rem;
+  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
+  padding: 0.25rem;
+}
+
+.synopsis {
+  font-size: 0.75rem;
+  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
+}
+
 @media screen and (min-width: 700px) {
   .bookList {
     margin: 2rem;

diff --git a/pruebas/01-reading-list/axelauza97/bookshelves-app/pages/index.js b/pruebas/01-reading-list/axelauza97/bookshelves-app/pages/index.js
@@ -3,9 +3,11 @@ import classes from "@/styles/Home.module.css";
 import BookList from "@/components/components/BookList";
 import books from "public/books.json";
 import { useEffect, useState } from "react";
-
+let genre = null;
+let pages = null;
 export default function Home(props) {
-  const [genre, setGenre] = useState(null);
+  //const [genre, setGenre] = useState(null);
+  const [qtyPages, setQtyPages] = useState(0);
   const [bookFiltered, setbookFiltered] = useState(null);
   const [selectedValue, setSelectedValue] = useState("");
 
@@ -25,14 +27,32 @@ export default function Home(props) {
         return book;
       });
     }
+    props.setBooks(modifiedBooks);
+  }, []);
+  useEffect(() => {
     const uniqueGenre = new Set();
     uniqueGenre.add("Todos");
 
-    props.setBooks(modifiedBooks);
-    modifiedBooks.map((book) => {
+    props.booksD.map((book) => {
       uniqueGenre.add(book.book.genre);
     });
-    setGenre(uniqueGenre);
+    genre = uniqueGenre;
+  }, []);
+  useEffect(() => {
+    const max = Math.max(
+      ...props.booksD.map((book) => {
+        return book.book.pages;
+      })
+    );
+    const min = Math.min(
+      ...props.booksD.map((book) => {
+        return book.book.pages;
+      })
+    );
+    pages = {
+      max: max,
+      min: min,
+    };
   }, []);
 
   const moveList = (book) => {
@@ -59,6 +79,7 @@ export default function Home(props) {
   };
   const handleValueChange = (event) => {
     let genreSelected = event.target.value;
+    setQtyPages(0);
     setSelectedValue(genreSelected);
     let modifiedBooks;
     if (genreSelected === "Todos") {
@@ -68,7 +89,7 @@ export default function Home(props) {
       });
     } else {
       modifiedBooks = props.books.map((book) => {
-        if (book.book.genre !== genreSelected) {
+        if (!book.book.wish && book.book.genre !== genreSelected) {
           book.book.visible = false;
         } else {
           book.book.visible = true;
@@ -79,6 +100,17 @@ export default function Home(props) {
     props.setBooks(modifiedBooks);
   };
 
+  const handleQtyChange = (value) => {
+    setSelectedValue("Todos");
+    props.books.map((book) => {
+      if (!book.book.wish && book.book.pages < value) {
+        book.book.visible = false;
+      } else {
+        book.book.visible = true;
+      }
+    });
+  };
+
   return (
     <>
       <Head>
@@ -115,13 +147,32 @@ export default function Home(props) {
             </h4>
           </div>
           <section className={classes.filtros}>
-            <div className={classes.filtro}></div>
+            <div className={classes.filtro}>
+              <span className="">{`Máximo: ${qtyPages}`}</span>
+              <input
+                type="range"
+                max={pages != null ? pages.max : 0}
+                min={pages != null ? pages.min : 0}
+                step="1"
+                value={qtyPages}
+                onChange={(e) => {
+                  const value = e.target.value;
+                  setQtyPages(value);
+                  handleQtyChange(value);
+                }}
+              />
+            </div>
             <div className={classes.filtro}>
               <div>
                 <h4>Filtrar por genero</h4>
               </div>
+
               <div>
-                <select value={selectedValue} onChange={handleValueChange}>
+                <select
+                  value={selectedValue}
+                  onChange={handleValueChange}
+                  className={classes.genreSelect}
+                >
                   {genre !== null &&
                     Array.from(genre).map((option, index) => (
                       <option key={index} value={option}>

diff --git a/pruebas/01-reading-list/axelauza97/bookshelves-app/styles/Home.module.css b/pruebas/01-reading-list/axelauza97/bookshelves-app/styles/Home.module.css
@@ -21,10 +21,65 @@
   margin-top: 1rem;
 }
 
+/* width */
+
+.wishSection::-webkit-scrollbar {
+  width: 1rem;
+}
+
+/* Track */
+
+.wishSection::-webkit-scrollbar-track {
+  box-shadow: inset 0 0 1rem grey;
+  border-radius: 1rem;
+}
+
+/* Handle */
+
+.wishSection::-webkit-scrollbar-thumb {
+  background: gray;
+  border-radius: 1rem;
+  height: 1rem;
+}
+
 .wishSection {
   margin-top: 2rem;
   border: gray 1px solid;
   padding: 1rem;
+  max-height: 60vh;
+  overflow-y: scroll;
+  position: relative;
+  border-radius: 1rem;
+}
+
+.wishSection h3 {
+  position: sticky;
+  top: 0;
+  text-align: center;
+  background: rgba(0, 0, 0, 0.6);
+}
+
+.wishSection h3::before {
+  content: "";
+  position: absolute;
+  top: -1rem;
+  right: -1rem;
+  bottom: -1rem;
+  left: -1rem;
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(1rem);
+  z-index: -1;
+}
+
+.genreSelect {
+  border-radius: 0.5rem;
+  padding: 0.1rem;
+  background-color: black;
+}
+
+.genreSelect,
+.genreSelect option {
+  color: white !important;
 }
 
 @media screen and (min-width: 700px) {
@@ -35,8 +90,7 @@
   .wishSection {
     text-align: center;
     margin-top: 0rem;
-    max-height: 50vw;
-    overflow-y: scroll;
+    max-height: 80vh;
   }
   /*.wishSection {
     width: 30% !important;