From d96117c899ff3e6ae62599063cffeda2080b6762 Mon Sep 17 00:00:00 2001
From: Camden <c@camdenmecklem.com>
Date: Tue, 21 May 2024 16:12:35 -0400
Subject: [PATCH] Add `renderItem` prop to Core Data `RelatedList` parent
 components (#285)

* add onclicks to related components

* fix onClick args

* replace new onClicks with renderItems

* remove redundant RelatedList example

* remove stray onclick reference

* change renderItem output type
---
 .../src/components/RelatedOrganizations.js    | 11 +++++++---
 .../core-data/src/components/RelatedPeople.js | 11 +++++++---
 .../core-data/src/components/RelatedPlaces.js | 11 +++++++---
 .../src/components/RelatedTaxonomies.js       | 11 +++++++---
 .../core-data/RelatedOrganizations.stories.js | 20 +++++++++++++++++++
 .../src/core-data/RelatedPeople.stories.js    | 18 +++++++++++++++++
 .../src/core-data/RelatedPlaces.stories.js    | 15 ++++++++++++++
 ...tories.js => RelatedTaxonomies.stories.js} | 11 ++++++++++
 8 files changed, 96 insertions(+), 12 deletions(-)
 rename packages/storybook/src/core-data/{RelatedTaxonimies.stories.js => RelatedTaxonomies.stories.js} (79%)

diff --git a/packages/core-data/src/components/RelatedOrganizations.js b/packages/core-data/src/components/RelatedOrganizations.js
index 62d3765e..9345a1f6 100644
--- a/packages/core-data/src/components/RelatedOrganizations.js
+++ b/packages/core-data/src/components/RelatedOrganizations.js
@@ -28,7 +28,12 @@ type Props = {
   /**
    * Callback fired when the component is mounted to fetch the data.
    */
-  onLoad: () => any
+  onLoad: () => any,
+
+  /**
+   * Render function used to determine how to present the passed item.
+   */
+  renderItem: (item: any) => JSX.Element,
 };
 
 /**
@@ -42,14 +47,14 @@ const RelatedOrganizations = (props: Props) => (
     itemsPerRow={props.itemsPerRow}
     moreLabel={props.moreLabel}
     onLoad={props.onLoad}
-    renderItem={(organization) => (
+    renderItem={props.renderItem || ((organization) => (
       <>
         <Building2
           className='h-4 w-4 mr-1.5'
         />
         { organization.name }
       </>
-    )}
+    ))}
   />
 );
 
diff --git a/packages/core-data/src/components/RelatedPeople.js b/packages/core-data/src/components/RelatedPeople.js
index c88fd8b9..af05e9ff 100644
--- a/packages/core-data/src/components/RelatedPeople.js
+++ b/packages/core-data/src/components/RelatedPeople.js
@@ -31,7 +31,12 @@ type Props = {
   /**
    * Callback fired when the component is mounted to fetch the data.
    */
-  onLoad: () => any
+  onLoad: () => any,
+
+  /**
+   * Render function used to determine how to present the passed item.
+   */
+  renderItem: (item: any) => JSX.Element,
 };
 
 /**
@@ -57,14 +62,14 @@ const RelatedPeople = (props: Props) => {
       itemsPerRow={props.itemsPerRow}
       moreLabel={props.moreLabel}
       onLoad={props.onLoad}
-      renderItem={(person) => (
+      renderItem={props.renderItem || ((person) => (
         <>
           <UserCircle
             className='h-4 w-4 mr-1.5'
           />
           { getName(person) }
         </>
-      )}
+      ))}
       showMoreLabel={props.showMoreLabel}
     />
   );
diff --git a/packages/core-data/src/components/RelatedPlaces.js b/packages/core-data/src/components/RelatedPlaces.js
index b7981686..23fbb664 100644
--- a/packages/core-data/src/components/RelatedPlaces.js
+++ b/packages/core-data/src/components/RelatedPlaces.js
@@ -28,7 +28,12 @@ type Props = {
   /**
    * Callback fired when the component is mounted to fetch the data.
    */
-  onLoad: () => any
+  onLoad: () => any,
+
+  /**
+   * Render function used to determine how to present the passed item.
+   */
+  renderItem: (item: any) => JSX.Element,
 };
 
 /**
@@ -42,14 +47,14 @@ const RelatedPlaces = (props: Props) => (
     itemsPerRow={props.itemsPerRow}
     moreLabel={props.moreLabel}
     onLoad={props.onLoad}
-    renderItem={(place) => (
+    renderItem={props.renderItem || ((place) => (
       <>
         <MapPin
           className='h-4 w-4 mr-0.5 inline-block mb-0.5'
         />
         { place.name }
       </>
-    )}
+    ))}
   />
 );
 
diff --git a/packages/core-data/src/components/RelatedTaxonomies.js b/packages/core-data/src/components/RelatedTaxonomies.js
index faa16074..831830c9 100644
--- a/packages/core-data/src/components/RelatedTaxonomies.js
+++ b/packages/core-data/src/components/RelatedTaxonomies.js
@@ -28,7 +28,12 @@ type Props = {
   /**
    * Callback fired when the component is mounted to fetch the data.
    */
