Proyectos de Subversion LeadersLinked - SPA

import React, { useEffect, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { Box } from '@mui/material'

import { axios } from './utils'
import { labelsAdapter } from './utils/labels'
import { setIntlLabels } from './redux/intl/intl.action'
import { logout, setPermissions } from './redux/auth/auth.actions'
import useFetch from './hooks/useFetch'

import { Chat } from './components/chat'
import Header from './components/UI/navbar/Header'
import NotificationAlert from './components/UI/notification/NotificationAlert'
import Footer from './components/footer/Footer'
import AppRoutes from './routes/routes'
import GlobalStyle from './styles/GlobalStyles'
import Spinner from './components/UI/Spinner'
import ErrorPage from './pages/error/error-page'

import './styles/globals.scss'

export default function App() {
  const [loading, setLoading] = useState(true)
  const [credentialsError, setCredentialsError] = useState(false)
  const { data: labels } = useFetch('/language')
  const { theme_id, isAuth } = useSelector(({ auth }) => auth)
  const dispatch = useDispatch()

  const getCredentials = async () => {
    const response = await axios.get('/signin')
    const { data, success } = response.data
    if (!success) throw new Error(data)
    return data
  }

  const getUserCredentials = async () => {
    setLoading(true)
    getCredentials()
      .then((credentials) => {
        const localAes = window.localStorage.getItem('aes')
        const localJwt = window.localStorage.getItem('jwt')
        const permissions = structuredClone(credentials)
        permissions.isAuth = credentials.is_logged_in

        if (localAes) {
          permissions.aes = localAes
        } else {
          permissions.aes = credentials.aes
          window.localStorage.setItem('aes', credentials.aes)
        }

        if (localJwt) {
          permissions.jwt = localJwt
        } else {
          permissions.jwt = credentials.jwt
          window.localStorage.setItem('jwt', credentials.jwt)
        }

        dispatch(setPermissions(permissions))
      })
      .catch((error) => {
        if (error.message.includes('sesión')) {
          dispatch(logout())
          getUserCredentials()
        } else {
          setCredentialsError(true)
        }
      })
      .finally(() => setLoading(false))
  }

  useEffect(() => {
    getUserCredentials()
  }, [isAuth])

  useEffect(() => {
    dispatch(setIntlLabels(labelsAdapter(labels)))
  }, [labels])

  if (loading) {
    return <Spinner />
  }

  if (credentialsError) {
    return <ErrorPage />
  }

  return (
    <>
      <GlobalStyle isAuth={isAuth} />

      {isAuth ? <Header theme={theme_id} /> : null}

      <Box minHeight='65vh'>
        <AppRoutes />
      </Box>

      {isAuth ? <Chat /> : null}
      <NotificationAlert />
      <Footer />
    </>
  )
}