diff options
| author | crupest <crupest@outlook.com> | 2020-07-26 15:02:55 +0800 |
|---|---|---|
| committer | crupest <crupest@outlook.com> | 2020-07-26 15:02:55 +0800 |
| commit | b78d21a524f7a11ad29b4bd230f23825f80c3ed7 (patch) | |
| tree | 88bfe8d4c5298f61a90c501933784885ec9ce77f /Timeline/ClientApp/src/app/admin/Admin.tsx | |
| parent | 886ab2a222bc503156542988edc7be5062f6e7b1 (diff) | |
| download | timeline-b78d21a524f7a11ad29b4bd230f23825f80c3ed7.tar.gz timeline-b78d21a524f7a11ad29b4bd230f23825f80c3ed7.tar.bz2 timeline-b78d21a524f7a11ad29b4bd230f23825f80c3ed7.zip | |
Merge front end repo
Diffstat (limited to 'Timeline/ClientApp/src/app/admin/Admin.tsx')
| -rw-r--r-- | Timeline/ClientApp/src/app/admin/Admin.tsx | 78 |
1 files changed, 78 insertions, 0 deletions
diff --git a/Timeline/ClientApp/src/app/admin/Admin.tsx b/Timeline/ClientApp/src/app/admin/Admin.tsx new file mode 100644 index 00000000..af07dd2b --- /dev/null +++ b/Timeline/ClientApp/src/app/admin/Admin.tsx @@ -0,0 +1,78 @@ +import React, { Fragment } from 'react';
+import { Nav, NavItem, NavLink } from 'reactstrap';
+import {
+ Redirect,
+ Route,
+ Switch,
+ useRouteMatch,
+ useHistory
+} from 'react-router';
+import classnames from 'classnames';
+
+import AppBar from '../common/AppBar';
+import UserAdmin from './UserAdmin';
+
+import { UserWithToken } from '../data/user';
+
+interface AdminProps {
+ user: UserWithToken;
+}
+
+const Admin: React.FC<AdminProps> = props => {
+ const match = useRouteMatch();
+ const history = useHistory();
+ type TabNames = 'users' | 'more';
+
+ const tabName = history.location.pathname.replace(match.path + '/', '');
+
+ function toggle(newTab: TabNames): void {
+ history.push(`${match.url}/${newTab}`);
+ }
+
+ const createRoute = (
+ name: string,
+ body: React.ReactNode
+ ): React.ReactNode => {
+ return (
+ <Route path={`${match.path}/${name}`}>
+ <AppBar />
+ <div style={{ height: 56 }} className="flex-fix-length" />
+ <Nav tabs>
+ <NavItem>
+ <NavLink
+ className={classnames({ active: tabName === 'users' })}
+ onClick={() => {
+ toggle('users');
+ }}
+ >
+ Users
+ </NavLink>
+ </NavItem>
+ <NavItem>
+ <NavLink
+ className={classnames({ active: tabName === 'more' })}
+ onClick={() => {
+ toggle('more');
+ }}
+ >
+ More
+ </NavLink>
+ </NavItem>
+ </Nav>
+ {body}
+ </Route>
+ );
+ };
+
+ return (
+ <Fragment>
+ <Switch>
+ <Redirect from={match.path} to={`${match.path}/users`} exact />
+ {createRoute('users', <UserAdmin user={props.user} />)}
+ {createRoute('more', <div>More Page Works</div>)}
+ </Switch>
+ </Fragment>
+ );
+};
+
+export default Admin;
|