78 lines
2.2 KiB
JavaScript
78 lines
2.2 KiB
JavaScript
import {createBrowserRouter, RouterProvider} from "react-router-dom"
|
|
import Station from "./Station"
|
|
import {createTheme, CssBaseline, ThemeProvider, useMediaQuery} from "@mui/material"
|
|
import React, {useMemo} from "react"
|
|
import {frFR, LocalizationProvider} from "@mui/x-date-pickers"
|
|
import {AdapterDayjs} from "@mui/x-date-pickers/AdapterDayjs"
|
|
import 'dayjs/locale/fr'
|
|
import './App.css'
|
|
import {QueryClient, QueryClientProvider} from "@tanstack/react-query";
|
|
import {createSyncStoragePersister} from "@tanstack/query-sync-storage-persister";
|
|
import {persistQueryClient} from "@tanstack/react-query-persist-client";
|
|
import Home from "./Home";
|
|
|
|
function App() {
|
|
const router = createBrowserRouter([
|
|
{
|
|
path: "/",
|
|
element: <Home />,
|
|
},
|
|
{
|
|
path: "/station/:stopId",
|
|
element: <Station />
|
|
}
|
|
])
|
|
|
|
const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
|
|
const theme = useMemo(
|
|
() =>
|
|
createTheme({
|
|
palette: {
|
|
mode: prefersDarkMode ? 'dark' : 'light',
|
|
sncf: {
|
|
departures: {
|
|
dark: "#003A79",
|
|
light: "#0064AB",
|
|
},
|
|
arrivals: {
|
|
dark: "#1F5628",
|
|
light: "#187936",
|
|
},
|
|
}
|
|
},
|
|
}),
|
|
[prefersDarkMode],
|
|
);
|
|
|
|
const queryClient = new QueryClient({
|
|
defaultOptions: {
|
|
queries: {
|
|
gcTime: 1000 * 60 * 60 * 24, // 3 hours
|
|
staleTime: 1000 * 60 * 60 * 3, // 3 hours
|
|
notifyOnChangeProps: ['data', 'error'],
|
|
},
|
|
},
|
|
})
|
|
|
|
const localStoragePersister = createSyncStoragePersister({
|
|
storage: window.localStorage,
|
|
})
|
|
|
|
persistQueryClient({
|
|
queryClient,
|
|
persister: localStoragePersister,
|
|
})
|
|
|
|
return <>
|
|
<ThemeProvider theme={theme}>
|
|
<CssBaseline />
|
|
<LocalizationProvider dateAdapter={AdapterDayjs} localeText={frFR.components.MuiLocalizationProvider.defaultProps.localeText} adapterLocale="fr">
|
|
<QueryClientProvider client={queryClient}>
|
|
<RouterProvider router={router} />
|
|
</QueryClientProvider>
|
|
</LocalizationProvider>
|
|
</ThemeProvider>
|
|
</>
|
|
}
|
|
|
|
export default App; |