Skip to content
Snippets Groups Projects
Commit 0f3ae0c8 authored by lfr20's avatar lfr20
Browse files

Created "ordered by" to LearnObj and Coll

parent d2e5650a
No related branches found
No related tags found
2 merge requests!57Merge of develop into master,!56Fixed buttons reportar, seguir, compartilhar, guardar and entrar (in comments...
Hide whitespace changes
Inline Side-by-side
src/Components/AreasSubPagesFunction.js
+ 207
− 114
View file @ 0f3ae0c8
......@@ -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>
)
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment