[WIP] Refactor to renderWithLayout function

Okay, when I saw the recipe in the Next.js docs with `getLayout`, I was like "psh this API is so confusing, this should just be a component"

anyway now we see why it wasn't a component: the _whole point_ of it was to circumvent the usual React diffing algorithm's belief that two different components _can't_ ever share UI. But here we were, making different `layoutComponent`s that were meant to share UI, lol!

Anyway, if you just _return JSX in a function_, the React diffing algorithm never sees that it came from a different place, so it's generous when diffing them. Neat!

But I still changed the recipe's `getLayout` name to `renderWithLayout`, because it just confused me so much at first lol, I thought it was going to like, return a layout function? This is much clearer verbing to me imo
This commit is contained in:
Emi Matchu 2022-09-14 22:50:56 -07:00
parent f1cfd1ac8f
commit 17a7e2de81
5 changed files with 13 additions and 13 deletions

View file

@ -17,8 +17,6 @@ const FallbackPage: NextPageWithLayout = () => {
};
// This old fallback page uses App, which already has PageLayout built-in.
FallbackPage.layoutComponent = ({ children }: { children: JSX.Element }) => {
return children;
};
FallbackPage.renderWithLayout = (children: JSX.Element) => children;
export default FallbackPage;

View file

@ -14,7 +14,7 @@ import buildApolloClient from "../src/app/apolloClient";
import PageLayout from "../src/app/PageLayout";
export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
layoutComponent?: (props: { children: JSX.Element }) => JSX.Element;
renderWithLayout?: (children: JSX.Element) => JSX.Element;
};
const theme = extendTheme({
@ -38,7 +38,8 @@ const theme = extendTheme({
type AppPropsWithLayout = AppProps & { Component: NextPageWithLayout };
export default function DTIApp({ Component, pageProps }: AppPropsWithLayout) {
const LayoutComponent = Component.layoutComponent ?? PageLayout;
const renderWithLayout =
Component.renderWithLayout ?? renderWithDefaultLayout;
React.useEffect(() => setupLogging(), []);
@ -63,9 +64,7 @@ export default function DTIApp({ Component, pageProps }: AppPropsWithLayout) {
<ApolloProviderWithAuth0>
<ChakraProvider theme={theme}>
<CSSReset />
<LayoutComponent>
<Component {...pageProps} />
</LayoutComponent>
{renderWithLayout(<Component {...pageProps} />)}
</ChakraProvider>
</ApolloProviderWithAuth0>
</Auth0Provider>
@ -73,6 +72,10 @@ export default function DTIApp({ Component, pageProps }: AppPropsWithLayout) {
);
}
function renderWithDefaultLayout(children: JSX.Element) {
return <PageLayout>{children}</PageLayout>;
}
function ApolloProviderWithAuth0({ children }: { children: React.ReactNode }) {
const auth0 = useAuth0();
const auth0Ref = React.useRef(auth0);

View file

@ -5,8 +5,7 @@ const InternalAssetImagePageWrapper: NextPageWithLayout = () => {
return <InternalAssetImagePage />;
};
InternalAssetImagePageWrapper.layoutComponent = ({ children }) => {
return children;
};
InternalAssetImagePageWrapper.renderWithLayout = (children: JSX.Element) =>
children;
export default InternalAssetImagePageWrapper;

View file

@ -7,7 +7,7 @@ const ItemPageWrapper: NextPageWithLayout = () => {
return <ItemPage />;
};
ItemPageWrapper.layoutComponent = ({ children }) => {
ItemPageWrapper.renderWithLayout = (children) => {
return (
<PageLayout>
<ItemSearchPageToolbar marginBottom="8" />

View file

@ -7,7 +7,7 @@ const ItemSearchPageWrapper: NextPageWithLayout = () => {
return <ItemSearchPage />;
};
ItemSearchPageWrapper.layoutComponent = ({ children }) => {
ItemSearchPageWrapper.renderWithLayout = (children) => {
return (
<PageLayout>
<ItemSearchPageToolbar marginBottom="6" />