import React, { useEffect } from 'react';
import { Page } from '../Page';
import { useSelector } from 'react-redux';
import { RootState } from '../../store/reducers/root';
import { Dashboard } from './Dashboard';

export function HomePage() {
  const currentUser = useSelector((state: RootState) => state.auth.currentUser);

  return (
    <Page title={currentUser ? 'Tableau de bord' : 'Accueil'}>
      <div className="container is-fluid">
        <section className="section">
          {
            currentUser ?
            <Dashboard /> :
            <div className="columns">
              <div className="column is-4 is-offset-4">
                <div className="box">
                  <p>Veuillez vous authentifier.</p>
                </div>
              </div>
            </div> 
          }
        </section>
      </div>
    </Page>
  );
}