From 0dcbe23fd0a372a64c01210a8f1c1e305703d3fd Mon Sep 17 00:00:00 2001
From: Kevin Koech <koechkevin92@gmail.com>
Date: Thu, 21 Sep 2023 14:45:57 +0300
Subject: [PATCH] Add Guiding Principles

---
 apps/codeforafrica/payload.config.ts          |  3 +-
 .../src/pages/[...slugs].page.js              |  2 +-
 .../src/payload/blocks/GuidingPrinciples.js   | 43 +++++--------------
 .../payload/collections/GuidingPrinciples.js  | 34 +++++++++++++++
 4 files changed, 48 insertions(+), 34 deletions(-)
 create mode 100644 apps/codeforafrica/src/payload/collections/GuidingPrinciples.js

diff --git a/apps/codeforafrica/payload.config.ts b/apps/codeforafrica/payload.config.ts
index bb14cf4e7..b28b3a395 100644
--- a/apps/codeforafrica/payload.config.ts
+++ b/apps/codeforafrica/payload.config.ts
@@ -1,6 +1,7 @@
 import path from "path";
 
 import { buildConfig } from "payload/config";
+import GuidingPrinciples from "./src/payload/collections/GuidingPrinciples";
 import Impact from "./src/payload/collections/Impact";
 import Media from "./src/payload/collections/Media";
 import Pages from "./src/payload/collections/Pages";
@@ -31,7 +32,7 @@ const adapter = s3Adapter({
 
 export default buildConfig({
   serverURL: appURL,
-  collections: [Impact, Pages, Media, Partners] as CollectionConfig[],
+  collections: [GuidingPrinciples, Impact, Pages, Media, Partners] as CollectionConfig[],
   globals: [Settings] as GlobalConfig[],
   admin: {
     css: path.resolve(__dirname, "./src/payload/admin/scss/custom.scss"),
diff --git a/apps/codeforafrica/src/pages/[...slugs].page.js b/apps/codeforafrica/src/pages/[...slugs].page.js
index ae391b972..b47325524 100644
--- a/apps/codeforafrica/src/pages/[...slugs].page.js
+++ b/apps/codeforafrica/src/pages/[...slugs].page.js
@@ -22,11 +22,11 @@ const componentsBySlugs = {
   "custom-page-header": CustomPageHeader,
   "get-involved": GetInvolved,
   "get-in-touch": GetInTouch,
-  "guiding-principles": GuidingPrinciplesCardList,
   hero: Hero,
   "join-our-slack": JoinOurSlack,
   "meet-our-team": MeetOurTeam,
   "news-stories": NewsAndStories,
+  "our-guiding-principles": GuidingPrinciplesCardList,
   "our-impact": OurImpact,
   "our-partners": OurPartners,
   "page-header": PageHeader,
diff --git a/apps/codeforafrica/src/payload/blocks/GuidingPrinciples.js b/apps/codeforafrica/src/payload/blocks/GuidingPrinciples.js
index 033d106c3..1ef993ab1 100644
--- a/apps/codeforafrica/src/payload/blocks/GuidingPrinciples.js
+++ b/apps/codeforafrica/src/payload/blocks/GuidingPrinciples.js
@@ -1,9 +1,6 @@
-import image from "../fields/image";
-import richText from "../fields/richText";
-
 const GuidingPrinciples = {
-  slug: "guiding-principles",
-  imageURL: "/images/cms/blocks/guiding_principles.jpg",
+  slug: "our-guiding-principles",
+  imageURL: "/images/cms/blocks/guiding_principles.png",
   imageAltText: "Guiding Principles",
   fields: [
     {
@@ -17,33 +14,15 @@ const GuidingPrinciples = {
     },
     {
       name: "list",
-      label: "Guiding Principles",
-      type: "array",
-      fields: [
-        {
-          name: "title",
-          label: {
-            en: "Title",
-          },
-          type: "text",
-          localized: true,
-          required: true,
-        },
-        image({
-          overrides: {
-            name: "icon",
-            required: true,
-          },
-        }),
-        richText({
-          name: "description",
-          label: {
-            en: "Description",
-          },
-          localized: true,
-          required: true,
-        }),
-      ],
+      label: {
+        en: "Guiding Principles",
+      },
+      type: "relationship",
+      relationTo: "guiding-principles",
+      hasMany: true,
+      admin: {
+        isSortable: true,
+      },
     },
   ],
 };
diff --git a/apps/codeforafrica/src/payload/collections/GuidingPrinciples.js b/apps/codeforafrica/src/payload/collections/GuidingPrinciples.js
new file mode 100644
index 000000000..a40661051
--- /dev/null
+++ b/apps/codeforafrica/src/payload/collections/GuidingPrinciples.js
@@ -0,0 +1,34 @@
+import image from "../fields/image";
+import richText from "../fields/richText";
+
+const GuidingPrinciples = {
+  slug: "guiding-principles",
+  admin: {
+    useAsTitle: "title",
+  },
+  fields: [
+    {
+      name: "title",
+      label: {
+        en: "Title",
+      },
+      type: "text",
+      required: true,
+    },
+    image({
+      overrides: {
+        name: "icon",
+        required: true,
+      },
+    }),
+    richText({
+      name: "description",
+      label: {
+        en: "Description",
+      },
+      required: true,
+    }),
+  ],
+};
+
+export default GuidingPrinciples;