Merge pull request #578 from CodeForAfrica/ft/codeforafrica-remove-st…

…aticprops Remove static props and fix layout
CodeForAfrica · Sep 12, 2023 · e1c4a6a · e1c4a6a
2 parents fe7a459 + 255daf3
commit e1c4a6a
Show file tree

Hide file tree

Showing 8 changed files with 122 additions and 78 deletions.
diff --git a/apps/codeforafrica/src/components/ErrorPage/ErrorPage.js b/apps/codeforafrica/src/components/ErrorPage/ErrorPage.js
@@ -1,43 +1,35 @@
 import { Box } from "@mui/material";
 
 import ErrorHero from "@/codeforafrica/components/ErrorHero";
-import Page from "@/codeforafrica/components/Page";
 import RelatedStories from "@/codeforafrica/components/RelatedStories";
 
 function ErrorPage({ sections, ...props }) {
-  return (
-    <Page {...props}>
-      {sections?.map((section) => {
-        switch (section.slug) {
-          case "hero":
-            return (
-              <ErrorHero
-                title={section.title}
-                subtitle={section.subtitle}
-                key={section.slug}
-                {...props}
-              />
-            );
-          case "news-stories":
-            return (
-              <Box
-                key={section.slug}
-                sx={{
-                  bgcolor: { xs: "inherit", sm: "background.default" },
-                }}
-              >
-                <RelatedStories
-                  {...section}
-                  sx={{ px: { xs: "20px", sm: 0 } }}
-                />
-              </Box>
-            );
-          default:
-            return null;
-        }
-      })}
-    </Page>
-  );
+  return sections?.map((section) => {
+    switch (section.slug) {
+      case "hero":
+        return (
+          <ErrorHero
+            title={section.title}
+            subtitle={section.subtitle}
+            key={section.slug}
+            {...props}
+          />
+        );
+      case "news-stories":
+        return (
+          <Box
+            key={section.slug}
+            sx={{
+              bgcolor: { xs: "inherit", sm: "background.default" },
+            }}
+          >
+            <RelatedStories {...section} sx={{ px: { xs: "20px", sm: 0 } }} />
+          </Box>
+        );
+      default:
+        return null;
+    }
+  });
 }
 
 export default ErrorPage;
diff --git a/apps/codeforafrica/src/lib/data/common/index.js b/apps/codeforafrica/src/lib/data/common/index.js
@@ -35,7 +35,17 @@ function getFooter(settings) {
   };
 }
 
-export async function getPageProps(api, slug) {
+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, context) {
+  const slug = getPageSlug(context);
   const {
     docs: [page],
   } = await api.findPage(slug);

diff --git a/apps/codeforafrica/src/lib/data/local/index.js b/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";
-}
+import api from "@/codeforafrica/lib/payload";
 
 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,
   };
 }
 

diff --git a/apps/codeforafrica/src/lib/data/rest/index.js b/apps/codeforafrica/src/lib/data/rest/index.js
@@ -1,4 +1,3 @@
-import { getPageStaticProps as getStaticProps } from "@/codeforafrica/lib";
 import { getPageProps } from "@/codeforafrica/lib/data/common";
 import fetchJson from "@/codeforafrica/utils/fetchJson";
 
@@ -35,11 +34,9 @@ export const api = {
   findPage,
 };
 
-export async function getPageStaticProps(context, slug) {
+export async function getPageStaticProps(context) {
   const props = await getPageProps(api, context);
-  // TODO(koechkevin): Remove this
-  const { props: staticProps } = await getStaticProps({ slug });
   return {
-    props: { ...staticProps, ...props },
+    props,
   };
 }
diff --git a/apps/codeforafrica/src/lib/payload/index.js b/apps/codeforafrica/src/lib/payload/index.js
@@ -0,0 +1,64 @@
+import payload from "payload";
+
+async function findPage(slug, options) {
+  return payload.find({
+    ...options,
+    collection: "pages",
+    where: {
+      ...options?.where,
+      slug: {
+        equals: slug,
+      },
+    },
+  });
+}
+
+async function getCollection(collection, options) {
+  return payload.find({
+    limit: 0,
+    ...options,
+    collection,
+  });
+}
+
+async function findGlobal(slug, options) {
+  return payload.findGlobal({
+    ...options,
+    slug,
+  });
+}
+
+async function createCollection(collection, data, options) {
+  return payload.create({
+    collection,
+    data,
+    ...options,
+  });
+}
+
+async function deleteCollection(collection, options) {
+  return payload.delete({
+    ...options,
+    collection,
+  });
+}
+
+async function updateCollection(collection, id, data, options) {
+  const args = {
+    ...options,
+    collection,
+    id,
+    data,
+  };
+  return payload.update(args);
+}
+const api = {
+  createCollection,
+  deleteCollection,
+  findGlobal,
+  findPage,
+  getCollection,
+  updateCollection,
+};
+
+export default api;
diff --git a/apps/codeforafrica/src/pages/[...slugs].page.js b/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>
   );
 }

diff --git a/apps/codeforafrica/src/pages/_app.page.js b/apps/codeforafrica/src/pages/_app.page.js
@@ -7,16 +7,22 @@ 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 +61,7 @@ function MyApp(props) {
         </Head>
         <ThemeProvider theme={theme}>
           <CssBaseline />
-          <Component {...pageProps} />
+          {getLayout(<Component {...pageProps} />, pageProps)}
         </ThemeProvider>
       </CacheProvider>
       <Script

diff --git a/apps/codeforafrica/src/pages/_error.snap.js b/apps/codeforafrica/src/pages/_error.snap.js
@@ -1,7 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`/404 renders unchanged 1`] = `
-<div>
-  <main />
-</div>
-`;
+exports[`/404 renders unchanged 1`] = `<div />`;