133 lines
4.0 KiB
TypeScript
133 lines
4.0 KiB
TypeScript
import React, { useState } from 'react';
|
|
import './App.css';
|
|
import { BrowserRouter, Routes, Route } from 'react-router-dom';
|
|
import Login from './components/Login';
|
|
import Register from './components/Register';
|
|
import Dog from './components/Dog';
|
|
import Qr from './components/Qr';
|
|
import Impressum from './components/Impressum';
|
|
import "bootstrap/dist/css/bootstrap.min.css";
|
|
import FileUpload from './components/FileUpload';
|
|
import Profil from './components/Profil';
|
|
import useSWR from 'swr';
|
|
import {getUser, logOut} from './services/PhpApi'
|
|
import { TUser } from './context/UserContext';
|
|
import PasswordReset from './components/PasswordReset';
|
|
import WantNewPw from './components/WantNewPw';
|
|
import
|
|
{
|
|
MantineProvider,
|
|
AppShell,
|
|
|
|
Text,
|
|
|
|
|
|
Header,
|
|
MediaQuery,
|
|
Burger,
|
|
Stack
|
|
} from '@mantine/core';
|
|
import { ModalsProvider } from '@mantine/modals';
|
|
import { NotificationsProvider } from '@mantine/notifications';
|
|
import { notificationAlert, notificationError, notificationSuccess } from './services/Notifications';
|
|
import DogNavbar from './components/DogNavbar';
|
|
|
|
const App: React.FC = () =>
|
|
{
|
|
const {data, error, isLoading, mutate} = useSWR("/user", getUser);
|
|
const [opened, setOpened] = useState(false);
|
|
|
|
console.log('App getUser');
|
|
console.log(data);
|
|
|
|
|
|
async function userLogout()
|
|
{
|
|
await logOut();
|
|
mutate();
|
|
notificationSuccess('Abgemeldet!');
|
|
console.log('userLogout');
|
|
|
|
window.location.href = '/dog/';
|
|
}
|
|
|
|
|
|
if (error)
|
|
{
|
|
notificationError(error.message);
|
|
return (
|
|
<>
|
|
<div>failed to load</div>
|
|
</>);
|
|
}
|
|
if (isLoading) return (<div>loading...</div>);
|
|
|
|
let user: TUser | null;
|
|
let hasUser: boolean;
|
|
if(data.success)
|
|
{
|
|
user = data.data;
|
|
hasUser = true;
|
|
}
|
|
else
|
|
{
|
|
user = null;
|
|
hasUser = false;
|
|
}
|
|
|
|
return (
|
|
<MantineProvider withNormalizeCSS withGlobalStyles>
|
|
<NotificationsProvider position="top-center" >
|
|
<div className="App">
|
|
<Stack>
|
|
<div className='h-11'></div> {/* dummy header */}
|
|
<BrowserRouter basename='/dog/'>
|
|
<AppShell
|
|
padding={0}
|
|
fixed
|
|
navbarOffsetBreakpoint="sm"
|
|
navbar={<DogNavbar hidden={!opened} hasUser={user ? true : false} onLogout={userLogout}/>}
|
|
|
|
header={
|
|
<Header height={'44px'} p="md" className='w-16 bg-orange-500'>
|
|
<div className='flex justify-start'>
|
|
<MediaQuery largerThan="sm" styles={{ display: 'none' }}>
|
|
<Burger
|
|
opened={opened}
|
|
onClick={() => setOpened((o) => !o)}
|
|
size="sm"
|
|
|
|
mr="xl"
|
|
/>
|
|
</MediaQuery>
|
|
|
|
<Text></Text>
|
|
</div>
|
|
</Header>}
|
|
>
|
|
<Routes>
|
|
{user && <Route index path="/" element={<Profil/>} />}
|
|
{/* {user && <Route index path="/" element={<Home/>} />} */}
|
|
{!user && <Route index path="/" element={<Login/>} />}
|
|
{user && <Route path="/qr" element={<Qr/>} />}
|
|
{user && <Route path="/d" element={<Dog/>} />}
|
|
<Route path="/:qr_id" element={<Dog/>} />
|
|
<Route path="/login" element={<Login/>} />
|
|
<Route path="/reg" element={<Register/>} />
|
|
<Route path="/impressum" element={<Impressum/>} />
|
|
<Route path="/pwreset/:pwtoken" element={<PasswordReset/>} />
|
|
<Route path="/wantnewpw" element={<WantNewPw/>} />
|
|
{user && <Route path="/upload" element={<FileUpload/>} />}
|
|
{user && <Route path="/profil" element={<Profil/>} />}
|
|
</Routes>
|
|
</AppShell>
|
|
</BrowserRouter>
|
|
</Stack>
|
|
</div>
|
|
</NotificationsProvider>
|
|
</MantineProvider>
|
|
);
|
|
}
|
|
|
|
export default App;
|