import '../styles/base.scss';
import type { AppProps } from 'next/app';
import React, { useEffect, useState } from 'react';
import { Provider } from 'react-redux';
import { Layout } from '@app/components/Layout';
import { AuthProvider } from '@app/features/auth';
import { store } from '@app/store';
import type { NextPageWithLayout } from '@app/types';
const ClientProviders: React.FC = ({ children }) => {
const [mounted, setMounted] = useState(false);
useEffect(() => setMounted(true), []);
// eslint-disable-next-line react/jsx-no-useless-fragment
return mounted ? <>{children}</> : null;
};
type AppPropsWithLayout = AppProps & {
Component: NextPageWithLayout;
};
const App = ({ Component, pageProps }: AppPropsWithLayout) => {
const getLayout = Component.getLayout ?? ((page) => <Layout>{page}</Layout>);
return (
<>
<Provider store={store}>
<AuthProvider>{getLayout(<Component {...pageProps} />)}</AuthProvider>
</Provider>
<ClientProviders>
<ToastProvider />
</ClientProviders>
</>
);
};
export default App;