App.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, useEffect, useState } from 'react';
import Home from './Pages/HomeFunction';
import Search from './Pages/Search'
import Header from './Components/Header'
import EcFooter from './Components/EcFooter';
import GNUAGPLfooter from './Components/AGPLFooter';
import UserPage from './Pages/UserPage';
import UserTerms from './Pages/UserTerms';
import Contact from './Pages/Contact';
import Teste from './Pages/Teste';
import AboutPage from './Pages/AboutPage';
import HelpCenter from './Pages/HelpCenter';
import TabResoursePub from './Pages/TabsHelp/TabResoursePub';
import TabResourseFind from './Pages/TabsHelp/TabResourseFind';
import TabNetPart from './Pages/TabsHelp/TabNetPart';
import TabManageAc from './Pages/TabsHelp/TabManageAc';
import PasswordRecoveryPage from './Pages/PasswordRecoveryPage.js'
import PageProfessor from './Pages/PageProfessor.js'
import ResourcePage from './Pages/ResourcePage';
import { BrowserRouter, Switch, Route, Link } from 'react-router-dom';
import { Store } from './Store'
import TermsPage from './Pages/TermsPage.js'
import PublicationPermissionsPage from './Pages/PublicationPermissionsPage.js'
import TabPlataformaMEC from './Pages/TabsHelp/TabPlataformaMEC';
import ItemStore from './Pages/ItemStore.js'
import EditProfilePage from './Pages/EditProfilePage.js'
import PublicUserPage from './Pages/PublicUserPage.js'
import UploadPage from './Pages/UploadPage.js'
import EditLearningObjectPage from './Pages/EditLearningObjectPage.js'
import SiteMap from './Pages/SiteMap'
import Accessibility from './Pages/Accessibility'
import CollectionPage from './Pages/CollectionPage.js'
import FormationMaterialPage from './Pages/FormationMaterialPage.js';
import FormationMaterialIframe from './Pages/FormationMaterialIframe.js';
import MaterialPage from './Pages/MaterialPage';

//admin
import clsx from 'clsx';
import { makeStyles } from '@material-ui/core/styles';
import Drawer from '@material-ui/core/Drawer';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import IconButton from '@material-ui/core/IconButton';
import DisplayIcon from './Admin/Components/Components/DisplayIcon';
import ListItemText from '@material-ui/core/ListItemText';
import MenuIcon from '@material-ui/icons/Menu';
import Fab from '@material-ui/core/Fab';
import { TabsItens } from './Admin/Pages/AdminLabelTabs/LabelTabs';
import Welcome from './Admin/Components/Components/Welcome';
import NoteVariables from './Admin/Pages/Pages/SubPages/NoteVariables';
import Institution from './Admin/Pages/Pages/SubPages/Institutions';
import SendEmail from './Admin/Pages/Pages/SubPages/SendEmail';
import Inframe from './Admin/Pages/Pages/SubPages/Inframe';
import Languages from './Admin/Pages/Pages/SubPages/Languages';
import Activity from './Admin/Pages/Pages/SubPages/Activity';
import InstitutionCard from './Admin/Components/Components/DataCards/InstitutionsCard';
import InstitutionsInput from './Admin/Components/Components/Inputs/IntitutionsInputs';
import CreateInstitution from './Admin/Components/Components/Inputs/CreateInstitution';
import NoteVarCard from './Admin/Components/Components/DataCards/NoteVarCard';
import NoteVarInputs from './Admin/Components/Components/Inputs/NoteVarInputs';
import EditLanguage from './Admin/Components/Components/Inputs/EditLanguage';
import CreateLanguage from './Admin/Components/Components/Inputs/CreateLanguage';
import ActivityCard from './Admin/Components/Components/DataCards/ActivityCard';
import CommunityQuestions from './Admin/Pages/Pages/SubPages/CommunityQuestions';
import CommunityCard from './Admin/Components/Components/DataCards/CommunityQuestionCard';
import Collections from './Admin/Pages/Pages/SubPages/Collections';
import CollectionCard from './Admin/Components/Components/DataCards/CollectionCard';
import EditCollection from './Admin/Components/Components/Inputs/EditCollection';
import Ratings from './Admin/Pages/Pages/SubPages/Rating';
import RatingCard from './Admin/Components/Components/DataCards/RatingCard';
import EditRating from './Admin/Components/Components/Inputs/EditRating';
import CreateRating from './Admin/Components/Components/Inputs/CreateRating';
import Questions from './Admin/Pages/Pages/SubPages/Questions';
import CreateQuestions from './Admin/Components/Components/Inputs/CreateQuestion';
import EducationalObject from './Admin/Pages/Pages/SubPages/EducationalObjects';
import EducationalObjectCard from './Admin/Components/Components/DataCards/EducationalObjectsCard';
import EducationalObjectEdit from './Admin/Components/Components/Inputs/EditEducationalObect';
import Complaints from './Admin/Pages/Pages/SubPages/Complaints';
import ComplaintCard from './Admin/Components/Components/DataCards/ComplaintsCard';
import AproveTeacher from './Admin/Pages/Pages/SubPages/AproveTeacher';
import UserCard from './Admin/Components/Components/DataCards/UserCard';
import EditUser from './Admin/Components/Components/Inputs/EditUser';
import UserList from './Admin/Pages/Pages/SubPages/Users';
import UserPermissions from './Admin/Pages/Pages/SubPages/Permissions'
import EditRole from './Admin/Components/Components/Inputs/EditRoles';
import CreateRole from './Admin/Components/Components/Inputs/CreateRole'
import BlockedUser from './Admin/Pages/Pages/SubPages/BlockedUsers';

