2022-08-27 01:03:37 +02:00
|
|
|
import '../styles/globals.css'
|
2023-04-18 09:40:31 +02:00
|
|
|
import {SessionProvider, useSession} from "next-auth/react"
|
2023-04-18 10:13:38 +02:00
|
|
|
import {CircularProgress, createTheme, CssBaseline, ThemeProvider} from "@mui/material";
|
2022-08-28 13:57:21 +02:00
|
|
|
import ReactGA from "react-ga4";
|
2023-04-18 09:23:55 +02:00
|
|
|
import Head from "next/head";
|
2023-04-17 20:50:24 +02:00
|
|
|
import {SnackbarProvider} from "notistack";
|
2023-04-18 09:23:55 +02:00
|
|
|
import Header from "../components/Header";
|
2023-04-17 20:50:24 +02:00
|
|
|
import Footer from "../components/Footer";
|
2023-04-18 09:23:55 +02:00
|
|
|
import {Provider} from "react-redux";
|
|
|
|
|
import {PersistGate} from "redux-persist/integration/react";
|
2023-04-18 09:40:31 +02:00
|
|
|
import {configureStore} from "@reduxjs/toolkit";
|
|
|
|
|
import {FLUSH, PAUSE, PERSIST, persistReducer, persistStore, PURGE, REGISTER, REHYDRATE} from "redux-persist";
|
|
|
|
|
import configReducer from "../libs/reducers/configReducer";
|
|
|
|
|
import storage from 'redux-persist/lib/storage'
|
2023-04-18 10:13:38 +02:00
|
|
|
import createCloudStorage from "../libs/storage/cloudStorage";
|
2023-04-18 11:00:08 +02:00
|
|
|
import dynamic from "next/dynamic";
|
2023-04-18 13:27:50 +02:00
|
|
|
import {useEffect, useState} from "react";
|
2023-04-18 09:23:55 +02:00
|
|
|
|
|
|
|
|
ReactGA.initialize("G-XNCFQVHQMX");
|
2022-08-27 07:46:46 +02:00
|
|
|
|
|
|
|
|
const theme = createTheme({
|
|
|
|
|
palette: {
|
|
|
|
|
mode: 'dark',
|
2022-08-29 16:49:55 +02:00
|
|
|
white: {
|
|
|
|
|
main: '#eee',
|
2023-04-18 14:14:23 +02:00
|
|
|
contrastText: '#222',
|
2022-08-29 16:49:55 +02:00
|
|
|
},
|
2022-08-27 07:46:46 +02:00
|
|
|
},
|
|
|
|
|
typography: {
|
|
|
|
|
fontFamily: '"Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", ' +
|
|
|
|
|
'Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
|
|
|
|
|
},
|
|
|
|
|
});
|
2023-04-18 12:54:51 +02:00
|
|
|
export function MyApp({Component, pageProps: { session, ...pageProps }}) {
|
2022-08-27 07:46:46 +02:00
|
|
|
return (
|
2023-04-18 09:51:22 +02:00
|
|
|
<SessionProvider session={session} refetchInterval={7 * 60}>
|
2023-04-18 09:23:55 +02:00
|
|
|
<Head>
|
|
|
|
|
<meta name="viewport" content="initial-scale=1, width=device-width" />
|
|
|
|
|
<title>F1 Manager Setup Calculator</title>
|
|
|
|
|
</Head>
|
2023-04-18 10:13:38 +02:00
|
|
|
<ThemeProvider theme={theme}>
|
|
|
|
|
<SnackbarProvider maxSnack={3} anchorOrigin={{ vertical: 'top', horizontal: 'right'}}>
|
|
|
|
|
<CssBaseline />
|
|
|
|
|
<SessionConsumer>
|
2023-04-18 07:40:11 +02:00
|
|
|
<Component {...pageProps} />
|
2023-04-18 10:13:38 +02:00
|
|
|
</SessionConsumer>
|
|
|
|
|
</SnackbarProvider>
|
|
|
|
|
</ThemeProvider>
|
2023-04-18 09:23:55 +02:00
|
|
|
</SessionProvider>
|
2022-08-27 07:46:46 +02:00
|
|
|
)
|
2022-08-27 01:03:37 +02:00
|
|
|
}
|
2023-04-18 09:23:55 +02:00
|
|
|
|
|
|
|
|
|
|
|
|
|
function SessionConsumer({ children }) {
|
|
|
|
|
const session = useSession()
|
2023-04-18 13:27:50 +02:00
|
|
|
const [store, setStore] = useState(null);
|
2023-04-18 13:51:44 +02:00
|
|
|
const [persistor, setPersistor] = useState(null);
|
2023-04-18 13:27:50 +02:00
|
|
|
|
|
|
|
|
useEffect(() => {
|
2023-04-18 13:51:44 +02:00
|
|
|
let s = configureStore(
|
2023-04-18 13:27:50 +02:00
|
|
|
{
|
|
|
|
|
reducer: {
|
|
|
|
|
config: persistReducer({
|
|
|
|
|
key: 'root',
|
|
|
|
|
version: 1,
|
|
|
|
|
storage: (
|
|
|
|
|
session.status === "authenticated"
|
2023-04-21 08:55:45 +02:00
|
|
|
) ? createCloudStorage() : storage,
|
2023-04-18 13:27:50 +02:00
|
|
|
}, configReducer),
|
|
|
|
|
},
|
|
|
|
|
middleware: (getDefaultMiddleware) =>
|
|
|
|
|
getDefaultMiddleware({
|
|
|
|
|
serializableCheck: {
|
|
|
|
|
ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
|
|
|
|
|
},
|
|
|
|
|
}),
|
2023-04-18 09:40:31 +02:00
|
|
|
},
|
2023-04-18 13:51:44 +02:00
|
|
|
)
|
|
|
|
|
setStore(s);
|
|
|
|
|
setPersistor(persistStore(s));
|
2023-04-21 08:55:45 +02:00
|
|
|
}, [session.status])
|
2023-04-18 13:27:50 +02:00
|
|
|
|
2023-04-18 10:13:38 +02:00
|
|
|
|
|
|
|
|
if (session.status === "loading") {
|
|
|
|
|
return (
|
|
|
|
|
<div style={{ width: "100%", textAlign: "center" }}>
|
|
|
|
|
<CircularProgress style={{ margin: "0 auto" }} />
|
|
|
|
|
</div>
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
|
2023-04-18 09:23:55 +02:00
|
|
|
return (
|
2023-04-18 13:27:50 +02:00
|
|
|
<Provider store={store} key={session.userId}>
|
2023-04-18 10:13:38 +02:00
|
|
|
<PersistGate loading={(
|
|
|
|
|
<div style={{ width: "100%", textAlign: "center" }}>
|
|
|
|
|
<CircularProgress style={{ margin: "0 auto" }} />
|
|
|
|
|
</div>
|
|
|
|
|
)} persistor={persistor}>
|
2023-04-18 09:23:55 +02:00
|
|
|
{children}
|
|
|
|
|
</PersistGate>
|
|
|
|
|
</Provider>
|
|
|
|
|
)
|
2023-04-18 09:30:54 +02:00
|
|
|
}
|
|
|
|
|
|
2023-04-18 10:13:38 +02:00
|
|
|
export default dynamic(() => Promise.resolve(MyApp), {
|
|
|
|
|
ssr: false,
|
|
|
|
|
});
|
