Ft/climatemapped-improvements

apps/climatemappedafrica/src/lib/data/blockify/hero.js

@@ -10,6 +10,7 @@ import {
  */
 export default async function hero(block, _api, _context, { hurumap }) {
   const {
+    profileId,
     profilePage,
     rootGeography: { center, code, hasData: pinRootGeography },
   } = hurumap ?? { rootGeography: {} };
@@ -20,7 +21,7 @@ export default async function hero(block, _api, _context, { hurumap }) {
     country: "region",
   };
   const childLevel = childLevelMaps[level];
-  const { locations, preferredChildren } = await fetchProfile();
+  const { locations, preferredChildren } = await fetchProfile(profileId);
   const preferredChildrenPerLevel = preferredChildren[level];
   const { children } = geometries;
   const preferredLevel =

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

@@ -118,8 +118,12 @@ export async function getPageProps(api, context) {
   const hurumapSettings = await api.findGlobal("settings-hurumap");
   if (hurumapSettings?.enabled) {
     // TODO(koech): Handle cases when fetching profile fails?
-    const profile = await fetchProfile();
-    const { page: hurumapPage, ...otherHurumapSettings } = hurumapSettings;
+    const {
+      page: hurumapPage,
+      profile: profileId,
+      ...otherHurumapSettings
+    } = hurumapSettings;
+    const profile = await fetchProfile(profileId);
     const { value: profilePage } = hurumapPage;
     if (slug === profilePage.slug) {
       variant = "explore";
@@ -136,6 +140,7 @@ export async function getPageProps(api, context) {
     settings.hurumap = {
       ...otherHurumapSettings,
       profile,
+      profileId,
       profilePage,
     };
   }

apps/climatemappedafrica/src/lib/hurumap/index.js

@@ -5,9 +5,9 @@ import formatNumericalValue from "@/climatemappedafrica/utils/formatNumericalVal
 
 const apiUrl = process.env.HURUMAP_API_URL || hurumap?.api?.url;
 
-export async function fetchProfile() {
+export async function fetchProfile(id) {
   const { configuration } = await fetchJson(
-    new URL("/api/v1/profiles/1/?format=json", apiUrl),
+    new URL(`/api/v1/profiles/${id}/?format=json`, apiUrl),
   );
 
   const locations = configuration?.featured_locations?.map(
@@ -24,6 +24,12 @@ export async function fetchProfile() {
   };
 }
 
+export async function fetchProfiles() {
+  const { results } = await fetchJson(new URL("/api/v1/profiles", apiUrl));
+  const profiles = results.map(({ name, id }) => ({ name, id }));
+  return profiles;
+}
+
 function formatProfileGeographyData(data, parent) {
   if (!data) {
     return null;

apps/climatemappedafrica/src/pages/api/hurumap/profiles.js → apps/climatemappedafrica/src/pages/api/hurumap/profiles/[id].js

@@ -4,6 +4,7 @@ let cache = null;
 let cacheExpiry = 0;
 
 export default async function handler(req, res) {
+  const { id } = req.query;
   if (req.method === "GET") {
     const now = Date.now();
 
@@ -12,7 +13,7 @@ export default async function handler(req, res) {
     }
 
     try {
-      const result = await fetchProfile();
+      const result = await fetchProfile(id);
       cache = result;
       cacheExpiry = now + 5 * 60 * 1000;
       return res.status(200).json(result);

apps/climatemappedafrica/src/pages/api/hurumap/profiles/index.js

@@ -0,0 +1,25 @@
+import { fetchProfiles } from "@/climatemappedafrica/lib/hurumap";
+
+let cache = null;
+let cacheExpiry = 0;
+
+export default async function handler(req, res) {
+  if (req.method === "GET") {
+    const now = Date.now();
+
+    if (cache && now < cacheExpiry) {
+      return res.status(200).json(cache);
+    }
+
+    try {
+      const result = await fetchProfiles();
+      cache = result;
+      cacheExpiry = now + 5 * 60 * 1000;
+      return res.status(200).json(result);
+    } catch (err) {
+      return res.status(500).json(err.message);
+    }
+  }
+
+  return res.status(405).end();
+}

apps/climatemappedafrica/src/payload/fields/HURUMapURL/index.js

@@ -0,0 +1,108 @@
+import { Button } from "payload/components/elements";
+import {
+  Label,
+  TextInput,
+  useField,
+  useFormFields,
+} from "payload/components/forms";
+import { createElement, useState, useEffect } from "react";
+
+function HURUMapURL(props) {
+  const {
+    admin: { description },
+    name,
+    path,
+  } = props;
+  const { value, setValue } = useField({ path });
+  const [isValid, setIsValid] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [isButtonDisabled, setIsButtonDisabled] = useState(true);
+  // eslint-disable-next-line no-unused-vars
+  const isHURUMapAPIURLValid = useFormFields(([_, dispatch]) => dispatch);
+
+  const validateURL = async () => {
+    if (!value) return;
+    setLoading(true);
+    try {
+      // For now we can use the profiles endpoint to check if the URL is validate
+      // Ideally we should have a dedicated endpoint for this
+      const response = await fetch(`${value}/profiles`);
+      setIsValid(response.ok);
+      isHURUMapAPIURLValid({
+        type: "UPDATE",
+        path: "isHURUMapAPIURLValid",
+        value: response.ok,
+      });
+    } catch (error) {
+      setIsValid(false);
+      isHURUMapAPIURLValid({
+        type: "UPDATE",
+        path: "isHURUMapAPIURLValid",
+        value: false,
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const isURLValid = (url) => {
+    const urlPattern = new RegExp(
+      "^(https?:\\/\\/)" + // protocol
+        "((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.?)+[a-z]{2,}|" + // domain name
+        "((\\d{1,3}\\.){3}\\d{1,3}))" + // OR ip (v4) address
+        "(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*" + // port and path
+        "(\\?[;&a-z\\d%_.~+=-]*)?" + // query string
+        "(\\#[-a-z\\d_]*)?$",
+      "i", // fragment locator
+    );
+    return !!urlPattern.test(url);
+  };
+
+  const handleInputChange = (e) => {
+    const newUrl = e.target.value;
+    setValue(newUrl);
+    setIsValid(null);
+    setIsButtonDisabled(!isURLValid(newUrl));
+  };
+
+  useEffect(() => {
+    setIsButtonDisabled(!isURLValid(value));
+  }, [value]);
+
+  return createElement(
+    "div",
+    {
+      id: "hurumap-url-wrapper",
+    },
+    createElement(TextInput, {
+      ...props,
+      value,
+      onChange: handleInputChange,
+    }),
+    description &&
+      createElement(
+        "span",
+        {
+          className: "field-description",
+        },
+        description,
+      ),
+    createElement(
+      Button,
+      {
+        type: "button",
+        onClick: () => validateURL(),
+        className: "btn btn--style-primary",
+        disabled: loading || isButtonDisabled,
+      },
+      loading ? "Checking..." : "Validate URL",
+    ),
+    isValid !== null &&
+      createElement(Label, {
+        label: isValid ? "✓ URL is valid" : "✗ Invalid URL",
+        htmlFor: `field-${name}`,
+      }),
+  );
+}
+
+export default HURUMapURL;

apps/climatemappedafrica/src/payload/fields/LocationSelect.js

@@ -1,4 +1,8 @@
-import { Select } from "payload/components/forms";
+import {
+  Select,
+  useAllFormFields,
+  reduceFieldsToValues,
+} from "payload/components/forms";
 import { select } from "payload/dist/fields/validations";
 import { createElement, useMemo } from "react";
 import useSWR from "swr";
@@ -14,17 +18,24 @@ const getOptions = (locations) =>
       value: location.code,
     })) || [];
 
-export async function validateLocation(value, { hasMany, required, t }) {
-  const data = await fetcher(`${apiUrl}/api/hurumap/profiles`);
-  const options = getOptions(data.locations);
+export async function validateLocation(value, { data, hasMany, required, t }) {
+  const { profile } = data;
+  const res = await fetcher(`${apiUrl}/api/hurumap/profiles/${profile}`);
+  const options = getOptions(res.locations);
   return select(value, { hasMany, options, required, t });
 }
 
 function LocationSelect(props) {
-  const { data } = useSWR(`${apiUrl}/api/hurumap/profiles`, fetcher, {
-    dedupingInterval: 60000,
-    revalidateOnFocus: false,
-  });
+  const [fields] = useAllFormFields();
+  const formData = reduceFieldsToValues(fields, true);
+  const { data } = useSWR(
+    `${apiUrl}/api/hurumap/profiles/${formData.profile}`,
+    fetcher,
+    {
+      dedupingInterval: 60000,
+      revalidateOnFocus: false,
+    },
+  );
 
   const options = useMemo(
     () =>

apps/climatemappedafrica/src/payload/fields/ProfileSelect.js

@@ -0,0 +1,21 @@
+import { Select } from "payload/components/forms";
+import { createElement, useMemo } from "react";
+import useSWR from "swr";
+
+const apiUrl = process.env.PAYLOAD_PUBLIC_APP_URL;
+const fetcher = (url) => fetch(url).then((res) => res.json());
+
+function ProfileSelect(props) {
+  const { data } = useSWR(`${apiUrl}/api/hurumap/profiles`, fetcher, {
+    dedupingInterval: 60000,
+    revalidateOnFocus: false,
+  });
+
+  const options = useMemo(
+    () => data?.map(({ name, id }) => ({ label: name, value: id })) || [],
+    [data],
+  );
+  return createElement(Select, { ...props, options });
+}
+
+export default ProfileSelect;

apps/climatemappedafrica/src/payload/globals/HURUMap/Profile.js

@@ -1,6 +1,22 @@
+import ProfileSelect from "../../fields/ProfileSelect";
+
 const Profile = {
   label: "Profile",
   fields: [
+    {
+      name: "profile",
+      type: "number",
+      label: {
+        en: "Profile to Use",
+      },
+      required: true,
+      hasMany: false,
+      admin: {
+        components: {
+          Field: ProfileSelect,
+        },
+      },
+    },
     {
       name: "page",
       label: {

apps/climatemappedafrica/src/payload/globals/HURUMap/RootGeography.js

@@ -9,6 +9,9 @@ const RootGeography = {
         en: "Root Geography",
       },
       type: "group",
+      admin: {
+        condition: (data) => Boolean(data?.profile),
+      },
       fields: [
         {
           name: "code",

apps/climatemappedafrica/src/payload/globals/HURUMap/index.js

@@ -1,3 +1,5 @@
+import HURUMapURL from "../../fields/HURUMapURL";
+
 import DataPanels from "./DataPanels";
 import Profile from "./Profile";
 import RootGeography from "./RootGeography";
@@ -21,11 +23,35 @@ const HURUMap = {
       type: "checkbox",
       defaultValue: false,
     },
+    {
+      name: "hurumapAPIURL",
+      label: "HURUMap API BASE URL",
+      type: "text",
+      admin: {
+        condition: (_, siblingData) => !!siblingData?.enableHURUMap,
+        components: {
+          Field: HURUMapURL,
+        },
+        description:
+          "The base URL for the HURUmap API. For example, https://hurumap.org/api/v1",
+      },
+      required: true,
+    },
+    {
+      name: "isHURUMapAPIURLValid",
+      type: "checkbox",
+      admin: {
+        hidden: true,
+        readOnly: true,
+        condition: (_, siblingData) => !!siblingData?.enableHURUMap,
+      },
+    },
     {
       type: "tabs",
       tabs: [Profile, DataPanels, RootGeography, Tutorial],
       admin: {
-        condition: (_, siblingData) => !!siblingData?.enableHURUMap,
+        condition: (_, siblingData) =>
+          !!siblingData?.enableHURUMap && !!siblingData?.isHURUMapAPIURLValid,
       },
     },
   ],