-  onLoad: () => any
+  onLoad: () => any,
+
+  /**
+   * Render function used to determine how to present the passed item.
+   */
+  renderItem: (item: any) => JSX.Element,
 };
 
 /**
@@ -42,14 +47,14 @@ const RelatedTaxonomies = (props: Props) => (
     itemsPerRow={props.itemsPerRow}
     moreLabel={props.moreLabel}
     onLoad={props.onLoad}
-    renderItem={(taxonomy) => (
+    renderItem={props.renderItem || ((taxonomy) => (
       <>
         <ListTree
           className='h-4 w-4 mr-1.5'
         />
         { taxonomy.name }
       </>
-    )}
+    ))}
   />
 );
 
diff --git a/packages/storybook/src/core-data/RelatedOrganizations.stories.js b/packages/storybook/src/core-data/RelatedOrganizations.stories.js
index 6769c693..ebd865d1 100644
--- a/packages/storybook/src/core-data/RelatedOrganizations.stories.js
+++ b/packages/storybook/src/core-data/RelatedOrganizations.stories.js
@@ -21,6 +21,26 @@ export const Default = withCoreDataContextProvider(() => {
   );
 });
 
+export const CustomRender = withCoreDataContextProvider(() => {
+  const PlacesService = usePlacesService();
+
+  return (
+    <RelatedOrganizations
+      onLoad={(params) => PlacesService.fetchRelatedOrganizations('1', params)}
+      renderItem={(item) => (
+        <p>
+          {`${item.name}:`}
+          &nbsp;
+          {Math.random() > 0.5
+            ? <span style={{ color: 'green' }}>↑</span>
+            : <span style={{ color: 'red' }}>↓</span>}
+          <strong>{`$${(Math.random() * 100).toPrecision(4)}`}</strong>
+        </p>
+      )}
+    />
+  );
+});
+
 export const EmptyList = withCoreDataContextProvider(() => (
   <RelatedOrganizations
     emptyMessage='No related organizations'
diff --git a/packages/storybook/src/core-data/RelatedPeople.stories.js b/packages/storybook/src/core-data/RelatedPeople.stories.js
index 03093511..11d87446 100644
--- a/packages/storybook/src/core-data/RelatedPeople.stories.js
+++ b/packages/storybook/src/core-data/RelatedPeople.stories.js
@@ -23,6 +23,24 @@ export const Default = withCoreDataContextProvider(() => {
   );
 });
 
+export const CustomRender = withCoreDataContextProvider(() => {
+  const PlacesService = usePlacesService();
+
+  return (
+    <RelatedPeople
+      onLoad={(params) => (
+        PlacesService.fetchRelatedPeople('1', params)
+      )}
+      renderItem={(item) => (
+        <p>
+          {`My name is ${item.first_name} ${item.middle_name}\
+           ${item.last_name} but you can just call me ${item.first_name}`}
+        </p>
+      )}
+    />
+  );
+});
+
 export const Horizontal = withCoreDataContextProvider(() => {
   const PlacesService = usePlacesService();
 
diff --git a/packages/storybook/src/core-data/RelatedPlaces.stories.js b/packages/storybook/src/core-data/RelatedPlaces.stories.js
index 9f09878f..ebf3f833 100644
--- a/packages/storybook/src/core-data/RelatedPlaces.stories.js
+++ b/packages/storybook/src/core-data/RelatedPlaces.stories.js
@@ -21,6 +21,21 @@ export const Default = withCoreDataContextProvider(() => {
   );
 });
 
+export const CustomRender = withCoreDataContextProvider(() => {
+  const PlacesService = usePlacesService();
+
+  return (
+    <RelatedPlaces
+      onLoad={(params) => PlacesService.fetchRelatedPlaces('1', params)}
+      renderItem={(item) => (
+        <p>
+          {`I've ${Math.random() < 0.5 ? 'never' : ''} been to ${item.name}.`}
+        </p>
+      )}
+    />
+  );
+});
+
 export const EmptyMessage = withCoreDataContextProvider(() => (
   <RelatedPlaces
     emptyMessage='No related places'
diff --git a/packages/storybook/src/core-data/RelatedTaxonimies.stories.js b/packages/storybook/src/core-data/RelatedTaxonomies.stories.js
similarity index 79%
rename from packages/storybook/src/core-data/RelatedTaxonimies.stories.js
rename to packages/storybook/src/core-data/RelatedTaxonomies.stories.js
index 5cef6799..d513f091 100644
--- a/packages/storybook/src/core-data/RelatedTaxonimies.stories.js
+++ b/packages/storybook/src/core-data/RelatedTaxonomies.stories.js
@@ -21,6 +21,17 @@ export const Default = withCoreDataContextProvider(() => {
   );
 });
 
+export const CustomRender = withCoreDataContextProvider(() => {
+  const PlacesService = usePlacesService();
+
+  return (
+    <RelatedTaxonomies
+      onLoad={(params) => PlacesService.fetchRelatedTaxonomies('1', params)}
+      renderItem={(item) => <p style={{ color: 'pink' }}>{item.name}</p>}
+    />
+  );
+});
+
 export const EmptyList = withCoreDataContextProvider(() => (
   <RelatedTaxonomies
     emptyMessage='No related taxonomies'