diff --git a/src/Components/AreasSubPagesFunction.js b/src/Components/AreasSubPagesFunction.js
index 4f215989ed8a0707c97abee43a3d602d748e84bb..347cacabaec592292a16548cbf3553ddb411d7af 100644
--- a/src/Components/AreasSubPagesFunction.js
+++ b/src/Components/AreasSubPagesFunction.js
@@ -30,11 +30,13 @@ import ResourceCardFunction from "./ResourceCardFunction.js";
import CollectionCardFunction from "./CollectionCardFunction.js";
import colecoes_obj from './FormationMaterialsResources/formationMaterials';
import ExpandedMaterial from './ExpandedMaterials';
-import {getRequest} from './HelperFunctions/getAxiosConfig.js'
+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 { Link } from 'react-router-dom'
+import { CircularProgress } from "@material-ui/core";
-function objectsPerPage () {
+function objectsPerPage() {
var pageWidth = window.innerWidth
if (pageWidth >= 1200) {
return 3
@@ -49,104 +51,124 @@ function objectsPerPage () {
}
}
-function ReqResources () {
+function ReqResources(props) {
const [rows, setRows] = useState([])
+ const [isLoading, setIsLoading] = useState(false)
- function onSuccessfulGet (data) {
+ 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)))
+ aux.push(data.slice(i * resources_per_page, resources_per_page * (i + 1)))
}
setRows(aux)
+ setIsLoading(false)
}
useEffect(() => {
- const url = `/learning_objects?limit=12&sort=["published_at", "desc"]`
+ 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)})
- }, [])
+ getRequest(url, (data) => onSuccessfulGet(data), (error) => { console.log(error) })
+ }, [props.order])
return (
<Carousel showThumbs={false} infiniteLoop={true} showStatus={false}>
- {
- rows.map((row, index) => (
- <Row style={{ paddingBottom: "5px", margin: '0 auto', width: "80%", justifyContent: "center" }} 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>
- ))}
+ {
+ isLoading ? <CircularProgress size={24} color="#ff7f00" style={{ margin: "2em" }} />
+ :
+ rows.map((row, index) => (
+ <Row style={{ paddingBottom: "5px", margin: '0 auto', width: "80%", justifyContent: "center" }} 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>
+ ))}
</Carousel>
)
}
-function ReqCollections () {
+function ReqCollections(props) {
const [rows, setRows] = useState([])
+ const [isLoading, setIsLoading] = useState(false)
- function onSuccessfulGet (data) {
+ 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)))
+ aux.push(data.slice(i * collections_per_page, collections_per_page * (i + 1)))
}
+ setIsLoading(false)
setRows(aux)
}
useEffect(() => {
- const url = `/collections?limit=12&sort=["updated_at", "desc"]`
+ 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)})
- }, [])
+ getRequest(url, (data) => onSuccessfulGet(data), (error) => { console.log(error) })
+ }, [props.order])
return (
<Carousel showThumbs={false} infiniteLoop={true} showStatus={false}>
- {
- rows.map((row, index) => (
- <Row style={{ paddingBottom: "5px", margin: '0 auto', width: "80%", justifyContent: "center" }} 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.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}
- />
- </div>
- ))}
- </Row>
- ))}
+ {
+ isLoading ? <CircularProgress size={24} color="#673ab7" style={{ marginTop: "2em" }} />
+ :
+ rows.map((row, index) => (
+ <Row style={{ paddingBottom: "5px", margin: '0 auto', width: "80%", justifyContent: "center" }} 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>
)
}
-function TabRecurso () {
+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 Recentes");
+ const [currValue, setCurrValue] = useState("publicationdesc");
+ 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>
@@ -162,7 +184,7 @@ function TabRecurso () {
{
window.innerWidth <= 501 &&
<h4>
- Recursos Educacionais Digitais
+ Recursos Educacionais Digitais
</h4>
}
<Grid item md={6} xs={12}>
@@ -172,7 +194,7 @@ function TabRecurso () {
</Grid>
{
window.innerWidth <= 501 &&
- <div style={{display : "flex", justifyContent : "center"}}>
+ <div style={{ display: "flex", justifyContent: "center" }}>
<Link to={`/busca?query=&search_class=LearningObject`} className="button-ver">VER RECURSOS</Link>
</div>
}
@@ -181,20 +203,50 @@ function TabRecurso () {
{
window.innerWidth > 501 &&
<Container style={{ padding: "20px" }}>
- <p
+ <Grid
+ container
+ direction="row"
+ justify="space-between"
+ alignItems="center"
style={{
paddingBottom: "5px",
borderBottom: "1px solid #ff7f00",
color: "#ff7f00",
}}
>
- Recursos mais recentes{" "}
- </p>
+ <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 />
+ <ReqResources order={currValue} />
</Hidden>
<Visible sm xs>
- <ReqResources />
+ <ReqResources order={currValue} />
</Visible>
</Container>
}
@@ -202,8 +254,18 @@ function TabRecurso () {
)
}
-function TabColecoes () {
+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 Recentes");
+ const [currValue, setCurrValue] = useState("publicationdesc");
+ 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>
@@ -219,17 +281,17 @@ function TabColecoes () {
{
window.innerWidth <= 501 &&
<h4>
- Coleções dos Usuários
+ Coleções dos Usuários
</h4>
}
<Grid item md={6} xs={12}>
- <p>
- {text}
- </p>
+ <p>
+ {text}
+ </p>
</Grid>
{
window.innerWidth <= 501 &&
- <div style={{display : "flex", justifyContent : "center"}}>
+ <div style={{ display: "flex", justifyContent: "center" }}>
<Link to={`/busca?query=&search_class=Collection`} className="button-ver">VER COLEÇÕES</Link>
</div>
}
@@ -238,30 +300,60 @@ function TabColecoes () {
{
window.innerWidth > 501 &&
<Container style={{ padding: "20px" }}>
- <p
+ <Grid
+ container
+ direction="row"
+ justify="space-between"
+ alignItems="center"
style={{
paddingBottom: "5px",
borderBottom: "1px solid #673ab7",
color: "#673ab7",
}}
>
- Coleções mais recentes{" "}
- </p>
- <ReqCollections />
+ <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>
+ </React.Fragment>
)
}
-function TabMateriais () {
+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 : {}
+ open: false,
+ material: {}
})
const handleExpandMaterial = (id) => {
@@ -292,7 +384,7 @@ function TabMateriais () {
{
window.innerWidth <= 501 &&
<h4>
- Materiais de formação
+ Materiais de formação
</h4>
}
<Grid item md={6} xs={12}>
@@ -302,7 +394,7 @@ function TabMateriais () {
</Grid>
{
window.innerWidth <= 501 &&
- <div style={{display : "flex", justifyContent : "center"}}>
+ <div style={{ display: "flex", justifyContent: "center" }}>
<Link to={`/material-formacao`} className="button-ver">VER MATERIAIS</Link>
</div>
}
@@ -327,28 +419,29 @@ function TabMateriais () {
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>
- )})
- }
+ {
+ 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
+ <ExpandedMaterial material={currMaterial.material} />
+ :
+ null
}
</Container>
}
@@ -356,16 +449,16 @@ function TabMateriais () {
)
}
-export default function AreasSubPages (props) {
+export default function AreasSubPages(props) {
const areaRender = () => {
switch (props.banner) {
case "Recursos":
- return <TabRecurso/>
+ return <TabRecurso />
case "Materiais":
- return <TabMateriais/>
+ return <TabMateriais />
case "Colecoes":
- return <TabColecoes/>
+ return <TabColecoes />
default:
return null
}
@@ -376,13 +469,13 @@ export default function AreasSubPages (props) {
{
window.innerWidth <= 501 ? (
<React.Fragment>
- <TabRecurso/>
- <TabMateriais/>
- <TabColecoes/>
+ <TabRecurso />
+ <TabMateriais />
+ <TabColecoes />
</React.Fragment>
) : (
- areaRender()
- )
+ areaRender()
+ )
}
</React.Fragment>
)