Create helper useSamveraPartners hook for multiple data fetches from CMS

components/BannerPartners.jsx

@@ -2,55 +2,21 @@ import PartnersMap from "./PartnersMap";
 import React from "react";
 import getContentful from "lib/get-contentful";
 import { useRouter } from "next/router";
+import useSamveraPartners from "hooks/use-samvera-partners";
 
 export default function BannerPartners() {
   const router = useRouter();
   const isHomePage = router.pathname === "/";
 
-  const contentful = getContentful();
-  const [entries, setEntries] = React.useState([]);
-  const partnersForMap = [];
-
-  React.useEffect(() => {
-    async function fetchEntries() {
-      const entries = await contentful.getEntries({
-        content_type: "samveraPartner",
-      });
-
-      if (!entries.items) {
-        return console.error("Error getting entries.");
-      }
-
-      const sorted = entries.items.sort((a, b) =>
-        a.fields.name.localeCompare(b.fields.name)
-      );
-      setEntries(sorted);
-    }
-
-    fetchEntries();
-  }, [contentful]);
-
-  for (const entry of entries) {
-    const { location } = entry.fields;
-    const { id } = entry.sys;
-
-    if (location?.lat && location?.lon) {
-      partnersForMap.push({
-        lat: location.lat,
-        lon: location.lon,
-        id,
-        name: entry.fields.name,
-      });
-    }
-  }
+  const { partners } = useSamveraPartners();
 
   return (
     <>
       <section className="py-8 bg-samBlue">
         <h3 className="pb-4 text-center title">Samvera Partners</h3>
         <div className="container">
           <ul className="grid grid-cols-2 gap-4 ml-0 list-none lg:gap-6 lg:px-10 md:grid-cols-3 xl:grid-cols-4 ">
-            {entries.map(({ fields: { name, url = "" }, sys: { id } }) => (
+            {partners.map(({ id, name, url }) => (
               <li key={id} className="text-left">
                 {!url && name}
                 {url && (
@@ -69,7 +35,7 @@ export default function BannerPartners() {
         </div>
       </section>
 
-      {isHomePage && <PartnersMap partners={partnersForMap} />}
+      {isHomePage && <PartnersMap partners={partners} />}
     </>
   );
 }

components/PartnersMap.jsx

@@ -4,7 +4,7 @@ import React from "react";
 const DEFAULT_CENTER = [38.907132, -77.036546];
 
 const PartnersMap = ({ partners }) => {
-  if (partners.length === 0) return;
+  if (partners.length === 0) return null;
 
   return (
     <>
@@ -15,13 +15,18 @@ const PartnersMap = ({ partners }) => {
               url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
               attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
             />
-            {partners.map((partner) => (
-              <Marker key={partner.id} position={[partner.lat, partner.lon]}>
-                <Popup>
-                  <strong>{partner.name}</strong>
-                </Popup>
-              </Marker>
-            ))}
+            {partners.map(({ id, location, name }) => {
+              const hasLocation = location && location.lat && location.lon;
+              if (!hasLocation) return;
+
+              return (
+                <Marker key={id} position={[location.lat, location.lon]}>
+                  <Popup>
+                    <strong>{name}</strong>
+                  </Popup>
+                </Marker>
+              );
+            })}
           </>
         )}
       </Map>

components/the-community/Partners.jsx

@@ -0,0 +1,52 @@
+import { useEffect, useState } from "react";
+
+import Breadcrumbs from "components/Breadcrumbs";
+import Layout from "../layout/Layout";
+import Main from "components/layout/Main";
+import MarkdownContent from "components/MarkdownContent";
+import useSamveraPartners from "hooks/use-samvera-partners";
+
+export default function SamveraPartners({ config, content, frontmatter }) {
+  const { partners } = useSamveraPartners();
+
+  return (
+    <Layout title={`${frontmatter.title} - ${config.parentDirLabel} - Samvera`}>
+      <Breadcrumbs
+        items={[
+          {
+            href: "/",
+            label: config.parentDirLabel,
+          },
+          {
+            label: frontmatter.title,
+          },
+        ]}
+      />
+
+      <h1>{frontmatter.title}</h1>
+
+      <Main>
+        <ul className="grid grid-cols-2 gap-4 ml-0 list-none lg:gap-6 lg:px-10 md:grid-cols-3 xl:grid-cols-4">
+          {partners.map(({ id, name, url }) => (
+            <li key={id} className="text-left">
+              {!url && name}
+              {url && (
+                <a
+                  href={url}
+                  className="text-samGreyDark hover:text-samDarkRed"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  {name}
+                </a>
+              )}
+            </li>
+          ))}
+        </ul>
+        <hr />
+
+        <MarkdownContent content={content} />
+      </Main>
+    </Layout>
+  );
+}

hooks/use-samvera-partners.jsx

@@ -0,0 +1,32 @@
+import { useEffect, useState } from "react";
+
+import getContentful from "lib/get-contentful";
+
+export default function useSamveraPartners() {
+  const contentful = getContentful();
+
+  const [partners, setPartners] = useState([]);
+
+  useEffect(() => {
+    (async function init() {
+      const partners = await contentful.getEntries({
+        content_type: "samveraPartner",
+      });
+
+      if (!partners.items) {
+        return console.error("Error getting partners.");
+      }
+
+      const sorted = partners.items.sort((a, b) =>
+        a.fields.name.localeCompare(b.fields.name)
+      );
+      const groomedData = sorted.map((record) => ({
+        ...record.fields,
+        id: record.sys.id,
+      }));
+      setPartners(groomedData);
+    })();
+  }, [contentful]);
+
+  return { partners };
+}

markdown/the-community/samvera-partners.md

@@ -5,8 +5,9 @@ date: "2016-12-06"
 
 The Samvera Community is built around a core group of Partners committed to the success of the project and more importantly to the success of each other.  There are also many institutions and individuals that have formally committed to the sustainability of the Community through code contributions, participation in working or interest groups, helping with documentation, design, or planning.  No contribution is too small.  If you are interested in contributing to the Samvera Community or just interested in Samvera in general read more about the Community [here](https://samvera.org/hydra-partners/community-framework/). The number of Samvera Partners has grown steadily worldwide.
 
-<iframe src="https://www.google.com/maps/d/u/1/embed?mid=1kLOr2tK3nZyuc49AInv_CtjwF30CzSGT" width="640" height="480"></iframe>
+<iframe src="https://www.google.com/maps/d/u/1/embed?mid=1kLOr2tK3nZyuc49AInv_CtjwF30CzSGT" width="100%" height="600"></iframe>
 
+<br />
 The Hydra Project, Samvera's original name, was founded in 2008 by:
 
 - Stanford University
@@ -20,35 +21,4 @@ quickly augmented by:
 
 The three founding universities are still very active and, together with Data Curation Experts, continue to contribute to the work of the Samvera Community.  DuraSpace withdrew from formal Partnership in 2020 following their merger with Lyrasis but is still active in supporting the Community.
 
-Additional Partners have formally committed themselves to support and further Samvera’s work.  In order of Partnership:
-
-- Northwestern University
-- Columbia University
-- Penn State University
-- Indiana University
-- GBH Archives
-- Boston Public Library
-- Duke University
-- Yale University
-- University of Cincinnati
-- Princeton University Library
-- Cornell University
-- University of Oregon
-- Oregon State University
-- Tufts University
-- University of Michigan
-- University of California, San Diego
-- Lafayette College
-- Washington University in St Louis
-- Digital Repository of Ireland
-- University of California, Santa Barbara
-- University of Houston Libraries
-- Emory University
-- CoSector, University of London
-- Ubiquity Press
-- University of Utah
-- Software Services by Scientist.com
-- Hyku for Consortia (PALNI & PALCI)
-- El Colegio de Mexico
-
-…and further institutions are working with Samvera and its components.  Many of them are listed on our '[Samvera adopters](https://samvera.org/samvera-adopters/)' page.
+Additional Partners have formally committed themselves to support and further Samvera’s work. Further institutions are working with Samvera and its components.  Many of them are listed on our '[Samvera adopters](https://samvera.org/samvera-adopters/)' page.

pages/the-community/[slug].jsx

@@ -3,6 +3,7 @@ import { getMarkdownPageContent, getPaths } from "lib/markdown-helpers";
 import CommunityLeadership from "components/the-community/CommunityLeadership";
 import DynamicPage from "components/layout/DynamicPage";
 import Faq from "components/the-community/Faq";
+import SamveraPartners from "components/the-community/Partners";
 import ServiceProviders from "components/the-community/ServiceProviders";
 import UserProfilesPage from "components/the-community/UserProfiles";
 import { buildWorkOpenGraphData } from "lib/open-graph";
@@ -35,6 +36,17 @@ export default function TheCommunityPage({ content, frontmatter, slug }) {
     return <Faq config={CONFIG} content={content} frontmatter={frontmatter} />;
   }
 
+  // Samvera Partners
+  if (slug === "samvera-partners") {
+    return (
+      <SamveraPartners
+        config={CONFIG}
+        content={content}
+        frontmatter={frontmatter}
+      />
+    );
+  }
+
   // Service Providers
   if (slug === "service-providers") {
     return (

styles/global.css

@@ -55,6 +55,10 @@ strong {
   @apply font-fontinBold;
 }
 
+hr {
+  @apply my-8;
+}
+
 .ul-disc {
   @apply ml-4 list-disc;
 }