From cd40966665fe34dd14923f6368adea456e8e6f16 Mon Sep 17 00:00:00 2001
From: Riba <mrp19@inf.ufpr.br>
Date: Fri, 28 Feb 2020 11:40:43 -0300
Subject: [PATCH] =?UTF-8?q?Add=20adicionar=20mais=20p=C3=A1ginas=20=C3=A0?=
=?UTF-8?q?=20busca?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/Pages/Search.js | 70 ++++++++-------------------------------------
1 file changed, 12 insertions(+), 58 deletions(-)
diff --git a/src/Pages/Search.js b/src/Pages/Search.js
index 9477de3c..70465b05 100644
--- a/src/Pages/Search.js
+++ b/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>
--
GitLab