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 } 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";

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} color="#ff7f00" />
        </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
                      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} color="#673ab7" />
        </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
                      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() {
  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: "#ff7f00", position: "relative" }}>
        <StyledTab container>
          <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 &&
        <Container style={{ padding: "20px" }}>
          <Grid
            container
            direction="row"
            justify="space-between"
            alignItems="center"
            style={{
              paddingBottom: "5px",
              borderBottom: "1px solid #ff7f00",
              color: "#ff7f00",
            }}
          >
            <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>
                  <TextField
                    select
                    fullWidth
                    value={currValue}
                    variant="outlined"
                  >
                    {ordenar.map((option) => (
                      <MenuItem
                        key={option.value}
                        value={option.value}
                        name={option.value}
                        onClick={() => {
                          setCurrOrder(option.label)
                          setCurrValue(option.value)
                        }}
                      >
                        <span style={currValue === option.value ? { color: "#ff7f00" } : null} >
                          {option.label}
                        </span>
                      </MenuItem>
                    ))}
                  </TextField>
                </Grid>
              </Grid>
            </Grid>
          </Grid>
          <Hidden sm xs>
            <ReqResources order={currValue} />
          </Hidden>
          <Visible sm xs>
            <ReqResources order={currValue} />
          </Visible>
        </Container>
      }
    </React.Fragment>
  )
}

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 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>
          <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 &&
        <Container style={{ padding: "20px" }}>
          <Grid
            container
            direction="row"
            justify="space-between"
            alignItems="center"
            style={{
              paddingBottom: "5px",
              borderBottom: "1px solid #673ab7",
              color: "#673ab7",
            }}
          >
            <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>
                  <TextField
                    select
                    fullWidth
                    value={currValue}
                    variant="outlined"
                  >
                    {ordenar.map((option) => (
                      <MenuItem
                        key={option.value}
                        value={option.value}
                        name={option.value}
                        onClick={() => {
                          setCurrOrder(option.label)
                          setCurrValue(option.value)
                        }}
                      >
                        <span style={currValue === option.value ? { color: "#673ab7" } : null} >
                          {option.label}
                        </span>
                      </MenuItem>
                    ))}
                  </TextField>
                </Grid>
              </Grid>
            </Grid>
          </Grid>
          <ReqCollections order={currValue} />
        </Container>
      }
    </React.Fragment>
  )
}

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: {}
  })

  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>
          <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 &&
        <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>
          {
            currMaterial.open ?
              <ExpandedMaterial material={currMaterial.material} />
              :
              null
          }
        </Container>
      }
    </React.Fragment >
  )
}

export default function AreasSubPages(props) {

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

  return (
    <React.Fragment>
      {
        window.innerWidth <= 501 ? (
          <React.Fragment>
            <TabRecurso />
            <TabMateriais />
            <TabColecoes />
          </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;

    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: #fff;
        cursor: pointer;
        text-decoration: none;
    }

`