Proyectos de Subversion LeadersLinked - Antes de SPA

import React, { Suspense } from 'react'
import parse from 'html-react-parser'
import styled from 'styled-components'
import { Container, Col } from 'react-bootstrap'
import {
  NavLink,
  Route,
  Switch,
  useHistory,
  useLocation,
} from 'react-router-dom'
import { useSelector } from 'react-redux'

import Login from '../../components/auth/login/Login'
import Signup from '../../components/auth/signup/Signup'
import ForgotPassword from '../../components/auth/forgot-password/ForgotPassword'

const AuthContainer = styled(Container)`
  margin: auto;
  display: flex;
  padding: 2rem 0;
  @media (max-width: 768px) {
    flex-direction: column;
  }
`
const CompanyInfoContainer = styled(Col)`
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.5rem;
  img {
    height: 50vh;
    object-fit: contain;
    width: 100%;
  }
  p {
    font-size: 1rem;
  }
  @media (min-width: 768px) {
    img {
      margin: 0 3rem;
    }
  }
`

const Auth = () => {
  const { pathname } = useLocation()
  const history = useHistory()
  const { logo_url, intro } = useSelector(({ auth }) => auth)

  if (pathname === '/') {
    history.push('/signin')
  }

  return (
    <AuthContainer forwardedAs="main">
      <CompanyInfoContainer forwardedAs="section" lg="6">
        <img src={logo_url} alt="Leaderslinked logo" />
        <p>{parse(intro)}</p>
      </CompanyInfoContainer>

      <Col forwardedAs="section">
        <ul className="sign-control">
          <li>
            <NavLink to="/signin" activeClassName="current">
              Entrar
            </NavLink>
          </li>
          <li>
            <NavLink to="/signup" activeClassName="current">
              Registrarse
            </NavLink>
          </li>
          <li>
            <NavLink to="/forgot-password" activeClassName="current">
              Olvide mi clave
            </NavLink>
          </li>
        </ul>
        <Suspense fallback={null}>
          <div className="sign_in_sec current">
            <Switch>
              <Route exact path="/signin">
                <Login />
              </Route>
              <Route exact path="/signup">
                <Signup />
              </Route>
              <Route exact path="/forgot-password">
                <ForgotPassword />
              </Route>
            </Switch>
          </div>
        </Suspense>
      </Col>
    </AuthContainer>
  )
}

export default Auth