SUL23-346 Show all published libguides grouped by their type (#119)

* SUL23-346 Show all published libguides grouped by their type

* Added space between groups

src/components/node/stanford-person/libguide.tsx

@@ -11,45 +11,21 @@ type Props = HTMLAttributes<HTMLDivElement> & {
 }
 
 const LibGuides = ({guides, headingLevel = 2, ...props}: Props) => {
-  const courseGuides = guides.filter(guide => guide.type === 'Course Guide');
-  const genPurposeGuides = guides.filter(guide => guide.type === 'General Purpose Guide');
-  const subjectGuides = guides.filter(guide => guide.type === "Subject Guide")
-  const topicGuides = guides.filter(guide => guide.type === 'Topic Guide');
+  // Group the guides by their type, so we can loop over it later.
+  const groupedGuides = guides.reduce(
+    (entryMap, e) => entryMap.set(e.type, [...entryMap.get(e.type)||[], e]),
+    new Map()
+  );
 
   return (
     <div {...props}>
-      {(courseGuides.length > 0) &&
-        <div className="mb-40">
-          {headingLevel === 2 && <h2 className="type-1">Course Guides</h2>}
-          {headingLevel === 3 && <h3 className="type-1">Course Guides</h3>}
-          <LibGuideSection heading="Course Guides" guides={courseGuides}/>
+      {[...groupedGuides.keys()].map(guideTopic => (
+        <div key={guideTopic}>
+          {headingLevel === 2 && <h2 className="type-1">{guideTopic}</h2>}
+          {headingLevel === 3 && <h3 className="type-1">{guideTopic}</h3>}
+          <LibGuideSection heading="Course Guides" guides={groupedGuides.get(guideTopic)}/>
         </div>
-      }
-
-      {genPurposeGuides.length > 0 &&
-        <div className="mb-40">
-          {headingLevel === 2 && <h2 className="type-1">General Purpose Guides</h2>}
-          {headingLevel === 3 && <h3 className="type-1">General Purpose Guides</h3>}
-          <LibGuideSection heading="General Purpose Guides" guides={genPurposeGuides}/>
-        </div>
-      }
-
-      {subjectGuides.length > 0 &&
-        <div className="mb-40">
-          {headingLevel === 2 && <h2 className="type-1">Subject Guides</h2>}
-          {headingLevel === 3 && <h3 className="type-1">Subject Guides</h3>}
-          <LibGuideSection heading="Subject Guides" guides={subjectGuides}/>
-        </div>
-      }
-
-      {(topicGuides.length > 0) &&
-        <div className="mb-40">
-          {headingLevel === 2 && <h2 className="type-1">Topic Guides</h2>}
-          {headingLevel === 3 && <h3 className="type-1">Topic Guides</h3>}
-          <LibGuideSection heading="Topic Guides" guides={topicGuides}/>
-        </div>
-      }
-
+      ))}
     </div>
   )
 }

src/components/node/stanford-person/page-display.tsx

@@ -64,7 +64,7 @@ const StanfordPerson = async ({node, ...props}: { node: NodeStanfordPerson }) =>
           }
 
           {libGuides.length > 0 &&
-            <LibGuides guides={libGuides} className="mb-50"/>
+            <LibGuides guides={libGuides} className="mb-50 space-y-40"/>
           }
 
           {node.suPersonEducation &&