Add adicionar mais páginas à busca

src/Pages/Search.js

@@ -39,7 +39,7 @@ export default function Search(props) {
   const { state, dispatch } = useContext(Store);
   const [results, setResults] = useState([]);
   const [page] = useState(0);
-  const [resultsPerPage] = useState(12);
+  const [resultsPerPage, setResultsPerPage] = useState(12);
   const [order] = useState("score");
 
   useEffect(() => {
@@ -78,11 +78,7 @@ export default function Search(props) {
         setResults(res.data);
         console.log(res.data);
       });
-  }, [state.search]);
-  var row1 = results.slice(0, 3);
-  var row2 = results.slice(3, 6);
-  var row3 = results.slice(6, 9);
-  var row4 = results.slice(9, 13);
+  }, [state.search, resultsPerPage]);
 
   return (
     <div style={{ backgroundColor: "#f4f4f4" }}>
@@ -132,7 +128,7 @@ export default function Search(props) {
                 justifyContent: "center"
               }}
             >
-              <div>Mostrar</div>
+              <div style={{ textAlign: "left" }}>Mostrar</div>
             </Grid>
             <Grid
               item
@@ -154,7 +150,7 @@ export default function Search(props) {
                 justifyContent: "center"
               }}
             >
-              <div>Ordenar por:</div>
+              <div style={{ textAlign: "right" }}>Ordenar por:</div>
             </Grid>
           </Grid>
         </HeaderFilters>
@@ -165,9 +161,9 @@ export default function Search(props) {
             </Paper>
           </Grid>
           <Grid item xs={9}>
-            <Row style={{ paddingBottom: "5px" }}>
-              {row1.map(card => (
-                <Col md={4} sm={6} key={card.id}>
+            <Grid container spacing={2}>
+              {results.map(card => (
+                <Grid item md={4} sm={6} key={card.id}>
                   <ResourceCard
                     name={card.name}
                     rating={card.score}
@@ -177,54 +173,12 @@ export default function Search(props) {
                     author={card.author}
                     avatar={card.publisher.avatar}
                   />
-                </Col>
+                </Grid>
               ))}
-            </Row>
-            <Row style={{ paddingBottom: "5px" }}>
-              {row2.map(card => (
-                <Col md={4} sm={6} key={card.id}>
-                  <ResourceCard
-                    name={card.name}
-                    rating={card.score}
-                    type={card.object_type}
-                    description={card.description}
-                    thumbnail={card.thumbnail}
-                    author={card.author}
-                    avatar={card.publisher.avatar}
-                  />
-                </Col>
-              ))}
-            </Row>
-            <Row style={{ paddingBottom: "5px" }}>
-              {row3.map(card => (
-                <Col md={4} sm={6} key={card.id}>
-                  <ResourceCard
-                    name={card.name}
-                    rating={card.score}
-                    type={card.object_type}
-                    description={card.description}
-                    thumbnail={card.thumbnail}
-                    author={card.author}
-                    avatar={card.publisher.avatar}
-                  />
-                </Col>
-              ))}
-            </Row>
-            <Row style={{ paddingBottom: "5px" }}>
-              {row4.map(card => (
-                <Col md={4} sm={6} key={card.id}>
-                  <ResourceCard
-                    name={card.name}
-                    rating={card.score}
-                    type={card.object_type}
-                    description={card.description}
-                    thumbnail={card.thumbnail}
-                    author={card.author}
-                    avatar={card.publisher.avatar}
-                  />
-                </Col>
-              ))}
-            </Row>
+            </Grid>
+            <button onClick={() => setResultsPerPage(resultsPerPage + 12)}>
+              Número de recursos mostrados {resultsPerPage}
+            </button>
           </Grid>
         </GridBusca>
       </Principal>