filtragem por ano implementada

package.json

@@ -9,12 +9,13 @@
  },
  "dependencies": {
  "react": "^18.0.0",
- "react-dom": "^18.0.0"
+ "react-dom": "^18.0.0",
+ "react-router-dom": "^6.3.0"
  },
  "devDependencies": {
  "@types/react": "^18.0.0",
  "@types/react-dom": "^18.0.0",
  "@vitejs/plugin-react": "^1.3.0",
  "vite": "^2.9.9"
  }
-}
+}

routes/details.jsx

@@ -0,0 +1,17 @@
+export default function Details(props) {
+ return (
+ <>
+ <button type='button'>Voltar</button>
+ <section>
+ <img src={props.imageLink} alt={props.title} />
+ <h1>{props.title}</h1>
+ <strong>{props.author}</strong>
+ <p>{props.country}</p>
+ <p>{props.language}</p>
+ <a href={props.link}>Acessar</a>
+ <p>{props.pages}</p>
+ <p>{props.year}</p>
+ </section>
+ </>
+ );
+}

src/App.jsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react';
 import { nanoid } from 'nanoid';
+import { Link } from 'react-router-dom';
 
 function App() {
  const [API, setAPI] = useState();
@@ -8,17 +9,21 @@ function App() {
  const [buttonFind, setButtonFind] = useState(inputFind);
  const [page, setPage] = useState(1);
  const [filter, setFilter] = useState(`?_page=${page}`);
- const [filterYearMin, setfilterYearMin] = useState(0);
- const [filterYearMax, setfilterYearMax] = useState(0);
+ const [filterYearMin, setfilterYearMin] = useState();
+ const [filterYearMax, setfilterYearMax] = useState();
 
  useEffect(() => {
- fetch(`http:https://localhost:4000/books${filter}${buttonFind}`)
+ fetch(
+ `http:https://localhost:4000/books${filter}${buttonFind}${
+ filterYearMin ? filterYearMin : ``
+ }${filterYearMax ? filterYearMax : ``}`
+ )
  .then((res) => res.json())
  .then((data) => {
  setLoading(false);
  setAPI(data);
  });
- }, [loading, filter, buttonFind, page, filterYearMin]);
+ }, [loading, filter, buttonFind, page]);
 
  return (
  <>
@@ -36,18 +41,20 @@ function App() {
  />
  <strong>Filtrar por Ano: </strong>
  <input
- onChange={({ target }) => setfilterYearMin(target.value)}
+ onChange={({ target }) => setfilterYearMin(`&year_gte=${target.value}`)}
  type='number'
+ max='2099'
+ step='1'
  id='filterYearMin'
  placeholder='min'
- value={filterYearMin}
  />
  <input
- onChange={({ target }) => setfilterYearMax(target.value)}
+ onChange={({ target }) => setfilterYearMax(`&year_lte=${target.value}`)}
  type='number'
+ max='2099'
+ step='1'
  id='filterYearMax'
  placeholder='max'
- value={filterYearMax}
  />
  <button
  type='submit'
@@ -82,6 +89,7 @@ function App() {
  <td key={nanoid()}>{book.author}</td>
  <td key={nanoid()}>{book.country}</td>
  <td key={nanoid()}>{book.year}</td>
+ <td key={nanoid()}>Detalhes</td>
  </tr>
  ))}
  </tbody>

src/main.jsx

@@ -1,9 +1,18 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';
+// import { BrowserRouter, Routes, Route } from 'react-router-dom';
+// import Details from '../routes/details';
 
-ReactDOM.createRoot(document.getElementById('root')).render(
+const root = ReactDOM.createRoot(document.getElementById('root'));
+
+root.render(
  <React.StrictMode>
+ {/* <BrowserRouter>
+ <Routes>
+ <Route exact path='/' element={<Details />} />
+ </Routes>
+ </BrowserRouter> */}
  <App />
  </React.StrictMode>
 );