Header.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, useState, useEffect } from 'react'
import MenuBar from './MenuBar'
import SearchBar from './SearchBar'
import SignUpModal from './SignUpModal'
import LoginModal from './LoginModal.js'
import { Store } from '../Store';
import ColaborarModal from './ColaborarModal.js'
import Snackbar from '@material-ui/core/Snackbar';
import MuiAlert from '@material-ui/lab/Alert';
import { useLocation, useHistory } from 'react-router-dom'
import MenuBarMobile from './MenuBarMobile.js'
import { getRequest, validateGoogleLoginToken } from './HelperFunctions/getAxiosConfig'
//const StyledButton = styled(Button)`
//    background : #ffa54c !important;
//    boxShadow :none;
//`
function Alert(props) {
  return <MuiAlert elevation={6} variant="filled" {...props} />;
}


export default function Header(props) {
  const { state, dispatch } = useContext(Store)
  const [signUpOpen, setSignUp] = useState(false)
  const [loginOpen, setLogin] = useState(false)
  const [successfulLoginOpen, handleSuccessfulLogin] = useState(false)
  const [modalColaborar, setModalColaborar] = useState(false)

  function handleSuccessValidateToken(data) {
    dispatch({
      type: "USER_LOGGED_IN",
      userLoggedIn: !state.userIsLoggedIn,
      login: data.data
    }
    )
  }

  useEffect(() => {
    if (localStorage.getItem('@portalmec/auth_headers')) {
      const url = `/auth/validate_token/`
      getRequest(url, handleSuccessValidateToken, (error) => { console.log(error) })
    }
    const newContrast = localStorage.getItem("@portalmec/contrast");

    return dispatch({
      type: 'SET_CONTRAST',
      payload: newContrast
    })
  }, [])

  let loc = useLocation()
  let history = useHistory()
  useEffect(() => {
    const url = `/auth/validate_token/`

    let query = new URLSearchParams(loc.search)

    if (query.get("auth_token")) {
      let config = {
        headers: {
          "access-token": query.get("auth_token"),
          "client": query.get("client_id"),
          "uid": query.get("uid"),
          "expiry": query.get("expiry"),
          "token-type": 'Bearer'
        }
      }
      validateGoogleLoginToken(url, config, handleSuccessValidateToken, (error) => { console.log(error) })
      history.push("/")
    }
  }, [loc])

  useEffect(() => {
    if (state.currentUser.askTeacherQuestion === true) {
      dispatch({
        type: "TOGGLE_MODAL_COLABORAR_PLATAFORMA",
        modalColaborarPlataformaOpen: true
      });
    }
  }, [state.currentUser.askTeacherQuestion])

  const toggleSnackbar = (event, reason) => {
    if (reason === 'clickaway') {
      return;
    }

    handleSuccessfulLogin(false);
  }

  const handleSignUp = () => {
    setSignUp(!signUpOpen)
  }

  const handleLogin = () => {
    setLogin(!loginOpen)
  }

  const handleClickSearch = (open) => {
    dispatch({
      type: "HANDLE_SEARCH_BAR",
      opened: !state.searchOpen
    })
  }

  let windowWidth = window.innerWidth

  return (
    <React.Fragment>
      <Snackbar open={successfulLoginOpen} autoHideDuration={1000} onClose={toggleSnackbar}
        anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
      >
        <Alert severity="success" style={{ backgroundColor: "#00acc1" }}>Você está conectado(a)!</Alert>
      </Snackbar>
      {
        windowWidth > 990 ?
          (
            <React.Fragment>
              <MenuBar openSearchBar={handleClickSearch} openSignUp={handleSignUp} openLogin={handleLogin} />
              {
                state.searchOpen &&
                <SearchBar />
              }
            </React.Fragment>

          )
          :
          (
            <React.Fragment>
              <MenuBarMobile contrast={state.contrast} openSearchBar={handleClickSearch} openSignUp={handleSignUp} openLogin={handleLogin} />
              {
                state.searchOpen &&
                <SearchBar />
              }
            </React.Fragment>
          )
      }
      <SignUpModal contrast={state.contrast} open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} />
      <LoginModal contrast={state.contrast} open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
        openSnackbar={() => { handleSuccessfulLogin(true) }} />
      <ColaborarModal contrast={state.contrast} open={modalColaborar} handleClose={() => { setModalColaborar(!modalColaborar) }} />
    </React.Fragment>
  )
}