// ** Next Imports
import Head from 'next/head'
import { Router } from 'next/router'
import type { NextPage } from 'next'
import type { AppProps } from 'next/app'
// ** Loader Import
import NProgress from 'nprogress'
import { UserProvider } from "@auth0/nextjs-auth0/client";
// ** Emotion Imports
import { CacheProvider } from '@emotion/react'
import type { EmotionCache } from '@emotion/cache'
// ** Config Imports
import themeConfig from '../configs/themeConfig'
// ** Component Imports
import UserLayout from '../layouts/UserLayout'
import ThemeComponent from '../core/theme/ThemeComponent'
// ** Contexts
import { SettingsConsumer, SettingsProvider } from '../core/context/settingsContext'
// ** Utils Imports
import { createEmotionCache } from '../core/utils/create-emotion-cache'
import { useEffect, useState } from 'react'
import { useRouter } from 'next/router';
// ** React Perfect Scrollbar Style
import 'react-perfect-scrollbar/dist/css/styles.css'
// ** Global css styles
import '../styles/globals.css'
// ** Extend App Props with Emotion
type ExtendedAppProps = AppProps & {
Component: NextPage
emotionCache: EmotionCache
}
const clientSideEmotionCache = createEmotionCache()
// ** Pace Loader
if (themeConfig.routingLoader) {
Router.events.on('routeChangeStart', () => {
NProgress.start()
})
Router.events.on('routeChangeError', () => {
NProgress.done()
})
Router.events.on('routeChangeComplete', () => {
NProgress.done()
})
}
// ** Configure JSS & ClassName
const App = (props: ExtendedAppProps) => {
const { Component, emotionCache = clientSideEmotionCache, pageProps } = props
const { user } = pageProps;
// Variables
const getLayout = Component.getLayout ?? (page => {page})
const [isRootPath, setIsRootPath] = useState(true);
const router = useRouter();
useEffect(() => {
setIsRootPath(router.pathname === '/');
}, [router.pathname]);
return (
{`Request.Box`}
{({ settings }) => {{
if (isRootPath) {
return
} else {
return {getLayout()};
}
}}}
)
}
export default App