MenuBar.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, { useContext } from 'react';
import { Link } from 'react-router-dom'
import { Container } from 'react-grid-system'
import logo from '../img/logo_small.svg'
import '../App.css';
import Dropdown from './Dropdown';
import { Button } from '@material-ui/core';
import IconSearch from '@material-ui/icons/Search'
import ExitToAppIcon from '@material-ui/icons/ExitToApp'
import styled from 'styled-components'
import { Store } from '../Store';
import CloudUploadIcon from '@material-ui/icons/CloudUpload';
import Notifications from "./Notifications.js"
import MenuList from './MenuList'

const ContainerStyled = styled(Container)`
    *{ text-decoration: none }
    display: flex;
    align-items: center;
    border-top: 1px rgba(0,0,0,.1) solid;
    padding: 5px;
    padding-top : 10px;

`
export const ButtonStyled = styled(Button)`
    text-transform: capitalize !important;
    margin : 0 8px !important;
    font-weight : normal !important;
    color: ${props => props.contrast === "" ? "black !important" : "yellow !important"};
    text-decoration: ${props => props.contrast === "" ? "none" : "underline !important"};
`

const ButtonPublicarRecurso = styled(Button)`
    font-family : 'Roboto', sans serif;
    box-shadow : none !important;
    border: ${props => props.contrast === '' ? "1px transparent solid" : "1px white solid  !important"};
    background-color: ${(props) => props.contrast === "" ? "#ff7f00 !important" : "black !important"};
    color: white !important;
    align-content : center;
    font-weight : 500 !important;
    text-transform: capitalize !important;
    font-stretch : expanded;
    max-width: 200 !important;
    :hover {
    background-color: ${(props) => props.contrast === "" ? "" : "rgba(255,255,0,0.24) !important"};
    }
    .MuiSvgIcon-root {
        vertical-align : middle !important;
        margin-right : 5px !important;
    }
`

const IconSearchStyled = styled(IconSearch)`
  color: ${props => props.contrast === "" ? "#16b8dd !important" : "white !important"};
`
const ImageStyled = styled.img`
    height: 50px;
    width: auto;
    cursor: pointer;
    margin: 0 10px;
`

const Right = styled.span`
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    margin-right : 10px;
`

const Left = styled.span`
    width: 100%;
    display: inline-flex;
    align-items: center;
`

export const ButtonPubRecursoStyled = styled(Button)`
    font-weight : 500 !important;
    box-shadow: none;
    margin : 0 8px !important;
    font-weight : normal !important;
    :hover {
    background-color: ${(props) =>
    props.contrast === "" ? "" : "rgba(255,255,0,0.24) !important"};
  }
`


export default function MenuBar(props) {

  const { state } = useContext(Store)

  const buildMyAreaTabs = () => {
    const minhaArea = [
      { name: "Perfil e Atividades", href: "/perfil", value: '0' },
      { name: "Recursos Publicados", href: "/perfil", value: '1' },
      { name: "Favoritos", href: "/perfil", value: '2' },
      { name: "Coleções", href: "/perfil", value: '3' },
      { name: "Rede", href: "/perfil", value: '4' },
      { name: "Configurações", href: "/editarperfil", value: '5' },
    ]

    if (state.currentUser.roles) {
      let canUserAdmin = false;
      let index = 0;
      const userRoles = [...state.currentUser.roles]

      while (!canUserAdmin && index < userRoles.length) {
        if (userRoles[index].id === 3 || userRoles[index].id === 7)
          canUserAdmin = true
        index++
      }

      if (canUserAdmin)
        minhaArea.push({
          name: "Administrador",
          href: "/admin/home",
          value: '6',
        })

      const canUserCurator = (elem) => elem.id === 4
      if (userRoles.some(canUserCurator))
        minhaArea.push({
          name: "Curadoria",
          href: "/perfil",
          value: '5',
        })
    }

    return minhaArea;
  }

  const menuSobre = [
    { name: "Sobre a Plataforma", href: "/sobre" },
    { name: "Portais Parceiros", href: "/sobre#portaisparceiros" },
    { name: "Termos de Uso", href: "/termos" },
    { name: "Contato", href: "/contato" }
  ]

  const menuAjuda = [
    { name: "Central de Ajuda", href: "/ajuda" },
    { name: "Publicando Recursos", href: "/publicando-recurso" },
    { name: "Encontrando Recursos", href: "/encontrando-recurso" },
    { name: "Participando da Rede", href: "/participando-da-rede" },
    { name: "Gerenciando a Conta", href: "/gerenciando-conta" }
  ]

  const minhaArea = buildMyAreaTabs()

  return (
    <ContainerStyled fluid={true} className={`${state.contrast}BackColor`}>
      <Left>
        <Link to="/"> <ImageStyled src={logo} alt="Plataforma Integrada" /> </Link>
        <Dropdown name="Sobre" items={menuSobre} />
        <Dropdown name="Ajuda" items={menuAjuda} />
        <a href="http://educacaoconectada.mec.gov.br/" rel="noopener noreferrer" target="_blank" >
          <ButtonStyled contrast={state.contrast} >Educação Conectada</ButtonStyled>
        </a>
        {/*<Link to="/loja">
            <ButtonStyled>Lojinha</ButtonStyled>
        </Link>*/}
        <ButtonStyled contrast={state.contrast} onClick={props.openSearchBar} ><IconSearchStyled contrast={state.contrast}/>Buscar</ButtonStyled>

      </Left>
      <Right>
        {
          state.userIsLoggedIn
            ? (
              <>
                <div style={{ boxSizing: "border-box" }}>
                  <Link to="/termos-publicar-recurso">
                    <ButtonPublicarRecurso contrast={state.contrast} className={`${state.contrast}LinkColor`}>
                      <CloudUploadIcon className={`${state.contrast}IconColor`} style={{ marginLeft: "0" }} />
                      <span style={{textAlign: "center", alignSelf: "center", fontWeight: "500" }} >
                        PUBLICAR RECURSO
                      </span>
                    </ButtonPublicarRecurso>
                  </Link>
                </div>

                <div>
                  <Notifications />
                </div>

                <MenuList items={minhaArea} />

              </>
            )
            : (
              <React.Fragment>
                <ButtonPubRecursoStyled contrast={state.contrast} className={`${state.contrast}LinkColor ${state.contrast}Border`} onClick={props.openLogin}>PUBLICAR RECURSO?</ButtonPubRecursoStyled>
                <ButtonStyled contrast={state.contrast} className={`${state.contrast}LinkColor`} onClick={props.openLogin}><ExitToAppIcon className={`${state.contrast}IconColor`} style={{ color: "#00bcd4" }} />Entrar</ButtonStyled>
                <ButtonStyled contrast={state.contrast} className={`${state.contrast}LinkColor`} onClick={props.openSignUp}>Cadastre-<span style={{ textTransform: 'lowercase' }}>se</span></ButtonStyled>
              </React.Fragment>
            )
        }

      </Right>
    </ContainerStyled>
  );
}