Load and show Team and Summary blocks on FE pages

apps/climatemappedafrica/payload.config.ts

@@ -12,6 +12,7 @@ import { sentry } from "@payloadcms/plugin-sentry";
 import { defaultLocale, locales } from "./src/payload/utils/locales";
 
 import Media from "./src/payload/collections/Media";
+import Members from "./src/payload/collections/Members";
 import Pages from "./src/payload/collections/Pages";
 import Users from "./src/payload/collections/Users";
 
@@ -53,16 +54,26 @@ export default buildConfig({
     url: process.env.MONGO_URL,
     migrationDir: process.env.MIGRATIONS_DIR,
   }),
-  collections: [Media, Pages, Users] as CollectionConfig[],
+  // the order here is the order that appears in the admin dashobard
+  // we wnat publication to be first, then project, and lastly settings
+  collections: [
+    // Publication
+    Media,
+    Pages,
+    // Project
+    Members,
+    // Settings
+    Users,
+  ] as CollectionConfig[],
   globals: [Site] as GlobalConfig[],
   ...(locales?.length
     ? {
-        localization: {
-          locales,
-          defaultLocale,
-          fallback: true,
-        },
-      }
+      localization: {
+        locales,
+        defaultLocale,
+        fallback: true,
+      },
+    }
     : undefined),
   admin: {
     webpack: (config) => ({
@@ -86,7 +97,7 @@ export default buildConfig({
     debug: false, // default
     resources: {
       en: {
-        "codeforafrica.validation": {
+        "climatemappedafrica.validation": {
           uniquePlatforms: "Please select a unique platform",
         },
       },
@@ -97,6 +108,8 @@ export default buildConfig({
       collections: {
         media: {
           adapter,
+          // TODO(kilemensi): Toogle this depending on ENV?
+          disableLocalStorage: false,
           prefix: "media",
         },
       },

apps/climatemappedafrica/src/pages/[[...slug]].js

@@ -1,10 +1,44 @@
+import React from "react";
+import { SWRConfig } from "swr";
+
+import AboutTeam from "@/climatemappedafrica/components/AboutTeam";
 import Page from "@/climatemappedafrica/components/Page";
+import Summary from "@/climatemappedafrica/components/Summary";
 import { getPageServerSideProps } from "@/climatemappedafrica/lib/data";
 
-export default function Index(props) {
-  return <Page {...props} />;
+const componentsBySlugs = {
+  summary: Summary,
+  team: AboutTeam,
+};
+
+function Index({ blocks, fallback, ...props }) {
+  if (!blocks?.length) {
+    return null;
+  }
+
+  let PageConfig = React.Fragment;
+  let pageConfigProps;
+  if (fallback) {
+    PageConfig = SWRConfig;
+    pageConfigProps = { value: { fallback } };
+  }
+  return (
+    <Page {...props}>
+      <PageConfig {...pageConfigProps}>
+        {blocks.map((block) => {
+          const Component = componentsBySlugs[block.slug];
+          if (!Component) {
+            return null;
+          }
+          return <Component {...block} key={block.slug} />;
+        })}
+      </PageConfig>
+    </Page>
+  );
 }
 
 export async function getServerSideProps(context) {
   return getPageServerSideProps(context);
 }
+
+export default Index;