Skip to content
Snippets Groups Projects

Improved performance

Merged Improved performance
Otimizando_Vinicius into Develop
Merged vgm18 requested to merge Otimizando_Vinicius into Develop
Viewing commit 209c3d14
Prev Next
Show latest version
4 files
+ 4
− 403
Compare changes
  • Side-by-side
  • Inline
Files
4
src/Components/AreasSubPages.js deleted 100644 → 0
+ 0
− 348
/*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, { Component } from "react";
import "./carousel.css";
import { Col, Row, Container, Hidden, Visible } from "react-grid-system";
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 {getRequest} from './HelperFunctions/getAxiosConfig.js'
//Image Import
import { recursos } from "ImportImages.js";
import { materiais } from "ImportImages.js";
import { colecoes } from "ImportImages.js";
const materials = colecoes_obj();
class ReqResources extends Component {
constructor(props) {
super(props);
this.state = {
resources: [],
};
}
componentDidMount() {
const url = `/learning_objects?limit=12&sort=["published_at", "desc"]`
getRequest(url, (data) => {this.setState({ resources: data })}, (error) => {console.log(error)})
}
resourcesPerPage() {
var pageWidth = window.innerWidth
if (pageWidth >= 1200) {
return 3
}
else {
if (pageWidth > 766) {
return 2
}
else {
return 1
}
}
}
render() {
var rows = []
var resources_per_page = this.resourcesPerPage()
for (let i = 0; i < 12 / resources_per_page; i++) {
rows.push(this.state.resources.slice(i * resources_per_page, resources_per_page * (i + 1)))
}
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>
))}
</Carousel>
);
}
}
class ReqCollections extends Component {
constructor(props) {
super(props);
this.state = {
collections: [],
};
}
componentDidMount() {
const url = `/collections?limit=12&sort=["updated_at", "desc"]`
getRequest(url, (data) => {this.setState({ collections: data })}, (error) => {console.log(error)})
}
collectionsPerPage() {
var pageWidth = window.innerWidth
if (pageWidth >= 1200) {
return 3
}
else {
if (pageWidth > 766) {
return 2
}
else {
return 1
}
}
}
render() {
var rows = []
var collections_per_page = this.collectionsPerPage()
for (let i = 0; i < 12 / collections_per_page; i++) {
rows.push(this.state.collections.slice(i * collections_per_page, collections_per_page * (i + 1)))
}
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>
))}
</Carousel>
);
}
}
class SubPages extends Component {
constructor(props) {
super(props);
this.state = {
currMaterial: {
open: false,
material: {}
},
};
}
areaRender() {
switch (this.props.banner) {
case "Recursos":
return (
<React.Fragment>
<div style={{ backgroundColor: "#ff7f00", position: "relative" }}>
<div style={{ textAlign: "justify", color: "#fff", minHeight: 195, paddingLeft: 10, paddingRight: 10, paddingTop: 20, paddingBottom: 20 }}>
<img
src={recursos}
alt="aba recursos"
height="155"
style={{ float: "left", marginRight: 20, marginBottom: 20, marginLeft: window.innerWidth >= 825 ? "25%" : "0px" }}
/>
<p style={{ textAlign: "justify", color: "#fff", marginRight: window.innerWidth >= 825 ? "25%" : "0px" }}>
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!
</p>
</div>
</div>
<Container style={{ padding: "20px" }}>
<p
style={{
paddingBottom: "5px",
borderBottom: "1px solid #ff7f00",
color: "#ff7f00",
}}
>
Recursos mais recentes{" "}
</p>
<Hidden sm xs>
<ReqResources />
</Hidden>
<Visible sm xs>
<ReqResources />
</Visible>
</Container>
</React.Fragment>
);
case "Materiais":
const HandleExpandMaterial = (id) => {
if (id !== this.state.currMaterial.material.id)
this.setState({
currMaterial: {
open: true,
material: { ...materials[id] }
}
})
else
this.setState({
currMaterial: {
open: false,
material: {}
}
})
}
return (
<React.Fragment>
<div style={{ backgroundColor: "#e81f4f", position: "relative" }}>
<div style={{ textAlign: "justify", color: "#fff", minHeight: 195, paddingLeft: 10, paddingRight: 10, paddingTop: 20, paddingBottom: 20 }}>
<img
src={materiais}
alt="aba recursos"
height="155"
style={{ float: "left", marginRight: 20, marginBottom: 20, marginLeft: window.innerWidth >= 825 ? "25%" : "0px" }}
/>
<p style={{ textAlign: "justify", color: "#fff", marginRight: window.innerWidth >= 825 ? "25%" : "0px" }}>
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.
</p>
</div>
</div>
<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>
{
this.state.currMaterial.open ?
<ExpandedMaterial material={this.state.currMaterial.material} />
:
null
}
</Container>
</React.Fragment >
);
case "Colecoes":
return (
<React.Fragment>
<div style={{ backgroundColor: "#673ab7", position: "relative" }}>
<div style={{ textAlign: "justify", color: "#fff", minHeight: 195, paddingLeft: 10, paddingRight: 10, paddingTop: 20, paddingBottom: 20 }}>
<img
src={colecoes}
alt="aba recursos"
height="155"
style={{ float: "left", marginRight: 20, marginBottom: 20, marginLeft: window.innerWidth >= 825 ? "25%" : "0px" }}
/>
<p style={{ textAlign: "justify", color: "#fff", marginRight: window.innerWidth >= 825 ? "25%" : "0px" }}>
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!
</p>
</div>
</div>
<Container style={{ padding: "20px" }}>
<p
style={{
paddingBottom: "5px",
borderBottom: "1px solid #673ab7",
color: "#673ab7",
}}
>
Coleções mais recentes{" "}
</p>
<ReqCollections />
</Container>
</React.Fragment>
);
default:
return null;
}
}
render() {
return <div>{this.areaRender()}</div>;
}
}
export default SubPages;