import React, { useState } from 'react'; import { ThemeProvider } from '@material-ui/core/styles'; import { Switch, Route, useHistory } from 'react-router-dom'; import CssBaseline from '@material-ui/core/CssBaseline'; import { useDispatch, useSelector } from 'react-redux'; import { makeStyles, LinearProgress, useMediaQuery } from '@material-ui/core'; import MainPage from './main/MainPage'; import RouteReportPage from './reports/RouteReportPage'; import ServerPage from './settings/ServerPage'; import UsersPage from './settings/UsersPage'; import DevicePage from './settings/DevicePage'; import UserPage from './settings/UserPage'; import SocketController from './SocketController'; import NotificationsPage from './settings/NotificationsPage'; import NotificationPage from './settings/NotificationPage'; import GroupsPage from './settings/GroupsPage'; import GroupPage from './settings/GroupPage'; import PositionPage from './main/PositionPage'; import EventReportPage from './reports/EventReportPage'; import ReplayPage from './other/ReplayPage'; import TripReportPage from './reports/TripReportPage'; import StopReportPage from './reports/StopReportPage'; import SummaryReportPage from './reports/SummaryReportPage'; import ChartReportPage from './reports/ChartReportPage'; import DriversPage from './settings/DriversPage'; import DriverPage from './settings/DriverPage'; import CalendarsPage from './settings/CalendarsPage'; import CalendarPage from './settings/CalendarPage'; import ComputedAttributesPage from './settings/ComputedAttributesPage'; import ComputedAttributePage from './settings/ComputedAttributePage'; import MaintenancesPage from './settings/MaintenancesPage'; import MaintenancePage from './settings/MaintenancePage'; import CommandsPage from './settings/CommandsPage'; import CommandPage from './settings/CommandPage'; import StatisticsPage from './reports/StatisticsPage'; import CachingController from './CachingController'; import LoginPage from './login/LoginPage'; import RegisterPage from './login/RegisterPage'; import ResetPasswordPage from './login/ResetPasswordPage'; import theme from './common/theme'; import GeofencesPage from './other/GeofencesPage'; import GeofencePage from './settings/GeofencePage'; import { LocalizationProvider } from './common/components/LocalizationProvider'; import useQuery from './common/util/useQuery'; import { useEffectAsync } from './reactHelper'; import { devicesActions } from './store'; import EventPage from './other/EventPage'; import PreferencesPage from './settings/PreferencesPage'; import BottomMenu from './common/components/BottomMenu'; import AccumulatorsPage from './settings/AccumulatorsPage'; import CommandSendPage from './settings/CommandSendPage'; const useStyles = makeStyles(() => ({ page: { flexGrow: 1, overflow: 'auto', }, menu: { zIndex: 4, }, })); const App = () => { const history = useHistory(); const dispatch = useDispatch(); const classes = useStyles(); const desktop = useMediaQuery(theme.breakpoints.up('md')); const initialized = useSelector((state) => !!state.session.server && !!state.session.user); const [redirectsHandled, setRedirectsHandled] = useState(false); const query = useQuery(); useEffectAsync(async () => { if (query.get('token')) { const token = query.get('token'); await fetch(`/api/session?token=${encodeURIComponent(token)}`); history.push('/'); } else if (query.get('deviceId')) { const deviceId = query.get('deviceId'); const response = await fetch(`/api/devices?uniqueId=${deviceId}`); if (response.ok) { const items = await response.json(); if (items.length > 0) { dispatch(devicesActions.select(items[0].id)); } } history.push('/'); } else if (query.get('eventId')) { const eventId = parseInt(query.get('eventId'), 10); history.push(`/event/${eventId}`); } else { setRedirectsHandled(true); } }, [query]); return (!redirectsHandled ? () : ( {!initialized ? () : ( <>
{!desktop && (
)} )}
)); }; export default App;