Création/mise à jour basique d'un DAD #15
|
@ -1,22 +1,33 @@
|
|||
import React from 'react';
|
||||
import React, { FunctionComponent } from 'react';
|
||||
import { BrowserRouter, Route, Redirect, Switch } from "react-router-dom";
|
||||
import { HomePage } from './HomePage/HomePage';
|
||||
import { ProfilePage } from './ProfilePage/ProfilePage';
|
||||
import { WorkgroupPage } from './WorkgroupPage/WorkgroupPage';
|
||||
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 {
|
||||
render() {
|
||||
return (
|
||||
export interface AppProps {
|
||||
|
||||
}
|
||||
|
||||
export const App: FunctionComponent<AppProps> = () => {
|
||||
const { user } = useUserProfile();
|
||||
|
||||
return (
|
||||
<LoggedInContext.Provider value={user.id !== ''}>
|
||||
<BrowserRouter>
|
||||
<Switch>
|
||||
<Route path="/" exact component={HomePage} />
|
||||
<Route path="/profile" exact component={ProfilePage} />
|
||||
<Route path="/workgroups/:id" exact component={WorkgroupPage} />
|
||||
<Route path="/decisions/:id" exact component={DecisionSupportFilePage} />
|
||||
<PrivateRoute path="/profile" exact component={ProfilePage} />
|
||||
<PrivateRoute path="/workgroups/:id" exact component={WorkgroupPage} />
|
||||
<PrivateRoute path="/decisions/:id" exact component={DecisionSupportFilePage} />
|
||||
<PrivateRoute path="/dashboard" exact component={DashboardPage} />
|
||||
<Route component={() => <Redirect to="/" />} />
|
||||
</Switch>
|
||||
</BrowserRouter>
|
||||
);
|
||||
}
|
||||
</LoggedInContext.Provider>
|
||||
);
|
||||
}
|
|
@ -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>
|
||||
);
|
||||
}
|
|
@ -72,7 +72,7 @@ export const DecisionSupportFilePage: FunctionComponent<DecisionSupportFilePageP
|
|||
onClick={selectTab.bind(null, 0)}>
|
||||
<a>
|
||||
<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>
|
||||
</li>
|
||||
<li className={`has-background-white ${state.selectedTabIndex === 1 ? 'is-active': ''}`}
|
||||
|
|
|
@ -1,33 +1,20 @@
|
|||
import React from 'react';
|
||||
import React, { useEffect } from 'react';
|
||||
import { Page } from '../Page';
|
||||
import { Dashboard } from './Dashboard';
|
||||
import { useUserProfileQuery } from '../../gql/queries/profile';
|
||||
import { WithLoader } from '../WithLoader';
|
||||
import { WelcomeContent } from './WelcomeContent';
|
||||
import { useUserProfile } from '../../gql/queries/profile';
|
||||
import { useHistory } from 'react-router';
|
||||
|
||||
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 (
|
||||
<Page title={userProfile ? 'Tableau de bord' : 'Accueil'}>
|
||||
<div className="container is-fluid">
|
||||
<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 title="Accueil">
|
||||
<WelcomeContent />
|
||||
</Page>
|
||||
);
|
||||
}
|
|
@ -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>
|
||||
);
|
||||
};
|
|
@ -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}}} />}
|
||||
/>
|
||||
)
|
||||
}
|
|
@ -0,0 +1,7 @@
|
|||
import React, { useState, useContext } from "react";
|
||||
|
||||
export const LoggedInContext = React.createContext(false);
|
||||
|
||||
export const useLoggedIn = () => {
|
||||
return useContext(LoggedInContext);
|
||||
};
|
Loading…
Reference in New Issue