Routes privées avec page d'accueil publique

This commit is contained in:
wpetit 2020-08-13 10:16:00 +02:00
parent 680614148c
commit 5790c91d82
11 changed files with 147 additions and 34 deletions

View File

@ -1,22 +1,33 @@
import React from 'react'; import React, { FunctionComponent } from 'react';
import { BrowserRouter, Route, Redirect, Switch } from "react-router-dom"; import { BrowserRouter, Route, Redirect, Switch } from "react-router-dom";
import { HomePage } from './HomePage/HomePage'; import { HomePage } from './HomePage/HomePage';
import { ProfilePage } from './ProfilePage/ProfilePage'; import { ProfilePage } from './ProfilePage/ProfilePage';
import { WorkgroupPage } from './WorkgroupPage/WorkgroupPage'; import { WorkgroupPage } from './WorkgroupPage/WorkgroupPage';
import { DecisionSupportFilePage } from './DecisionSupportFilePage/DecisionSupportFilePage'; import { DecisionSupportFilePage } from './DecisionSupportFilePage/DecisionSupportFilePage';
import { DashboardPage } from './DashboardPage/DashboardPage';
import { useUserProfile } from '../gql/queries/profile';
import { LoggedInContext } from '../hooks/useLoggedIn';
import { PrivateRoute } from './PrivateRoute';
export class App extends React.Component { export interface AppProps {
render() {
return ( }
export const App: FunctionComponent<AppProps> = () => {
const { user } = useUserProfile();
return (
<LoggedInContext.Provider value={user.id !== ''}>
<BrowserRouter> <BrowserRouter>
<Switch> <Switch>
<Route path="/" exact component={HomePage} /> <Route path="/" exact component={HomePage} />
<Route path="/profile" exact component={ProfilePage} /> <PrivateRoute path="/profile" exact component={ProfilePage} />
<Route path="/workgroups/:id" exact component={WorkgroupPage} /> <PrivateRoute path="/workgroups/:id" exact component={WorkgroupPage} />
<Route path="/decisions/:id" exact component={DecisionSupportFilePage} /> <PrivateRoute path="/decisions/:id" exact component={DecisionSupportFilePage} />
<PrivateRoute path="/dashboard" exact component={DashboardPage} />
<Route component={() => <Redirect to="/" />} /> <Route component={() => <Redirect to="/" />} />
</Switch> </Switch>
</BrowserRouter> </BrowserRouter>
); </LoggedInContext.Provider>
} );
} }

View File

@ -0,0 +1,15 @@
import React from 'react';
import { Page } from '../Page';
import { Dashboard } from './Dashboard';
export function DashboardPage() {
return (
<Page title={'Tableau de bord'}>
<div className="container is-fluid">
<section className="mt-5">
<Dashboard />
</section>
</div>
</Page>
);
}

View File

@ -72,7 +72,7 @@ export const DecisionSupportFilePage: FunctionComponent<DecisionSupportFilePageP
onClick={selectTab.bind(null, 0)}> onClick={selectTab.bind(null, 0)}>
<a> <a>
<span className="icon is-small"><i className="fas fa-pen" aria-hidden="true"></i></span> <span className="icon is-small"><i className="fas fa-pen" aria-hidden="true"></i></span>
<span>Clarifier la décision</span> <span>Clarifier la proposition</span>
</a> </a>
</li> </li>
<li className={`has-background-white ${state.selectedTabIndex === 1 ? 'is-active': ''}`} <li className={`has-background-white ${state.selectedTabIndex === 1 ? 'is-active': ''}`}

View File

