Skip to content

Instantly share code, notes, and snippets.

@trnktms
Last active Jun 22, 2022
Embed
What would you like to do?
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;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment