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/invitations-received"

            isAuthenticated={isAuth}

          >

            <PeopleBlockedPage />

          </PrivateRoute>

          <PublicRoute path="/" isAuthenticated={isAuth}>

            <Auth />

          </PublicRoute>

        </Switch>

      </Suspense>

      <NotificationAlert />

    </Router>

  )

}

export default AppRouter