@ -1,33 +1,20 @@
import React from 'react'; import React, { useEffect } from 'react';
import { Page } from '../Page'; import { Page } from '../Page';
import { Dashboard } from './Dashboard'; import { WelcomeContent } from './WelcomeContent';
import { useUserProfileQuery } from '../../gql/queries/profile'; import { useUserProfile } from '../../gql/queries/profile';
import { WithLoader } from '../WithLoader'; import { useHistory } from 'react-router';
export function HomePage() { export function HomePage() {
const { data, loading } = useUserProfileQuery(); const { user } = useUserProfile();
const history = useHistory();
const { userProfile } = (data || {}); useEffect(() => {
if (user.id !== '') history.push('/dashboard');
}, [user.id])
return ( return (
<Page title={userProfile ? 'Tableau de bord' : 'Accueil'}> <Page title="Accueil">
<div className="container is-fluid"> <WelcomeContent />
<section className="mt-5">
<WithLoader loading={loading}>
{
userProfile ?
<Dashboard /> :
<div className="columns">
<div className="column is-4 is-offset-4">
<div className="box">
<p>Veuillez vous authentifier.</p>
</div>
</div>
</div>
}
</WithLoader>
</section>
</div>
</Page> </Page>
); );
} }

View File

@ -0,0 +1,75 @@
import React, { FunctionComponent, Fragment } from "react";
export interface WelcomeContentProps {
}
export const WelcomeContent: FunctionComponent<WelcomeContentProps> = () => {
return (
<Fragment>
<section className="hero is-normal is-light is-bold">
<div className="hero-body has-text-centered">
<div className="container">
<h1 className="title">
Bienvenue sur Daddy !
</h1>
<h2 className="subtitle">
L'outil de suivi de la vie d'entreprise démocratique.
</h2>
</div>
</div>
</section>
<div className="box cta">
<p className="has-text-centered">
<span className="tag is-info">Attention</span> Le service est actuellement en alpha. L'accès est restreint aux adresses autorisées.
</p>
</div>
<section className="container mt-5">
<div className="columns">
<div className="column is-4">
<div className="card is-shady">
<div className="card-image has-text-centered">
<i className="fa fa-at mt-5" style={{fontSize: '8rem'}}></i>
</div>
<div className="card-content">
<div className="content">
<h4>Une adresse courriel et c'est parti !</h4>
<p>Pas de création de compte, pas de mot de passe à retenir. Entrez votre adresse courriel et commencez directement à travailler !</p>
{/* <p><a href="#">En savoir plus</a></p> */}
</div>
</div>
</div>
</div>
<div className="column is-4">
<div className="card is-shady">
<div className="card-image has-text-centered">
<i className="fa fa-edit mt-5" style={{fontSize: '8rem'}}></i>
</div>
<div className="card-content">
<div className="content">
<h4>Préparer vos dossiers d'aide à la décision</h4>
<p>Une décision à prendre ? Un nouveau projet à lancer ? Crééz votre groupe de travail et rédigez un dossier pour faciliter la prise de décision collective !</p>
{/* <p><a href="#">En savoir plus</a></p> */}
</div>
</div>
</div>
</div>
<div className="column is-4">
<div className="card is-shady">
<div className="card-image has-text-centered">
<i className="fa fa-users mt-5" style={{fontSize: '8rem'}}></i>
</div>
<div className="card-content">
<div className="content">
<h4>Travaillez collaborativement</h4>
<p>Éditez à plusieurs vos dossiers d'aide à la décision, suivi l'avancée des débats et retrouvez simplement les décisions prises dans l'entreprise.</p>
{/* <p><a href="#">En savoir plus</a></p> */}
</div>
</div>
</div>
</div>
</div>
</section>
</Fragment>
);
};

View File

@ -0,0 +1,18 @@
import React, { FunctionComponent, Component, ReactType } from "react"
import { Route, Redirect, RouteProps } from "react-router"
import { useLoggedIn } from "../hooks/useLoggedIn";
export interface PrivateRouteProps extends RouteProps {
}
export const PrivateRoute: FunctionComponent<PrivateRouteProps> = ({component: Component, ...rest}) => {
const loggedIn = useLoggedIn();
return (
<Route
{...rest}
render={(props) => loggedIn === true
? <Component {...props} />
: <Redirect to={{pathname: '/', state: {from: props.location}}} />}
/>
)
}

View File

@ -0,0 +1,7 @@
import React, { useState, useContext } from "react";
export const LoggedInContext = React.createContext(false);
export const useLoggedIn = () => {
return useContext(LoggedInContext);
};