import { Box, Paper } from '@material-ui/core';
import { blueGrey, grey, orange } from '@material-ui/core/colors';
import { createMuiTheme, createStyles, makeStyles, Theme } from '@material-ui/core/styles';
import { ThemeProvider } from '@material-ui/styles';
import React, { useState } from 'react';
import { BrowserRouter, Redirect, Route, Switch } from 'react-router-dom';
import BirdmapBar from './components/appBar/BirdmapBar';
import Auth from './components/auth/Auth';
import AuthService from './components/auth/AuthService';
import Dashboard from './components/dashboard/Dashboard';
import Devices from './components/devices/Devices';
import MapContainer from './components/heatmap/Heatmap';
import Logs from './components/logs/Logs';
import DevicesContextProvider from './contexts/DevicesContextProvider';
const theme = createMuiTheme({
palette: {
primary: {
main: blueGrey[900],
dark: grey[400],
},
secondary: {
main: blueGrey[700],
dark: blueGrey[50],
}
},
});
function App() {
const [authenticated, setAuthenticated] = useState(AuthService.isAuthenticated());
const [isAdmin, setIsAdmin] = useState(AuthService.isAdmin());
const onAuthenticated = () => {
setAuthenticated(AuthService.isAuthenticated());
setIsAdmin(AuthService.isAdmin());
};
const AuthComponent = () => {
return (
);
}
const LogsComponent = () => {
return
}
const DashboardComponent = () => {
return ;
};
const DevicesComponent = () => {
return ;
};
const HeatmapComponent = () => {
return (
);
};
const HeaderComponent = () => {
return (
);
}
const PredicateRoute = ({ component: Component, predicate: Predicate, ...rest }: { [x: string]: any, component: any, predicate: any }) => {
return (
);
}
const PublicRoute = ({ component: Component, ...rest }: { [x: string]: any, component: any }) => {
return (
);
}
const PrivateRoute = ({ component: Component, ...rest }: { [x: string]: any, component: any }) => {
return (
);
}
const AdminRoute = ({ component: Component, ...rest }: { [x: string]: any, component: any }) => {
return (
);
}
return (
);
}
export default App;
const PredicateRouteInternal = ({ header: HeaderComponent, body: BodyComponent, predicate: Predicate, ...rest }: { [x: string]: any, header: any, body: any, predicate: any }) => {
return (
(
Predicate
?
:
)} />
);
};
const DefaultLayoutInternal = ({ header: HeaderComponent, body: BodyComponent, ...rest }: { [x: string]: any, header: any, body: any }) => {
const classes = useDefaultLayoutStyles();
return (
);
};
const useDefaultLayoutStyles = makeStyles((theme: Theme) =>
createStyles({
header: {
height: '7%',
},
body: {
backgroundColor: theme.palette.primary.dark,
height: '93%',
}
}),
);