diff --git a/src/Components/AreasSubPagesFunction.js b/src/Components/AreasSubPagesFunction.js
index f08832691ff2fc7d21160c18b362a4d7cfd6344d..2c3ca8e0cf08cbc8802cf61b8855a80d31726474 100644
--- a/src/Components/AreasSubPagesFunction.js
+++ b/src/Components/AreasSubPagesFunction.js
@@ -223,7 +223,7 @@ function TabRecurso() {
{
window.innerWidth <= 501 &&
<div style={{ display: "flex", justifyContent: "center" }}>
- <Link to={`/busca?query=*&search_class=LearningObject`} className="button-ver">VER RECURSOS</Link>
+ <Link to={`/busca?page=0&results_per_page=12&order=review_average&query=*&search_class=LearningObject`} className="button-ver">VER RECURSOS</Link>
</div>
}
</StyledTab>
@@ -320,7 +320,7 @@ function TabColecoes() {
{
window.innerWidth <= 501 &&
<div style={{ display: "flex", justifyContent: "center" }}>
- <Link to={`/busca?query=*&search_class=Collection`} className="button-ver">VER COLEÇÕES</Link>
+ <Link to={`/busca?page=0&results_per_page=12&order=review_average&query=*&search_class=Collection`} className="button-ver">VER COLEÇÕES</Link>
</div>
}
</StyledTab>
diff --git a/src/Components/CollectionCommentSection.js b/src/Components/CollectionCommentSection.js
index 3b5b07b4e0c3cebe9ffc4b1303955dcaace7b9ce..fae20e406f7ee918119e26839994a65f818ee9a6 100644
--- a/src/Components/CollectionCommentSection.js
+++ b/src/Components/CollectionCommentSection.js
@@ -33,8 +33,6 @@ import SignUpModal from './SignUpModal.js';
import LoginModal from './LoginModal.js';
import SnackBarComponent from './SnackbarComponent';
import CircularProgress from '@material-ui/core/CircularProgress';
-import IconButton from '@material-ui/core/IconButton';
-import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
export default function CollectionCommentSection(props) {
const [post_snack_open, setPostSnackOpen] = useState(false);
diff --git a/src/Components/HomeScreenSearchBar.js b/src/Components/HomeScreenSearchBar.js
index ef12b7cc21d761f9ac73d634d1a4e24fe180bd0d..634b625e1c487e585f97ed95965fe5b53d87a175 100644
--- a/src/Components/HomeScreenSearchBar.js
+++ b/src/Components/HomeScreenSearchBar.js
@@ -92,9 +92,9 @@ export default function HomeScreenSearchBar(props) {
const WIDTH = window.innerWidth;
return (
-
- <StyledGrid container>
- {goSearch && <Redirect to={`/busca?query=${state.search.query}&search_class=${state.search.class}`} />}
+
+ <StyledGrid container>
+ {goSearch && <Redirect to={`/busca?page=0&results_per_page=12&order=review_average&query=${state.search.query}&search_class=${state.search.class}`} />}
<Grid item md={7} xs={12} className="first white">
<StyledTextField
id="standard-search"
diff --git a/src/Components/SearchBar.js b/src/Components/SearchBar.js
index 1c36964e90f24460d54fd70e0386839ac9754335..8e0ea969a6655039cd1b71419fbc34367e385a77 100644
--- a/src/Components/SearchBar.js
+++ b/src/Components/SearchBar.js
@@ -139,7 +139,7 @@ export default function SearchBar(props) {
}
const linkTarget = {
- pathname: `/busca?query=${state.search.query}&search_class=${state.search.class}`,
+ pathname: `/busca?page=0&results_per_page=12&order=review_average&query=${state.search.query}&search_class=${state.search.class}`,
key: uuidv4(), // we could use Math.random, but that's not guaranteed unique.
state: {
applied: true
@@ -149,7 +149,7 @@ export default function SearchBar(props) {
return (
<Grid container>
<Grid container item xs={12} sm={6} md={6} lg={6} xl={6}>
- {goSearch && <Redirect to={`/busca?query=${state.search.query}&search_class=${state.search.class}`} />}
+ {goSearch && <Redirect to={`/busca?page=0&results_per_page=12&order=review_average&query=${state.search.query}&search_class=${state.search.class}`} />}
<TextFieldStyled
id="standard-search"
label="O que você está buscando"
diff --git a/src/Components/SearchPageComponents/CollectionTemplate.js b/src/Components/SearchPageComponents/CollectionTemplate.js
new file mode 100644
index 0000000000000000000000000000000000000000..5d1b3ffe72fec0bfdbbd36d7057f49a2ddc53325
--- /dev/null
+++ b/src/Components/SearchPageComponents/CollectionTemplate.js
@@ -0,0 +1,122 @@
+import React, { useEffect } from 'react';
+import Paper from '@material-ui/core/Paper';
+import styled from 'styled-components';
+import Grid from '@material-ui/core/Grid';
+import LoadingSpinner from '../LoadingSpinner';
+import noCollections from '../../img/Pagina_vazia_colecao.png';
+import CollectionCardFunction from '../CollectionCardFunction';
+import IconButton from '@material-ui/core/IconButton';
+import ArrowBackIcon from '@material-ui/icons/ArrowBack';
+import ArrowForwardIcon from '@material-ui/icons/ArrowForward';
+
+export default function ResourceTemplate({ isLoading, resources, totalResources, currPage, handlePreviousPage, handleNextPage }) {
+ const totalPages = Math.ceil(totalResources / 12); //Dividing by 12 because i want to cath total pages, and results per page is 12
+ const topRef = React.useRef();
+
+ useEffect(() => {
+ topRef.current.scrollIntoView()
+ }, [isLoading])
+
+ return (
+ <ResourcePaper elevation={4} square>
+ <div ref={topRef} />
+ <Title>
+ Coleções encontradas ({totalResources})
+ </Title>
+ {
+ isLoading ?
+ <LoadingSpinner text='Carregando Coleções...' />
+ :
+ <Grid container justify='center' alignItems='center' spacing={3}>
+ {
+ resources.length >= 1 ?
+ resources.map((card) => {
+ return <Grid item key={new Date().toISOString() + card.id} >
+ <CollectionCardFunction
+ name={card.name}
+ tags={card.tags}
+ rating={card.review_average}
+ id={card.id}
+ author={card.owner ? card.owner.name : ""}
+ description={card.description}
+ thumbnails={card.items_thumbnails}
+ avatar={card.owner ? card.owner.avatar : ""}
+ likeCount={card.likes_count}
+ followed={card.followed}
+ liked={card.liked}
+ collections={card.collection_items}
+ authorID={card.owner.id}
+ />
+ </Grid>
+ })
+ :
+ <NoContentDiv>
+ <h3>
+ Desculpe, não há dados nessa página.
+ </h3>
+ <img src={noCollections} alt='No cards' />
+ </NoContentDiv>
+ }
+ </Grid>
+ }
+ {
+ !isLoading &&
+ <Grid container direction='row' alignItems='center' justify='center' spacing={3}>
+ <Grid item>
+ <StyledIconButton elevation={4} disabled={currPage === 0}>
+ <IconButton onClick={handlePreviousPage} disabled={currPage === 0}>
+ <ArrowBackIcon className='icon' />
+ </IconButton>
+ </StyledIconButton>
+ </Grid>
+ <Grid item>
+ <ActualPage>
+ {currPage}
+ </ActualPage>...{totalPages}
+ </Grid>
+ <Grid item>
+ <StyledIconButton elevation={4} disabled={currPage === totalPages}>
+ <IconButton onClick={handleNextPage} disabled={currPage === totalPages}>
+ <ArrowForwardIcon className='icon' />
+ </IconButton>
+ </StyledIconButton>
+ </Grid>
+ </Grid>
+ }
+ </ResourcePaper>
+ )
+};
+
+const Title = styled.h4`
+ text-align: left;
+ color: #673ab7;
+`
+const NoContentDiv = styled.div`
+ >h3{
+ color: #673ab7;
+ text-align: center;
+ }
+`
+const ActualPage = styled.span`
+ color: #673ab7;
+`
+const StyledIconButton = styled(Paper)`
+ border-radius: 50% !important;
+ background-color: ${props => props.disabled ? "#666" : "#673ab7"} !important;
+ .icon{
+ color: ${props => props.disabled ? "#d4d4d4" : "white"};
+ }
+`
+
+const ResourcePaper = styled(Paper)`
+ /* height: 150px; */
+ text-align: center;
+ background-color: #fff;
+ margin-top: 5px;
+ margin-bottom: 30px;
+ padding: 0.5em 1em;
+ color: #666;
+ .textInfo{
+ text-align: start;
+ }
+`;
\ No newline at end of file
diff --git a/src/Components/SearchPageComponents/HeaderFilters.js b/src/Components/SearchPageComponents/HeaderFilters.js
new file mode 100644
index 0000000000000000000000000000000000000000..ce6ea3471519df1468cbc9d0d074f610d068502b
--- /dev/null
+++ b/src/Components/SearchPageComponents/HeaderFilters.js
@@ -0,0 +1,132 @@
+import React from 'react';
+import styled from 'styled-components';
+import Paper from '@material-ui/core/Paper';
+import Grid from '@material-ui/core/Grid';
+import TextField from '@material-ui/core/TextField';
+import MenuItem from '@material-ui/core/MenuItem'
+
+export default function HeaderFilters({ options, orders, currOption, currOrder, handleChangeOption, handleChangeOrder }) {
+
+ if (currOption !== 'User')
+ return (
+ <FiltersPaper elevation={4} square>
+ <Grid container direction='row' spacing={2} alignItems='center'>
+ <Grid item xs={12} sm={6}>
+ <Grid container alignItems='center'>
+ <Grid item xs={12} md={2}>
+ <Label>
+ Buscar por:
+ </Label>
+ </Grid>
+ <Grid item xs={12} md={10}>
+ <TextField
+ select
+ fullWidth
+ value={currOption}
+ onChange={handleChangeOption}
+ variant="outlined"
+ >
+ {options.map((option) => (
+ <MenuItem
+ key={option.value}
+ value={option.name}
+ name={option.value}
+ >
+ <span style={{ color: option.color }}>
+ {option.value}
+ </span>
+ </MenuItem>
+ ))}
+ </TextField>
+ </Grid>
+ </Grid>
+ </Grid>
+
+ <Grid item xs={12} sm={6}>
+ <Grid container alignItems='center'>
+ <Grid item xs={12} md={2}>
+ <Label>
+ Ordenar por:
+ </Label>
+ </Grid>
+ <Grid item xs={12} md={10}>
+ <TextField
+ select
+ fullWidth
+ value={currOrder}
+ onChange={handleChangeOrder}
+ variant="outlined"
+ >
+ {orders.map((option) => (
+ <MenuItem
+ key={option.value}
+ value={option.name}
+ name={option.value}
+ >
+ {option.value}
+ </MenuItem>
+ ))}
+ </TextField>
+ </Grid>
+ </Grid>
+ </Grid>
+ </Grid>
+ </FiltersPaper>
+ )
+ else
+ return (
+ <FiltersPaper elevation={4} square>
+ <Grid container direction='row' alignItems='center'>
+ <Grid item xs={12}>
+ <Grid container alignItems='center'>
+ <Grid item xs={12} md={2}>
+ <Label>
+ Buscar por:
+ </Label>
+ </Grid>
+ <Grid item xs={12} md={10}>
+ <TextField
+ select
+ fullWidth
+ value={currOption}
+ onChange={handleChangeOption}
+ variant="outlined"
+ >
+ {options.map((option) => (
+ <MenuItem
+ key={option.value}
+ value={option.name}
+ name={option.value}
+ >
+ <span style={{ color: option.color }}>
+ {option.value}
+ </span>
+ </MenuItem>
+ ))}
+ </TextField>
+ </Grid>
+ </Grid>
+ </Grid>
+ </Grid>
+ </FiltersPaper>
+ )
+}
+
+const Label = styled.p`
+ text-align: center;
+ font-weight: 600;
+`
+
+
+const FiltersPaper = styled(Paper)`
+ /* height: 150px; */
+ text-align: center;
+ background-color: #fff;
+ margin-top: 5px;
+ margin-bottom: 30px;
+ padding: 0.5em 1em;
+ color: #666;
+ .textInfo{
+ text-align: start;
+ }
+`;
\ No newline at end of file
diff --git a/src/Components/SearchPageComponents/ResourceTemplate.js b/src/Components/SearchPageComponents/ResourceTemplate.js
new file mode 100644
index 0000000000000000000000000000000000000000..7a2b6da0b2bb24ceff68d19e2ff14f5bf17b71dd
--- /dev/null
+++ b/src/Components/SearchPageComponents/ResourceTemplate.js
@@ -0,0 +1,122 @@
+import React, { useEffect } from 'react';
+import Paper from '@material-ui/core/Paper';
+import styled from 'styled-components';
+import Grid from '@material-ui/core/Grid';
+import LoadingSpinner from '../LoadingSpinner';
+import noResources from '../../img/Pagina_vazia_Sem_publicar.png';
+import ResourceCardFunction from '../ResourceCardFunction';
+import IconButton from '@material-ui/core/IconButton';
+import ArrowBackIcon from '@material-ui/icons/ArrowBack';
+import ArrowForwardIcon from '@material-ui/icons/ArrowForward';
+
+export default function ResourceTemplate({ isLoading, resources, totalResources, currPage, handlePreviousPage, handleNextPage }) {
+ const totalPages = Math.ceil(totalResources / 12); //Dividing by 12 because i want to cath total pages, and results per page is 12
+ const topRef = React.useRef();
+
+ useEffect(() => {
+ topRef.current.scrollIntoView();
+ }, [isLoading])
+
+ return (
+ <ResourcePaper elevation={4} square>
+ <div ref={topRef} />
+ <Title>
+ Recursos encontrados ({totalResources})
+ </Title>
+ {
+ isLoading ?
+ <LoadingSpinner text='Carregando recursos...' />
+ :
+ <Grid container justify='center' alignItems='center' spacing={3}>
+ {
+ resources.length >= 1 ?
+ resources.map((card) => {
+ return <Grid item key={new Date().toISOString() + card.id} >
+ <ResourceCardFunction
+ avatar={card.publisher ? 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>
+ })
+ :
+ <NoContentDiv>
+ <h3>
+ Desculpe, não há dados nessa página.
+ </h3>
+ <img src={noResources} alt='No cards' />
+ </NoContentDiv>
+ }
+ </Grid>
+ }
+ {
+ !isLoading &&
+ <Grid container direction='row' alignItems='center' justify='center' spacing={3}>
+ <Grid item>
+ <StyledIconButton elevation={4} disabled={currPage === 0}>
+ <IconButton onClick={handlePreviousPage} disabled={currPage === 0}>
+ <ArrowBackIcon className='icon' />
+ </IconButton>
+ </StyledIconButton>
+ </Grid>
+ <Grid item>
+ <ActualPage>
+ {currPage}
+ </ActualPage>...{totalPages}
+ </Grid>
+ <Grid item>
+ <StyledIconButton elevation={4} disabled={currPage === totalPages}>
+ <IconButton onClick={handleNextPage} disabled={currPage === totalPages}>
+ <ArrowForwardIcon className='icon' />
+ </IconButton>
+ </StyledIconButton>
+ </Grid>
+ </Grid>
+ }
+ </ResourcePaper>
+ )
+};
+
+const Title = styled.h4`
+ text-align: left;
+ color: #ff7f00;
+`
+const NoContentDiv = styled.div`
+ >h3{
+ color: #ff7f00;
+ text-align: center;
+ }
+`
+const ActualPage = styled.span`
+ color: #ff7f00;
+`
+const StyledIconButton = styled(Paper)`
+ border-radius: 50% !important;
+ background-color: ${props => props.disabled ? "#666" : "#ff7f00"} !important;
+ .icon{
+ color: ${props => props.disabled ? "#d4d4d4" : "white"};
+ }
+`
+
+const ResourcePaper = styled(Paper)`
+ /* height: 150px; */
+ text-align: center;
+ background-color: #fff;
+ margin-top: 5px;
+ margin-bottom: 30px;
+ padding: 0.5em 1em;
+ color: #666;
+ .textInfo{
+ text-align: start;
+ }
+`;
\ No newline at end of file
diff --git a/src/Components/SearchPageComponents/UserTemplate.js b/src/Components/SearchPageComponents/UserTemplate.js
new file mode 100644
index 0000000000000000000000000000000000000000..c92296f7c20ceaa39ef78ffed4c4ba3d4cd79c84
--- /dev/null
+++ b/src/Components/SearchPageComponents/UserTemplate.js
@@ -0,0 +1,117 @@
+import React, { useEffect } from 'react';
+import Paper from '@material-ui/core/Paper';
+import styled from 'styled-components';
+import Grid from '@material-ui/core/Grid';
+import LoadingSpinner from '../LoadingSpinner';
+import ContactCard from '../ContactCard';
+import IconButton from '@material-ui/core/IconButton';
+import ArrowBackIcon from '@material-ui/icons/ArrowBack';
+import ArrowForwardIcon from '@material-ui/icons/ArrowForward';
+import { apiDomain } from '../../env';
+
+export default function ResourceTemplate({ isLoading, resources, totalResources, currPage, handlePreviousPage, handleNextPage }) {
+ const totalPages = Math.ceil(totalResources / 12); //Dividing by 12 because i want to cath total pages, and results per page is 12
+ const topRef = React.useRef();
+
+ useEffect(() => {
+ topRef.current.scrollIntoView()
+ }, [isLoading])
+
+ return (
+ <ResourcePaper elevation={4} square>
+ <div ref={topRef} />
+ <Title>
+ Usuários encontrados ({totalResources})
+ </Title>
+ {
+ isLoading ?
+ <LoadingSpinner text='Carregando recursos...' />
+ :
+ <Grid container justify='center' alignItems='center' spacing={3}>
+ {
+ resources.length >= 1 ?
+ resources.map((card) => {
+ return <Grid item key={new Date().toISOString() + 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>
+ })
+ :
+ <NoContentDiv>
+ <h3>
+ Desculpe, não há dados nessa página.
+ </h3>
+ </NoContentDiv>
+ }
+ </Grid>
+ }
+ {
+ !isLoading &&
+ <Grid container direction='row' alignItems='center' justify='center' spacing={3}>
+ <Grid item>
+ <StyledIconButton elevation={4} disabled={currPage === 0}>
+ <IconButton onClick={handlePreviousPage} disabled={currPage === 0}>
+ <ArrowBackIcon className='icon' />
+ </IconButton>
+ </StyledIconButton>
+ </Grid>
+ <Grid item>
+ <ActualPage>
+ {currPage}
+ </ActualPage>...{totalPages}
+ </Grid>
+ <Grid item>
+ <StyledIconButton elevation={4} disabled={currPage === totalPages}>
+ <IconButton onClick={handleNextPage} disabled={currPage === totalPages}>
+ <ArrowForwardIcon className='icon' />
+ </IconButton>
+ </StyledIconButton>
+ </Grid>
+ </Grid>
+ }
+ </ResourcePaper>
+ )
+};
+
+const Title = styled.h4`
+ text-align: left;
+ color: #00bcd4;
+`
+const NoContentDiv = styled.div`
+ >h3{
+ color: #00bcd4;
+ text-align: center;
+ }
+`
+const ActualPage = styled.span`
+ color: #00bcd4;
+`
+const StyledIconButton = styled(Paper)`
+ border-radius: 50% !important;
+ background-color: ${props => props.disabled ? "#666" : "#00bcd4"} !important;
+ .icon{
+ color: ${props => props.disabled ? "#d4d4d4" : "white"};
+ }
+`
+
+const ResourcePaper = styled(Paper)`
+ /* height: 150px; */
+ text-align: center;
+ background-color: #fff;
+ margin-top: 5px;
+ margin-bottom: 30px;
+ padding: 0.5em 1em;
+ color: #666;
+ .textInfo{
+ text-align: start;
+ }
+`;
\ No newline at end of file
diff --git a/src/Pages/CollectionPage.js b/src/Pages/CollectionPage.js
index 51c8ba5ce7b7826b0e39a890ce9b5b03fb2e680f..0c60a9603ce4290798e5598267e0cd8f9bb16372 100644
--- a/src/Pages/CollectionPage.js
+++ b/src/Pages/CollectionPage.js
@@ -64,17 +64,18 @@ export default function CollectionPage(props) {
</p>
</Grid>
<Grid item>
- <Link className="link" to="/busca?query=*&search_class=Collection">
+
+ <Link className="link" to={`/busca?page=0&results_per_page=12&order=review_average&query=*&search_class=Collection`}>
<Button
- variant='contained'
- className="back-button"
- >
- Voltar para a busca de coleções.
+ variant='contained'
+ className="back-button"
+ >
+ Voltar para a busca de coleções.
</Button>
</Link>
- </Grid>
</Grid>
- </CollectionNotFound>
+ </Grid>
+ </CollectionNotFound >
if (loading)
return <LoadingSpinner text="Carregando coleção..." />
else
diff --git a/src/Pages/PublicUserPage.js b/src/Pages/PublicUserPage.js
index 9b561ab6c4fd473bbcd734cb2cf80f8f0a83756b..e853439ae47ad7504232d15d320353098d2db249 100644
--- a/src/Pages/PublicUserPage.js
+++ b/src/Pages/PublicUserPage.js
@@ -174,7 +174,7 @@ export default function PublicUserPage(props) {
</p>
</Grid>
<Grid item>
- <Link className="link" to="/busca?query=*&search_class=User">
+ <Link className="link" to={`/busca?page=0&results_per_page=12&query=*&search_class=User`}>
<Button
variant='contained'
className="back-button"
diff --git a/src/Pages/ResourcePage.js b/src/Pages/ResourcePage.js
index 4fdc717e4ffa5ce02a67d70ec4213853796e6442..317663da5c5d3b4f4f2ac2bd9c321e7cdcc494c7 100644
--- a/src/Pages/ResourcePage.js
+++ b/src/Pages/ResourcePage.js
@@ -150,7 +150,7 @@ export default function LearningObjectPage(props) {
</p>
</Grid>
<Grid item>
- <Link className="link" to="/busca?query=*&search_class=LearningObject">
+ <Link className="link" to={`/busca?page=0&results_per_page=12&order=review_average&query=*&search_class=LearningObject`}>
<Button
variant='contained'
className="back-button"
diff --git a/src/Pages/Search.js b/src/Pages/Search.js
index 5e5fcbd8c572eff3e3439dce20827644de52ce1d..3e657bf888a1591c53f0f3221ee943841229768f 100644
--- a/src/Pages/Search.js
+++ b/src/Pages/Search.js
@@ -1,121 +1,120 @@
-/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
-Departamento de Informatica - Universidade Federal do Parana
-
-This file is part of Plataforma Integrada MEC.
-
-Plataforma Integrada MEC is free software: you can redistribute it and/or modify
-it under the terms of the GNU Affero General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-Plataforma Integrada MEC is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-GNU Affero General Public License for more details.
-
-You should have received a copy of the GNU Affero General Public License
-along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-
-import React, { useEffect, useState, useContext } from "react";
-import { apiDomain } from '../env';
-import { Link, useHistory } from "react-router-dom";
-import styled from "styled-components";
-import Paper from "@material-ui/core/Paper";
-import LoadingSpinner from '../Components/LoadingSpinner';
-import Breadcrumbs from "@material-ui/core/Breadcrumbs";
-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 SearchExpansionPanel from "../Components/SearchExpansionPanel/SearchExpansionPanel";
-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 ColecaoVazia from '../img/Pagina_vazia_colecao.png'
-import RecursoVazio from '../img/Pagina_vazia_Sem_publicar.png'
-
-
-let order = "review_average";
-let currFilter = "";
-let currOption;
-
-export default function Search(props) {
- const history = useHistory()
-
- const { state, dispatch } = useContext(Store);
- const [resultsResource, setResultsResource] = useState([]);
- const [resultsCollection, setResultsCollection] = useState([]);
- const [resultsUser, setResultsUser] = useState([]);
- const [currOrder, setCurrOrder] = useState(order);
- const [page, setPage] = useState(0);
- const [isloading, setIsLoading] = useState(false);
- const [loadingMoreData, setLoadingMoreData] = useState(false);
- const [isFiltering, setIsFiltering] = useState(false);
- const [resultsPerPage] = useState(12);
- const [showingResults, setShowingResults] = useState(0);
- 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;
-
- function handleSuccessfulGet(data, headers) {
- if (currOption === "LearningObject") {
- setResultsResource((previousData) => previousData.concat(data));
- }
- else if (currOption === "Collection") {
- setResultsCollection((previousData) => previousData.concat(data));
+// /*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+// Departamento de Informatica - Universidade Federal do Parana
+
+// This file is part of Plataforma Integrada MEC.
+
+// Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Plataforma Integrada MEC is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+
+// You should have received a copy of the GNU Affero General Public License
+// along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
+
+
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+import { Link } from 'react-router-dom';
+import Breadcrumbs from '@material-ui/core/Breadcrumbs';
+import HeaderFilters from '../Components/SearchPageComponents/HeaderFilters';
+import ResourceTemplate from '../Components/SearchPageComponents/ResourceTemplate';
+import CollectionTemplate from '../Components/SearchPageComponents/CollectionTemplate';
+import UserTemplate from '../Components/SearchPageComponents/UserTemplate';
+import { getRequest } from '../Components/HelperFunctions/getAxiosConfig';
+import { useHistory } from 'react-router-dom';
+
+export default function Search() {
+ const history = useHistory();
+
+ const [currOption, setCurrOption] = useState('');
+ const [currOrder, serCurrOrder] = useState('review_average');
+ const [currQuery, setCurrQuery] = useState('');
+ const [currPage, setCurrPage] = useState(0);
+ const [isLoading, setIsLoading] = useState(false);
+
+ const [resourcesArray, setResourcesArray] = useState([]);
+ const [totalResources, setTotalResources] = useState(0);
+
+ const [collectionsArray, setCollectionsArray] = useState([])
+ const [totalCollections, setTotalCollections] = useState(0);
+
+ const [usersArray, setUsersArray] = useState([])
+ const [totalUsers, setTotalUsers] = useState(0);
+
+ const options = [
+ { value: 'Recursos', name: 'LearningObject', color: '#ff7f00' },
+ { value: 'Coleções', name: 'Collection', color: '#673ab7' },
+ { value: 'Usuários', name: 'User', color: '#00bcd4' },
+ ];
+ const orders = [
+ { value: 'Mais Estrelas', name: 'review_average' },
+ { value: 'Mais Relevante', name: 'score' },
+ { value: 'Mais Baixados', name: 'downloads' },
+ { value: 'Mais Favoritados', name: 'likes' },
+ { value: 'Mais Recentes', name: 'publicationdesc' },
+ { value: 'Ordem Alfabética', name: 'title' },
+ ];
+
+ function handleChangeOption(e) {
+ const value = e.target.value;
+ setCurrOption(value);
+ let url;
+
+ if (value !== 'User')
+ url = `/busca?page=0&results_per_page=12&order=review_average&query=*&search_class=${value}`
+ else
+ url = `/busca?page=0&results_per_page=12&query=*&search_class=${value}`
+
+ history.push(url);
+ }
+
+ function handleChangeOrder(e) {
+ serCurrOrder(e.target.value);
+ }
+
+ function handleNextPage() {
+ const nextPage = currPage + 1;
+ const url = `/busca?page=${nextPage}&results_per_page=12&order=${currOrder}&query=${currQuery}&search_class=${currOption}`
+ history.push(url);
+ }
+
+ function handlePreviousPage() {
+ const previousPage = currPage - 1;
+ const url = `/busca?page=${previousPage}&results_per_page=12&order=${currOrder}&query=${currQuery}&search_class=${currOption}`
+ history.push(url);
+ }
+
+ function handleSuccess(data, headers, option) {
+ console.log(option)
+ if (option === 'LearningObject') {
+ setResourcesArray(data)
+ if (headers.has('X-Total-Count')) {
+ setTotalResources(headers.get('X-Total-Count'));
+ }
}
- else if (currOption === "User") {
- setResultsUser((previousData) => previousData.concat(data));
+ else if (option === 'Collection') {
+ setCollectionsArray(data)
+ if (headers.has('X-Total-Count')) {
+ setTotalCollections(headers.get('X-Total-Count'));
+ }
}
- dispatch({
- type: "SAVE_SEARCH",
- newSearch: {
- query: state.search.query,
- class: currOption,
- },
- });
- if (headers.has('X-Total-Count')) {
- setTotalResults(headers.get('X-Total-Count'));
+ else {
+ setUsersArray(data);
+ if (headers.has('X-Total-Count')) {
+ setTotalUsers(headers.get('X-Total-Count'));
+ }
}
- setShowingResults((previousSize) => data.length + previousSize)
setIsLoading(false);
- setIsFiltering(false);
- setLoadingMoreData(false);
}
- const collectStuff = (tipoBusca, filtro) => {
-
- const urlParams = new URLSearchParams(window.location.search);
- const query = urlParams.get("query");
- const searchClass = urlParams.get("search_class");
-
- 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=${query}${currFilter ? currFilter : ""}&search_class=${searchClass}`
- getRequest(url, handleSuccessfulGet, (error) => { console.log(error) })
- };
+ function handleFail() {
+ setIsLoading(false);
+ }
useEffect(() => {
setIsLoading(true)
@@ -123,353 +122,87 @@ export default function Search(props) {
const urlParams = new URLSearchParams(window.location.search);
const query = urlParams.get("query");
const searchClass = urlParams.get("search_class");
+ const page = parseInt(urlParams.get("page"));
+ const order = urlParams.get("order");
- if (state.search.query !== query || state.search.class !== searchClass) {
- dispatch({
- type: "SAVE_SEARCH",
- newSearch: {
- query: query,
- class: searchClass,
- },
- });
- state.search.query = query
- state.search.class = searchClass
- }
- currOption = searchClass
- setOption(searchClass)
- setOptionResult(searchClass)
- collectStuff(searchClass)
-
- return () =>
- dispatch({
- type: "HANDLE_SEARCH_BAR",
- opened: false,
- });
- }, [window.history.state === null ? true : window.history.state.key, state.currentUser.id])
+ setCurrOption(searchClass);
+ setCurrQuery(query);
+ setCurrPage(page);
+ serCurrOrder(order);
- useEffect(() => {
- if (page > 0) {
- setIsLoading(true);
- collectStuff(option);
- }
- }, [page]);
+ let url
- return (
- <div style={{ backgroundColor: "#f4f4f4" }}>
- <Principal>
- <BreadCrumbsDiv style={{ margin: "15px 2%", }}>
- <StyledBreadCrumbs>
- <Link to="/">Página Inicial</Link>
- <span>Busca</span>
- </StyledBreadCrumbs>
- </BreadCrumbsDiv>
-
- <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) => {
- setResultsCollection([]);
- setResultsResource([]);
- setResultsUser([]);
- setShowingResults(0);
- setPage(0);
- setIsLoading(true);
- currOption = e.value;
- history.push(`/busca?query=${state.search.query}&search_class=${currOption}`)
- setOption(currOption);
- // collectStuff(currOption, "");
- }}
- placeholder="Selecione um tipo"
- />
- </div>
- </Grid>
-
- {
- 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 {showingResults === 0 ? 0 : showingResults} resultados de {totalResults} encontrados
- </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 container item xs justify="center" alignItems="center" key={card.id}>
- <CollectionCardFunction
- name={card.name}
- tags={card.tags}
- rating={card.review_average}
- id={card.id}
- author={card.owner ? card.owner.name : ""}
- description={card.description}
- thumbnails={card.items_thumbnails}
- avatar={card.owner ? 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);
- setPage(page + 1)
- }}
- >
- {
- 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} alt="coleção vazia" />
- </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 container justify="center" alignItems="center" item xs={12} sm={6} md={4} lg={3} key={card.id}>
- <ResourceCardFunction
- avatar={card.publisher ? 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);
- setPage(page + 1)
- // collectStuff("LearningObject", "");
- }}
- >
- {
- loadingMoreData ? <CircularProgress size={24} color="inherit" /> : "Carregar mais 12"
- }
- </button>
- </div>
- </Grid>
- </GridBuscaResource>
-
- :
-
- <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={12} md={10}>
- <Grid container direction="row" justify="center" alignItems="center" style={{ height: "100%", width: "100%" }}>
- <Grid>
- <img src={RecursoVazio} alt="coleção vazia" />
- </Grid>
- </Grid>
- </Grid>
- </GridBuscaResource>
- ) :
- optionResult === "User" && (
- <GridBuscaUser container spacing={2}>
- <Grid item xs >
- <Grid container spacing={2} justify="center" alignItems="center">
- {resultsUser.map((card) => (
- <Grid container justify="center" alignItems="center" 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);
- setPage(page + 1)
- // collectStuff("User", "");
- }}
- >
- {
- loadingMoreData ? <CircularProgress color="inherit" size={24} /> : "Carregar mais 12"
- }
- </button>
- </div>
- </Grid>
- </GridBuscaUser>
- )
- }
- </div>
- </Principal>
- </div>
- );
-}
+ if (searchClass !== 'User')
+ url = `/search?page=${page}&results_per_page=12&order=${order}&query=${query}&search_class=${searchClass}`
+ else
+ url = `/search?page=${page}&results_per_page=12&query=${query}&search_class=${searchClass}`
-const GridBuscaCollection = styled(Grid)`
- color: #666;
- ${'' /* background-color: green; */}
+ getRequest(
+ url,
+ (data, headers) => { handleSuccess(data, headers, searchClass) },
+ handleFail,
+ );
+ }, [window.history.state === null ? true : window.history.state.key])
- h4 {
- padding: 0 15px;
- font-size: 18px;
- margin-block: 10px;
- text-transform: uppercase;
- }
-`;
-const GridBuscaResource = styled(Grid)`
- color: #666;
- ${'' /* background-color: red; */}
-
- h4 {
- padding: 0 15px;
- font-size: 18px;
- margin-block: 10px;
- text-transform: uppercase;
- }
-`;
-const GridBuscaUser = styled(Grid)`
- color: #666;
- ${'' /* background-color: blue; */}
-
- h4 {
- padding: 0 15px;
- font-size: 18px;
- margin-block: 10px;
- text-transform: uppercase;
- }
-`;
+ return (
+ <MainPage>
+ <StyledBreadCrumbs>
+ <Link to='/'>Página Inicial</Link>
+ <span>Busca</span>
+ </StyledBreadCrumbs>
+ <HeaderFilters
+ options={options}
+ orders={orders}
+ currOption={currOption}
+ currOrder={currOrder}
+ handleChangeOption={handleChangeOption}
+ handleChangeOrder={handleChangeOrder}
+ />
+ {
+ currOption === 'LearningObject' &&
+ <ResourceTemplate
+ handleNextPage={handleNextPage}
+ handlePreviousPage={handlePreviousPage}
+ isLoading={isLoading}
+ currPage={currPage}
+ resources={resourcesArray}
+ totalResources={totalResources}
+ />
+ }
+ {
+ currOption === 'Collection' &&
+ <CollectionTemplate
+ handleNextPage={handleNextPage}
+ handlePreviousPage={handlePreviousPage}
+ isLoading={isLoading}
+ currPage={currPage}
+ resources={collectionsArray}
+ totalResources={totalCollections}
+ />
+ }
+ {
+ currOption === 'User' &&
+ <UserTemplate
+ handleNextPage={handleNextPage}
+ handlePreviousPage={handlePreviousPage}
+ isLoading={isLoading}
+ currPage={currPage}
+ resources={usersArray}
+ totalResources={totalUsers}
+ />
+ }
+ </MainPage>
+ )
+}
-const HeaderFilters = styled(Paper)`
- height: 150px;
- text-align: center;
- background-color: #fff;
- margin-bottom: 30px;
- color: #666;
- .textInfo{
- text-align: start;
- }
-`;
+const MainPage = styled.div`
+ width: 90%;
+ margin: 1em auto;
+`
const StyledBreadCrumbs = styled(Breadcrumbs)`
display: flex;
justify-content: flex-start;
- max-width: 1170px;
span {
color: #a5a5a5;
}
@@ -479,11 +212,463 @@ const StyledBreadCrumbs = styled(Breadcrumbs)`
}
`;
-const BreadCrumbsDiv = styled.div`
- padding: 10px;
- display: flex;
-`;
-const Principal = styled.div`
- margin-inline: auto;
-`;
+// import React, { useEffect, useState, useContext } from "react";
+// import { apiDomain } from '../env';
+// import { Link, useHistory } from "react-router-dom";
+// import styled from "styled-components";
+// import Paper from "@material-ui/core/Paper";
+// import LoadingSpinner from '../Components/LoadingSpinner';
+// import Breadcrumbs from "@material-ui/core/Breadcrumbs";
+// 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 SearchExpansionPanel from "../Components/SearchExpansionPanel/SearchExpansionPanel";
+// 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 ColecaoVazia from '../img/Pagina_vazia_colecao.png'
+// import RecursoVazio from '../img/Pagina_vazia_Sem_publicar.png'
+
+
+// let order = "review_average";
+// let currFilter = "";
+// let currOption;
+
+// export default function Search(props) {
+// const history = useHistory()
+
+// const { state, dispatch } = useContext(Store);
+// const [resultsResource, setResultsResource] = useState([]);
+// const [resultsCollection, setResultsCollection] = useState([]);
+// const [resultsUser, setResultsUser] = useState([]);
+// const [currOrder, setCurrOrder] = useState(order);
+// const [page, setPage] = useState(0);
+// const [isloading, setIsLoading] = useState(false);
+// const [loadingMoreData, setLoadingMoreData] = useState(false);
+// const [isFiltering, setIsFiltering] = useState(false);
+// const [resultsPerPage] = useState(12);
+// const [showingResults, setShowingResults] = useState(0);
+// 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;
+
+// function handleSuccessfulGet(data, headers) {
+// if (currOption === "LearningObject" && page > 0) {
+// setResultsResource((previousData) => previousData.concat(data));
+// }
+// else {
+// setResultsResource(data);
+// }
+// if (currOption === "Collection" && page > 0) {
+// setResultsCollection((previousData) => previousData.concat(data));
+// }
+// else {
+// setResultsCollection(data);
+// }
+// if (currOption === "User" && page > 0) {
+// setResultsUser((previousData) => previousData.concat(data));
+// }
+// else {
+// setResultsUser(data);
+// }
+// dispatch({
+// type: "SAVE_SEARCH",
+// newSearch: {
+// query: state.search.query,
+// class: currOption,
+// },
+// });
+// if (headers.has('X-Total-Count')) {
+// setTotalResults(headers.get('X-Total-Count'));
+// }
+// if (page > 0)
+// setShowingResults((previousSize) => data.length + previousSize)
+// else
+// setShowingResults(data.length)
+// setIsLoading(false);
+// setIsFiltering(false);
+// setLoadingMoreData(false);
+// }
+
+// const collectStuff = (tipoBusca, filtro) => {
+
+// const urlParams = new URLSearchParams(window.location.search);
+// const query = urlParams.get("query");
+// const searchClass = urlParams.get("search_class");
+
+// 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=${query}${currFilter ? currFilter : ""}&search_class=${searchClass}`
+// getRequest(url, handleSuccessfulGet, (error) => { console.log(error) })
+// };
+
+// useEffect(() => {
+// setIsLoading(true)
+
+// 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,
+// },
+// });
+// state.search.query = query
+// state.search.class = searchClass
+// }
+// currOption = searchClass
+// setOption(searchClass)
+// setOptionResult(searchClass)
+// collectStuff(searchClass)
+
+// return () =>
+// dispatch({
+// type: "HANDLE_SEARCH_BAR",
+// opened: false,
+// });
+// }, [state.currentUser.id, window.history.state === null ? true : window.history.state.key])
+
+// useEffect(() => {
+// if (page > 0) {
+// setIsLoading(true);
+// collectStuff(option);
+// }
+// }, [page]);
+
+// return (
+// <div style={{ backgroundColor: "#f4f4f4" }}>
+// <Principal>
+// <BreadCrumbsDiv style={{ margin: "15px 2%", }}>
+// <StyledBreadCrumbs>
+// <Link to="/">Página Inicial</Link>
+// <span>Busca</span>
+// </StyledBreadCrumbs>
+// </BreadCrumbsDiv>
+
+// <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) => {
+// setResultsCollection([]);
+// setResultsResource([]);
+// setResultsUser([]);
+// setShowingResults(0);
+// setPage(0);
+// setIsLoading(true);
+// currOption = e.value;
+// history.push(`/busca?query=${state.search.query}&search_class=${currOption}`)
+// setOption(currOption);
+// // collectStuff(currOption, "");
+// }}
+// placeholder="Selecione um tipo"
+// />
+// </div>
+// </Grid>
+
+// {
+// 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 {showingResults === 0 ? 0 : showingResults} resultados de {totalResults} encontrados
+// </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 container item xs justify="center" alignItems="center" key={card.id}>
+// <CollectionCardFunction
+// name={card.name}
+// tags={card.tags}
+// rating={card.review_average}
+// id={card.id}
+// author={card.owner ? card.owner.name : ""}
+// description={card.description}
+// thumbnails={card.items_thumbnails}
+// avatar={card.owner ? 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);
+// setPage(page + 1)
+// }}
+// >
+// {
+// 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} alt="coleção vazia" />
+// </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 container justify="center" alignItems="center" item xs={12} sm={6} md={4} lg={3} key={card.id}>
+// <ResourceCardFunction
+// avatar={card.publisher ? 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);
+// setPage(page + 1)
+// // collectStuff("LearningObject", "");
+// }}
+// >
+// {
+// loadingMoreData ? <CircularProgress size={24} color="inherit" /> : "Carregar mais 12"
+// }
+// </button>
+// </div>
+// </Grid>
+// </GridBuscaResource>
+
+// :
+
+// <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={12} md={10}>
+// <Grid container direction="row" justify="center" alignItems="center" style={{ height: "100%", width: "100%" }}>
+// <Grid>
+// <img src={RecursoVazio} alt="coleção vazia" />
+// </Grid>
+// </Grid>
+// </Grid>
+// </GridBuscaResource>
+// ) :
+// optionResult === "User" && (
+// <GridBuscaUser container spacing={2}>
+// <Grid item xs >
+// <Grid container spacing={2} justify="center" alignItems="center">
+// {resultsUser.map((card) => (
+// <Grid container justify="center" alignItems="center" 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);
+// setPage(page + 1)
+// // collectStuff("User", "");
+// }}
+// >
+// {
+// loadingMoreData ? <CircularProgress color="inherit" size={24} /> : "Carregar mais 12"
+// }
+// </button>
+// </div>
+// </Grid>
+// </GridBuscaUser>
+// )
+// }
+// </div>
+// </Principal>
+// </div>
+// );
+// }
+
+// const GridBuscaCollection = styled(Grid)`
+// color: #666;
+// ${'' /* background-color: green; */}
+
+// h4 {
+// padding: 0 15px;
+// font-size: 18px;
+// margin-block: 10px;
+// text-transform: uppercase;
+// }
+// `;
+// const GridBuscaResource = styled(Grid)`
+// color: #666;
+// ${'' /* background-color: red; */}
+
+// h4 {
+// padding: 0 15px;
+// font-size: 18px;
+// margin-block: 10px;
+// text-transform: uppercase;
+// }
+// `;
+// const GridBuscaUser = styled(Grid)`
+// color: #666;
+// ${'' /* background-color: blue; */}
+
+// h4 {
+// padding: 0 15px;
+// font-size: 18px;
+// margin-block: 10px;
+// text-transform: uppercase;
+// }
+// `
+
+// const BreadCrumbsDiv = styled.div`
+// padding: 10px;
+// display: flex;
+// `;
+
+// const Principal = styled.div`
+// margin-inline: auto;
+// `;