AreasSubPagesFunction.js 17.30 KiB
/*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, { useState, useEffect } from "react";
import "./carousel.css";
import { Col, Row, Container, Hidden, Visible } from "react-grid-system";
import styled from 'styled-components'
import MaterialCard from "./MaterialCard";
import "react-responsive-carousel/lib/styles/carousel.min.css";
import { Carousel } from "react-responsive-carousel";
import ResourceCardFunction from "./ResourceCardFunction.js";
import CollectionCardFunction from "./CollectionCardFunction.js";
import colecoes_obj from './FormationMaterialsResources/formationMaterials';
import ExpandedMaterial from './ExpandedMaterials';
import Dropdown from "react-dropdown";
import { getRequest } from './HelperFunctions/getAxiosConfig.js'
import Grid from '@material-ui/core/Grid';
import { Link } from 'react-router-dom'
import { CircularProgress } from "@material-ui/core";
//Image Import
import ImportImages from "ImportImages.js"
const recursos = ImportImages('recursos');
const materiais = ImportImages('materiais');
const colecoes = ImportImages('colecoes');
const ColecaoVazia = ImportImages('ColecaoVazia');
const RecursoVazio = ImportImages('RecursoVazio');
function objectsPerPage() {
var pageWidth = window.innerWidth
if (pageWidth >= 1200) {
return 3
}
else {
if (pageWidth > 766) {
return 2
}
else {
return 1
}
}
}
function ReqResources(props) {
const [rows, setRows] = useState([])
const [isLoading, setIsLoading] = useState(false)
function onSuccessfulGet(data) {
var aux = []
var resources_per_page = objectsPerPage()
for (let i = 0; i < 12 / resources_per_page; i++) {
aux.push(data.slice(i * resources_per_page, resources_per_page * (i + 1)))
}
setRows(aux)
setIsLoading(false) }
useEffect(() => {
setIsLoading(true)
const url = `/search?page=0&results_per_page=12&order=${props.order}&query=*&search_class=LearningObject`
getRequest(url, (data) => onSuccessfulGet(data), (error) => { console.log(error) })
}, [props.order])
return (
isLoading ?
<Grid container justify="center" alignItems="center" style={{ margin: "2em" }} >
<Grid item>
<CircularProgress size={24} color="#ff7f00" />
</Grid>
</Grid>
:
<Carousel showThumbs={false} infiniteLoop={true} showStatus={false}>
{
rows.length >= 1 ?
rows.map((row, index) => (
<Row style={{ paddingBottom: "5px", margin: '0 auto', width: "80%", justifyContent: "center", minHeight: "50px" }} key={(index + 1)}>
{row.map((card) => (
<div style={{ marginLeft: 10, display: 'flex' }} key={card.id * (index + 1)}>
<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.publisher.name}
tags={card.tags}
href={"/recurso/" + card.id}
downloadableLink={card.default_attachment_location}
/>
</div>
))}
</Row>
))
:
<Grid container justify="center" alignItems="center">
<Grid item>
<img src={RecursoVazio} alt="Não há recursos" />
</Grid>
</Grid>
}
</Carousel>
)
}
function ReqCollections(props) {
const [rows, setRows] = useState([])
const [isLoading, setIsLoading] = useState(false)
function onSuccessfulGet(data) {
var aux = []
var collections_per_page = objectsPerPage()
for (let i = 0; i < 12 / collections_per_page; i++) {
aux.push(data.slice(i * collections_per_page, collections_per_page * (i + 1)))
}
setIsLoading(false)
setRows(aux)
}
useEffect(() => { setIsLoading(true)
const url = `/search?page=0&results_per_page=12&order=${props.order}&query=*&search_class=Collection`
getRequest(url, (data) => onSuccessfulGet(data), (error) => { console.log(error) })
}, [props.order])
return (
isLoading ?
<Grid container justify="center" alignItems="center" style={{ marginTop: "2em" }}>
<Grid item>
<CircularProgress size={24} color="#673ab7" />
</Grid>
</Grid>
:
rows.length >= 1 ?
<Carousel showThumbs={false} infiniteLoop={true} showStatus={false}>
{
rows.map((row, index) => (
<Row style={{ paddingBottom: "5px", margin: '0 auto', width: "80%", justifyContent: "center", minHeight: "50px" }} key={(index + 1)}>
{row.map((card) => (
<div style={{ marginLeft: 10, display: 'flex' }} key={card.id * (index + 1)}>
<CollectionCardFunction
name={card.name}
tags={card.tags}
rating={card.score}
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 ? card.owner.id : ""}
/>
</div>
))}
</Row>
))}
</Carousel>
:
<Grid container justify="center" alignItems="center">
<Grid item>
<img src={ColecaoVazia} alt="Não há coleções" />
</Grid>
</Grid>
)
}
function TabRecurso() {
const text = "Nesta área, você tem acesso a Recursos Educacionais Digitais, isto é, a vídeos, animações e a outros recursos destinados à educação. São Recursos de portais parceiros do MEC e de professores que, como você, atuam na Educação Básica!"
const [currOrder, setCurrOrder] = useState("Mais Relevante");
const [currValue, setCurrValue] = useState("score");
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" },
]);
return (
<React.Fragment>
<div style={{ backgroundColor: "#ff7f00", position: "relative" }}>
<StyledTab container>
<Grid item md={3} xs={12}>
<img
src={recursos} alt="aba recursos"
style={{ float: "left", marginRight: 20, marginBottom: 20, marginLeft: window.innerWidth >= 825 ? "25%" : "0px" }}
/>
</Grid>
{
window.innerWidth <= 501 &&
<h4>
Recursos Educacionais Digitais
</h4>
}
<Grid item md={6} xs={12}>
<p>
{text}
</p>
</Grid>
{
window.innerWidth <= 501 &&
<div style={{ display: "flex", justifyContent: "center" }}>
<Link to={`/busca?query=*&search_class=LearningObject`} className="button-ver">VER RECURSOS</Link>
</div>
}
</StyledTab>
</div>
{
window.innerWidth > 501 &&
<Container style={{ padding: "20px" }}>
<Grid
container
direction="row"
justify="space-between"
alignItems="center"
style={{
paddingBottom: "5px",
borderBottom: "1px solid #ff7f00",
color: "#ff7f00",
}}
>
<Grid item>
<p
style={{ margin: 0, padding: 0 }}
>
{
`Recursos ${currOrder}`
}
</p>
</Grid>
<Grid item>
<Grid container direction="row" alignItems="center" spacing={1}>
<Grid item>
<p style={{ margin: 0, padding: 0 }}>
Ordenar por:
</p>
</Grid>
<Grid item>
<Dropdown options={ordenar} value={currOrder} onChange={(e) => {
setCurrOrder(e.label)
setCurrValue(e.value)
}}
placeholder="Selecione uma opção"
/>
</Grid>
</Grid>
</Grid>
</Grid>
<Hidden sm xs>
<ReqResources order={currValue} />
</Hidden>
<Visible sm xs>
<ReqResources order={currValue} /> </Visible>
</Container>
}
</React.Fragment>
)
}
function TabColecoes() {
const text = "Nesta área, você tem acesso às coleções criadas e organizadas pelos usuários da plataforma. É mais uma possibilidade de buscar recursos educacionais para sua aula!"
const [currOrder, setCurrOrder] = useState("Mais Relevante");
const [currValue, setCurrValue] = useState("score");
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" },
]);
return (
<React.Fragment>
<div style={{ backgroundColor: "#673ab7", position: "relative" }}>
<StyledTab container>
<Grid item md={3} xs={12}>
<img
src={colecoes}
alt="aba recursos"
style={{ float: "left", marginRight: 20, marginBottom: 20, marginLeft: window.innerWidth >= 825 ? "25%" : "0px" }}
/>
</Grid>
{
window.innerWidth <= 501 &&
<h4>
Coleções dos Usuários
</h4>
}
<Grid item md={6} xs={12}>
<p>
{text}
</p>
</Grid>
{
window.innerWidth <= 501 &&
<div style={{ display: "flex", justifyContent: "center" }}>
<Link to={`/busca?query=*&search_class=Collection`} className="button-ver">VER COLEÇÕES</Link>
</div>
}
</StyledTab>
</div>
{
window.innerWidth > 501 &&
<Container style={{ padding: "20px" }}>
<Grid
container
direction="row"
justify="space-between"
alignItems="center"
style={{
paddingBottom: "5px",
borderBottom: "1px solid #673ab7",
color: "#673ab7",
}}
>
<Grid item>
<p
style={{ margin: 0, padding: 0 }}
>
{
`Coleções ${currOrder}` }
</p>
</Grid>
<Grid item>
<Grid container direction="row" alignItems="center" spacing={1}>
<Grid item>
<p style={{ margin: 0, padding: 0 }}>
Ordenar por:
</p>
</Grid>
<Grid item>
<Dropdown options={ordenar} value={currOrder} onChange={(e) => {
setCurrOrder(e.label)
setCurrValue(e.value)
}}
placeholder="Selecione uma opção"
/>
</Grid>
</Grid>
</Grid>
</Grid>
<ReqCollections order={currValue} />
</Container>
}
</React.Fragment>
)
}
function TabMateriais() {
const text = "Nesta área, você acessa livremente materiais completos de formação, como cursos já oferecidos pelo MEC e seus parceiros. São conteúdos elaborados por equipes multidisciplinares e de autoria de pesquisadores e educadores renomados nas áreas."
const materials = colecoes_obj()
const [currMaterial, setCurrMaterial] = useState({
open: false,
material: {}
})
const handleExpandMaterial = (id) => {
if (id !== currMaterial.material.id)
setCurrMaterial({
open: true,
material: { ...materials[id] }
})
else {
setCurrMaterial({
open: false,
material: {}
})
}
}
return (
<React.Fragment>
<div style={{ backgroundColor: "#e81f4f", position: "relative" }}>
<StyledTab container>
<Grid item md={3} xs={12}>
<img
src={materiais}
alt="aba recursos"
style={{ float: "left", marginRight: 20, marginBottom: 20, marginLeft: window.innerWidth >= 825 ? "25%" : "0px" }}
/>
</Grid>
{
window.innerWidth <= 501 &&
<h4>
Materiais de formação
</h4>
} <Grid item md={6} xs={12}>
<p>
{text}
</p>
</Grid>
{
window.innerWidth <= 501 &&
<div style={{ display: "flex", justifyContent: "center" }}>
<Link to={`/material-formacao`} className="button-ver">VER MATERIAIS</Link>
</div>
}
</StyledTab>
</div>
{
window.innerWidth > 501 &&
<Container style={{ padding: "20px" }}>
<p
style={{
paddingBottom: "5px",
borderBottom: "1px solid #e81f4f",
color: "#e81f4f",
}}
>
Materiais mais recentes{" "}
</p>
<Carousel
style={{ padding: "20px" }}
showThumbs={false}
infiniteLoop={true}
showStatus={false}
>
<Row>
{
materials.map((material, index) => {
return (
<Col md={3} key={index}>
<MaterialCard
name={material.name}
thumb={material.img}
score={material.score}
modules={material.topics}
handleExpand={handleExpandMaterial}
id={index}
/>
</Col>
)
})
}
</Row>
</Carousel>
{
currMaterial.open ?
<ExpandedMaterial material={currMaterial.material} />
:
null
}
</Container>
}
</React.Fragment >
)
}
export default function AreasSubPages(props) {
const areaRender = () => {
switch (props.banner) {
case "Recursos":
return <TabRecurso />
case "Materiais":
return <TabMateriais /> case "Colecoes":
return <TabColecoes />
default:
return null
}
}
return (
<React.Fragment>
{
window.innerWidth <= 501 ? (
<React.Fragment>
<TabRecurso />
<TabMateriais />
<TabColecoes />
</React.Fragment>
) : (
areaRender()
)
}
</React.Fragment>
)
}
const StyledTab = styled(Grid)`
display : flex;
justify-content : center;
@media screen and (min-width : 502px) {
text-align : justify;
}
@media screen and (max-width : 502px) {
text-align : center;
}
color : #fff;
min-height : 190px;
padding : 20px 10px 20px 10px;
img {
float : left;
max-height : 155px;
}
.MuiGrid-grid-xs-12 {
display : flex;
justify-content : center;
}
h4 {
font-size : 18px;
margin : 10px !important;
}
p {
line-height : 1.42857143;
}
.button-ver {
font-size: 14px;
padding: 5px 10px;
border: solid 2px #fff;
border-radius: 7px;
color: #fff;
cursor: pointer;
text-decoration: none;
}
`