AreasSubPagesFunction.js

/*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, useContext } 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 TextField from '@material-ui/core/TextField';
import MenuItem from '@material-ui/core/MenuItem';
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 { recursos } from "ImportImages.js";
import { materiais } from "ImportImages.js";
import { colecoes } from "ImportImages.js";
import { ColecaoVazia } from "ImportImages.js";
import { RecursoVazio } from "ImportImages.js";
import { Store } from '../Store'
import { makeStyles } from '@material-ui/core/styles'

const useStyles = makeStyles(theme => ({
    contrastTextField: {
        border: "1px solid white",
        borderRadius: theme.shape.borderRadius,
        backgroundColor: "black",
    }
}))

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} style={props.contrast === "" ? { color: "#ff7f00" } : { color: "yellow" }} />
            </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
                                    contrast={props.contrast}
                                    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} style={props.contrast === "" ? { color: "#673ab7" } : { color: "yellow" }} />
            </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
                                    contrast={props.contrast}
                                    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({ contrast }) {
    const classes = useStyles()
    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: contrast === "" ? "#ff7f00" : "black", position: "relative" }}>
                <StyledTab container contrast={contrast}>
                    <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?page=0&results_per_page=12&order=review_average&query=*&search_class=LearningObject`} className="button-ver">VER RECURSOS</Link>
                        </div>
                    }
                </StyledTab>
            </div>
            {
                window.innerWidth > 501 &&
                <div className={`${contrast}BackColor`}>
                    <Container style={{ padding: "20px" }}>
                        <Grid
                            container
                            direction="row"
                            justify="space-between"
                            alignItems="center"
                            style={{
                                paddingBottom: "5px",
                                borderBottom: contrast === "" ? "1px solid #ff7f00" : "1px solid white",
                                color: contrast === "" ? "#ff7f00" : "white",
                            }}
                        >
                            <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>
                                        <StyledTextField
                                            contrast={contrast}
                                            select
                                            fullWidth
                                            value={currValue}
                                            variant="outlined"
                                            className={contrast === "Contrast" && classes.contrastTextField}
                                        >
                                            {ordenar.map((option) => (
                                                <StyledMenuItem
                                                    contrast={contrast}
                                                    key={option.value}
                                                    value={option.value}
                                                    name={option.value}
                                                    onClick={() => {
                                                        setCurrOrder(option.label)
                                                        setCurrValue(option.value)
                                                    }}
                                                >
                                                    <span style={currValue === option.value ? { color: contrast === "" ? "#ff7f00" : "yellow", textDecoration: contrast === "" ? "none" : "underline", fontWeight: "500" } : { color: contrast === "" ? "" : "yellow", textDecoration: contrast === "" ? "none" : "underline", fontWeight: "lighter" }} >
                                                        {option.label}
                                                    </span>
                                                </StyledMenuItem>
                                            ))}
                                        </StyledTextField>
                                    </Grid>
                                </Grid>
                            </Grid>
                        </Grid>
                        <Hidden sm xs>
                            <ReqResources order={currValue} contrast={contrast} />
                        </Hidden>
                        <Visible sm xs>
                            <ReqResources order={currValue} contrast={contrast} />
                        </Visible>
                    </Container>
                </div>
            }
        </React.Fragment>
    )
}

function TabColecoes({ contrast }) {
    const classes = useStyles()
    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 contrast={contrast}>
                    <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?page=0&results_per_page=12&order=review_average&query=*&search_class=Collection`} className="button-ver">VER COLEÇÕES</Link>
                        </div>
                    }
                </StyledTab>
            </div>
            {
                window.innerWidth > 501 &&
                <div className={`${contrast}BackColor`}>
                    <Container style={{ padding: "20px" }}>
                        <Grid
                            container
                            direction="row"
                            justify="space-between"
                            alignItems="center"
                            style={{
                                paddingBottom: "5px",
                                borderBottom: contrast === "" ? "1px solid #673ab7" : "1px solid white",
                                color: contrast === "" ? "#673ab7" : "white",
                            }}
                        >
                            <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>
                                        <StyledTextField
                                            contrast={contrast}
                                            select
                                            fullWidth
                                            value={currValue}
                                            variant="outlined"
                                            className={contrast === "Contrast" && classes.contrastTextField}
                                        >
                                            {ordenar.map((option) => (
                                                <StyledMenuItem
                                                    contrast={contrast}
                                                    key={option.value}
                                                    value={option.value}
                                                    name={option.value}
                                                    style={contrast === "" ? {} : { backgroundColor: "black" }}
                                                    onClick={() => {
                                                        setCurrOrder(option.label)
                                                        setCurrValue(option.value)
                                                    }}
                                                >
                                                    <span style={currValue === option.value ? { color: contrast === "" ? "#673ab7" : "yellow", textDecoration: contrast === "" ? "none" : "underline", fontWeight: "500" } : { color: contrast === "" ? "" : "yellow", textDecoration: contrast === "" ? "none" : "underline", fontWeight: "lighter" }} >
                                                        {option.label}
                                                    </span>
                                                </StyledMenuItem>
                                            ))}
                                        </StyledTextField>
                                    </Grid>
                                </Grid>
                            </Grid>
                        </Grid>
                        <ReqCollections order={currValue} contrast={contrast} />
                    </Container>
                </div>
            }
        </React.Fragment>
    )
}

function TabMateriais({ contrast }) {
    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 contrast={contrast}>
                    <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 &&
                <div className={`${contrast}BackColor`}>
                    <Container style={{ padding: "20px" }}>
                        <p
                            style={{
                                paddingBottom: "5px",
                                borderBottom: contrast === "" ? "1px solid #e81f4f" : "1px solid white",
                                color: contrast === "" ? "#e81f4f" : "white",
                            }}
                        >
                            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
                                                contrast={contrast}
                                                name={material.name}
                                                thumb={material.img}
                                                score={material.score}
                                                modules={material.topics}
                                                handleExpand={handleExpandMaterial}
                                                id={index}
                                            />
                                        </Col>
                                    )
                                })
                                }
                            </Row>
                        </Carousel>
                        {
                        currMaterial.open ?
                            <ExpandedMaterial contrast={contrast} material={currMaterial.material} />
                            :
                            null
                        }
                    </Container>
                </div>
            }
        </React.Fragment >
    )
}

export default function AreasSubPages(props) {

    const { state } = useContext(Store)

    const areaRender = () => {
        switch (props.banner) {
        case "Recursos":
            return <TabRecurso contrast={state.contrast} />
        case "Materiais":
            return <TabMateriais contrast={state.contrast} />
        case "Colecoes":
            return <TabColecoes contrast={state.contrast} />
        default:
            return null
        }
    }

    return (
        <React.Fragment>
        {
            window.innerWidth <= 501 ? (
            <React.Fragment>
                <TabRecurso contrast={state.contrast} />
                <TabMateriais contrast={state.contrast} />
                <TabColecoes contrast={state.contrast} />
            </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;
    background: ${props => props.contrast === "" ? "" : "black"};

    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: ${props => props.contrast === "" ? "#fff" : "yellow"};
        cursor: pointer;
        text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
    }

`

const StyledMenuItem = styled(MenuItem)`  
    background-color: ${props => props.contrast === "" ? "" : "black !important"};
`

const StyledTextField = styled(TextField)`
    .MuiOutlinedInput-root {
        &.Mui-focused fieldset {
            border-color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
        }
        fieldset {
            border-color: ${props => props.contrast === "" ? "#666" : "white"};
        }
    }
`