[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

pages/[[...slug]].tsx

@@ -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;

pages/_app.tsx

@@ -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);

pages/internal/assetImage.tsx

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

pages/items/[itemId].tsx

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

pages/items/search/index.tsx

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