mirror of
https://github.com/dnote/dnote
synced 2026-03-15 06:55:49 +01:00
118 lines
3 KiB
TypeScript
118 lines
3 KiB
TypeScript
/* Copyright (C) 2019, 2020 Monomax Software Pty Ltd
|
|
*
|
|
* This file is part of Dnote.
|
|
*
|
|
* Dnote is free software: you can redistribute it and/or modify
|
|
* it under the terms of the GNU General Public License as published by
|
|
* the Free Software Foundation, either version 3 of the License, or
|
|
* (at your option) any later version.
|
|
*
|
|
* Dnote is distributed in the hope that it will be useful,
|
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
* GNU General Public License for more details.
|
|
*
|
|
* You should have received a copy of the GNU General Public License
|
|
* along with Dnote. If not, see <https://www.gnu.org/licenses/>.
|
|
*/
|
|
|
|
import React, { useState, useEffect } from 'react';
|
|
|
|
import initServices from '../utils/services';
|
|
import { logout } from '../store/auth/actions';
|
|
import { AuthState } from '../store/auth/types';
|
|
import { useSelector, useDispatch } from '../store/hooks';
|
|
import Header from './Header';
|
|
import Home from './Home';
|
|
import Menu from './Menu';
|
|
import Success from './Success';
|
|
import Settings from './Settings';
|
|
import Composer from './Composer';
|
|
|
|
interface Props {}
|
|
|
|
function renderRoutes(path: string, isLoggedIn: boolean) {
|
|
switch (path) {
|
|
case '/success':
|
|
return <Success />;
|
|
case '/': {
|
|
if (isLoggedIn) {
|
|
return <Composer />;
|
|
}
|
|
|
|
return <Home />;
|
|
}
|
|
case '/settings': {
|
|
return <Settings />;
|
|
}
|
|
default:
|
|
return <div>Not found</div>;
|
|
}
|
|
}
|
|
|
|
// useCheckSessionValid ensures that the current session is valid
|
|
function useCheckSessionValid(auth: AuthState) {
|
|
const dispatch = useDispatch();
|
|
|
|
useEffect(() => {
|
|
// if session is expired, clear it
|
|
const now = Math.round(new Date().getTime() / 1000);
|
|
if (auth.sessionKey && auth.sessionKeyExpiry < now) {
|
|
dispatch(logout());
|
|
}
|
|
}, [dispatch, auth.sessionKey, auth.sessionKeyExpiry]);
|
|
}
|
|
|
|
const App: React.FunctionComponent<Props> = () => {
|
|
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
|
const [errMsg, setErrMsg] = useState('');
|
|
|
|
const dispatch = useDispatch();
|
|
const { path, auth, settings } = useSelector(state => ({
|
|
path: state.location.path,
|
|
auth: state.auth,
|
|
settings: state.settings
|
|
}));
|
|
|
|
useCheckSessionValid(auth);
|
|
|
|
const isLoggedIn = Boolean(auth.sessionKey);
|
|
const toggleMenu = () => {
|
|
setIsMenuOpen(!isMenuOpen);
|
|
};
|
|
|
|
const handleLogout = async (done?: Function) => {
|
|
try {
|
|
await initServices(settings.apiUrl).users.signout();
|
|
dispatch(logout());
|
|
|
|
if (done) {
|
|
done();
|
|
}
|
|
} catch (e) {
|
|
setErrMsg(e.message);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="container">
|
|
<Header toggleMenu={toggleMenu} isShowingMenu={isMenuOpen} />
|
|
|
|
{isMenuOpen && (
|
|
<Menu
|
|
toggleMenu={toggleMenu}
|
|
loggedIn={isLoggedIn}
|
|
onLogout={handleLogout}
|
|
/>
|
|
)}
|
|
|
|
<main>
|
|
{errMsg && <div className="alert error">{errMsg}</div>}
|
|
|
|
{renderRoutes(path, isLoggedIn)}
|
|
</main>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default App;
|