From 2ff4316ee6c784d7a766470ce9f9cf1b657057e3 Mon Sep 17 00:00:00 2001 From: Gabe Kangas Date: Wed, 11 Jan 2023 22:43:34 -0800 Subject: [PATCH] Fix admin subpages not having a layout --- web/components/layouts/AdminLayout.tsx | 37 ++++++++++++++++++++++++++ web/pages/_app.tsx | 14 +++++++--- web/pages/admin/index.tsx | 24 ----------------- 3 files changed, 48 insertions(+), 27 deletions(-) create mode 100644 web/components/layouts/AdminLayout.tsx diff --git a/web/components/layouts/AdminLayout.tsx b/web/components/layouts/AdminLayout.tsx new file mode 100644 index 000000000..7f6388d27 --- /dev/null +++ b/web/components/layouts/AdminLayout.tsx @@ -0,0 +1,37 @@ +/* eslint-disable @next/next/no-css-tags */ +import { AppProps } from 'next/app'; +import { FC } from 'react'; +import ServerStatusProvider from '../../utils/server-status-context'; +import AlertMessageProvider from '../../utils/alert-message-context'; +import { MainLayout } from '../admin/MainLayout'; + +/* +NOTE: A bunch of compiled css is loaded here for the Admin UI. +These are old stylesheets that were converted from sass and should not be +edited or maintained. Instead we are using css modules everywhere. So if you +need to change a style rewrite the css file as a css module and import it +into the component that needs it, removing it from this global list. +*/ +export const AdminLayout: FC = ({ Component, pageProps }) => ( + <> + + + + + + + + + + + + + + + + + + + + +); diff --git a/web/pages/_app.tsx b/web/pages/_app.tsx index 689bce56d..99d9f3a58 100644 --- a/web/pages/_app.tsx +++ b/web/pages/_app.tsx @@ -14,6 +14,9 @@ import { AppProps } from 'next/app'; import { ReactElement, ReactNode } from 'react'; import { NextPage } from 'next'; import { RecoilRoot } from 'recoil'; +import { Router, useRouter } from 'next/router'; + +import { AdminLayout } from '../components/layouts/AdminLayout'; export type NextPageWithLayout

= NextPage & { getLayout?: (page: ReactElement) => ReactNode; @@ -24,10 +27,15 @@ type AppPropsWithLayout = AppProps & { }; export default function App({ Component, pageProps }: AppPropsWithLayout) { - // Use the layout defined at the page level, if available - const getLayout = Component.getLayout ?? (page => page); + const router = useRouter() as Router; + const isAdminPage = router.pathname.startsWith('/admin'); + if (isAdminPage) { + return ; + } - return getLayout( + const layout = Component.getLayout ?? (page => page); + + return layout( , diff --git a/web/pages/admin/index.tsx b/web/pages/admin/index.tsx index e5d733a00..5ebef8cd4 100644 --- a/web/pages/admin/index.tsx +++ b/web/pages/admin/index.tsx @@ -182,27 +182,3 @@ export default function Home() { ); } - -Home.getLayout = function getLayout(page: ReactElement) { - return ( - <> - - - - - - - - - - - - - - - {page} - - - - ); -};