const useStyles = makeStyles({
  list: {
      width: 250,
  },
  fullList: {
      width: 'auto',
  },
});

const fab = {
  margin: 0,
  top: 'auto',
  right: 20,
  bottom: 20,
  left: 'auto',
  position: 'fixed',
}


export default function App() {
  // eslint-disable-next-line
  const { state, dispatch } = useContext(Store)
  const [hideFooter, setHideFooter] = useState(false);
  
  const classes = useStyles();

    //State of the Drawer
    const [State, setState] = React.useState({
        left: false
    });

    const [IndexIcon, setIndexIcon] = useState(0);

    {/**************** Controlls the state of the Drawer ****************/ }
    const toggleDrawer = (anchor, open) => (event) => {
        if (event.type === 'keydown' && (event.key === 'Tab' || event.key === 'Shift')) {
            return;
        }

        setState({ ...State, [anchor]: open });
    };

    {/**************** Dsiplay the itens of the Drawer ****************/ }
    const list = (anchor) => (
        <div
            className={clsx(classes.list, {
                [classes.fullList]: anchor === 'top' || anchor === 'bottom',
            })}
            role="presentation"
            onClick={toggleDrawer(anchor, false)}
            onKeyDown={toggleDrawer(anchor, false)}
        >
            <List>
                {TabsItens.map((text, index) => (
                    <Link to={text.href} key={text.label} style={{ color: "black" }}>
                        <ListItem button key={text.label} onClick={() => setIndexIcon(index)}>
                            <IconButton>
                                <DisplayIcon i={index} />
                            </IconButton>
                            <ListItemText primary={text.label} />
                        </ListItem>
                    </Link>
                ))}
            </List>
        </div>
    );


  useEffect(() => {
    setHideFooter(String(window.location.href).includes('iframe-colecao'));
  }, [window.location.href]);

  useEffect(() => {
    dispatch({
      type: 'WINDOW_SIZE',
      innerWindow: {
        width: window.innerWidth,
        height: window.innerHeight
      }
    })
  }, [])

  useEffect(() => {
    const setWindowSize = () => {
      dispatch({
        type: 'WINDOW_SIZE',
        innerWindow: {
          width: window.innerWidth,
          height: window.innerHeight
        }
      })
    }

    window.addEventListener('resize', setWindowSize)

    return () => window.removeEventListener('resize', setWindowSize)
  }, [window.innerWidth, window.innerHeight])

  return (
    <BrowserRouter basename="/react">
      <Header />
      <div style={{ backgroundImage: "linear-gradient(to right,#ff7f00,#e81f4f,#673ab7,#00bcd4)", height: "5px" }}></div>
      <link href="https://fonts.googleapis.com/css?family=Kalam|Pompiere|Roboto&display=swap" rel="stylesheet" />
      <Switch>
        <Route path="/" exact={true} component={Home} />
        <Route path="/busca" component={Search} />
        <Route path="/perfil" component={UserPage} />
        <Route path="/editarperfil" component={EditProfilePage} />
        <Route path="/recurso/:recursoId" component={ResourcePage} />
        <Route path="/termos-publicar-recurso" component={TermsPage} />
        <Route path="/permission" component={PublicationPermissionsPage} />
        {/*<Route path="termos-de-uso#publicacoes-de-usuario" component={}*/}
        <Route path="/ajuda" component={HelpCenter} />
        <Route path="/contato" component={Contact} />
        <Route path="/termos" component={UserTerms} />
        <Route path="/teste" component={Teste} />
        <Route path="/sobre" component={AboutPage} />
        <Route path="/mapa-site" component={SiteMap} />
        <Route path="/acessibilidade" component={Accessibility} />
        <Route path="/publicando-recurso" component={TabResoursePub} />
        <Route path="/encontrando-recurso" component={TabResourseFind} />
        <Route path="/participando-da-rede" component={TabNetPart} />
        <Route path="/gerenciando-conta" component={TabManageAc} />
        <Route path="/plataforma-mec" component={TabPlataformaMEC} />
        <Route path="/recuperar-senha" component={PasswordRecoveryPage} />
        <Route path="/usuario-publico/:userId" component={PublicUserPage} />
        <Route path="/editar-recurso/:recursoId" component={EditLearningObjectPage} />
        <Route path='/professor' component={PageProfessor} />
        <Route path="/upload" component={UploadPage} />
        <Route path='/loja' component={ItemStore} />
        <Route path='/colecao-do-usuario/:id' component={CollectionPage} />
        <Route path='/colecao' component={FormationMaterialPage} />
        <Route path='/topico' component={FormationMaterialPage} />
        <Route path='/iframe-colecao' component={FormationMaterialIframe} />
        <Route path='/material-formacao' component={MaterialPage} />
        <div style={{ paddingTop: '2em', paddingLeft: '2em', paddingRight: '2em', paddingBottom: '2em', backgroundColor: '	#D3D3D3' }}>
          <Route path='/admin/home' exact={true} component={Inframe} />
          <Route path='/admin/intitutions' component={Institution} />
          <Route path='/admin/institution/:id' component={InstitutionCard} />
          <Route path='/admin/institutionEdit/:id' component={InstitutionsInput} />
          <Route path='/admin/InstitutionCreate' component={CreateInstitution} />
          <Route path='/admin/noteVars' component={NoteVariables} />
          <Route path='/admin/noteVar/:id' component={NoteVarCard} />
          <Route path='/admin/noteVarEdit/:id' component={NoteVarInputs} />
          <Route path='/admin/languages' component={Languages} />
          <Route path='/admin/languageEdit/:id' component={EditLanguage} />
          <Route path='/admin/languageCreate' component={CreateLanguage} />
          <Route path='/admin/CommunityQuestions' component={CommunityQuestions} />
          <Route path='/admin/CommunityQuestion/:id' component={CommunityCard} />
          <Route path='/admin/Collections' component={Collections} />
          <Route path='/admin/Collection/:id' component={CollectionCard} />
          <Route path='/admin/EditCollection/:id' component={EditCollection} />
          <Route path='/admin/Ratings' component={Ratings} />
          <Route path='/admin/Rating/:id' component={RatingCard} />
          <Route path='/admin/EditRating/:id' component={EditRating} />
          <Route path='/admin/CreateRating' component={CreateRating} />
          <Route path='/admin/Questions' component={Questions} />
          <Route path='/admin/CreateQuestion' component={CreateQuestions} />
          <Route path='/admin/activities' component={Activity} />
          <Route path='/admin/activity/:id' component={ActivityCard} />
          <Route path='/admin/learningObjects' component={EducationalObject} />
          <Route path='/admin/learningObject/:id' component={EducationalObjectCard} />
          <Route path='/admin/learningObjectEdit/:id' component={EducationalObjectEdit} />
          <Route path='/admin/complaints' component={Complaints} />
          <Route path='/admin/complaint/:id' component={ComplaintCard} />
          <Route path='/admin/users/teacher_requests' component={AproveTeacher} />
          <Route path='/admin/usersList' component={UserList} />
          <Route path='/admin/user/:id' component={UserCard} />
          <Route path='/admin/EditUser/:id' component={EditUser} />
          <Route path='/admin/permissions' component={UserPermissions} />
          <Route path='/admin/EditPermissions/:id' component={EditRole} />
          <Route path='/admin/CreateRole' component={CreateRole} />
          <Route path='/admin/BlockedUsers' component={BlockedUser} />
          <Route path='/admin/sendEmail/:email' component={SendEmail} />
          <React.Fragment>
                <Drawer anchor={'left'} open={State['left']} onClose={toggleDrawer('left', false)}>
                    {list('left')}
                </Drawer>
            </React.Fragment>
            <Fab color="primary" aria-label="add" style={fab} onClick={toggleDrawer('left', true)}>
                <MenuIcon />
            </Fab>
        </div>
      </Switch>
      {!hideFooter &&
        <div>
          <EcFooter />
          <GNUAGPLfooter />
        </div>
      }
    </BrowserRouter>
  )
}