Skip to content
Snippets Groups Projects
Commit 7bd6a2f9 authored by lfr20's avatar lfr20
Browse files

fixed search page

parent 7f59d5ec
No related branches found
No related tags found
4 merge requests!57Merge of develop into master,!56Fixed buttons reportar, seguir, compartilhar, guardar and entrar (in comments...,!39Update admin system,!36Fix perfil into develop
Show whitespace changes
Inline Side-by-side
Showing
with 334 additions and 318 deletions
src/Pages/Search.js
+ 334
− 318
View file @ 7bd6a2f9
...@@ -22,10 +22,6 @@ import { Link } from "react-router-dom"; ...@@ -22,10 +22,6 @@ import { Link } from "react-router-dom";
import styled from "styled-components"; import styled from "styled-components";
import Paper from "@material-ui/core/Paper"; import Paper from "@material-ui/core/Paper";
import LoadingSpinner from '../Components/LoadingSpinner'; import LoadingSpinner from '../Components/LoadingSpinner';
// import ResourceCard from '../Components/ResourceCard'
// import CollectionCard from '../Components/CollectionCard'
// import UserCard from '../Components/UserCard'
// import Select from "react-dropdown-select";
import Breadcrumbs from "@material-ui/core/Breadcrumbs"; import Breadcrumbs from "@material-ui/core/Breadcrumbs";
import "./Styles/Home.css"; import "./Styles/Home.css";
import { Store } from "../Store"; import { Store } from "../Store";
...@@ -38,10 +34,13 @@ import CollectionCardFunction from "../Components/CollectionCardFunction"; ...@@ -38,10 +34,13 @@ import CollectionCardFunction from "../Components/CollectionCardFunction";
import ContactCard from "../Components/ContactCard"; import ContactCard from "../Components/ContactCard";
import CircularProgress from '@material-ui/core/CircularProgress'; import CircularProgress from '@material-ui/core/CircularProgress';
import { getRequest } from '../Components/HelperFunctions/getAxiosConfig' import { getRequest } from '../Components/HelperFunctions/getAxiosConfig'
import ColecaoVazia from '../img/Pagina_vazia_colecao.png'
import RecursoVazio from '../img/Pagina_vazia_Sem_publicar.png'
let order = "review_average"; let order = "review_average";
let currFilter = ""; let currFilter = "";
let currOption;
export default function Search(props) { export default function Search(props) {
const { state, dispatch } = useContext(Store); const { state, dispatch } = useContext(Store);
...@@ -73,20 +72,23 @@ export default function Search(props) { ...@@ -73,20 +72,23 @@ export default function Search(props) {
new URLSearchParams(window.location.search).get("search_class") new URLSearchParams(window.location.search).get("search_class")
); );
const [optionResult, setOptionResult] = useState(option); const [optionResult, setOptionResult] = useState(option);
currOption = option;
function handleSuccessfulGet(data) { function handleSuccessfulGet(data) {
if (option === "LearningObject") setResultsResource(data); if (currOption === "LearningObject") setResultsResource(data);
else if (option === "Collection") setResultsCollection(data); else if (currOption === "Collection") setResultsCollection(data);
else if (option === "User") setResultsUser(data); else if (currOption === "User") setResultsUser(data);
setOptionResult(option); setOptionResult(option);
dispatch({ dispatch({
type: "SAVE_SEARCH", type: "SAVE_SEARCH",
newSearch: { newSearch: {
query: state.search.query, query: state.search.query,
class: option, class: currOption,
}, },
}); });
console.log(data);
setTotalResults(data.length); setTotalResults(data.length);
setOptionResult(currOption);
setIsLoading(false); setIsLoading(false);
setIsFiltering(false); setIsFiltering(false);
setLoadingMoreData(false); setLoadingMoreData(false);
...@@ -97,11 +99,8 @@ export default function Search(props) { ...@@ -97,11 +99,8 @@ export default function Search(props) {
currFilter = filtro; currFilter = filtro;
if (filtro) if (filtro)
setIsFiltering(true); setIsFiltering(true);
const url = `/search?page=${page}&results_per_page=${resultsPerPage}&order=${order}&query=${state.search.query}${currFilter ? currFilter : ""}&search_class=${tipoBusca}` const url = `/search?page=${page}&results_per_page=${resultsPerPage}&order=${order}&query=${state.search.query}${currFilter ? currFilter : ""}&search_class=${tipoBusca}`
getRequest(url, handleSuccessfulGet, (error) => { console.log(error) }) getRequest(url, handleSuccessfulGet, (error) => { console.log(error) })
}; };
useEffect(() => { useEffect(() => {
...@@ -131,6 +130,7 @@ export default function Search(props) { ...@@ -131,6 +130,7 @@ export default function Search(props) {
}, []); }, []);
useEffect(() => { useEffect(() => {
setIsLoading(true);
collectStuff(option); collectStuff(option);
}, [resultsPerPage]); }, [resultsPerPage]);
...@@ -154,10 +154,12 @@ export default function Search(props) { ...@@ -154,10 +154,12 @@ export default function Search(props) {
MOSTRAR MOSTRAR
</span> </span>
</div> </div>
<Dropdown options={options} value={optionResult} onChange={(e) => { <Dropdown options={options} value={optionResult}
onChange={(e) => {
setIsLoading(true); setIsLoading(true);
setOption(e.value); currOption = e.value;
collectStuff(e.value, ""); setOption(currOption);
collectStuff(currOption, "");
}} }}
placeholder="Selecione um tipo" placeholder="Selecione um tipo"
/> />
...@@ -197,9 +199,10 @@ export default function Search(props) { ...@@ -197,9 +199,10 @@ export default function Search(props) {
{ {
isloading ? <LoadingSpinner text="Carregando..." /> : isloading ? <LoadingSpinner text="Carregando..." /> :
optionResult === "Collection" ? ( optionResult === "Collection" ? (
<GridBuscaCollection container spacing={2}> resultsCollection.length >= 1 ?
<GridBuscaCollection container direction="row" spacing={2}>
<Grid item xs> <Grid item xs>
<Grid container spacing={2}> <Grid container justify="center" alignItems="center" spacing={2}>
{resultsCollection.map((card) => ( {resultsCollection.map((card) => (
<Grid item xs key={card.id}> <Grid item xs key={card.id}>
<CollectionCardFunction <CollectionCardFunction
...@@ -223,7 +226,8 @@ export default function Search(props) { ...@@ -223,7 +226,8 @@ export default function Search(props) {
</Grid> </Grid>
<div style={{ display: "flex", flexDirection: "row", justifyContent: "center", }}> <div style={{ display: "flex", flexDirection: "row", justifyContent: "center", }}>
<button <button
style={{ height: 36, backgroundColor: "#ff7f00", marginBottom: 50, marginTop: 50, fontSize: 14, style={{
height: 36, backgroundColor: "#ff7f00", marginBottom: 50, marginTop: 50, fontSize: 14,
color: "white", borderRadius: 4, border: "none", color: "white", borderRadius: 4, border: "none",
}} }}
onClick={() => { onClick={() => {
...@@ -238,10 +242,17 @@ export default function Search(props) { ...@@ -238,10 +242,17 @@ export default function Search(props) {
</button> </button>
</div> </div>
</Grid> </Grid>
</GridBuscaCollection> </GridBuscaCollection> :
<Grid container direction="row" justify="center" alignItems="center">
<Grid item>
<img src={ColecaoVazia} />
</Grid>
</Grid>
) : ) :
optionResult === "LearningObject" ? ( optionResult === "LearningObject" ? (
resultsResource.length >= 1 ?
<GridBuscaResource container spacing={2}> <GridBuscaResource container spacing={2}>
<Grid item xs={12} md={2}> <Grid item xs={12} md={2}>
<Grid container > <Grid container >
...@@ -253,7 +264,7 @@ export default function Search(props) { ...@@ -253,7 +264,7 @@ export default function Search(props) {
</Grid> </Grid>
</Grid> </Grid>
<Grid item xs> <Grid item xs>
<Grid container spacing={2}> <Grid container justify="center" spacing={3} alignItems="center" >
{resultsResource.map((card) => ( {resultsResource.map((card) => (
<Grid item xs={12} sm={6} md={4} lg={3} key={card.id}> <Grid item xs={12} sm={6} md={4} lg={3} key={card.id}>
<ResourceCardFunction <ResourceCardFunction
...@@ -304,12 +315,17 @@ export default function Search(props) { ...@@ -304,12 +315,17 @@ export default function Search(props) {
</button> </button>
</div> </div>
</Grid> </Grid>
</GridBuscaResource> </GridBuscaResource> :
<Grid container direction="row" justify="center" alignItems="center">
<Grid item>
<img src={RecursoVazio} />
</Grid>
</Grid>
) : ) :
optionResult === "User" && ( optionResult === "User" && (
<GridBuscaUser container spacing={2}> <GridBuscaUser container spacing={2}>
<Grid item xs > <Grid item xs >
<Grid container spacing={2}> <Grid container spacing={2} justify="center" alignItems="center">
{resultsUser.map((card) => ( {resultsUser.map((card) => (
<Grid item xs key={card.id}> <Grid item xs key={card.id}>
<ContactCard <ContactCard
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment