F1Manager-Calc/pages/_app.js

107 lines
3.2 KiB
JavaScript
Raw Normal View History

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
)
}
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,
});