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 ErrorBoundary from './components/error-boundary/ErrorBoundary'

import Footer from './components/footer/Footer'

import ProvidersWrapper from './providers/providers-wrapper'

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])

  useEffect(() => {

    const servicesUrl = document

      .querySelector('#app')

      .getAttribute('data-service')

    axios.create(`https://${servicesUrl}`)

  }, [])

  if (loading) {

    return <Spinner />

  }

  if (credentialsError) {

    return <ErrorPage />

  }

  return (

    <ProvidersWrapper>

      <ErrorBoundary>

        <GlobalStyle isAuth={isAuth} />

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

        <Box minHeight='65vh'>

          <AppRoutes />

        </Box>

        {isAuth ? <Chat /> : null}

        <NotificationAlert />

        <Footer />

      </ErrorBoundary>

    </ProvidersWrapper>

  )

}