[[...path]].tsx

import { ComponentPropsContext, handleEditorFastRefresh, SitecoreContext } from '@sitecore-jss/sitecore-jss-nextjs';
import { GetServerSideProps } from 'next';
import { getSession } from 'next-auth/react';
import { createContext, useEffect } from 'react';
import Layout from 'src/Layout';
import NotFound from 'src/NotFound';
import { componentFactory } from 'temp/componentFactory';
import { Product } from '@/interfaces/product';
import { Country } from '@/interfaces/address';
import { GetReservationsResponse } from '@/interfaces/booking';
import { StyleguideSitecoreContextValue } from '@/lib/component-props';
import { SitecorePageProps } from '@/lib/page-props';
import { sitecorePagePropsFactory } from '@/lib/page-props-factory';
import { handleGetServerSidePropsDataFetchError, mapServicesToRequests, reduceAxiosResponses } from '@/lib/services';

interface SitecorePagePropsWithServiceData extends SitecorePageProps {
  data: Partial<ExtendedContext>;
}

interface ExtendedContext {
  products?: Product[];
  reservations?: GetReservationsResponse[];
  countries?: Country[];
}

export interface User {
  userId: string;
}

export const AppContext = createContext<ExtendedContext>({});

const SitecorePage = ({ notFound, componentProps, sitecoreContext, data }: SitecorePagePropsWithServiceData): JSX.Element => {
  useEffect(() => {
    // Since Sitecore editors do not support Fast Refresh, need to refresh EE chromes after Fast Refresh finished
    handleEditorFastRefresh();
  }, []);

  if (notFound || !sitecoreContext?.route) {
    // Shouldn't hit this (as long as 'notFound' is being returned below), but just to be safe
    return <NotFound />;
  }

  return (
    <ComponentPropsContext value={componentProps}>
      <SitecoreContext<StyleguideSitecoreContextValue> componentFactory={componentFactory} context={sitecoreContext}>
        <AppContext.Provider value={data as ExtendedContext}>
          <Layout />
        </AppContext.Provider>
      </SitecoreContext>
    </ComponentPropsContext>
  );
};

// This function gets called at request time on server-side.
export const getServerSideProps: GetServerSideProps = async (context) => {
  const session = (await getSession(context));
  const props = (await sitecorePagePropsFactory.create(context)) as SitecorePagePropsWithServiceData;

  if (props?.sitecoreContext?.route?.redirect) {
    return {
      redirect: props.sitecoreContext.route.redirect || '/404',
      props: {},
    };
  }

  // Fetch and map AIS service data to props for each layout
  try {
    const user : User = { userId: session?.client.userId ?? '' };
    const serviceRequests = mapServicesToRequests(props.sitecoreContext, context.query, user);
    const resolvedRequests = await Promise.all(serviceRequests);
    props.data = reduceAxiosResponses(resolvedRequests);
  } catch (e) {
    return handleGetServerSidePropsDataFetchError(e as Error);
  }

  return {
    props: { ...props, session },
    notFound: props.notFound, // Returns custom 404 page with a status code of 404 when true
  };
};

export default SitecorePage;