diff --git a/package-lock.json b/package-lock.json
index b82ef6df43770183c6c14a32b78cd5696acee4b1..7c8f79a03656999b6a3cbfa7055ee645df2d510a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8581,9 +8581,9 @@
"integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
},
"ini": {
- "version": "1.3.5",
- "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz",
- "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw=="
+ "version": "1.3.8",
+ "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
+ "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew=="
},
"inquirer": {
"version": "6.5.2",
@@ -14377,6 +14377,14 @@
"tiny-warning": "^1.0.0"
}
},
+ "react-router-hash-link": {
+ "version": "2.3.1",
+ "resolved": "https://registry.npmjs.org/react-router-hash-link/-/react-router-hash-link-2.3.1.tgz",
+ "integrity": "sha512-QVYLaBLmRGovSbQv4Tbjqnl9JMEQ8c5rWebkZU16ovgZtpmNIf2znGj3uWaKkAL7lhuYBPcC3OAfhw7lk/QwNw==",
+ "requires": {
+ "prop-types": "^15.7.2"
+ }
+ },
"react-scripts": {
"version": "2.1.8",
"resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-2.1.8.tgz",
diff --git a/package.json b/package.json
index cb8630015621519a71f19013dd39334d5b674435..95bdc57afcd91439c09a529b754a3c8a4e11fb1b 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
"react-recaptcha": "^2.3.10",
"react-responsive-carousel": "^3.2.10",
"react-router-dom": "^5.1.2",
+ "react-router-hash-link": "^2.3.1",
"react-scripts": "^2.1.8",
"react-star-ratings": "^2.3.0",
"styled-components": "^4.4.1",
diff --git a/src/Components/CollectionAuthor.js b/src/Components/CollectionAuthor.js
index 54ce444032c4e4cefc778371b1e8f4144188a320..56b940a45409c0881198a8349de5c510a33b9c26 100644
--- a/src/Components/CollectionAuthor.js
+++ b/src/Components/CollectionAuthor.js
@@ -52,8 +52,8 @@ export default function CollectionAuthor(props) {
}
const UserAvatar = styled.img`
- border-radius: 100px;
- width: 100px;
+ border-radius: 75px;
+ width: 75px;
height: auto;
`
const InfoText = styled.p`
@@ -61,7 +61,7 @@ const InfoText = styled.p`
padding-bottom: 0;
color: #666;
`
-const UserName = styled.h1`
+const UserName = styled.h2`
margin-top: 10px;
color: #673ab7;
`
diff --git a/src/Components/CollectionDescription.js b/src/Components/CollectionDescription.js
index 062a13bca5ba4b24c3eee0b3889131eda749b209..e6b2cd07e43c25395c055f251e418fbf5962ac3e 100644
--- a/src/Components/CollectionDescription.js
+++ b/src/Components/CollectionDescription.js
@@ -47,19 +47,26 @@ export default function CollectionDescription(props) {
});}, [props.collection_id]);
return (
- <Grid container direction="column" justify="center" alignItems="center">
- <Grid item>
+ <Grid container direction="column" justify="center" alignItems="center" spacing={5}>
+ <Grid
+ item
+ justify="center"
+ alignItems="center"
+ >
<Title>{props.title}</Title>
</Grid>
- <Grid item container
- direction="row" justify="space-between" alignItems="center"
+ <Grid
+ item
+ direction="row"
+ justify="center"
+ alignItems="center"
>
- <Grid item sm={4}>
+ <Grid item>
<CollectionReview
scrollToComment={props.scrollToComments}
id={props.collection_id}/>
</Grid>
- <Grid item container sm={8}
+ {/* <Grid item container sm={8}
direction="column" justify="center" alignItems="flex-end"
>
<Grid item style={{marginBottom: 10}}>
@@ -77,7 +84,7 @@ export default function CollectionDescription(props) {
<Grid item>
<FollowCollectionButton user_id={state.currentUser.id} collection_id={props.collection_id}/>
</Grid>
- </Grid>
+ </Grid> */}
</Grid>
</Grid>
@@ -85,9 +92,9 @@ export default function CollectionDescription(props) {
}
const Title=styled.h1`
- font-size: 3em;
+ font-size: 2.5em;
color: rgb(102, 102, 102);
- float: left;
+ text-align: center
`
const ButtonText=styled.span`
font-weight: bolder;
diff --git a/src/Components/CollectionDowloadButton.js b/src/Components/CollectionDowloadButton.js
new file mode 100644
index 0000000000000000000000000000000000000000..2e081f43d87a32ecae0a31b360fd96edb77e301e
--- /dev/null
+++ b/src/Components/CollectionDowloadButton.js
@@ -0,0 +1,58 @@
+import React, { useContext, useState, useEffect } from 'react';
+import axios from 'axios';
+import GetAppIcon from '@material-ui/icons/GetApp';
+import Button from '@material-ui/core/Button';
+import styled from 'styled-components';
+import { apiUrl, apiDomain } from '../env';
+import FollowCollectionButton from './FollowCollectionButton.js';
+import { Store } from '../Store.js'
+import { Grid } from '@material-ui/core';
+
+const DowloadButton = (props) => {
+ const { state } = useContext(Store);
+ const [download_url, setDownloadUrl] = useState('');
+
+ useEffect(() => {
+ const body = {
+ "package": {
+ "object": [{ "type": "Collection", "id": props.id }]
+ }
+ };
+ axios
+ .post(apiUrl + '/package', body)
+ .catch(err => {
+ if (err.response && err.response.status === 302) {
+ setDownloadUrl(apiDomain + '/' + err.response.data.url);
+ }
+ });
+ }, [props.id]);
+ return (
+ <>
+ <DownloadAnchor href={download_url} >
+ <DownloadButton
+ variant="outlined"
+ color="primary"
+ startIcon={<GetAppIcon fontSize="large" />}
+ size="small"
+ >
+ <ButtonText>Baixar Coleção</ButtonText>
+ </DownloadButton>
+ </DownloadAnchor>
+ </>
+ )
+}
+
+const ButtonText = styled.span`
+ font-weight: bolder;
+ font-size: 1.2em;
+`
+const DownloadButton = styled(Button)`
+ padding-left: 10;
+ padding-right: 10;
+ width: 250px;
+`
+const DownloadAnchor = styled.a`
+ text-decoration: none !important;
+`
+
+export default DowloadButton;
diff --git a/src/Components/CollectionReview.js b/src/Components/CollectionReview.js
index be63b1d3a1a81e92d4358956a3461ea6302f3c9d..eaa5eb4e49f10b9f004732bfd5eede0a7a11ab02 100644
--- a/src/Components/CollectionReview.js
+++ b/src/Components/CollectionReview.js
@@ -41,7 +41,7 @@ export default function CollectionReview(props) {
const { state } = useContext(Store);
useEffect(() => {
- axios.get(apiUrl+'/collections/'+props.id)
+ axios.get(apiUrl + '/collections/' + props.id)
.then(res => {
setLikes(Number(res.data.likes_count));
setLiked(res.data.liked);
@@ -51,15 +51,50 @@ export default function CollectionReview(props) {
const handleClickReport = () => {
setReportOpen(true);
}
+
+ const SaveNewHeaders = (response) => {
+ if (
+ (response.headers['access-token'] === undefined || response.headers['access-token'] === null) &&
+ (response.headers.client === undefined || response.headers.client === null)
+ ) {
+ } else {
+ sessionStorage.setItem('@portalmec/accessToken', response.headers['access-token'])
+ sessionStorage.setItem('@portalmec/clientToken', response.headers.client)
+ console.log('saved')
+ }
+ }
+
const handleLikeClick = () => {
if (state.currentUser.id) {
- const url = apiUrl+'/collections/'+props.id+'/like';
+ const url = apiUrl + '/collections/' + props.id + '/like';
if (!liked)
- axios.put(url);
+ axios({
+ method: 'put',
+ url: url,
+ headers: {
+ 'Accept': 'application/json',
+ 'Content-Type': 'application/json; charset=utf-8',
+ 'access-token': sessionStorage.getItem('@portalmec/accessToken'),
+ 'client': sessionStorage.getItem('@portalmec/clientToken'),
+ 'uid': sessionStorage.getItem('@portalmec/uid'),
+ 'If-None-Match': null
+ },
+ }).then(response => {
+ if(response.status === 201)
+ {
+ setLiked(true)
+ setLikes(response.data.count);
+ }
+ else
+ {
+ setLiked(false);
+ setLikes(response.data.count);
+ }
+ SaveNewHeaders(response)
+ })
else
- axios.delete(url);
- setLiked(!liked);
+ setLiked(!liked);
} else
setSignUpOpen(true);
}
@@ -74,26 +109,28 @@ export default function CollectionReview(props) {
}
return (
- <Grid container direction="row" justify="center" alignItems="center">
- <Grid item sm={8}>
- <Rating
- name="customized-empty"
- value={stars}
- onChange={(e, value) => handleSetStars(value)}
- precision={0.5}
- style={{color:"#666"}}
- emptyIcon={<StarBorderIcon fontSize="inherit" />}
- />
- </Grid>
- <Grid item sm={4}>
- <IconButton aria-label="like" onClick={handleLikeClick}>
- {likes + (liked ? 1 : 0)}<FavoriteIcon />
- </IconButton>
+ <Grid container direction="column">
+ <Grid sm={12} container direction="row" alignItems="center">
+ <Grid item>
+ <Rating
+ name="customized-empty"
+ value={stars}
+ onChange={(e, value) => handleSetStars(value)}
+ precision={0.5}
+ style={{ color: "#666" }}
+ emptyIcon={<StarBorderIcon fontSize="inherit" />}
+ />
+ </Grid>
+ <Grid item justify="center" alignItems="center">
+ <IconButton aria-label="like" onClick={handleLikeClick}>
+ {likes}<FavoriteIcon style={{fill : liked ? "red" : null}} />
+ </IconButton>
+ </Grid>
</Grid>
<Grid item sm={12}>
- <IconButton
- aria-label="report"
- style={{fontSize: 'small'}}
+ <IconButton
+ aria-label="report"
+ style={{ fontSize: 'small' }}
onClick={handleClickReport}>
<InfoIcon />Reportar erro ou abuso
</IconButton>
@@ -114,7 +151,6 @@ export default function CollectionReview(props) {
open={log_in_open}
handleClose={() => setLoginOpen(false)}
/>
-
</Grid>
);
}
diff --git a/src/Components/Dropdown.js b/src/Components/Dropdown.js
index f186c6938796c5ad275bd3b7881f0c929ae3459a..a379b826b8df5498957d0b84ffe0645a20ca0b18 100644
--- a/src/Components/Dropdown.js
+++ b/src/Components/Dropdown.js
@@ -17,7 +17,7 @@ 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, useRef, useEffect, useContext } from 'react'
-import { Link } from 'react-router-dom'
+import { HashLink as Link } from 'react-router-hash-link';
import { Button, Grow, Paper, Popper, MenuItem, MenuList } from '@material-ui/core';
import { withStyles } from '@material-ui/styles';
import styled from 'styled-components'
diff --git a/src/Components/EcFooter.js b/src/Components/EcFooter.js
index 3340f3d78b77b3cca3db805d3ebe538ef72256bf..9b5183ff5ab7b6d8145b65a083ed569659839cdd 100644
--- a/src/Components/EcFooter.js
+++ b/src/Components/EcFooter.js
@@ -49,20 +49,20 @@ class EcFooter extends Component{
<Col md={4} sm={5} xs={5}>
<h4>Sobre</h4>
<ul style={listStyle}>
- <li> <WhiteLink href="/sobre">Sobre a Plataforma</WhiteLink> </li>
- <li> <WhiteLink href="/sobre#parceiros">Portais Parceiros</WhiteLink> </li>
- <li> <WhiteLink href="/termos">Termos de Uso</WhiteLink> </li>
- <li> <WhiteLink href="/contato">Contato</WhiteLink> </li>
+ <li> <WhiteLink href="sobre">Sobre a Plataforma</WhiteLink> </li>
+ <li> <WhiteLink href="sobre#portaisparceiros">Portais Parceiros</WhiteLink> </li>
+ <li> <WhiteLink href="termos">Termos de Uso</WhiteLink> </li>
+ <li> <WhiteLink href="contato">Contato</WhiteLink> </li>
</ul>
</Col>
<Col md={4} sm={5} xs={5}>
<h4>Ajuda</h4>
<ul style={listStyle}>
- <li> <WhiteLink href="/ajuda">Central de Ajuda</WhiteLink> </li>
- <li> <WhiteLink href="/publicando-recurso">Publicando Recursos</WhiteLink> </li>
- <li> <WhiteLink href="/encontrando-recurso">Encontrando Recursos</WhiteLink> </li>
- <li> <WhiteLink href="/participando-da-rede">Participando da Rede</WhiteLink> </li>
- <li> <WhiteLink href="/gerenciando-conta">Gerenciando a Conta</WhiteLink> </li>
+ <li> <WhiteLink href="ajuda">Central de Ajuda</WhiteLink> </li>
+ <li> <WhiteLink href="publicando-recurso">Publicando Recursos</WhiteLink> </li>
+ <li> <WhiteLink href="encontrando-recurso">Encontrando Recursos</WhiteLink> </li>
+ <li> <WhiteLink href="participando-da-rede">Participando da Rede</WhiteLink> </li>
+ <li> <WhiteLink href="gerenciando-conta">Gerenciando a Conta</WhiteLink> </li>
</ul>
</Col>
<Col md={4} sm={12} xs={12}>
diff --git a/src/Components/FollowCollectionButton.js b/src/Components/FollowCollectionButton.js
index 5e3fd33c9ce3b789de2d15373e63e6858b937752..cbabd8845d380f3390d883b85d1e6a3617048da0 100644
--- a/src/Components/FollowCollectionButton.js
+++ b/src/Components/FollowCollectionButton.js
@@ -23,23 +23,44 @@ import AddIcon from '@material-ui/icons/Add';
import styled from 'styled-components';
import SignUpModal from './SignUpModal.js';
import axios from 'axios';
-import {apiUrl} from '../env';
+import { apiUrl } from '../env';
export default function FollowCollectionButton(props) {
- const [icon, setIcon] = useState(<AddIcon fontSize="large"/>);
+ const [icon, setIcon] = useState(<AddIcon fontSize="large" />);
const [button_text, setButtonText] = useState("Seguir Coleção");
const [variant, setVariant] = useState("outlined");
const [sign_up_open, setSignUpOpen] = useState(false);
const [following, setFollowing] = useState(false); //user following collection
useEffect(() => {
- axios.get(apiUrl+'/users/'+props.user_id+'/following/Collection')
- .then(res => {
- for (const element in res.body)
- if (element.id == props.collection_id)
- setFollowing(true);
- });
- }, [])
+ const url = apiUrl + '/users/' + props.user_id + '/following/Collection';
+ console.log("props: ", props);
+ axios({
+ method: 'get',
+ url: url,
+ headers: {
+ 'Accept': 'application/json',
+ 'Content-Type': 'application/json; charset=utf-8',
+ 'access-token': sessionStorage.getItem('@portalmec/accessToken'),
+ 'client': sessionStorage.getItem('@portalmec/clientToken'),
+ 'uid': sessionStorage.getItem('@portalmec/uid'),
+ 'If-None-Match': null
+ },
+ }).then(response => {
+ const data = [...response.data];
+ if(data)
+ data.map((e) => {
+ if (e["followable"]["id"] === Number(props.collection_id)){
+ setVariant("contained");
+ setButtonText("Seguindo");
+ setIcon(<CheckIcon fontSize="large" />)
+ setFollowing(true);
+ }
+
+ })
+ SaveNewHeaders(response)
+ })
+ }, []);
//handleMouse{Enter, Leave} only do anything when user follows given collection:
const handleMouseEnter = () => {
@@ -49,7 +70,7 @@ export default function FollowCollectionButton(props) {
setIcon(null);
}
}
-
+
const handleMouseLeave = () => {
if (following) {
setVariant("contained");
@@ -58,35 +79,70 @@ export default function FollowCollectionButton(props) {
}
}
+ const SaveNewHeaders = (response) => {
+ if (
+ (response.headers['access-token'] === undefined || response.headers['access-token'] === null) &&
+ (response.headers.client === undefined || response.headers.client === null)
+ ) {
+
+ } else {
+ sessionStorage.setItem('@portalmec/accessToken', response.headers['access-token'])
+ sessionStorage.setItem('@portalmec/clientToken', response.headers.client)
+ console.log('saved')
+ }
+ }
+
const handleClick = () => {
if (!props.user_id)
setSignUpOpen(true);
else if (!following) {
+ const url = apiUrl + '/collections/' + props.collection_id + '/follow';
setVariant("contained");
setButtonText("Seguindo");
- setIcon(<CheckIcon fontSize="large"/>)
+ setIcon(<CheckIcon fontSize="large" />)
setFollowing(true);
- axios.post(apiUrl+'/collections/'+props.collection_id+'/follow')
- .then(res => {
- if (Number(res.status) != 201)
- setFollowing(false);
- setIcon(<AddIcon fontSize="large"/>);
- setButtonText("Seguindo");
- setVariant("contained");
- });
+ axios({
+ method: 'put',
+ url: url,
+ headers: {
+ 'Accept': 'application/json',
+ 'Content-Type': 'application/json; charset=utf-8',
+ 'access-token': sessionStorage.getItem('@portalmec/accessToken'),
+ 'client': sessionStorage.getItem('@portalmec/clientToken'),
+ 'uid': sessionStorage.getItem('@portalmec/uid'),
+ 'If-None-Match': null
+ },
+ }).then(response => {
+ if (response.status === 201)
+ setFollowing(true);
+ else if (response.status === 200)
+ setFollowing(false);
+ SaveNewHeaders(response)
+ })
} else {
+ const url = apiUrl + '/collections/' + props.collection_id + '/follow';
setVariant("outlined");
- setButtonText("Deixar de seguir");
- setIcon(<AddIcon fontSize="large"/>);
+ setButtonText("Seguir Coleção");
+ setIcon(<AddIcon fontSize="large" />);
setFollowing(false);
- axios.delete(apiUrl+'/collections/'+props.collection_id+'/follow')
- .then(res => {
- if (Number(res.status) == 200)
- setFollowing(true);
- setIcon(<CheckIcon fontSize="large"/>);
- setButtonText("Deixar de seguir");
- setVariant("outlined");
- });
+ axios({
+ method: 'put',
+ url: url,
+ headers: {
+ 'Accept': 'application/json',
+ 'Content-Type': 'application/json; charset=utf-8',
+ 'access-token': sessionStorage.getItem('@portalmec/accessToken'),
+ 'client': sessionStorage.getItem('@portalmec/clientToken'),
+ 'uid': sessionStorage.getItem('@portalmec/uid'),
+ 'If-None-Match': null
+ },
+ }).then(response => {
+ if (response.status === 201)
+ setFollowing(true);
+ else if (response.status === 200)
+ setFollowing(false);
+ SaveNewHeaders(response)
+ })
}
};
@@ -97,7 +153,7 @@ export default function FollowCollectionButton(props) {
variant={variant}
color="primary"
startIcon={icon}
- size="large"
+ size="small"
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
onClick={handleClick}
@@ -107,19 +163,19 @@ export default function FollowCollectionButton(props) {
<SignUpModal open={sign_up_open} handleClose={() => setSignUpOpen(false)} />
</div>
);
- else return (<div></div>);
+ else return (<div></div>);
}
-const Title=styled.h1`
+const Title = styled.h1`
font-size: 3em;
color: rgb(102, 102, 102);
float: left;
`
-const ButtonText=styled.span`
+const ButtonText = styled.span`
font-weight: bolder;
font-size: 1.2em;
`
-const FollowButton=styled(Button)`
+const FollowButton = styled(Button)`
padding-left: 10;
padding-right: 10;
width: 250px;
diff --git a/src/Components/LoginContainerFunction.js b/src/Components/LoginContainerFunction.js
index 0b538b3a4d2ef65b23411d5618ea1a086e388dc1..5e6bd3fc8c8493d7dd8be3bbdc63455a886cc43b 100644
--- a/src/Components/LoginContainerFunction.js
+++ b/src/Components/LoginContainerFunction.js
@@ -352,14 +352,16 @@ export const GoogleLoginButton = styled(Button)`
box-shadow : 0 0 0 1px #4285f4 !important;
color : #666 !important;
font-weight : bolder !important;
+ font-size : 12px !important;
+ text-transform: none !important;
+ width: 40%;
- .MuiButton-root {
+ ${'' /* .MuiButton-root {
min-width : 88px;
- font-size : 10px;
- }
+ } */}
.google-logo {
- max-height : 24px ;
+ max-height : 18px ;
padding-right : 5px;
}
diff --git a/src/Components/MenuBar.js b/src/Components/MenuBar.js
index 35b3fecf5f4dc01dc16710e040a015f7be07dc1d..ebcea91971f2d5fe4bf09719e33faaffb52809a9 100644
--- a/src/Components/MenuBar.js
+++ b/src/Components/MenuBar.js
@@ -137,6 +137,7 @@ export default function MenuBar(props){
<ButtonStyled>Lojinha</ButtonStyled>
</Link>*/}
<ButtonStyled onClick={props.openSearchBar} ><IconSearchStyled />Buscar</ButtonStyled>
+
</Left>
<Right>
{
diff --git a/src/Components/ResourceList.js b/src/Components/ResourceList.js
index 08a13d469c617179ce26f739450741ccc9358eb4..0121232b121521c43bfcec37aa5a45c86911abfd 100644
--- a/src/Components/ResourceList.js
+++ b/src/Components/ResourceList.js
@@ -37,6 +37,8 @@ function Alert(props) {
export default function ResourceList(props) {
+ console.log(props);
+
const [selected, setSelected] = useState(Array.apply(
null, {length: props.resources.length}).map(i => false));
const [selectable, setSelectable] = useState(false);
@@ -129,6 +131,7 @@ export default function ResourceList(props) {
likeCount={r.likeCount}
liked={r.liked}
thumbnail={r.thumbnail}
+ href={"/recurso/" + r.id}
/>
{selectable ?
(<SelectButton
diff --git a/src/Components/SearchExpansionPanel/SearchEPCompCurriculum.js b/src/Components/SearchExpansionPanel/SearchEPCompCurriculum.js
index d55d6e63579e5b74ff3e57e09469478edcc654b8..fef89eecf3a754b14304a4ad97a9c0ae29a49eb4 100644
--- a/src/Components/SearchExpansionPanel/SearchEPCompCurriculum.js
+++ b/src/Components/SearchExpansionPanel/SearchEPCompCurriculum.js
@@ -17,7 +17,7 @@ const useStyles = makeStyles(theme => ({
}
}));
-export default function SearchEPCompCurriculum() {
+export default function SearchEPCompCurriculum(props) {
const classes = useStyles();
const [checked, setChecked] = React.useState([0]);
@@ -31,7 +31,16 @@ export default function SearchEPCompCurriculum() {
newChecked.splice(currentIndex, 1);
}
+ let filterString = "";
+
setChecked(newChecked);
+ for(let i = 0; i < newChecked.length; i++){
+ if(newChecked[i] != 0){
+ filterString = filterString + `&subjects[]=${newChecked[i]}`
+ console.log(filterString)
+ }
+ }
+ props.onChange("LearningObject", filterString)
};
const filtrosComponente = [
{ exemplo: "Arte", value: "3" },
diff --git a/src/Components/SearchExpansionPanel/SearchEPIdiomas.js b/src/Components/SearchExpansionPanel/SearchEPIdiomas.js
index a9426aec66f0c41fca8c30a99cab47f81591dd4e..73d04d57a93a57983d820d3a48ac5cc21dff8d13 100644
--- a/src/Components/SearchExpansionPanel/SearchEPIdiomas.js
+++ b/src/Components/SearchExpansionPanel/SearchEPIdiomas.js
@@ -17,7 +17,7 @@ const useStyles = makeStyles(theme => ({
}
}));
-export default function SearchEPIdiomas() {
+export default function SearchEPIdiomas(props) {
const classes = useStyles();
const [checked, setChecked] = React.useState([0]);
@@ -32,6 +32,15 @@ export default function SearchEPIdiomas() {
}
setChecked(newChecked);
+ let filterString = "";
+
+ for(let i = 0; i < newChecked.length; i++){
+ if(newChecked[i] != 0){
+ filterString = filterString + `&languages[]=${newChecked[i]}`
+ console.log(filterString)
+ }
+ }
+ props.onChange("LearningObject", filterString)
};
const filtrosIdiomas = [
{ value: "5", exemplo: "Alemão" },
diff --git a/src/Components/SearchExpansionPanel/SearchEPTiposRec.js b/src/Components/SearchExpansionPanel/SearchEPTiposRec.js
index 0d36afff0599d418b38b9c03592afb0615046352..e1a3f999fe4781aa6546fb6d3961a3400af25fc3 100644
--- a/src/Components/SearchExpansionPanel/SearchEPTiposRec.js
+++ b/src/Components/SearchExpansionPanel/SearchEPTiposRec.js
@@ -17,7 +17,7 @@ const useStyles = makeStyles(theme => ({
}
}));
-export default function SearchEPTiposRec() {
+export default function SearchEPTiposRec(props) {
const classes = useStyles();
const [checked, setChecked] = React.useState([0]);
@@ -31,7 +31,16 @@ export default function SearchEPTiposRec() {
newChecked.splice(currentIndex, 1);
}
+ let filterString = "";
+
setChecked(newChecked);
+ for(let i = 0; i < newChecked.length; i++){
+ if(newChecked[i] != 0){
+ filterString = filterString + `&object_types[]=${newChecked[i]}`
+ console.log(filterString)
+ }
+ }
+ props.onChange("LearningObject", filterString)
};
const filtrosTipos = [
{ value: "5", exemplo: "Animação" },
diff --git a/src/Components/SearchExpansionPanel/SearchExpansionPanel.js b/src/Components/SearchExpansionPanel/SearchExpansionPanel.js
index 32c9b72eb11b94bbea425e674aff8168e9718c0b..31ce7434630c75d5f12fb8b9a2044f6eb7697281 100644
--- a/src/Components/SearchExpansionPanel/SearchExpansionPanel.js
+++ b/src/Components/SearchExpansionPanel/SearchExpansionPanel.js
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
import { withStyles } from "@material-ui/core/styles";
import MuiExpansionPanel from "@material-ui/core/ExpansionPanel";
import MuiExpansionPanelSummary from "@material-ui/core/ExpansionPanelSummary";
@@ -9,12 +9,16 @@ import SearchEPCompCurriculum from "./SearchEPCompCurriculum";
import SearchEPTiposRec from "./SearchEPTiposRec";
import SearchEPEtapasEns from "./SesrchEPEtapasEns";
import SearchEPIdiomas from "./SearchEPIdiomas";
+import { TextField } from "@material-ui/core";
+import Grid from '@material-ui/core/Grid';
+import CircularProgress from '@material-ui/core/CircularProgress';
+
const ExpansionPanel = withStyles({
root: {
border: "1px solid rgba(0, 0, 0, .125)",
boxShadow: "none",
- '.MuiButtonBase-root' : {
- paddingInline:"0 !important"
+ '.MuiButtonBase-root': {
+ paddingInline: "0 !important"
},
"&:not(:last-child)": {
borderBottom: 0
@@ -35,7 +39,7 @@ const ExpansionPanelSummary = withStyles({
marginBottom: -1,
minHeight: 56,
backgroundColor: "#fff",
-
+
"&$expanded": {
minHeight: 56,
@@ -62,7 +66,19 @@ const ExpansionPanelDetails = withStyles(theme => ({
}
}))(MuiExpansionPanelDetails);
-export default function SearchExpansionPanel() {
+export default function SearchExpansionPanel(props) {
+ const [keyWords, setKeyWords] = useState("");
+
+ const onKeyPressed = (e) => {
+ const filterString = "&tags[]=" + keyWords
+ if (e.key === "Enter")
+ props.onChange("LearningObject", filterString)
+ }
+
+ const HandleChangeText = (e) => {
+ setKeyWords(e.target.value);
+ }
+
return (
<div>
<link
@@ -75,21 +91,35 @@ export default function SearchExpansionPanel() {
aria-controls="panel1d-content"
id="panel1d-header"
>
- <Typography
- style={{
- fontSize: "18px",
- textTransform: "uppercase",
- fontWeight: "500"
- }}
+ <Grid
+ container
+ direction="row"
+ justify="space-between"
>
- Filtros
- </Typography>
+ <Grid item>
+ <Typography
+ style={{
+ fontSize: "18px",
+ textTransform: "uppercase",
+ fontWeight: "500"
+ }}
+ >
+ Filtros
+ </Typography>
+ </Grid>
+ <Grid item>
+ {
+ props.onFiltering ? <CircularProgress size={24} color="secondary" /> : null
+ }
+ </Grid>
+ </Grid>
</ExpansionPanelSummary>
</ExpansionPanel>
+
<ExpansionPanel square>
<ExpansionPanelSummary
- expandIcon ={<ExpandMoreIcon/>}
-
+ expandIcon={<ExpandMoreIcon />}
+
aria-controls="panel2d-content"
id="panel2d-header"
>
@@ -97,10 +127,11 @@ export default function SearchExpansionPanel() {
</ExpansionPanelSummary>
<ExpansionPanelDetails>
<Typography>
- <SearchEPCompCurriculum />
+ <SearchEPCompCurriculum onChange={props.onChange} />
</Typography>
</ExpansionPanelDetails>
</ExpansionPanel>
+
<ExpansionPanel square>
<ExpansionPanelSummary
expandIcon={<ExpandMoreIcon />}
@@ -110,9 +141,10 @@ export default function SearchExpansionPanel() {
<Typography>Tipos de Recurso</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
- <SearchEPTiposRec />
+ <SearchEPTiposRec onChange={props.onChange} />
</ExpansionPanelDetails>
</ExpansionPanel>
+
<ExpansionPanel square>
<ExpansionPanelSummary
aria-controls="panel4d-content"
@@ -122,9 +154,10 @@ export default function SearchExpansionPanel() {
<Typography>Etapas de Ensino</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
- <SearchEPEtapasEns />
+ <SearchEPEtapasEns onChange={props.onChange} />
</ExpansionPanelDetails>
</ExpansionPanel>
+
<ExpansionPanel square>
<ExpansionPanelSummary
aria-controls="panel5d-content"
@@ -134,9 +167,10 @@ export default function SearchExpansionPanel() {
<Typography>Idiomas</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
- <SearchEPIdiomas />
+ <SearchEPIdiomas onChange={props.onChange} />
</ExpansionPanelDetails>
</ExpansionPanel>
+
<ExpansionPanel square>
<ExpansionPanelSummary
aria-controls="panel6d-content"
@@ -146,12 +180,14 @@ export default function SearchExpansionPanel() {
<Typography>Palavra-Chave</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
- <Typography>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
- malesuada lacus ex, sit amet blandit leo lobortis eget. Lorem ipsum
- dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada
- lacus ex, sit amet blandit leo lobortis eget.
- </Typography>
+ <TextField
+ label="Palavra chave + ENTER"
+ id="outlined-margin-dense"
+ margin="dense"
+ variant="outlined"
+ onChange={e => HandleChangeText(e)}
+ onKeyDown={e => onKeyPressed(e)}
+ />
</ExpansionPanelDetails>
</ExpansionPanel>
</div>
diff --git a/src/Components/SearchExpansionPanel/SesrchEPEtapasEns.js b/src/Components/SearchExpansionPanel/SesrchEPEtapasEns.js
index b0241d3221d414adcde34ed7fb60afa2467ea421..6588853d35607337a1ef394266eab3fcfe3293eb 100644
--- a/src/Components/SearchExpansionPanel/SesrchEPEtapasEns.js
+++ b/src/Components/SearchExpansionPanel/SesrchEPEtapasEns.js
@@ -17,7 +17,7 @@ const useStyles = makeStyles(theme => ({
}
}));
-export default function SearchEPEtapasEns() {
+export default function SearchEPEtapasEns(props) {
const classes = useStyles();
const [checked, setChecked] = React.useState([0]);
@@ -32,6 +32,17 @@ export default function SearchEPEtapasEns() {
}
setChecked(newChecked);
+ let filterString = "";
+
+ for(let i = 0; i < newChecked.length; i++){
+ if(newChecked[i] != 0){
+ filterString = filterString + `&educational_stages[]=${newChecked[i]}`
+ }
+ }
+ if(filterString)
+ props.onChange("LearningObject", filterString)
+ else
+ props.onChange("LearningObject", "")
};
const filtrosEtapas = [
{ value: "1", exemplo: "Educação Infantil" },
diff --git a/src/Pages/CollectionPage.js b/src/Pages/CollectionPage.js
index f7b3a32e0016fde9b1370e7f5d5024549a7b4ed5..37cd3daf5a35133134e97b90b7385f8439c7742d 100644
--- a/src/Pages/CollectionPage.js
+++ b/src/Pages/CollectionPage.js
@@ -15,7 +15,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, { useRef, useState, useEffect } from 'react';
+import React, { useRef, useState, useEffect, useContext } from 'react';
import axios from 'axios';
import { Grid } from '@material-ui/core';
import CollectionAuthor from '../Components/CollectionAuthor.js';
@@ -25,17 +25,26 @@ import ResourceList from '../Components/ResourceList.js';
import CollectionCommentSection from '../Components/CollectionCommentSection.js';
import { apiUrl, apiDomain } from '../env';
import CircularProgress from '@material-ui/core/CircularProgress';
+import GetAppIcon from '@material-ui/icons/GetApp';
+import styled from 'styled-components';
+import DowloadButton from '../Components/CollectionDowloadButton.js';
+import Breadcrumbs from "@material-ui/core/Breadcrumbs";
+import { Link } from 'react-router-dom';
+import FollowCollectionButton from '../Components/FollowCollectionButton';
+import { Store } from '../Store.js'
export default function CollectionPage(props) {
+ const { state } = useContext(Store);
+
const [collection, setCollection] = useState({
- name: '',
- id: 0,
- });
+ name: '',
+ id: 0,
+ });
const collection_id = props.match.params.id;
const comment_ref = useRef(null);
- useEffect(()=>{
- axios.get(apiUrl+'/collections/'+collection_id)
+ useEffect(() => {
+ axios.get(apiUrl + '/collections/' + collection_id)
.then(res => {
setCollection(Object.assign({}, res.data));
});
@@ -46,32 +55,61 @@ export default function CollectionPage(props) {
}
return (
- <Grid container
- direction="row"
- justify="space-around"
- alignItems="center"
- style={mainContainerStyle}>
-
- <Grid item xs={10} md={3}>
- <CollectionAuthor
- author_id={collection.owner ? collection.owner.id : 0}
- name={collection.owner ? collection.owner.name : ""}
- imgsrc={collection.owner ? apiDomain+collection.owner.avatar : ''}/>
- </Grid>
-
- <VerticalRuler width={1} height={300} color="rgb(238, 238, 238)"/>
-
- <Grid item xs={10} md={6}>
- <CollectionDescription
- scrollToComments={handleScrollToComments}
- title={collection.name ? collection.name : ""}
- collection_id={collection.id ? collection.id : 0}/>
- </Grid>
-
- <Grid container item xs={12} direction="row" justify="center" alignItems="center" style={{backgroundColor: '#f4f4f4'}}>
- <Grid item xs={10}>
+ <>
+ <BreadCrumbsDiv>
+ <StyledBreadCrumbs>
+ <Link to="/">Página Inicial</Link>
+ <span>Coleções</span>
+ </StyledBreadCrumbs>
+ </BreadCrumbsDiv>
+ <Grid
+ container
+ direction="row"
+ justify="space-around"
+ alignItems="center"
+ spacing={4}
+ >
+ <Grid
+ item
+ md={3}
+ >
+ <CollectionAuthor
+ author_id={collection.owner ? collection.owner.id : 0}
+ name={collection.owner ? collection.owner.name : ""}
+ imgsrc={collection.owner ? apiDomain + collection.owner.avatar : ''} />
+ </Grid>
+
+
+ <Grid
+ item
+ md={5}
+ >
+ <CollectionDescription
+ scrollToComments={handleScrollToComments}
+ title={collection.name ? collection.name : ""}
+ collection_id={collection.id ? collection.id : 0} />
+ </Grid>
+
+ <Grid
+ item
+ md={3}
+ >
+ <DowloadButton
+ id={collection.id ? collection.id : 0}
+ />
+ <div style={{height : 12}}></div>
+ <FollowCollectionButton
+ user_id={state.currentUser.id}
+ collection_id={collection_id} />
+ </Grid>
+ </Grid>
+
+ <VerticalRuler width={1} height={100} color="rgb(238, 238, 238)" />
+
+ <Grid container item xs={12} direction="row" justify="center" alignItems="center" style={{ backgroundColor: '#f4f4f4' }}>
+ <Grid item xs={10} alignItems="center" justify="center">
<ResourceList resources={
- collection.collection_items ?
+ collection.collection_items ?
collection.collection_items.map(i => {
return {
type: i.collectionable.object_type,
@@ -83,22 +121,98 @@ export default function CollectionPage(props) {
liked: i.collectionable.liked,
avatar: i.collectionable.publisher.avatar,
thumbnail: i.collectionable.thumbnail,
- tags: i.collectionable.tags.map(t => t.name),
+ tags: i.collectionable.tags.map(t => t),
id: i.collectionable.id,
}
})
: []
- }/>
-
+ } />
+
</Grid>
- <Grid container item xs={12} style={{marginTop: 40}} ref={comment_ref}>
- <CollectionCommentSection id={collection_id}/>
+ <Grid container item xs={12} style={{ marginTop: 40 }} ref={comment_ref}>
+ <CollectionCommentSection id={collection_id} />
</Grid>
</Grid>
- </Grid>
+ </>
+
+
+ // <Grid container
+ // direction="row"
+ // justify="space-around"
+ // alignItems="center"
+ // style={mainContainerStyle}>
+
+ // <Grid item xs={10} md={3}>
+ // <CollectionAuthor
+ // author_id={collection.owner ? collection.owner.id : 0}
+ // name={collection.owner ? collection.owner.name : ""}
+ // imgsrc={collection.owner ? apiDomain+collection.owner.avatar : ''}/>
+ // </Grid>
+
+ // <VerticalRuler width={1} height={300} color="rgb(238, 238, 238)"/>
+
+ // <Grid item xs={10} md={6}>
+ // <CollectionDescription
+ // scrollToComments={handleScrollToComments}
+ // title={collection.name ? collection.name : ""}
+ // collection_id={collection.id ? collection.id : 0}/>
+ // </Grid>
+
+ // <Grid container item xs={12} direction="row" justify="center" alignItems="center" style={{backgroundColor: '#f4f4f4'}}>
+ // <Grid item xs={10}>
+ // <ResourceList resources={
+ // collection.collection_items ?
+ // collection.collection_items.map(i => {
+ // return {
+ // type: i.collectionable.object_type,
+ // author: i.collectionable.author,
+ // published: i.collectionable.published_at,
+ // title: i.collectionable.name,
+ // rating: i.collectionable.review_average,
+ // likeCount: i.collectionable.likes_count,
+ // liked: i.collectionable.liked,
+ // avatar: i.collectionable.publisher.avatar,
+ // thumbnail: i.collectionable.thumbnail,
+ // tags: i.collectionable.tags.map(t => t.name),
+ // id: i.collectionable.id,
+ // }
+ // })
+ // : []
+ // }/>
+
+ // </Grid>
+ // <Grid container item xs={12} style={{marginTop: 40}} ref={comment_ref}>
+ // <CollectionCommentSection id={collection_id}/>
+ // </Grid>
+ // </Grid>
+ // </Grid>
);
}
const mainContainerStyle = {
marginTop: '5%',
}
+
+const StyledBreadCrumbs = styled(Breadcrumbs)`
+ display: flex;
+ justify-content: flex-start;
+ max-width: 1170px;
+ span {
+ color: #a5a5a5;
+ }
+ a {
+ color: #00bcd4;
+ text-decoration: none;
+ }
+`;
+
+const BreadCrumbsDiv = styled.div`
+ padding: 10px;
+ display: flex;
+`;
+
+const TopInfos = styled(Grid)`
+ marginTop: 0;
+ marginLeft: 20;
+`
+
diff --git a/src/Pages/Search.js b/src/Pages/Search.js
index 288d6d6ac9125aff5f0b4a8ad610ef046ae900a4..1ee9749f3c127ac4273ad0c51c5b998c36f9e62c 100644
--- a/src/Pages/Search.js
+++ b/src/Pages/Search.js
@@ -18,11 +18,11 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>
import React, { useEffect, useState, useContext } from "react";
import axios from "axios";
-import {apiDomain} from '../env';
+import { apiDomain } from '../env';
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'
@@ -38,50 +38,68 @@ import SearchExpansionPanel from "../Components/SearchExpansionPanel/SearchExpan
import ResourceCardFunction from "../Components/ResourceCardFunction";
import CollectionCardFunction from "../Components/CollectionCardFunction";
import ContactCard from "../Components/ContactCard";
+import CircularProgress from '@material-ui/core/CircularProgress';
+
+let order = "review_average";
+let currFilter = "";
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(6);
- const [order] = useState("score");
+ 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" },
- { label: "Mais Relevante" },
- { label: "Mais Baixados" },
- { label: "Mais Favoritados" },
- { label: "Mais Recentes" },
- { label: "Ordem Alfabética" },
+ { 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);
- console.log(option);
- console.log(state.search.class);
- const collectStuff = (tipoBusca) => {
- console.log(tipoBusca);
+ const collectStuff = (tipoBusca, filtro) => {
+ currFilter = filtro;
+ if (filtro)
+ setIsFiltering(true);
axios
.get(
- `${apiUrl}/search?page=${page}&results_per_page=${resultsPerPage}&order=${order}&query=${state.search.query}&search_class=${tipoBusca}`
+ `${apiUrl}/search?page=${page}&results_per_page=${resultsPerPage}&order=${order}&query=${state.search.query}${currFilter ? currFilter : ""}&search_class=${tipoBusca}`
)
.then((res) => {
if (tipoBusca === "LearningObject") setResultsResource(res.data);
else if (tipoBusca === "Collection") setResultsCollection(res.data);
else if (tipoBusca === "User") setResultsUser(res.data);
setOptionResult(tipoBusca);
- console.log(res.data);
- console.log(tipoBusca);
+ dispatch({
+ type: "SAVE_SEARCH",
+ newSearch: {
+ query: state.search.query,
+ class: tipoBusca,
+ },
+ });
+ console.log(res);
+ setTotalResults(res.headers["x-total-count"]);
+ setIsLoading(false);
+ setIsFiltering(false);
+ setLoadingMoreData(false);
});
};
@@ -169,21 +187,16 @@ export default function Search(props) {
<span style={{ alignSelf: "center", marginRight: 10 }}>
MOSTRAR:
</span>
- <Select
- style={{ backgroundColor: "transparent", border: "none" }}
- value={option}
+ <Dropdown
+ options={options}
+ value={optionResult}
onChange={(e) => {
- console.log(e.currentTarget.value);
- setOption(e.currentTarget.value);
- collectStuff(e.currentTarget.value);
+ setIsLoading(true);
+ setOption(e.value);
+ collectStuff(e.value, "");
}}
- >
- {options.map((item) => (
- <option key={item.value} value={item.value}>
- {item.label}
- </option>
- ))}
- </Select>
+ placeholder="Select an type"
+ />
</div>
</Grid>
<Grid
@@ -195,187 +208,221 @@ export default function Search(props) {
justifyContent: "center",
}}
>
- <div>Número</div>
+ <div>
+ Resultados encontrados: {totalResults}
+ </div>
</Grid>
- <Grid
- item
- xs={4}
- style={{
- display: "flex",
- flexDirection: "column",
- justifyContent: "center",
- paddingRight: 20,
- }}
- >
- <div
- style={{
- display: "flex",
- flexDirection: "row",
- justifyContent: "end",
- }}
- >
- <span
+ {
+ optionResult === "User" ? null :
+ <Grid
+ item
+ xs={4}
style={{
- textAlign: "right",
- alignSelf: "center",
- marginRight: 10,
+ display: "flex",
+ flexDirection: "column",
+ justifyContent: "center",
+ paddingRight: 20,
}}
>
- ORDENAR POR:
+ <div
+ style={{
+ display: "flex",
+ flexDirection: "row",
+ justifyContent: "end",
+ }}
+ >
+ <span
+ style={{
+ textAlign: "right",
+ alignSelf: "center",
+ marginRight: 10,
+ }}
+ >
+ ORDENAR POR:
</span>
- <Dropdown
- options={ordenar}
- onChange={() => {
- collectStuff(ordenar.label);
- }}
- placeholder="Select an order "
- />
- </div>
- </Grid>
+ <Dropdown
+ options={ordenar}
+ value={currOrder}
+ onChange={(e) => {
+ order = e.value;
+ setCurrOrder(e.label)
+ collectStuff(optionResult, currFilter);
+ }}
+ placeholder="Select an order "
+ />
+ </div>
+ </Grid>
+ }
</Grid>
</HeaderFilters>
- {optionResult === "Collection" && (
- <GridBuscaCollection container spacing={2}>
- <Grid item md={12} xs={12}>
- <Grid container spacing={2}>
- {resultsCollection.map((card) => (
- <Grid item md={4} xs={6} key={card.id}>
- <CollectionCardFunction
- name={card.name}
- rating={card.score}
- author={card.owner.name}
- description={card.description}
- thumbnails={card.items_thumbnails}
- avatar={card.owner.avatar}
- likeCount={card.likes_count}
-
- id={card.id}
- />
+ {
+ isloading ? <LoadingSpinner text="Carregando..." /> :
+ optionResult === "Collection" ? (
+ <GridBuscaCollection container spacing={2}>
+ <Grid item md={12} xs={12}>
+ <Grid container spacing={2}>
+ {resultsCollection.map((card) => (
+ <Grid item md={4} xs={6} key={card.id}>
+ <CollectionCardFunction
+ name={card.name}
+ rating={card.score}
+ id={card.id}
+ author={card.owner.name}
+ description={card.description}
+ thumbnails={card.items_thumbnails}
+ avatar={card.owner.avatar}
+ />
+ </Grid>
+ ))}
</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={() => setResultsPerPage(resultsPerPage + 12)}
- >
- Carregar mais 12
- </button>
- </div>
- </Grid>
- </GridBuscaCollection>
- )}
- {optionResult === "LearningObject" && (
- <GridBuscaResource container spacing={2}>
- <Grid item md={3} xs={12}>
- <Paper elevation={4} square>
- <SearchExpansionPanel />
- </Paper>
- </Grid>
- <Grid item md={9} xs={12}>
- <Grid container spacing={2}>
- {resultsResource.map((card) => (
- <Grid item md={4} xs={6} key={card.id}>
- <ResourceCardFunction
- name={card.name}
- rating={card.score}
- type={card.object_type}
- description={card.description}
- thumbnail={card.thumbnail}
- author={card.author}
- avatar={card.publisher.avatar}
- />
+ <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 md={3} xs={12}>
+ <Paper elevation={4} square>
+ <SearchExpansionPanel onChange={collectStuff} onFiltering={isFiltering} />
+ </Paper>
</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={() => setResultsPerPage(resultsPerPage + 12)}
- >
- Carregar mais 12
- </button>
- </div>
- </Grid>
- </GridBuscaResource>
- )}
- {optionResult === "User" && (
- <GridBuscaUser container spacing={2}>
- <Grid item md={12} xs={12}>
- <Grid container spacing={2}>
- {resultsUser.map((card) => (
- <Grid item md={4} xs={6} 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 item md={9} xs={12}>
+ <Grid container spacing={2}>
+ {resultsResource.map((card) => (
+ <Grid item md={4} xs={6} 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>
- ))}
- </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={() => setResultsPerPage(resultsPerPage + 6)}
- >
- Carregar mais 6
- </button>
- </div>
- </Grid>
- </GridBuscaUser>
- )}
+ </GridBuscaResource>
+ ) :
+ optionResult === "User" && (
+ <GridBuscaUser container spacing={2}>
+ <Grid item md={12} xs={12}>
+ <Grid container spacing={2}>
+ {resultsUser.map((card) => (
+ <Grid item md={4} xs={6} 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>
+ )
+ }
</Principal>
</div>
);
@@ -383,7 +430,7 @@ export default function Search(props) {
const GridBuscaCollection = styled(Grid)`
color: #666;
- background-color: green;
+ ${'' /* background-color: green; */}
h4 {
padding: 0 15px;
@@ -394,7 +441,7 @@ const GridBuscaCollection = styled(Grid)`
`;
const GridBuscaResource = styled(Grid)`
color: #666;
- background-color: red;
+ ${'' /* background-color: red; */}
h4 {
padding: 0 15px;
@@ -405,7 +452,7 @@ const GridBuscaResource = styled(Grid)`
`;
const GridBuscaUser = styled(Grid)`
color: #666;
- background-color: blue;
+ ${'' /* background-color: blue; */}
h4 {
padding: 0 15px;