Proyectos de Subversion LeadersLinked - Antes de SPA

import React, { lazy, Suspense, useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { BrowserRouter as Router, Switch } from 'react-router-dom'
import styled from 'styled-components'
import { getLanguage } from '../../redux/intl/intl.action'

import PublicRoute from './PublicRoute'
import PrivateRoute from './PrivateRoute'

import Spinner from '../components/UI/Spinner'
import NotificationAlert from '../components/UI/notification/NotificationAlert'

const Header = lazy(() => import('../components/navbar/Header'))
const Auth = lazy(() => import('../pages/auth/Auth'))
const DashboardPage = lazy(() => import('../pages/dashboard/DashboardPage'))
const MyConnectionsPage = lazy(() =>
  import('../pages/my-connections/MyConnectionsPage')
)

const StyledSpinnerContainer = styled.div`
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 300;
`

const AppRouter = () => {
  const { isAuth } = useSelector(({ auth }) => auth)
  const dispatch = useDispatch()

  useEffect(() => {
    dispatch(getLanguage())
  }, [])

  return (
    <Router>
      <Suspense
        fallback={
          <StyledSpinnerContainer>
            <Spinner />
          </StyledSpinnerContainer>
        }
      >
        {isAuth && <Header />}

        <Switch>
          <PrivateRoute exact path="/dashboard" isAuthenticated={isAuth}>
            <DashboardPage />
          </PrivateRoute>
          <PrivateRoute
            exact
            path="/connection/my-connections"
            isAuthenticated={isAuth}
          >
            <MyConnectionsPage />
          </PrivateRoute>

          <PublicRoute path="/" isAuthenticated={isAuth}>
            <Auth />
          </PublicRoute>
        </Switch>
      </Suspense>

      <NotificationAlert />
    </Router>
  )
}

export default AppRouter