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...
......@@ -30,9 +30,11 @@ 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";
function objectsPerPage() {
var pageWidth = window.innerWidth
......@@ -49,8 +51,9 @@ function objectsPerPage () {
}
}
function ReqResources () {
function ReqResources(props) {
const [rows, setRows] = useState([])
const [isLoading, setIsLoading] = useState(false)
function onSuccessfulGet(data) {
var aux = []
......@@ -59,17 +62,21 @@ function ReqResources () {
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) })
}, [])
}, [props.order])
return (
<Carousel showThumbs={false} infiniteLoop={true} showStatus={false}>
{
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) => (
......@@ -97,8 +104,9 @@ function ReqResources () {
)
}
function ReqCollections () {
function ReqCollections(props) {
const [rows, setRows] = useState([])
const [isLoading, setIsLoading] = useState(false)
function onSuccessfulGet(data) {
var aux = []
......@@ -106,18 +114,22 @@ function ReqCollections () {
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(() => {
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) })
}, [])
}, [props.order])
return (
<Carousel showThumbs={false} infiniteLoop={true} showStatus={false}>
{
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) => (
......@@ -127,15 +139,15 @@ function ReqCollections () {
tags={card.tags}
rating={card.score}
id={card.id}
author={card.owner.name}
author={card.owner ? card.owner.name : ""}
description={card.description}
thumbnails={card.items_thumbnails}
avatar={card.owner.avatar}
avatar={card.owner ? card.owner.avatar : ""}
likeCount={card.likes_count}
followed={card.followed}
liked={card.liked}
collections={card.collection_items}
authorID={card.owner.id}
authorID={card.owner ? card.owner.id : ""}
/>
</div>
))}
......@@ -147,6 +159,16 @@ function ReqCollections () {
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>
......@@ -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{" "}
<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>
}
......@@ -204,6 +256,16 @@ function TabRecurso () {
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>
......@@ -238,16 +300,46 @@ 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{" "}
<Grid item>
<p
style={{ margin: 0, padding: 0 }}
>
{
`Coleções ${currOrder}`
}
</p>
<ReqCollections />
</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>
......@@ -340,7 +432,8 @@ function TabMateriais () {
id={index}
/>
</Col>
)})
)
})
}
</Row>
</Carousel>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment