Remove static props and fix layout

apps/codeforafrica/src/lib/data/common/index.js

@@ -34,8 +34,17 @@ function getFooter(settings) {
     secondaryMenus: secondaryNavigation?.menus || null,
   };
 }
+function getPageSlug({ params }) {
+  const slugsCount = params?.slugs?.length;
+  // count < 3, page slug is the last slug e.g. ["about"] or ["knowldge/news"]
+  // count == 3, page slug is the 2nd slug (index 1); last slug (index 3)
+  //             is the post. e.g. opportunities/grants/democratic-governance-in-zambia
+  const pageSlugIndex = slugsCount < 3 ? slugsCount - 1 : 1;
+  return params?.slugs?.[pageSlugIndex] || "index";
+}
 
-export async function getPageProps(api, slug) {
+export async function getPageProps(api, context) {
+  const slug = getPageSlug(context);
   const {
     docs: [page],
   } = await api.findPage(slug);

apps/codeforafrica/src/lib/data/local/index.js

@@ -1,32 +1,14 @@
-import { getPageStaticProps } from "@/codeforafrica/lib";
 import { getPageProps } from "@/codeforafrica/lib/data/common";
 import { api } from "@/codeforafrica/lib/data/rest";
 
-function getPageSlug({ params }) {
-  const slugsCount = params?.slugs?.length;
-  // count < 3, page slug is the last slug e.g. ["about"] or ["knowldge/news"]
-  // count == 3, page slug is the 2nd slug (index 1); last slug (index 3)
-  //             is the post. e.g. opportunities/grants/democratic-governance-in-zambia
-  const pageSlugIndex = slugsCount < 3 ? slugsCount - 1 : 1;
-  return params?.slugs?.[pageSlugIndex] || "index";
-}
-
 export async function getPageServerSideProps(context) {
-  const slug = getPageSlug(context);
-  const pathname =
-    slug !== "index" ? `/${context.params.slugs.join("/")}` : "/";
-  const props = await getPageProps(api, slug);
+  const props = await getPageProps(api, context);
   if (!props) {
     return { notFound: true };
   }
 
-  // TODO Remove static props
-  const { props: staticProps } = await getPageStaticProps({ slug: pathname });
   return {
-    props: {
-      ...staticProps,
-      ...props,
-    },
+    props,
   };
 }
 

apps/codeforafrica/src/pages/[...slugs].page.js

@@ -8,7 +8,6 @@ import Hero from "@/codeforafrica/components/Hero";
 import MeetOurTeam from "@/codeforafrica/components/MeetOurTeam";
 import NewsAndStories from "@/codeforafrica/components/NewsAndStories";
 import OurPartners from "@/codeforafrica/components/OurPartners";
-import Page from "@/codeforafrica/components/Page";
 import PageHeader from "@/codeforafrica/components/PageHeader";
 import { getPageServerSideProps } from "@/codeforafrica/lib/data";
 
@@ -23,7 +22,7 @@ const componentsBySlugs = {
   projects: FeaturedProjects,
 };
 
-function Index({ blocks, fallback, ...props }) {
+function Index({ blocks, fallback }) {
   if (!blocks?.length) {
     return null;
   }
@@ -36,15 +35,13 @@ function Index({ blocks, fallback, ...props }) {
   }
   return (
     <PageComponent {...pageComponentProps}>
-      <Page {...props}>
-        {blocks.map((block) => {
-          const Component = componentsBySlugs[block.slug];
-          if (!Component) {
-            return null;
-          }
-          return <Component {...block} key={block.id} />;
-        })}
-      </Page>
+      {blocks.map((block) => {
+        const Component = componentsBySlugs[block.slug];
+        if (!Component) {
+          return null;
+        }
+        return <Component {...block} key={block.id} />;
+      })}
     </PageComponent>
   );
 }

apps/codeforafrica/src/pages/_app.page.js

@@ -7,16 +7,21 @@ import { DefaultSeo } from "next-seo";
 import PropTypes from "prop-types";
 import React, { useEffect } from "react";
 
+import Page from "@/codeforafrica/components/Page";
 import SEO from "@/codeforafrica/next-seo.config";
 import "@/codeforafrica/theme/fonts.css";
 import theme from "@/codeforafrica/theme";
 import createEmotionCache from "@/codeforafrica/utils/createEmotionCache";
 
 const clientSideEmotionCache = createEmotionCache();
 
+function getDefaultLayout(page, pageProps) {
+  return <Page {...pageProps}>{page}</Page>;
+}
 function MyApp(props) {
   const router = useRouter();
   const { Component, emotionCache = clientSideEmotionCache, pageProps } = props;
+  const getLayout = Component.getLayout || getDefaultLayout;
   useEffect(() => {
     if (process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_ID) {
       const handleRouteChange = (url) => {
@@ -55,7 +60,7 @@ function MyApp(props) {
         </Head>
         <ThemeProvider theme={theme}>
           <CssBaseline />
-          <Component {...pageProps} />
+          {getLayout(<Component {...pageProps} />, pageProps)}
         </ThemeProvider>
       </CacheProvider>
       <Script