From 4f02580da8b92296f68322e8aea1ff9f327b04d2 Mon Sep 17 00:00:00 2001
From: mrp19 <mrp19.ufpr.br>
Date: Wed, 2 Dec 2020 21:06:07 -0300
Subject: [PATCH] =?UTF-8?q?fix=20estiliza=C3=A7=C3=A3o=20p=C3=A1gina=20de?=
=?UTF-8?q?=20busca?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/Pages/Search.js | 142 ++++++++++++++++++++++++++++----------------
1 file changed, 90 insertions(+), 52 deletions(-)
diff --git a/src/Pages/Search.js b/src/Pages/Search.js
index 50234337..05ae8323 100644
--- a/src/Pages/Search.js
+++ b/src/Pages/Search.js
@@ -30,8 +30,8 @@ import { apiUrl } from "../env";
import "./Styles/Home.css";
import { Store } from "../Store";
import { Grid } from "@material-ui/core";
-import Dropdown from 'react-dropdown'
-import 'react-dropdown/style.css'
+import Dropdown from "react-dropdown";
+import "react-dropdown/style.css";
import SearchExpansionPanel from "../Components/SearchExpansionPanel/SearchExpansionPanel";
import ResourceCard from "../Components/ResourceCard";
@@ -42,53 +42,48 @@ export default function Search(props) {
const [resultsPerPage, setResultsPerPage] = useState(12);
const [order] = useState("score");
const options = [
-
- {value:"LearningObject", label:"Recursos"},
- {value:"Collection", label:"Coleções"},
- {value:"User", label:"Usuários"}
-
+ { value: "LearningObject", label: "Recursos" },
+ { value: "Collection", label: "Coleções" },
+ { value: "User", label: "Usuários" },
];
const ordenar = [
- {label:"Mais Estrelas"},
- {label:"Mais Relevante"},
- {label:"Mais Baixados"},
- {label:"Mais Favoritados"},
- {label:"Mais Recentes"},
- {label:"Ordem Alfabética"},
+ { label: "Mais Estrelas" },
+ { label: "Mais Relevante" },
+ { label: "Mais Baixados" },
+ { label: "Mais Favoritados" },
+ { label: "Mais Recentes" },
+ { label: "Ordem Alfabética" },
];
- const [defaultOption,setDefaultOption] =useState( options[0]);
- const [defaultOrder,setDefaultOrder] =useState( ordenar[0]);
+ const [defaultOption, setDefaultOption] = useState(options[0]);
+ const [defaultOrder, setDefaultOrder] = useState(ordenar[0]);
- const collectStuff = (tipoBusca=state.search.class,option=undefined) => {
-
+ const collectStuff = (tipoBusca = state.search.class, option = undefined) => {
axios
.get(
`${apiUrl}/search?page=${page}&results_per_page=${resultsPerPage}&order=${order}&query=${state.search.query}&search_class=${tipoBusca}`
)
- .then(res => {
+ .then((res) => {
setResults(res.data);
if (option != undefined) {
let aux = undefined;
- for (let i=0; i < options.length;i=i+1){
-
- console.log("Vamo dale0")
- if (options[i].label==option){
- console.log("Vamo dale")
+ for (let i = 0; i < options.length; i = i + 1) {
+ console.log("Vamo dale0");
+ if (options[i].label == option) {
+ console.log("Vamo dale");
setDefaultOption(options[i]);
-
}
}
-
}
console.log(res.data);
console.log(tipoBusca);
- })};
+ });
+ };
useEffect(() => {
dispatch({
type: "HANDLE_SEARCH_BAR",
- opened: false
+ opened: false,
});
const urlParams = new URLSearchParams(window.location.search);
@@ -100,26 +95,22 @@ export default function Search(props) {
type: "SAVE_SEARCH",
newSearch: {
query: query,
- class: searchClass
- }
+ class: searchClass,
+ },
});
}
return () =>
dispatch({
type: "HANDLE_SEARCH_BAR",
- opened: false
+ opened: false,
});
}, []);
-
useEffect(() => {
collectStuff();
}, [state.search, resultsPerPage]);
-
-
-
return (
<div style={{ backgroundColor: "#f4f4f4" }}>
<React.Fragment>
@@ -129,21 +120,21 @@ export default function Search(props) {
</h1>
{state.search.class === "LearningObject" && (
<ul>
- {results.map(res => (
+ {results.map((res) => (
<li key={res.id}> {res.name} </li>
))}
</ul>
)}
{state.search.class === "Collection" && (
<ul>
- {results.map(res => (
+ {results.map((res) => (
<li key={res.id}> {res.name} </li>
))}
</ul>
)}
{state.search.class === "User" && (
<ul>
- {results.map(res => (
+ {results.map((res) => (
<li key={res.id}> {res.name} </li>
))}
</ul>
@@ -165,13 +156,22 @@ export default function Search(props) {
style={{
display: "flex",
flexDirection: "column",
- justifyContent: "center"
+ justifyContent: "center",
+ paddingLeft: 20,
}}
>
- <div style={{display:"flex",flexDirection:"row"}}>
- <div style={{ textAlign: "left" }}>Mostrar</div>
- <Dropdown options={options} onChange={()=>{collectStuff(options.value,options.label )}} value={defaultOption} placeholder="Select an option" />
-
+ <div style={{ display: "flex", flexDirection: "row" }}>
+ <span style={{ alignSelf: "center", marginRight: 10 }}>
+ MOSTRAR:{" "}
+ </span>
+ <Dropdown
+ options={options}
+ onChange={() => {
+ collectStuff(options.value, options.label);
+ }}
+ value={defaultOption}
+ placeholder="Select an option"
+ />
</div>
</Grid>
<Grid
@@ -180,10 +180,10 @@ export default function Search(props) {
style={{
display: "flex",
flexDirection: "column",
- justifyContent: "center"
+ justifyContent: "center",
}}
>
- <div>Numero</div>
+ <div>Número</div>
</Grid>
<Grid
item
@@ -191,11 +191,35 @@ export default function Search(props) {
style={{
display: "flex",
flexDirection: "column",
- justifyContent: "center"
+ justifyContent: "center",
+ paddingRight: 20,
}}
>
- <div style={{ textAlign: "right" }}>Ordenar por:</div>
- <Dropdown options={ordenar} onChange={()=>{collectStuff(ordenar.label )}} value={defaultOrder} placeholder="Select an order "/>
+ <div
+ style={{
+ display: "flex",
+ flexDirection: "row",
+ justifyContent: "end",
+ }}
+ >
+ <span
+ style={{
+ textAlign: "right",
+ alignSelf: "center",
+ marginRight: 10,
+ }}
+ >
+ ORDENAR POR:{" "}
+ </span>
+ <Dropdown
+ options={ordenar}
+ onChange={() => {
+ collectStuff(ordenar.label);
+ }}
+ value={defaultOrder}
+ placeholder="Select an order "
+ />
+ </div>
</Grid>
</Grid>
</HeaderFilters>
@@ -205,9 +229,9 @@ export default function Search(props) {
<SearchExpansionPanel />
</Paper>
</Grid>
- <Grid item md={9} xs={12}>
+ <Grid item md={9} xs={12}>
<Grid container spacing={2}>
- {results.map(card => (
+ {results.map((card) => (
<Grid item md={4} xs={6} key={card.id}>
<ResourceCard
name={card.name}
@@ -221,9 +245,23 @@ export default function Search(props) {
</Grid>
))}
</Grid>
- <button onClick={() => setResultsPerPage(resultsPerPage + 12)}>
- Número de recursos mostrados {resultsPerPage}
- </button>
+ <div style={{display:"flex", flexDirection:"row",justifyContent:"center"}}>
+ <button
+ style={{
+ height: 36,
+ backgroundColor: "#ff7f00",
+ marginBottom: 50,
+ marginTop: 50,
+ fontSize: 14,
+ color: "white",
+ borderRadius: 4,
+ border: "none",
+ }}
+ onClick={() => setResultsPerPage(resultsPerPage + 12)}
+ >
+ Carregar mais 12
+ </button>
+ </div>
</Grid>
</GridBusca>
</Principal>
--
GitLab