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/connections/MyConnectionsPage')
)
const InvitationsReceivedPage = lazy(() =>
  import('../pages/connections/InvitationsReceivedPage')
)
const InvitationsSendPage = lazy(() =>
  import('../pages/connections/InvitationsSendPage')
)
const PeopleYouMayKnowPage = lazy(() =>
  import('../pages/connections/PeopleYouMayKnowPage')
)
const PeopleBlockedPage = lazy(() =>
  import('../pages/connections/PeopleBlockedPage')
)

const StyledSpinnerContainer = styled.div`
  margin: 1rem auto;
  position: relative;
  width: 80px;
  text-align: center;
  height: 80px;
  border-radius: 100px;
  background-color: #fff;
  line-height: 80px;
  border: 1px solid #e1e1e1;
  cursor: pointer;
`

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

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

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

      <Suspense
        fallback={
          <StyledSpinnerContainer>
            <Spinner />
          </StyledSpinnerContainer>
        }
      >
        <Switch>
          <PrivateRoute exact path="/dashboard" isAuthenticated={isAuth}>
            <DashboardPage />
          </PrivateRoute>
          <PrivateRoute
            exact
            path="/connection/my-connections"
            isAuthenticated={isAuth}
          >
            <MyConnectionsPage />
          </PrivateRoute>
          <PrivateRoute
            exact
            path="/connection/invitations-sent"
            isAuthenticated={isAuth}
          >
            <InvitationsSendPage />
          </PrivateRoute>
          <PrivateRoute
            exact
            path="/connection/invitations-received"
            isAuthenticated={isAuth}
          >
            <InvitationsReceivedPage />
          </PrivateRoute>
          <PrivateRoute
            exact
            path="/connection/people-you-may-know"
            isAuthenticated={isAuth}
          >
            <PeopleYouMayKnowPage />
          </PrivateRoute>
          <PrivateRoute
            exact
            path="/connection/people-blocked"
            isAuthenticated={isAuth}
          >
            <PeopleBlockedPage />
          </PrivateRoute>

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

      <NotificationAlert />
    </Router>
  )
}

export default AppRouter