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: relative;

  padding: 100px;

  background: rgba(255, 255, 255, 0.4);

  border-radius: 50%;

  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