Untitled

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;