95 lines
2.8 KiB
TypeScript
95 lines
2.8 KiB
TypeScript
import React, { Dispatch, SetStateAction, useEffect } from 'react';
|
||
import {
|
||
Link,
|
||
Redirect,
|
||
Route,
|
||
Switch,
|
||
useLocation,
|
||
useRouteMatch
|
||
} from 'react-router-dom';
|
||
|
||
import { ILoadingState } from '../../types';
|
||
import LogInForm from './LogInForm';
|
||
import UploadForm from './UploadForm';
|
||
import './main.css';
|
||
import RemoveList from './RemoveList';
|
||
|
||
type props = {
|
||
token: string | null;
|
||
setToken: Dispatch<SetStateAction<string | null>>;
|
||
setLoading: Dispatch<SetStateAction<ILoadingState>>;
|
||
};
|
||
|
||
const Admin: React.FC<props> = ({ token, setToken, setLoading }) => {
|
||
const { path, url } = useRouteMatch();
|
||
|
||
const { pathname } = useLocation();
|
||
|
||
useEffect(() => {
|
||
setLoading({ fetching: false, error: '' });
|
||
}, [setLoading]);
|
||
|
||
return (
|
||
<div id="admin">
|
||
<nav>
|
||
<ul>
|
||
<li
|
||
className={
|
||
!token || pathname === `${url}/u` ? 'current' : ''
|
||
}
|
||
>
|
||
<Link to={`${url}/u`}>Добавить</Link>
|
||
</li>
|
||
<li
|
||
className={
|
||
!token || pathname === `${url}/r` ? 'current' : ''
|
||
}
|
||
>
|
||
<Link to={`${url}/r`}>Удалить</Link>
|
||
</li>
|
||
</ul>
|
||
{token ? (
|
||
<button
|
||
onClick={() => {
|
||
localStorage.removeItem('token');
|
||
setToken(null);
|
||
}}
|
||
id="logSwitch"
|
||
>
|
||
<Link to={`${url}/l`}>Выход</Link>
|
||
</button>
|
||
) : (
|
||
''
|
||
)}
|
||
</nav>
|
||
<Switch>
|
||
<Route path={`${path}/u`}>
|
||
<UploadForm
|
||
setLoading={setLoading}
|
||
token={token}
|
||
/>
|
||
</Route>
|
||
<Route path={`${path}/l`}>
|
||
<LogInForm
|
||
setLoading={setLoading}
|
||
token={token}
|
||
setToken={setToken}
|
||
/>
|
||
</Route>
|
||
<Route path={`${path}/r`}>
|
||
<RemoveList
|
||
setLoading={setLoading}
|
||
token={token}
|
||
setToken={setToken}
|
||
/>
|
||
</Route>
|
||
<Route path={`${path}/`}>
|
||
<Redirect to={`${path}/l`} />
|
||
</Route>
|
||
</Switch>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default Admin;
|