85 lines
3.1 KiB
TypeScript
85 lines
3.1 KiB
TypeScript
import React, { FunctionComponent, useState, useEffect } 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, getSavedLoggedIn, saveLoggedIn } from '../hooks/useLoggedIn';
|
|
import { PrivateRoute } from './PrivateRoute';
|
|
import { useKonamiCode } from '../hooks/useKonamiCode';
|
|
import { Modal } from './Modal';
|
|
import { createClient } from '../util/apollo';
|
|
import { ApolloProvider } from '@apollo/client';
|
|
import { LogoutPage } from './LogoutPage';
|
|
import { UnauthorizedPage } from './UnauthorizedPage/UnauthorizedPage';
|
|
import { ConferencePage } from './ConferencePage/ConferencePage';
|
|
|
|
export interface AppProps {
|
|
|
|
}
|
|
|
|
|
|
|
|
export const App: FunctionComponent<AppProps> = () => {
|
|
const [ loggedIn, setLoggedIn ] = useState(getSavedLoggedIn());
|
|
|
|
const client = createClient((loggedIn) => {
|
|
setLoggedIn(loggedIn);
|
|
});
|
|
|
|
useEffect(() => {
|
|
saveLoggedIn(loggedIn);
|
|
}, [loggedIn]);
|
|
|
|
const [ showBoneyM, setShowBoneyM ] = useState(false);
|
|
useKonamiCode(() => setShowBoneyM(true));
|
|
|
|
return (
|
|
<ApolloProvider client={client}>
|
|
<LoggedInContext.Provider value={loggedIn}>
|
|
<UserSessionCheck setLoggedIn={setLoggedIn} />
|
|
<BrowserRouter>
|
|
<Switch>
|
|
<Route path="/" exact component={HomePage} />
|
|
<Route path="/unauthorized" exact component={UnauthorizedPage} />
|
|
<PrivateRoute path="/profile" exact component={ProfilePage} />
|
|
<PrivateRoute path="/conference" exact component={ConferencePage} />
|
|
<PrivateRoute path="/workgroups/:id" exact component={WorkgroupPage} />
|
|
<PrivateRoute path="/decisions/:id" component={DecisionSupportFilePage} />
|
|
<PrivateRoute path="/dashboard" exact component={DashboardPage} />
|
|
<PrivateRoute path="/logout" exact component={LogoutPage} />
|
|
<Route component={() => <Redirect to="/" />} />
|
|
</Switch>
|
|
</BrowserRouter>
|
|
{
|
|
showBoneyM ?
|
|
<Modal active={true} showCloseButton={true} onClose={() => setShowBoneyM(false)}>
|
|
<iframe width={560} height={315}
|
|
frameBorder={0}
|
|
allowFullScreen={true}
|
|
src="https://www.youtube.com/embed/uVzT5QEEQ2c?autoplay=1" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture">
|
|
</iframe>
|
|
</Modal> :
|
|
null
|
|
}
|
|
</LoggedInContext.Provider>
|
|
</ApolloProvider>
|
|
);
|
|
}
|
|
|
|
interface UserSessionCheckProps {
|
|
setLoggedIn: (boolean) => void
|
|
}
|
|
|
|
const UserSessionCheck: FunctionComponent<UserSessionCheckProps> = ({ setLoggedIn }) => {
|
|
const { user, loading } = useUserProfile();
|
|
|
|
useEffect(() => {
|
|
if (loading) return;
|
|
setLoggedIn(user && user.id !== '');
|
|
}, [user]);
|
|
|
|
return null;
|
|
}; |