diff --git a/src/Pages/Search.js b/src/Pages/Search.js
index d38792b576d3a729bd6618115533fe262c93ebd6..08ec64902232a1ead3a656f624fd4d26b730b49b 100644
--- a/src/Pages/Search.js
+++ b/src/Pages/Search.js
@@ -22,10 +22,6 @@ import { Link } from "react-router-dom";
import styled from "styled-components";
import Paper from "@material-ui/core/Paper";
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 "./Styles/Home.css";
import { Store } from "../Store";
@@ -37,335 +33,353 @@ import ResourceCardFunction from "../Components/ResourceCardFunction";
import CollectionCardFunction from "../Components/CollectionCardFunction";
import ContactCard from "../Components/ContactCard";
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 currFilter = "";
let currOption;
+let colecaoVazia = [];
export default function Search(props) {
- const { state, dispatch } = useContext(Store);
- const [resultsResource, setResultsResource] = useState([]);
- const [resultsCollection, setResultsCollection] = useState([]);
- const [resultsUser, setResultsUser] = useState([]);
- const [currOrder, setCurrOrder] = useState(order);
- const [page] = useState(0);
- const [isloading, setIsLoading] = useState(false);
- const [loadingMoreData, setLoadingMoreData] = useState(false);
- const [isFiltering, setIsFiltering] = useState(false);
- const [resultsPerPage, setResultsPerPage] = useState(12);
- const [totalResults, setTotalResults] = useState(0);
- const [options] = React.useState([
- { label: "Recursos", value: "LearningObject" },
- { label: "Coleções", value: "Collection" },
- { label: "Usuários", value: "User" },
- ]);
- const [ordenar] = useState([
- { label: "Mais Estrelas", value: "review_average" },
- { label: "Mais Relevante", value: "score" },
- { label: "Mais Baixados", value: "downloads" },
- { label: "Mais Favoritados", value: "likes" },
- { label: "Mais Recentes", value: "publicationdesc" },
- { label: "Ordem Alfabética", value: "title" },
- ]);
+ const { state, dispatch } = useContext(Store);
+ const [resultsResource, setResultsResource] = useState([]);
+ const [resultsCollection, setResultsCollection] = useState([]);
+ const [resultsUser, setResultsUser] = useState([]);
+ const [currOrder, setCurrOrder] = useState(order);
+ const [page] = useState(0);
+ const [isloading, setIsLoading] = useState(false);
+ const [loadingMoreData, setLoadingMoreData] = useState(false);
+ const [isFiltering, setIsFiltering] = useState(false);
+ const [resultsPerPage, setResultsPerPage] = useState(12);
+ const [totalResults, setTotalResults] = useState(0);
+ const [options] = React.useState([
+ { label: "Recursos", value: "LearningObject" },
+ { label: "Coleções", value: "Collection" },
+ { label: "Usuários", value: "User" },
+ ]);
+ const [ordenar] = useState([
+ { label: "Mais Estrelas", value: "review_average" },
+ { label: "Mais Relevante", value: "score" },
+ { label: "Mais Baixados", value: "downloads" },
+ { label: "Mais Favoritados", value: "likes" },
+ { label: "Mais Recentes", value: "publicationdesc" },
+ { label: "Ordem Alfabética", value: "title" },
+ ]);
- const [option, setOption] = useState(
- new URLSearchParams(window.location.search).get("search_class")
- );
- const [optionResult, setOptionResult] = useState(option);
- currOption = option;
+ const [option, setOption] = useState(
+ new URLSearchParams(window.location.search).get("search_class")
+ );
+ const [optionResult, setOptionResult] = useState(option);
+ currOption = option;
- function handleSuccessfulGet (data) {
- if (currOption === "LearningObject") setResultsResource(data);
- else if (currOption === "Collection") setResultsCollection(data);
- else if (currOption === "User") setResultsUser(data);
- setOptionResult(option);
- dispatch({
- type: "SAVE_SEARCH",
- newSearch: {
- query: state.search.query,
- class: option,
- },
- });
- console.log(data);
- setTotalResults(data.length);
- setOptionResult(currOption);
- setIsLoading(false);
- setIsFiltering(false);
- setLoadingMoreData(false);
- }
-
- const collectStuff = (tipoBusca, filtro) => {
- if (!loadingMoreData) // this line prevents resetting filter when loading more data
- currFilter = filtro;
- if (filtro)
- setIsFiltering(true);
- 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)})
- };
-
- useEffect(() => {
- dispatch({
- type: "HANDLE_SEARCH_BAR",
- opened: false,
- });
-
- const urlParams = new URLSearchParams(window.location.search);
- const query = urlParams.get("query");
- const searchClass = urlParams.get("search_class");
- if (state.search.query !== query || state.search.class !== searchClass) {
- dispatch({
- type: "SAVE_SEARCH",
- newSearch: {
- query: query,
- class: searchClass,
- },
- });
+ function handleSuccessfulGet(data) {
+ if (currOption === "LearningObject") setResultsResource(data);
+ else if (currOption === "Collection") setResultsCollection(data);
+ else if (currOption === "User") setResultsUser(data);
+ setOptionResult(option);
+ dispatch({
+ type: "SAVE_SEARCH",
+ newSearch: {
+ query: state.search.query,
+ class: currOption,
+ },
+ });
+ console.log(data);
+ setTotalResults(data.length);
+ setOptionResult(currOption);
+ setIsLoading(false);
+ setIsFiltering(false);
+ setLoadingMoreData(false);
}
- return () =>
- dispatch({
- type: "HANDLE_SEARCH_BAR",
- opened: false,
- });
- }, []);
+ const collectStuff = (tipoBusca, filtro) => {
+ if (!loadingMoreData) // this line prevents resetting filter when loading more data
+ currFilter = filtro;
+ if (filtro)
+ setIsFiltering(true);
+ 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) })
+ };
- useEffect(() => {
- collectStuff(option);
- }, [resultsPerPage]);
+ useEffect(() => {
+ dispatch({
+ type: "HANDLE_SEARCH_BAR",
+ opened: false,
+ });
- return (
- <div style={{ backgroundColor: "#f4f4f4" }}>
- <Principal>
- <BreadCrumbsDiv style={{margin:"15px 2%", }}>
- <StyledBreadCrumbs>
- <Link to="/">Página Inicial</Link>
- <span>Busca</span>
- </StyledBreadCrumbs>
- </BreadCrumbsDiv>
+ const urlParams = new URLSearchParams(window.location.search);
+ const query = urlParams.get("query");
+ const searchClass = urlParams.get("search_class");
+ if (state.search.query !== query || state.search.class !== searchClass) {
+ dispatch({
+ type: "SAVE_SEARCH",
+ newSearch: {
+ query: query,
+ class: searchClass,
+ },
+ });
+ }
- <div style={{margin:"15px 2%", }}>
- <HeaderFilters elevation={4} square>
- <Grid container spacing={0} style={{ height: "100%" }}>
- <Grid item xs style={{display:"flex", flexDirection:"column", justifyContent:"center", paddingLeft:20}}>
- <div style={{ marginRight:5, marginTop:15 }}>
- <div className="textInfo">
- <span style={{ fontWeight:"bold" }}>
- MOSTRAR
- </span>
- </div>
- <Dropdown options={options} value={optionResult}
- onChange={(e) => {
- setIsLoading(true);
- currOption = e.value;
- setOption(currOption);
- collectStuff(currOption, "");
- }}
- placeholder="Selecione um tipo"
- />
- </div>
- </Grid>
+ return () =>
+ dispatch({
+ type: "HANDLE_SEARCH_BAR",
+ opened: false,
+ });
+ }, []);
- {
- optionResult === "User" ? null :
- <Grid item xs style={{display: "flex", flexDirection: "column", justifyContent: "center", paddingRight: 20,}}>
- <div style={{marginLeft:5, marginTop:15}}>
- <div className="textInfo">
- <span style={{ fontWeight:"bold" }}>
- ORDENAR POR
- </span>
- </div>
- <Dropdown options={ordenar} value={currOrder} onChange={(e) => {
- order = e.value;
- setCurrOrder(e.label)
- collectStuff(optionResult, currFilter);
- }}
- placeholder="Selecione uma opção"
- />
- </div>
- </Grid>
- }
- <Grid item xs={12}>
- <div style={{display: "flex", flexDirection: "column", justifyContent: "center" }}>
- <div style={{textAlign: "center", paddingTop: 10, fontWeight:"bolder"}}>
- {/* Exibindo {totalResults === 0 ? 0 : resultsPerPage} resultados de {totalResults} encontrados */}
- Exibindo {totalResults === 0 ? 0 : resultsPerPage} resultados
- </div>
- </div>
- </Grid>
- </Grid>
- </HeaderFilters>
-
- {
- isloading ? <LoadingSpinner text="Carregando..." /> :
- optionResult === "Collection" ? (
- <GridBuscaCollection container spacing={2}>
- <Grid item xs>
- <Grid container justify="center" alignItems="center" spacing={2}>
- {resultsCollection.map((card) => (
- <Grid item xs key={card.id}>
- <CollectionCardFunction
- name={card.name}
- tags={card.tags}
- rating={card.review_average}
- id={card.id}
- author={card.owner.name}
- description={card.description}
- thumbnails={card.items_thumbnails}
- avatar={card.owner.avatar}
- likeCount={card.likes_count}
- followed={card.followed}
- liked={card.liked}
- collections={card.collection_items}
- authorID={card.owner.id}
- />
+ useEffect(() => {
+ setIsLoading(true);
+ collectStuff(option);
+ }, [resultsPerPage]);
- </Grid>
- ))}
- </Grid>
- <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={() => {
- setLoadingMoreData(true);
- setResultsPerPage(resultsPerPage + 12)
- // collectStuff("Collection", "");
- }}
- >
- {
- loadingMoreData ? <CircularProgress size={24} color="inherit" /> : "Carregar mais 12"
- }
- </button>
- </div>
- </Grid>
- </GridBuscaCollection>
- ) :
+ return (
+ <div style={{ backgroundColor: "#f4f4f4" }}>
+ <Principal>
+ <BreadCrumbsDiv style={{ margin: "15px 2%", }}>
+ <StyledBreadCrumbs>
+ <Link to="/">Página Inicial</Link>
+ <span>Busca</span>
+ </StyledBreadCrumbs>
+ </BreadCrumbsDiv>
- optionResult === "LearningObject" ? (
- <GridBuscaResource container spacing={2}>
- <Grid item xs={12} md={2}>
- <Grid container >
- <Grid item xs={12}>
- <Paper elevation={4} square>
- <SearchExpansionPanel onChange={collectStuff} onFiltering={isFiltering} />
- </Paper>
- </Grid>
- </Grid>
- </Grid>
- <Grid item xs>
- <Grid container justify="center" alignItems="center" spacing={2}>
- {resultsResource.map((card) => (
- <Grid item xs={12} sm={6} md={4} lg={3} key={card.id}>
- <ResourceCardFunction
- avatar={card.publisher.avatar}
- id={card.id}
- thumbnail={card.thumbnail}
- type={card.object_type ? card.object_type : "Outros"}
- title={card.name}
- published={card.state === "published" ? true : false}
- likeCount={card.likes_count}
- liked={card.liked}
- rating={card.review_average}
- author={card.author}
- tags={card.educational_stages}
- href={"/recurso/" + card.id}
- downloadableLink={card.default_attachment_location}
- />
- </Grid>
- ))}
- </Grid>
- <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={() => {
- setLoadingMoreData(true);
- setResultsPerPage(resultsPerPage + 12)
- // collectStuff("LearningObject", "");
- }}
- >
- {
- loadingMoreData ? <CircularProgress size={24} color="inherit" /> : "Carregar mais 12"
- }
- </button>
- </div>
- </Grid>
- </GridBuscaResource>
- ) :
- optionResult === "User" && (
- <GridBuscaUser container spacing={2}>
- <Grid item xs >
- <Grid container spacing={2} justify="center" alignItems="center">
- {resultsUser.map((card) => (
- <Grid item xs key={card.id}>
- <ContactCard
- name={card.name}
- avatar={card.avatar ? apiDomain + card.avatar : null}
- cover={card.cover ? apiDomain + card.cover : null}
- numCollections={card.collections_count}
- numLearningObjects={card.learning_objects_count}
- follow_count={card.follows_count}
- followed={card.followed || null}
- followerID={card.id}
- href={'/usuario-publico/' + card.id}
- />
+ <div style={{ margin: "15px 2%", }}>
+ <HeaderFilters elevation={4} square>
+ <Grid container spacing={0} style={{ height: "100%" }}>
+ <Grid item xs style={{ display: "flex", flexDirection: "column", justifyContent: "center", paddingLeft: 20 }}>
+ <div style={{ marginRight: 5, marginTop: 15 }}>
+ <div className="textInfo">
+ <span style={{ fontWeight: "bold" }}>
+ MOSTRAR
+ </span>
+ </div>
+ <Dropdown options={options} value={optionResult}
+ onChange={(e) => {
+ setIsLoading(true);
+ currOption = e.value;
+ setOption(currOption);
+ collectStuff(currOption, "");
+ }}
+ placeholder="Selecione um tipo"
+ />
+ </div>
</Grid>
- ))}
- </Grid>
- <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={() => {
- setLoadingMoreData(true);
- setResultsPerPage(resultsPerPage + 12)
- // collectStuff("User", "");
- }}
- >
+
{
- loadingMoreData ? <CircularProgress color="inherit" size={24} /> : "Carregar mais 12"
+ optionResult === "User" ? null :
+ <Grid item xs style={{ display: "flex", flexDirection: "column", justifyContent: "center", paddingRight: 20, }}>
+ <div style={{ marginLeft: 5, marginTop: 15 }}>
+ <div className="textInfo">
+ <span style={{ fontWeight: "bold" }}>
+ ORDENAR POR
+ </span>
+ </div>
+ <Dropdown options={ordenar} value={currOrder} onChange={(e) => {
+ order = e.value;
+ setCurrOrder(e.label)
+ collectStuff(optionResult, currFilter);
+ }}
+ placeholder="Selecione uma opção"
+ />
+ </div>
+ </Grid>
}
- </button>
- </div>
- </Grid>
- </GridBuscaUser>
- )
- }
+ <Grid item xs={12}>
+ <div style={{ display: "flex", flexDirection: "column", justifyContent: "center" }}>
+ <div style={{ textAlign: "center", paddingTop: 10, fontWeight: "bolder" }}>
+ {/* Exibindo {totalResults === 0 ? 0 : resultsPerPage} resultados de {totalResults} encontrados */}
+ Exibindo {totalResults === 0 ? 0 : resultsPerPage} resultados
+ </div>
+ </div>
+ </Grid>
+ </Grid>
+ </HeaderFilters>
+
+ {
+ isloading ? <LoadingSpinner text="Carregando..." /> :
+ optionResult === "Collection" ? (
+ resultsCollection.length >= 1 ?
+ <GridBuscaCollection container direction="row" spacing={2}>
+ <Grid item xs>
+ <Grid container justify="center" alignItems="center" spacing={2}>
+ {resultsCollection.map((card) => (
+ <Grid item xs key={card.id}>
+ <CollectionCardFunction
+ name={card.name}
+ tags={card.tags}
+ rating={card.review_average}
+ id={card.id}
+ author={card.owner.name}
+ description={card.description}
+ thumbnails={card.items_thumbnails}
+ avatar={card.owner.avatar}
+ likeCount={card.likes_count}
+ followed={card.followed}
+ liked={card.liked}
+ collections={card.collection_items}
+ authorID={card.owner.id}
+ />
+
+ </Grid>
+ ))}
+ </Grid>
+ <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={() => {
+ setLoadingMoreData(true);
+ setResultsPerPage(resultsPerPage + 12)
+ // collectStuff("Collection", "");
+ }}
+ >
+ {
+ loadingMoreData ? <CircularProgress size={24} color="inherit" /> : "Carregar mais 12"
+ }
+ </button>
+ </div>
+ </Grid>
+ </GridBuscaCollection> :
+ <Grid container direction="row" justify="center" alignItems="center">
+ <Grid item>
+ <img src={ColecaoVazia} />
+ </Grid>
+ </Grid>
+
+ ) :
+
+ optionResult === "LearningObject" ? (
+ resultsResource.length >= 1 ?
+ <GridBuscaResource container spacing={2}>
+ <Grid item xs={12} md={2}>
+ <Grid container >
+ <Grid item xs={12}>
+ <Paper elevation={4} square>
+ <SearchExpansionPanel onChange={collectStuff} onFiltering={isFiltering} />
+ </Paper>
+ </Grid>
+ </Grid>
+ </Grid>
+ <Grid item xs>
+ <Grid container justify="center" spacing={3} alignItems="center" >
+ {resultsResource.map((card) => (
+ <Grid item xs={12} sm={6} md={4} lg={3} key={card.id}>
+ <ResourceCardFunction
+ avatar={card.publisher.avatar}
+ id={card.id}
+ thumbnail={card.thumbnail}
+ type={card.object_type ? card.object_type : "Outros"}
+ title={card.name}
+ published={card.state === "published" ? true : false}
+ likeCount={card.likes_count}
+ liked={card.liked}
+ rating={card.review_average}
+ author={card.author}
+ tags={card.educational_stages}
+ href={"/recurso/" + card.id}
+ downloadableLink={card.default_attachment_location}
+ />
+ </Grid>
+ ))}
+ </Grid>
+ <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={() => {
+ setLoadingMoreData(true);
+ setResultsPerPage(resultsPerPage + 12)
+ // collectStuff("LearningObject", "");
+ }}
+ >
+ {
+ loadingMoreData ? <CircularProgress size={24} color="inherit" /> : "Carregar mais 12"
+ }
+ </button>
+ </div>
+ </Grid>
+ </GridBuscaResource> :
+ <Grid container direction="row" justify="center" alignItems="center">
+ <Grid item>
+ <img src={RecursoVazio} />
+ </Grid>
+ </Grid>
+ ) :
+ optionResult === "User" && (
+ <GridBuscaUser container spacing={2}>
+ <Grid item xs >
+ <Grid container spacing={2} justify="center" alignItems="center">
+ {resultsUser.map((card) => (
+ <Grid item xs key={card.id}>
+ <ContactCard
+ name={card.name}
+ avatar={card.avatar ? apiDomain + card.avatar : null}
+ cover={card.cover ? apiDomain + card.cover : null}
+ numCollections={card.collections_count}
+ numLearningObjects={card.learning_objects_count}
+ follow_count={card.follows_count}
+ followed={card.followed || null}
+ followerID={card.id}
+ href={'/usuario-publico/' + card.id}
+ />
+ </Grid>
+ ))}
+ </Grid>
+ <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={() => {
+ setLoadingMoreData(true);
+ setResultsPerPage(resultsPerPage + 12)
+ // collectStuff("User", "");
+ }}
+ >
+ {
+ loadingMoreData ? <CircularProgress color="inherit" size={24} /> : "Carregar mais 12"
+ }
+ </button>
+ </div>
+ </Grid>
+ </GridBuscaUser>
+ )
+ }
+ </div>
+ </Principal>
</div>
- </Principal>
- </div>
- );
+ );
}
const GridBuscaCollection = styled(Grid)`