From 4413068d5938a367c1391447cbffcd6b7bc1b14a Mon Sep 17 00:00:00 2001 From: Kevin Koech Date: Mon, 28 Oct 2024 16:19:03 +0300 Subject: [PATCH 1/7] Added PanelItems options to Payloadcms --- .../src/lib/data/blockify/explore-page.js | 59 +++------ .../src/lib/data/common/index.js | 2 +- .../payload/globals/HURUMap/PanelOptions.js | 121 ++++++++++++++++++ .../src/payload/globals/HURUMap/index.js | 3 +- 4 files changed, 143 insertions(+), 42 deletions(-) create mode 100644 apps/climatemappedafrica/src/payload/globals/HURUMap/PanelOptions.js diff --git a/apps/climatemappedafrica/src/lib/data/blockify/explore-page.js b/apps/climatemappedafrica/src/lib/data/blockify/explore-page.js index a08295a60..a78c8682e 100644 --- a/apps/climatemappedafrica/src/lib/data/blockify/explore-page.js +++ b/apps/climatemappedafrica/src/lib/data/blockify/explore-page.js @@ -6,6 +6,15 @@ import { async function explorePage({ block: { slugs }, hurumap }) { const { rootGeography, + align, + anchor, + lazyblock, + blockUniqueClass, + ghostkitSpacings, + ghostkitSR, + scrollToTopLabel, + dataNotAvailable, + items: panelItems, page: { value }, } = hurumap; const { code: name, rootGeographyHasData: pinRootGeography } = rootGeography; @@ -35,46 +44,16 @@ async function explorePage({ block: { slugs }, hurumap }) { // TODO: Move this to a PayloadCMS const panel = { - panelItems: [ - { - value: "rich-data", - icon: "https://cms.dev.codeforafrica.org/pesayetu/wp-content/uploads/sites/2/2021/11/Group-4505.svg", - iconProps: { - src: "https://cms.dev.codeforafrica.org/pesayetu/wp-content/uploads/sites/2/2021/11/Group-4505.svg", - width: 44, - height: 44, - type: "svg", - blurDataURL: - "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAIAAAAmkwkpAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAGElEQVR4nGNgQAP/T///f/o/jHMWiQMHACIVCyeABSwfAAAAAElFTkSuQmCC", - placeholder: "blur", - }, - }, - { - value: "pin", - icon: "https://cms.dev.codeforafrica.org/pesayetu/wp-content/uploads/sites/2/2022/01/Path-210-1-1.svg", - pin: true, - iconProps: { - src: "https://cms.dev.codeforafrica.org/pesayetu/wp-content/uploads/sites/2/2022/01/Path-210-1-1.svg", - width: 44, - height: 44, - type: "svg", - blurDataURL: - "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAIAAAAmkwkpAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAH0lEQVR4nGNgQAP/L/z/f/r//4P/wZzT//+fBbOQAQBvnQ3r6iVM4QAAAABJRU5ErkJggg==", - placeholder: "blur", - }, - }, - ], - scrollToTopLabel: "Back To Top", - dataNotAvailable: "— DATA NOT AVAILABLE", - lazyblock: { - slug: "lazyblock/panel", - }, - align: "", - anchor: "", - blockId: "20amuc", - blockUniqueClass: "lazyblock-panel-20amuc", - ghostkitSpacings: "", - ghostkitSR: "", + panelItems, + scrollToTopLabel, + dataNotAvailable, + lazyblock, + align, + anchor, + blockId: "explore-page", + blockUniqueClass, + ghostkitSpacings, + ghostkitSR, }; const res = { id: "explore-page", diff --git a/apps/climatemappedafrica/src/lib/data/common/index.js b/apps/climatemappedafrica/src/lib/data/common/index.js index fb7918025..c1e0b3f8c 100644 --- a/apps/climatemappedafrica/src/lib/data/common/index.js +++ b/apps/climatemappedafrica/src/lib/data/common/index.js @@ -57,7 +57,7 @@ function getNavBar(siteSettings, variant, { slug }) { export async function getPageProps(api, context) { // For now, ClimatemappedAfrica only supports single paths i.e. /, /about, etc., // so params.slug[0] is good enough - const slugs = context.params?.slugs || undefined; + const slugs = context.params?.slugs || ["index"]; const [slug] = slugs || ["index"]; const { draftMode = false } = context; const options = { draft: draftMode }; diff --git a/apps/climatemappedafrica/src/payload/globals/HURUMap/PanelOptions.js b/apps/climatemappedafrica/src/payload/globals/HURUMap/PanelOptions.js new file mode 100644 index 000000000..c3135fe24 --- /dev/null +++ b/apps/climatemappedafrica/src/payload/globals/HURUMap/PanelOptions.js @@ -0,0 +1,121 @@ +import image from "../../fields/image"; + +const PanelOptions = { + label: "Panel Options", + fields: [ + { + name: "items", + type: "array", + label: "Panel Items", + fields: [ + { + type: "select", + name: "value", + label: "Value", + options: [ + { value: "rich-data", label: "Rich Data" }, + { value: "pin", label: "Pin" }, + ], + localized: true, + }, + image({ + overrides: { + name: "icon", + required: true, + }, + }), + ], + }, + { + type: "row", + fields: [ + { + name: "scrollToTopLabel", + type: "text", + label: "Scroll To Top Label", + defaultValue: "Scroll To Top", + admin: { + width: "50%", + }, + localized: true, + }, + { + name: "dataNotAvailable", + type: "text", + label: "Data Not Available", + defaultValue: "DATA NOT AVAILABLE", + admin: { + width: "50%", + }, + localized: true, + }, + { + name: "align", + type: "text", + label: "Align", + localized: true, + defaultValue: "", + admin: { + width: "50%", + }, + }, + { + name: "anchor", + type: "text", + label: "Anchor", + localized: true, + defaultValue: "", + admin: { + width: "50%", + }, + }, + { + name: "blockUniqueClass", + type: "text", + label: "Block Unique Class", + defaultValue: "lazyblock-panel-20amuc", + localized: true, + admin: { + width: "50%", + }, + }, + { + name: "ghostkitSpacings", + type: "text", + label: "Ghostkit Spacings", + defaultValue: "", + localized: true, + admin: { + width: "50%", + }, + }, + { + name: "ghostkitSR", + type: "text", + label: "Ghostkit SR", + localized: true, + defaultValue: "", + admin: { + width: "50%", + }, + }, + ], + }, + { + name: "lazyblock", + type: "group", + label: "Lazy Block", + fields: [ + { + name: "slug", + type: "text", + label: "Slug", + defaultValue: "lazyblock/panel", + localized: true, + }, + ], + }, + ], +}; + +export default PanelOptions; diff --git a/apps/climatemappedafrica/src/payload/globals/HURUMap/index.js b/apps/climatemappedafrica/src/payload/globals/HURUMap/index.js index 245ab94d8..d4f24a51e 100644 --- a/apps/climatemappedafrica/src/payload/globals/HURUMap/index.js +++ b/apps/climatemappedafrica/src/payload/globals/HURUMap/index.js @@ -1,4 +1,5 @@ import Geography from "./Geography"; +import PanelOptions from "./PanelOptions"; import Profile from "./Profile"; import Tutorial from "./Tutorial"; @@ -22,7 +23,7 @@ const HURUMap = { }, { type: "tabs", - tabs: [Profile, Geography, Tutorial], + tabs: [Profile, Geography, Tutorial, PanelOptions], admin: { condition: (_, siblingData) => !!siblingData?.enableHURUMap, }, From 46daf83952e406703780a36fc21c52b8ebb03ea9 Mon Sep 17 00:00:00 2001 From: Kevin Koech Date: Wed, 30 Oct 2024 14:34:10 +0300 Subject: [PATCH 2/7] Update Hero component to match designs --- apps/climatemappedafrica/src/components/Hero/Hero.js | 12 ++++++------ apps/climatemappedafrica/src/components/Hero/Map.js | 8 ++++---- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/apps/climatemappedafrica/src/components/Hero/Hero.js b/apps/climatemappedafrica/src/components/Hero/Hero.js index 8b761f8dc..989c485e2 100644 --- a/apps/climatemappedafrica/src/components/Hero/Hero.js +++ b/apps/climatemappedafrica/src/components/Hero/Hero.js @@ -26,14 +26,14 @@ function Hero({ }) { const isUpLg = useMediaQuery((theme) => theme.breakpoints.up("lg")); const [hoverGeo, setHoverGeo] = useState(null); - const continentLevelZoom = isUpLg ? 2.4 : 2.1; + const continentLevelZoom = isUpLg ? 3 : 2.1; // We have to reduce the zoom level for continent so that all countries(Including islands) are visible within the designs const countryLevelZoom = isUpLg ? 6 : 5.25; const zoom = level === "continent" ? continentLevelZoom : countryLevelZoom; - return ( - + {center ? ( ({ + sx={{ position: "relative", - height: { sm: "299px", lg: "471px" }, - width: { sm: "236px", lg: "371px" }, + height: { sm: "350px", lg: "471px" }, + width: { sm: "300px", lg: "500px" }, marginTop: { sm: "55px", lg: "42px" }, "& .leaflet-container": { background: "transparent", }, - })} + }} > Date: Wed, 30 Oct 2024 14:41:45 +0300 Subject: [PATCH 3/7] Update Hero component snapshots --- apps/climatemappedafrica/src/components/Hero/Hero.snap.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/climatemappedafrica/src/components/Hero/Hero.snap.js b/apps/climatemappedafrica/src/components/Hero/Hero.snap.js index e94a3de38..38d7598e4 100644 --- a/apps/climatemappedafrica/src/components/Hero/Hero.snap.js +++ b/apps/climatemappedafrica/src/components/Hero/Hero.snap.js @@ -3,7 +3,7 @@ exports[` renders unchanged 1`] = `
renders unchanged 1`] = ` class="MuiGrid-root MuiGrid-container css-11lq3yg-MuiGrid-root" >
Date: Wed, 30 Oct 2024 15:23:34 +0300 Subject: [PATCH 4/7] Fixed Map Styles --- apps/climatemappedafrica/src/components/Hero/Map.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/apps/climatemappedafrica/src/components/Hero/Map.js b/apps/climatemappedafrica/src/components/Hero/Map.js index c67558d7f..12c5e5468 100644 --- a/apps/climatemappedafrica/src/components/Hero/Map.js +++ b/apps/climatemappedafrica/src/components/Hero/Map.js @@ -1,11 +1,10 @@ -import { Box } from "@mui/material"; +import { Box, useTheme } from "@mui/material"; import { useRouter } from "next/router"; import PropTypes from "prop-types"; import React from "react"; import { MapContainer, GeoJSON } from "react-leaflet"; import "leaflet/dist/leaflet.css"; -import theme from "@/climatemappedafrica/theme"; function Map({ center, @@ -19,7 +18,6 @@ function Map({ color: "#2A2A2C", weight: 1, opacity: 1, - fillColor: "#fff", dashArray: "2", }, onLayerMouseOver, @@ -29,6 +27,7 @@ function Map({ const countyCodes = featuredLocations?.map(({ code }) => code); + const theme = useTheme(); const onEachFeature = (feature, layer) => { layer.setStyle({ fillColor: theme.palette.background.default, From 08077cdc773fad01fb4a8d66164a79dfbd7b0f06 Mon Sep 17 00:00:00 2001 From: Kevin Koech Date: Wed, 30 Oct 2024 15:37:02 +0300 Subject: [PATCH 5/7] Updated explore page slug on hero --- apps/climatemappedafrica/src/components/Hero/Hero.js | 2 ++ apps/climatemappedafrica/src/components/Hero/Map.js | 6 +++++- apps/climatemappedafrica/src/lib/data/blockify/hero.js | 4 ++++ 3 files changed, 11 insertions(+), 1 deletion(-) diff --git a/apps/climatemappedafrica/src/components/Hero/Hero.js b/apps/climatemappedafrica/src/components/Hero/Hero.js index 989c485e2..6085bc944 100644 --- a/apps/climatemappedafrica/src/components/Hero/Hero.js +++ b/apps/climatemappedafrica/src/components/Hero/Hero.js @@ -22,6 +22,7 @@ function Hero({ searchPlaceholder, properties, level, + explorePageSlug, ...props }) { const isUpLg = useMediaQuery((theme) => theme.breakpoints.up("lg")); @@ -116,6 +117,7 @@ function Hero({ }} onLayerMouseOver={setHoverGeo} featuredLocations={featuredLocations} + explorePageSlug={explorePageSlug} {...props} /> ) : null} diff --git a/apps/climatemappedafrica/src/components/Hero/Map.js b/apps/climatemappedafrica/src/components/Hero/Map.js index 12c5e5468..bd8f60512 100644 --- a/apps/climatemappedafrica/src/components/Hero/Map.js +++ b/apps/climatemappedafrica/src/components/Hero/Map.js @@ -22,6 +22,7 @@ function Map({ }, onLayerMouseOver, featuredLocations, + explorePageSlug, }) { const router = useRouter(); @@ -54,7 +55,9 @@ function Map({ }); }); layer.on("click", () => { - router.push(`/explore/${feature.properties.code.toLowerCase()}`); + router.push( + `/${explorePageSlug}/${feature.properties.code.toLowerCase()}`, + ); }); } }; @@ -113,6 +116,7 @@ Map.propTypes = { featuredLocations: PropTypes.arrayOf( PropTypes.shape({ code: PropTypes.string }), ), + explorePageSlug: PropTypes.string, }; export default Map; diff --git a/apps/climatemappedafrica/src/lib/data/blockify/hero.js b/apps/climatemappedafrica/src/lib/data/blockify/hero.js index 328c91dd5..66b91a3e0 100644 --- a/apps/climatemappedafrica/src/lib/data/blockify/hero.js +++ b/apps/climatemappedafrica/src/lib/data/blockify/hero.js @@ -6,6 +6,9 @@ import { export default async function hero({ block, hurumap }) { const { rootGeography: { center, code, rootGeographyHasData: pinRootGeography }, + page: { + value: { slug: explorePageSlug }, + }, } = hurumap; const { geometries } = await fetchProfileGeography(code.toLowerCase()); const { level } = geometries.boundary?.properties ?? {}; @@ -32,5 +35,6 @@ export default async function hero({ block, hurumap }) { level, properties: geometries.boundary?.properties, pinRootGeography, + explorePageSlug, }; } From 4de4b754433f3888e5333ff646853298f6a4b9bd Mon Sep 17 00:00:00 2001 From: Kevin Koech Date: Wed, 30 Oct 2024 16:06:03 +0300 Subject: [PATCH 6/7] FIxed Explore page Panel Items --- .../src/lib/data/blockify/explore-page.js | 12 ---- .../payload/globals/HURUMap/PanelOptions.js | 64 ------------------- 2 files changed, 76 deletions(-) diff --git a/apps/climatemappedafrica/src/lib/data/blockify/explore-page.js b/apps/climatemappedafrica/src/lib/data/blockify/explore-page.js index f962f7f30..d82ab8b2c 100644 --- a/apps/climatemappedafrica/src/lib/data/blockify/explore-page.js +++ b/apps/climatemappedafrica/src/lib/data/blockify/explore-page.js @@ -6,12 +6,6 @@ import { async function explorePage({ block: { slugs }, hurumap }) { const { rootGeography, - align, - anchor, - lazyblock, - blockUniqueClass, - ghostkitSpacings, - ghostkitSR, scrollToTopLabel, dataNotAvailable, items: panelItems, @@ -47,13 +41,7 @@ async function explorePage({ block: { slugs }, hurumap }) { panelItems, scrollToTopLabel, dataNotAvailable, - lazyblock, - align, - anchor, blockId: "explore-page", - blockUniqueClass, - ghostkitSpacings, - ghostkitSR, }; const res = { id: "explore-page", diff --git a/apps/climatemappedafrica/src/payload/globals/HURUMap/PanelOptions.js b/apps/climatemappedafrica/src/payload/globals/HURUMap/PanelOptions.js index c3135fe24..fcd40c676 100644 --- a/apps/climatemappedafrica/src/payload/globals/HURUMap/PanelOptions.js +++ b/apps/climatemappedafrica/src/payload/globals/HURUMap/PanelOptions.js @@ -49,70 +49,6 @@ const PanelOptions = { }, localized: true, }, - { - name: "align", - type: "text", - label: "Align", - localized: true, - defaultValue: "", - admin: { - width: "50%", - }, - }, - { - name: "anchor", - type: "text", - label: "Anchor", - localized: true, - defaultValue: "", - admin: { - width: "50%", - }, - }, - { - name: "blockUniqueClass", - type: "text", - label: "Block Unique Class", - defaultValue: "lazyblock-panel-20amuc", - localized: true, - admin: { - width: "50%", - }, - }, - { - name: "ghostkitSpacings", - type: "text", - label: "Ghostkit Spacings", - defaultValue: "", - localized: true, - admin: { - width: "50%", - }, - }, - { - name: "ghostkitSR", - type: "text", - label: "Ghostkit SR", - localized: true, - defaultValue: "", - admin: { - width: "50%", - }, - }, - ], - }, - { - name: "lazyblock", - type: "group", - label: "Lazy Block", - fields: [ - { - name: "slug", - type: "text", - label: "Slug", - defaultValue: "lazyblock/panel", - localized: true, - }, ], }, ], From 1cf7e6a375c855c618a80eb4828f29922cb16e2f Mon Sep 17 00:00:00 2001 From: Kevin Koech Date: Thu, 31 Oct 2024 13:47:29 +0300 Subject: [PATCH 7/7] Updated Panel Options --- .../DropdownSearch/DownloadSearch.js | 1 - .../src/components/Hero/Hero.snap.js | 5 --- .../src/lib/data/blockify/explore-page.js | 5 +-- .../src/lib/data/common/index.js | 2 +- .../payload/globals/HURUMap/PanelOptions.js | 45 +++++++++++-------- 5 files changed, 28 insertions(+), 30 deletions(-) diff --git a/apps/climatemappedafrica/src/components/DropdownSearch/DownloadSearch.js b/apps/climatemappedafrica/src/components/DropdownSearch/DownloadSearch.js index dc9f31362..fb3cfc7b2 100644 --- a/apps/climatemappedafrica/src/components/DropdownSearch/DownloadSearch.js +++ b/apps/climatemappedafrica/src/components/DropdownSearch/DownloadSearch.js @@ -111,7 +111,6 @@ function DropdownSearch({ onChange={handleChange} placeholder={placeholder} value={query} - {...props} sx={({ typography, palette }) => ({ borderRadius: typography.pxToRem(10), color: palette.primary.main, diff --git a/apps/climatemappedafrica/src/components/Hero/Hero.snap.js b/apps/climatemappedafrica/src/components/Hero/Hero.snap.js index 38d7598e4..1af23dffd 100644 --- a/apps/climatemappedafrica/src/components/Hero/Hero.snap.js +++ b/apps/climatemappedafrica/src/components/Hero/Hero.snap.js @@ -58,16 +58,11 @@ exports[` renders unchanged 1`] = ` Search for a location