2020-01-23 02:54:33 +00:00
|
|
|
import React, { useState, useEffect, useReducer, useContext } from 'react';
|
|
|
|
import { BrowserRouter as Router, Switch, Route, Link, useParams, useHistory } from 'react-router-dom';
|
2020-01-23 23:42:32 +00:00
|
|
|
import './semantic-ui/semantic.min.css';
|
|
|
|
import './light.css';
|
|
|
|
import { Container, Divider, Dropdown, Form, Grid, Header, Icon, Image, Menu, Message, Segment, Table } from 'semantic-ui-react';
|
2020-04-05 22:00:33 +00:00
|
|
|
import Darkmode from 'darkmode-js';
|
2020-01-31 23:47:52 +00:00
|
|
|
import { isAdmin, requester } from './utils.js';
|
2020-02-17 00:19:44 +00:00
|
|
|
import { ManageScroll } from './ManageScroll.js';
|
2020-01-09 22:11:56 +00:00
|
|
|
import { Home } from './Home.js';
|
2020-01-12 08:16:09 +00:00
|
|
|
import { Account } from './Account.js';
|
2020-01-09 22:11:56 +00:00
|
|
|
import { Transactions, TransactionDetail } from './Transactions.js';
|
2020-02-21 07:46:13 +00:00
|
|
|
import { Paymaster } from './Paymaster.js';
|
2020-01-09 22:11:56 +00:00
|
|
|
import { Cards } from './Cards.js';
|
2020-01-10 00:29:52 +00:00
|
|
|
import { Training } from './Training.js';
|
2020-02-22 05:22:39 +00:00
|
|
|
import { AdminTransactions } from './AdminTransactions.js';
|
2020-02-16 04:57:55 +00:00
|
|
|
import { Admin } from './Admin.js';
|
2020-02-17 03:28:17 +00:00
|
|
|
import { Paste } from './Paste.js';
|
2020-01-10 06:24:37 +00:00
|
|
|
import { Courses, CourseDetail } from './Courses.js';
|
|
|
|
import { Classes, ClassDetail } from './Classes.js';
|
2020-01-11 23:53:42 +00:00
|
|
|
import { Members, MemberDetail } from './Members.js';
|
2020-04-21 21:15:04 +00:00
|
|
|
import { Charts } from './Charts.js';
|
2020-06-20 03:50:09 +00:00
|
|
|
import { PasswordReset, ConfirmReset } from './PasswordReset.js';
|
2020-01-09 22:11:56 +00:00
|
|
|
import { NotFound, PleaseLogin } from './Misc.js';
|
2020-01-11 08:56:31 +00:00
|
|
|
import { Footer } from './Footer.js';
|
2020-01-09 09:15:01 +00:00
|
|
|
|
2020-01-06 23:32:29 +00:00
|
|
|
function App() {
|
2020-01-08 23:43:59 +00:00
|
|
|
const [token, setToken] = useState(localStorage.getItem('token', ''));
|
|
|
|
const [user, setUser] = useState(JSON.parse(localStorage.getItem('user', 'false')));
|
2020-01-18 01:27:56 +00:00
|
|
|
const [refreshCount, refreshUser] = useReducer(x => x + 1, 0);
|
2020-01-21 23:45:54 +00:00
|
|
|
const [yousure, setYousure] = useState(false);
|
2020-01-23 02:54:33 +00:00
|
|
|
const history = useHistory();
|
2020-01-08 23:43:59 +00:00
|
|
|
|
2020-01-09 09:04:32 +00:00
|
|
|
function setTokenCache(x) {
|
2020-01-08 23:43:59 +00:00
|
|
|
setToken(x);
|
|
|
|
localStorage.setItem('token', x);
|
|
|
|
}
|
|
|
|
|
2020-01-09 09:04:32 +00:00
|
|
|
function setUserCache(x) {
|
2020-01-08 23:43:59 +00:00
|
|
|
setUser(x);
|
|
|
|
localStorage.setItem('user', JSON.stringify(x));
|
|
|
|
}
|
|
|
|
|
|
|
|
useEffect(() => {
|
2020-01-13 01:03:02 +00:00
|
|
|
requester('/user/', 'GET', token)
|
2020-01-08 23:43:59 +00:00
|
|
|
.then(res => {
|
|
|
|
setUserCache(res);
|
|
|
|
})
|
|
|
|
.catch(err => {
|
|
|
|
console.log(err);
|
2020-02-04 08:32:01 +00:00
|
|
|
setUserCache(null);
|
2020-01-08 23:43:59 +00:00
|
|
|
});
|
2020-01-18 01:27:56 +00:00
|
|
|
}, [token, refreshCount]);
|
2020-01-08 23:43:59 +00:00
|
|
|
|
2020-01-09 09:04:32 +00:00
|
|
|
function logout() {
|
2020-01-21 23:45:54 +00:00
|
|
|
if (yousure) {
|
|
|
|
setTokenCache('');
|
2020-02-04 08:32:01 +00:00
|
|
|
setUserCache(null);
|
2020-01-21 23:45:54 +00:00
|
|
|
setYousure(false);
|
2020-01-23 02:54:33 +00:00
|
|
|
history.push('/');
|
2020-01-23 03:32:54 +00:00
|
|
|
window.scrollTo(0, 0);
|
2020-01-21 23:45:54 +00:00
|
|
|
} else {
|
|
|
|
setYousure(true);
|
|
|
|
}
|
2020-01-08 23:43:59 +00:00
|
|
|
}
|
|
|
|
|
2020-02-04 08:32:01 +00:00
|
|
|
useEffect(() => {
|
|
|
|
user && requester('/ping/', 'POST', token, {})
|
|
|
|
.then()
|
|
|
|
.catch(err => {
|
|
|
|
console.log(err);
|
|
|
|
if (err.data && err.data.detail === 'Invalid token.') {
|
|
|
|
logout(); // You Sure?
|
|
|
|
logout();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}, [history.location]);
|
|
|
|
|
2020-04-05 22:00:33 +00:00
|
|
|
useEffect(() => {
|
|
|
|
const options = {
|
|
|
|
bottom: '16px',
|
|
|
|
right: '16px',
|
2020-04-16 05:04:48 +00:00
|
|
|
buttonColorDark: '#666',
|
|
|
|
buttonColorLight: '#aaa',
|
|
|
|
label: '🌙',
|
2020-04-05 22:00:33 +00:00
|
|
|
}
|
|
|
|
const darkmode = new Darkmode(options);
|
|
|
|
darkmode.showWidget();
|
|
|
|
}, []);
|
|
|
|
|
2020-01-07 02:10:25 +00:00
|
|
|
return (
|
2020-01-23 02:54:33 +00:00
|
|
|
<div>
|
2020-02-17 00:19:44 +00:00
|
|
|
<ManageScroll />
|
|
|
|
|
2020-01-11 08:56:31 +00:00
|
|
|
<div className='content-wrap'>
|
|
|
|
<div className='content-wrap-inside'>
|
2020-01-13 01:03:02 +00:00
|
|
|
|
2020-01-07 07:59:12 +00:00
|
|
|
<Container>
|
2020-01-11 23:53:42 +00:00
|
|
|
<div className='hero'>
|
2020-02-09 08:18:44 +00:00
|
|
|
<Link to='/'>
|
|
|
|
<img src='/logo-long.svg' className='logo-long' />
|
|
|
|
</Link>
|
2020-01-08 23:43:59 +00:00
|
|
|
</div>
|
2020-01-07 07:59:12 +00:00
|
|
|
</Container>
|
|
|
|
|
|
|
|
<Menu>
|
2020-01-09 07:38:49 +00:00
|
|
|
<Container>
|
2020-01-08 23:43:59 +00:00
|
|
|
<Menu.Item
|
2020-01-09 07:38:49 +00:00
|
|
|
content='Home'
|
|
|
|
as={Link}
|
|
|
|
to='/'
|
2020-01-08 23:43:59 +00:00
|
|
|
/>
|
2020-01-09 07:38:49 +00:00
|
|
|
|
2020-01-11 23:53:42 +00:00
|
|
|
<Dropdown item text='Member' id='ps-menu'>
|
2020-01-09 07:38:49 +00:00
|
|
|
<Dropdown.Menu>
|
2020-01-11 23:53:42 +00:00
|
|
|
<Dropdown.Item
|
2020-01-12 08:16:09 +00:00
|
|
|
content='Account'
|
2020-01-11 23:53:42 +00:00
|
|
|
as={Link}
|
2020-01-12 08:16:09 +00:00
|
|
|
to='/account'
|
2020-01-11 23:53:42 +00:00
|
|
|
/>
|
2020-01-09 07:38:49 +00:00
|
|
|
<Dropdown.Item
|
|
|
|
content='Transactions'
|
2020-01-09 09:04:32 +00:00
|
|
|
as={Link}
|
|
|
|
to='/transactions'
|
2020-01-09 07:38:49 +00:00
|
|
|
/>
|
2020-02-21 07:46:13 +00:00
|
|
|
<Dropdown.Item
|
|
|
|
content='Paymaster'
|
|
|
|
as={Link}
|
|
|
|
to='/paymaster'
|
|
|
|
/>
|
2020-01-10 00:29:52 +00:00
|
|
|
<Dropdown.Item
|
|
|
|
content='Training'
|
|
|
|
as={Link}
|
|
|
|
to='/training'
|
|
|
|
/>
|
2020-01-09 07:38:49 +00:00
|
|
|
<Dropdown.Item
|
2020-03-08 01:12:12 +00:00
|
|
|
content='Cards / Access'
|
2020-01-09 10:44:44 +00:00
|
|
|
as={Link}
|
|
|
|
to='/cards'
|
2020-01-09 07:38:49 +00:00
|
|
|
/>
|
|
|
|
</Dropdown.Menu>
|
|
|
|
</Dropdown>
|
|
|
|
|
|
|
|
<Dropdown item text='Space' id='ps-menu'>
|
|
|
|
<Dropdown.Menu>
|
|
|
|
<Dropdown.Item
|
2020-01-11 23:53:42 +00:00
|
|
|
content='Member List'
|
2020-01-11 02:50:55 +00:00
|
|
|
as={Link}
|
|
|
|
to='/members'
|
2020-01-09 07:38:49 +00:00
|
|
|
/>
|
|
|
|
<Dropdown.Item
|
|
|
|
content='Courses'
|
2020-01-10 06:24:37 +00:00
|
|
|
as={Link}
|
|
|
|
to='/courses'
|
|
|
|
/>
|
|
|
|
<Dropdown.Item
|
|
|
|
content='Classes'
|
|
|
|
as={Link}
|
|
|
|
to='/classes'
|
2020-01-09 07:38:49 +00:00
|
|
|
/>
|
2020-02-17 03:28:17 +00:00
|
|
|
<Dropdown.Item
|
|
|
|
content='Transporter'
|
|
|
|
as={Link}
|
|
|
|
to='/paste'
|
|
|
|
/>
|
2020-01-31 23:47:52 +00:00
|
|
|
|
2020-02-16 04:57:55 +00:00
|
|
|
{user && isAdmin(user) && <Dropdown.Item
|
|
|
|
content='Admin'
|
|
|
|
as={Link}
|
|
|
|
to='/admin'
|
|
|
|
/>}
|
|
|
|
|
2020-01-31 23:47:52 +00:00
|
|
|
{user && isAdmin(user) && <Dropdown.Item
|
2020-02-17 03:28:17 +00:00
|
|
|
content='Admin Txs'
|
2020-01-31 23:47:52 +00:00
|
|
|
as={Link}
|
|
|
|
to='/admintrans'
|
|
|
|
/>}
|
2020-01-09 07:38:49 +00:00
|
|
|
</Dropdown.Menu>
|
|
|
|
</Dropdown>
|
|
|
|
|
|
|
|
{user && <Menu.Menu position='right'>
|
|
|
|
<Menu.Item
|
2020-01-21 23:45:54 +00:00
|
|
|
content={yousure ? 'You Sure?' : 'Log Out'}
|
2020-01-09 07:38:49 +00:00
|
|
|
onClick={logout}
|
|
|
|
icon='cancel'
|
|
|
|
/>
|
|
|
|
<Menu.Item fitted content='' />
|
|
|
|
</Menu.Menu>}
|
|
|
|
</Container>
|
2020-01-07 07:59:12 +00:00
|
|
|
</Menu>
|
|
|
|
|
2020-01-09 07:38:49 +00:00
|
|
|
<Route exact path='/'>
|
2020-01-18 01:27:56 +00:00
|
|
|
<Home token={token} setTokenCache={setTokenCache} user={user} refreshUser={refreshUser} />
|
2020-01-09 07:38:49 +00:00
|
|
|
</Route>
|
|
|
|
|
2020-01-09 10:44:44 +00:00
|
|
|
<div className='topPadding'>
|
2020-02-17 03:28:17 +00:00
|
|
|
<Switch>
|
2020-06-23 21:01:21 +00:00
|
|
|
<Route path='/password/reset/confirm/:uid/:token'>
|
2020-06-20 03:50:09 +00:00
|
|
|
<ConfirmReset />
|
|
|
|
</Route>
|
2020-06-23 21:01:21 +00:00
|
|
|
<Route path='/password/reset'>
|
2020-06-20 03:50:09 +00:00
|
|
|
<PasswordReset />
|
|
|
|
</Route>
|
|
|
|
|
2020-02-17 03:28:17 +00:00
|
|
|
<Route path='/paste'>
|
|
|
|
<Paste token={token} />
|
|
|
|
</Route>
|
2020-01-09 10:44:44 +00:00
|
|
|
|
2020-04-21 21:15:04 +00:00
|
|
|
<Route path='/charts'>
|
|
|
|
<Charts />
|
|
|
|
</Route>
|
|
|
|
|
2020-02-17 03:28:17 +00:00
|
|
|
{user && user.member.set_details ?
|
|
|
|
<Switch>
|
|
|
|
<Route path='/account'>
|
|
|
|
<Account token={token} user={user} refreshUser={refreshUser} />
|
|
|
|
</Route>
|
2020-01-09 10:44:44 +00:00
|
|
|
|
2020-02-17 03:28:17 +00:00
|
|
|
<Route path='/transactions/:id'>
|
|
|
|
<TransactionDetail token={token} user={user} refreshUser={refreshUser} />
|
|
|
|
</Route>
|
|
|
|
<Route path='/transactions'>
|
|
|
|
<Transactions user={user} />
|
|
|
|
</Route>
|
2020-01-10 00:29:52 +00:00
|
|
|
|
2020-02-21 07:46:13 +00:00
|
|
|
<Route path='/paymaster'>
|
|
|
|
<Paymaster user={user} />
|
|
|
|
</Route>
|
|
|
|
|
2020-02-17 03:28:17 +00:00
|
|
|
<Route path='/cards'>
|
2020-04-23 04:19:46 +00:00
|
|
|
<Cards token={token} user={user} />
|
2020-02-17 03:28:17 +00:00
|
|
|
</Route>
|
2020-01-10 06:24:37 +00:00
|
|
|
|
2020-02-17 03:28:17 +00:00
|
|
|
<Route path='/training'>
|
|
|
|
<Training user={user} />
|
|
|
|
</Route>
|
2020-01-10 06:24:37 +00:00
|
|
|
|
2020-02-17 03:28:17 +00:00
|
|
|
<Route path='/courses/:id'>
|
|
|
|
<CourseDetail token={token} user={user} />
|
|
|
|
</Route>
|
|
|
|
<Route path='/courses'>
|
|
|
|
<Courses token={token} user={user} />
|
|
|
|
</Route>
|
2020-01-11 02:50:55 +00:00
|
|
|
|
2020-02-17 03:28:17 +00:00
|
|
|
<Route path='/classes/:id'>
|
|
|
|
<ClassDetail token={token} user={user} refreshUser={refreshUser} />
|
|
|
|
</Route>
|
|
|
|
<Route path='/classes'>
|
|
|
|
<Classes token={token} />
|
2020-02-16 04:57:55 +00:00
|
|
|
</Route>
|
|
|
|
|
2020-02-17 03:28:17 +00:00
|
|
|
<Route path='/members/:id'>
|
|
|
|
<MemberDetail token={token} user={user} />
|
2020-01-31 23:47:52 +00:00
|
|
|
</Route>
|
2020-02-17 03:28:17 +00:00
|
|
|
<Route path='/members'>
|
|
|
|
<Members token={token} />
|
|
|
|
</Route>
|
|
|
|
|
|
|
|
{user && isAdmin(user) &&
|
|
|
|
<Route path='/admin'>
|
|
|
|
<Admin token={token} user={user} />
|
|
|
|
</Route>
|
|
|
|
}
|
2020-01-31 23:47:52 +00:00
|
|
|
|
2020-02-17 03:28:17 +00:00
|
|
|
{user && isAdmin(user) &&
|
|
|
|
<Route path='/admintrans'>
|
2020-02-22 05:22:39 +00:00
|
|
|
<AdminTransactions token={token} user={user} />
|
2020-02-17 03:28:17 +00:00
|
|
|
</Route>
|
|
|
|
}
|
|
|
|
|
|
|
|
<Route path='/:page'>
|
|
|
|
<NotFound />
|
|
|
|
</Route>
|
|
|
|
</Switch>
|
|
|
|
:
|
2020-01-09 10:44:44 +00:00
|
|
|
<Route path='/:page'>
|
2020-02-17 03:28:17 +00:00
|
|
|
<PleaseLogin />
|
2020-01-09 10:44:44 +00:00
|
|
|
</Route>
|
2020-02-17 03:28:17 +00:00
|
|
|
}
|
|
|
|
</Switch>
|
2020-01-09 10:44:44 +00:00
|
|
|
</div>
|
2020-01-13 01:03:02 +00:00
|
|
|
|
2020-01-11 08:56:31 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
2020-01-09 09:04:32 +00:00
|
|
|
|
2020-01-11 08:56:31 +00:00
|
|
|
<Footer />
|
2020-01-23 02:54:33 +00:00
|
|
|
</div>
|
2020-01-09 07:38:49 +00:00
|
|
|
)
|
|
|
|
};
|
2020-01-06 23:32:29 +00:00
|
|
|
|
|
|
|
export default App;
|