diff --git a/src/Components/ContactCard.js b/src/Components/ContactCard.js
index b5719d71e54a6eeb2ebaa30844b0a8e1ac6b10f3..94bb3611a41ff9f466b35fe346533eba8b54ea2c 100644
--- a/src/Components/ContactCard.js
+++ b/src/Components/ContactCard.js
@@ -16,7 +16,7 @@ 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, {useState} from 'react';
+import React, { useState, useEffect } from 'react';
import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent';
import noAvatar from "../img/default_profile.png";
@@ -26,27 +26,30 @@ import Options from './ContactCardOptions.js'
import FollowButton from './ContactButtons/FollowButton.js'
import FollowingButton from './ContactButtons/FollowingButton.js'
import FollowersCountButton from './ContactButtons/FollowersCountButton.js'
-import {Link} from 'react-router-dom';
-
+import { Link } from 'react-router-dom';
export default function ImgMediaCard(props) {
- const [followedBoolean, setFollowedBoolean] = useState(props.followed)
- const toggleFollowed = () => {setFollowedBoolean(!followedBoolean)}
- return (
+ const [followedBoolean, setFollowedBoolean] = useState(props.followed)
+ const toggleFollowed = () => { setFollowedBoolean(!followedBoolean) }
+ const [avatar, setAvatar] = useState(props.avatar ? props.avatar : noAvatar);
+
+ return (
<StyledCard>
<CardDiv>
<CardAreaDiv>
{/*Top part of contat card (background image, number of followers and avatar)*/}
<Header>
<StyledCardMedia image={props.cover}>
- <div style = {{display : "flex", backgroundColor : "inherit", float : "right"}}>
+ <div style={{ display: "flex", backgroundColor: "inherit", float: "right" }}>
<Link to={props.href}>
- <FollowersCountButton followCount={props.follow_count}/>
+ <FollowersCountButton followCount={props.follow_count} />
</Link>
<AvatarDiv>
- <img src={props.avatar ? props.avatar : noAvatar} alt='user avatar'
- style={{height : "100%", width : "100%", borderRadius : "50%"}}/>
+ <img src={avatar} alt='user avatar'
+ style={{ height: "100%", width: "100%", borderRadius: "50%" }}
+ onError={() => setAvatar(noAvatar)}
+ />
</AvatarDiv>
</div>
</StyledCardMedia>
@@ -62,48 +65,48 @@ export default function ImgMediaCard(props) {
</Link>
<Link to={props.href}>
- <span style={{fontSize : "14px", fontWeight : "normal"}}>
- <b>{props.numCollections}</b> {props.numCollections !== 1? "Coleções" : "Coleção"} | <b>{props.numLearningObjects}</b> {props.numLearningObjects !== 1? "Recursos" : "Recurso"}
+ <span style={{ fontSize: "14px", fontWeight: "normal" }}>
+ <b>{props.numCollections}</b> {props.numCollections !== 1 ? "Coleções" : "Coleção"} | <b>{props.numLearningObjects}</b> {props.numLearningObjects !== 1 ? "Recursos" : "Recurso"}
</span>
</Link>
- <div style={{display : "flex", justifyContent : "center"}}>
+ <div style={{ display: "flex", justifyContent: "center" }}>
{
followedBoolean ?
- (
- <React.Fragment>
- <FollowingButton
- followedID={props.followerID ? props.followerID : props.followedID}
- toggleFollowed={toggleFollowed}/>
-
- <Options
- followableID={props.followerID ? props.followerID : props.followedID}
- followed={followedBoolean}
- toggleFollowed={toggleFollowed}/>
- </React.Fragment>
- )
- :
- (
- <React.Fragment>
- <FollowButton
- followerID={props.followedID ? props.followedID : props.followerID}
- toggleFollowed={toggleFollowed}/>
-
- <Options
- followableID={props.followedID ? props.followedID : props.followerID}
- followed={followedBoolean}
- toggleFollowed={toggleFollowed}/>
- </React.Fragment>
- )
+ (
+ <React.Fragment>
+ <FollowingButton
+ followedID={props.followerID ? props.followerID : props.followedID}
+ toggleFollowed={toggleFollowed} />
+
+ <Options
+ followableID={props.followerID ? props.followerID : props.followedID}
+ followed={followedBoolean}
+ toggleFollowed={toggleFollowed} />
+ </React.Fragment>
+ )
+ :
+ (
+ <React.Fragment>
+ <FollowButton
+ followerID={props.followedID ? props.followedID : props.followerID}
+ toggleFollowed={toggleFollowed} />
+
+ <Options
+ followableID={props.followedID ? props.followedID : props.followerID}
+ followed={followedBoolean}
+ toggleFollowed={toggleFollowed} />
+ </React.Fragment>
+ )
}
</div>
- </UserInfo>
- </CardContent>
- </CardAreaDiv>
- </CardDiv>
- </StyledCard>
- );
+ </UserInfo>
+ </CardContent>
+ </CardAreaDiv>
+ </CardDiv>
+ </StyledCard>
+ );
}
/*Controls top part of Card*/
@@ -132,7 +135,7 @@ export const CardDiv = styled.div`
/*Override Material UI styling -----------------------------------------------*/
-const StyledCardMedia = styled(CardMedia) `
+const StyledCardMedia = styled(CardMedia)`
height : 100%;
width : 100%;
background-size : cover;
diff --git a/src/Components/Header.js b/src/Components/Header.js
index a0eb0c727f385d59854a25bc5aac5d91b41a1f11..13a1d6b4f82a7f600fc375ea31e54ae4fa51b5df 100644
--- a/src/Components/Header.js
+++ b/src/Components/Header.js
@@ -27,7 +27,7 @@ import Snackbar from '@material-ui/core/Snackbar';
import MuiAlert from '@material-ui/lab/Alert';
import { useLocation } from 'react-router-dom'
import MenuBarMobile from './MenuBarMobile.js'
-import {validateGoogleLoginToken} from './HelperFunctions/getAxiosConfig'
+import { validateGoogleLoginToken } from './HelperFunctions/getAxiosConfig'
//const StyledButton = styled(Button)`
// background : #ffa54c !important;
@@ -38,90 +38,82 @@ function Alert(props) {
}
-export default function Header(props){
- const { state, dispatch } = useContext(Store)
- const [signUpOpen, setSignUp] = useState(false)
- const [loginOpen, setLogin] = useState(false)
- const [successfulLoginOpen, handleSuccessfulLogin] = useState(false)
- const [modalColaborar, setModalColaborar] = useState(false)
-
- function handleSuccessValidateToken (data) {
- dispatch ({
- type: "USER_LOGGED_IN",
- userLoggedIn: !state.userIsLoggedIn,
- login: data.data
- }
- )
- }
-
-/* useEffect( () => {
- if (sessionStorage.getItem('@portalmec/auth_headers')) {
- let config = { headers : JSON.parse(sessionStorage.getItem('@portalmec/auth_headers'))}
-
- validateToken(config, handleSuccessValidateToken, (error) => {console.log(error)})
- }
- }, [])*/
-
- let loc = useLocation()
- useEffect(() => {
- let query = new URLSearchParams(loc.search)
-
- if(query.get("auth_token")) {
- let config = {
- headers : {
- "access-token" : query.get("auth_token"),
- "client" : query.get("client_id"),
- "uid" : query.get("uid"),
- "expiry" : query.get("expiry"),
- "token-type" : 'Bearer'
- }
- }
- validateGoogleLoginToken(config, handleSuccessValidateToken, (error) => {console.log(error)})
- redirect()
- }
- }, [loc])
-
- useEffect ( () => {
- if (state.currentUser.askTeacherQuestion === true) {
- dispatch({
- type: "TOGGLE_MODAL_COLABORAR_PLATAFORMA",
- modalColaborarPlataformaOpen: true
- });
- }
- }, [state.currentUser.askTeacherQuestion])
-
- const redirect = () => {
- props.history.push('/')
- }
-
- const toggleSnackbar = (event, reason) => {
- if (reason === 'clickaway') {
- return;
- }
-
- handleSuccessfulLogin(false);
- }
-
- const handleSignUp = () => {
- setSignUp(!signUpOpen)
- }
-
- const handleLogin = () => {
- setLogin(!loginOpen)
- }
-
- const handleClickSearch = (open) => {
- dispatch({
- type: "HANDLE_SEARCH_BAR",
- opened: !state.searchOpen
- })
- }
-
- let windowWidth = window.innerWidth
-
- return (
- <React.Fragment>
- {/*
+export default function Header(props) {
+ const { state, dispatch } = useContext(Store)
+ const [signUpOpen, setSignUp] = useState(false)
+ const [loginOpen, setLogin] = useState(false)
+ const [successfulLoginOpen, handleSuccessfulLogin] = useState(false)
+ const [modalColaborar, setModalColaborar] = useState(false)
+
+ function handleSuccessValidateToken(data) {
+ dispatch({
+ type: "USER_LOGGED_IN",
+ userLoggedIn: !state.userIsLoggedIn,
+ login: data.data
+ }
+ )
+ }
+
+ let loc = useLocation()
+ useEffect(() => {
+ let query = new URLSearchParams(loc.search)
+
+ if (query.get("auth_token")) {
+ let config = {
+ headers: {
+ "access-token": query.get("auth_token"),
+ "client": query.get("client_id"),
+ "uid": query.get("uid"),
+ "expiry": query.get("expiry"),
+ "token-type": 'Bearer'
+ }
+ }
+ validateGoogleLoginToken(config, handleSuccessValidateToken, (error) => { console.log(error) })
+ redirect()
+ }
+ }, [loc])
+
+ useEffect(() => {
+ if (state.currentUser.askTeacherQuestion === true) {
+ dispatch({
+ type: "TOGGLE_MODAL_COLABORAR_PLATAFORMA",
+ modalColaborarPlataformaOpen: true
+ });
+ }
+ }, [state.currentUser.askTeacherQuestion])
+
+ const redirect = () => {
+ props.history.push('/')
+ }
+
+ const toggleSnackbar = (event, reason) => {
+ if (reason === 'clickaway') {
+ return;
+ }
+
+ handleSuccessfulLogin(false);
+ }
+
+ const handleSignUp = () => {
+ setSignUp(!signUpOpen)
+ }
+
+ const handleLogin = () => {
+ setLogin(!loginOpen)
+ }
+
+ const handleClickSearch = (open) => {
+ dispatch({
+ type: "HANDLE_SEARCH_BAR",
+ opened: !state.searchOpen
+ })
+ }
+
+ let windowWidth = window.innerWidth
+
+ return (
+ <React.Fragment>
+ {/*
windowWidth > 990 &&
<AcessibilityBar/>
*/}
diff --git a/src/Pages/Search.js b/src/Pages/Search.js
index fe891acf76a6ca83813a6cbd0aa680d11848bfc1..b40642f261d310222a8af1d7fac3d2107fbf78b5 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,332 +33,352 @@ 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;
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 [option, setOption] = useState(
- new URLSearchParams(window.location.search).get("search_class")
- );
- const [optionResult, setOptionResult] = useState(option);
-
- function handleSuccessfulGet (data) {
- if (option === "LearningObject") setResultsResource(data);
- else if (option === "Collection") setResultsCollection(data);
- else if (option === "User") setResultsUser(data);
- setOptionResult(option);
- dispatch({
- type: "SAVE_SEARCH",
- newSearch: {
- query: state.search.query,
- class: option,
- },
- });
- setTotalResults(data.length);
- 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,
- },
- });
+ 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;
+
+ 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,
- });
- }, []);
-
- useEffect(() => {
- collectStuff(option);
- }, [resultsPerPage]);
-
- 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) => {
- setIsLoading(true);
- setOption(e.value);
- collectStuff(e.value, "");
- }}
- 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 {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 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>
- ) :
-
- 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 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}>
- {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}
- />
+ 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,
+ },
+ });
+ }
+
+ return () =>
+ dispatch({
+ type: "HANDLE_SEARCH_BAR",
+ opened: false,
+ });
+ }, []);
+
+ useEffect(() => {
+ setIsLoading(true);
+ collectStuff(option);
+ }, [resultsPerPage]);
+
+ 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) => {
+ 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)`