RT+NRW+RP

_app.tsx

import React, {
  ComponentType,
  ReactNode,
  useMemo,
  useState,
  useEffect,
} from "react";
import type { AppProps } from "next/app";
import { GoogleOAuthProvider } from "@react-oauth/google";
import GlobalStyles from "@components/GlobalStyles";
import Layout from "@components/Layouts";
import { Hydrate, QueryClient, QueryClientProvider } from "react-query";
import { ReactQueryDevtools } from "react-query/devtools";
import { wrapper } from "@app/store";
import { MantineProvider } from "@mantine/core";
import { PersistGate } from "redux-persist/integration/react";
import { useStore } from "react-redux";
import { NextComponentType, NextPageContext } from "next";
import { Toaster } from "react-hot-toast";
import baseTheme, { applyTheme } from "themes";
import { DefaultSeo } from "next-seo";
import SEO from "next-seo.config";
import { AnimatePresence } from "framer-motion";
import * as gtag from "@lib/gtag";
import "antd/dist/antd.css";
import "../styles/globals.css";
import "cropperjs/dist/cropper.css";

interface Props extends AppProps {
  Component: NextComponentType<NextPageContext, any> & {
    Layout: ComponentType;
  };
}

function MyApp({ Component, router, pageProps }: Props) {
  const [client] = useState<QueryClient>(() => new QueryClient());
  const store = useStore();

  useEffect(() => {
    applyTheme(baseTheme);
  }, []);

  useEffect(() => {
    const handleRouteChange = (url: string) => {
      gtag.pageview(url);
    };
    router.events.on("routeChangeComplete", handleRouteChange);
    return () => {
      router.events.off("routeChangeComplete", handleRouteChange);
    };
  }, [router.events]);

  const page = useMemo(() => {
    const PageLayout = Component.Layout || React.Fragment;

    return (
      <React.Fragment>
        <DefaultSeo {...SEO} />
        <AnimatePresence exitBeforeEnter>
          <Layout>
            <Toaster reverseOrder={false} toastOptions={{ duration: 5000 }} />
            <PageLayout>
              <GlobalStyles />
              <Component {...pageProps} />
              {process.env.NODE_ENV === "development" && <ReactQueryDevtools />}
            </PageLayout>
          </Layout>
        </AnimatePresence>
      </React.Fragment>
    );
  }, [Component, pageProps]);

  return (
    <QueryClientProvider {...{ client }}>
      <Hydrate state={pageProps.dehydrateState}>
        {/* <PersistWrapper> */}
        <GoogleOAuthProvider clientId="538345234542-aulpufnocibib4g6oj554r5abro7g1dj.apps.googleusercontent.com">
          <MantineProvider
            withGlobalStyles
            withNormalizeCSS
            theme={{
              /** Put your mantine theme override here */
              colorScheme: "light",
            }}
          >
            <PersistGate persistor={(store as any).__persistor} loading={null}>
              {() => page}
            </PersistGate>
          </MantineProvider>
        </GoogleOAuthProvider>
        {/* </PersistWrapper> */}
      </Hydrate>
    </QueryClientProvider>
  );
}

export default wrapper.withRedux(MyApp);

reducers.ts

import { onboardCoupleReducer, onboardVenueReducer } from "@features/onboard";
import { userReducer } from "@features/user";
import { combineReducers } from "@reduxjs/toolkit";

export default combineReducers({
  "onboard/couple": onboardCoupleReducer,
  "onboard/venue": onboardVenueReducer,
  user: userReducer,
});

storage.ts

import createWebStorage from "redux-persist/lib/storage/createWebStorage";

const createNoopStorage = () => {
  return {
    getItem(_key: any) {
      return Promise.resolve(null);
    },
    setItem(_key: any, value: any) {
      return Promise.resolve(value);
    },
    removeItem(_key: any) {
      return Promise.resolve();
    },
  };
};

export const storage =
  typeof window !== "undefined"
    ? createWebStorage("local")
    : createNoopStorage();

store.ts

import {
  Action,
  AnyAction,
  CombinedState,
  configureStore,
  ThunkAction,
} from "@reduxjs/toolkit";
import { createWrapper, HYDRATE } from "next-redux-wrapper";

import rootReducers from "./reducers";
import { storage } from "./storage";

export const reducers = (
  state: ReturnType<typeof rootReducers>,
  action: AnyAction
) => {
  if (action.type === HYDRATE) {
    const nextState = {
      ...state, // use previous state
      ...action.payload, // apply delta from hydration
    };

    // if (state.user) {
    //   nextState.user = action.payload.user;
    // }

    // if (state["onboard/couple"]) {
    //   nextState["onboard/couple"] = action.payload["onboard/couple"];
    // }

    // if (state["onboard/venue"]) {
    //   nextState["onboard/venue"] = action.payload["onboard/venue"];
    // }

    return nextState;
  } else {
    return rootReducers(state, action);
  }
};

const makeConfiguredStore = (reducer: CombinedState<typeof rootReducers>) =>
  configureStore({
    reducer,
    devTools: true,
    middleware: (getDefaultMiddleware) => getDefaultMiddleware(),
  });

const makeStore = () => {
  const isServer = typeof window === "undefined";

  if (isServer) {
    return makeConfiguredStore(reducers as CombinedState<typeof rootReducers>);
  } else {
    // we need it only on client side
    const { persistStore, persistReducer } = require("redux-persist");

    const persistConfig = {
      key: "beweddy",
      whitelist: ["onboard/couple", "onboard/venue", "user"], // make sure it does not clash with server keys
      storage,
    };

    const persistedReducer = persistReducer(persistConfig, reducers);
    const store = makeConfiguredStore(persistedReducer);
    // @ts-ignore
    store.__persistor = persistStore(store); // Nasty hack

    return store;
  }
};

export type AppStore = ReturnType<typeof makeStore>;
export type AppState = ReturnType<AppStore["getState"]>;
export type AppDispatch = AppStore["dispatch"];
export type AppThunk<ReturnType = void> = ThunkAction<
  ReturnType,
  AppState,
  unknown,
  Action<string>
>;

export const wrapper = createWrapper<AppStore>(makeStore);