Added external links component

Author: sunray1

src/biorepo_components/BiorepoCollectionPageContent.jsx

@@ -0,0 +1,53 @@
+import React, { useEffect, useState } from 'react';
+import DocumentListItem from '../lib_components/components/Documents/DocumentListItem';
+
+export default function BiorepoCollectionPageContent() {
+  const [filteredSpecs, setFilteredSpecs] = useState([]);
+
+  useEffect(() => {
+    // Get the list of product IDs from the global JavaScript variable
+    const productIds = window.BiorepoCollectionData ? JSON.parse(window.BiorepoCollectionData) : [];
+
+    if (productIds.length === 0) return;
+
+    // Fetch specs for each product ID
+    const fetchSpecs = async () => {
+      try {
+        const responses = await Promise.all(
+          productIds.map((productId) => fetch(`https://data.neonscience.org/api/v0/products/${productId}`).then((res) => res.json())),
+        );
+
+        // Extract and filter specs based on "Protocol" in specDescription
+        const allFilteredSpecs = responses.flatMap((response) => response.data?.specs?.filter((spec) => spec.specDescription.includes('Protocol and Procedure')) || []);
+
+        setFilteredSpecs(allFilteredSpecs);
+      } catch (error) {
+        console.error('Error fetching product specs:', error);
+      }
+    };
+
+    fetchSpecs();
+  }, []);
+
+  return (
+    <div>
+      {filteredSpecs.length > 0 ? (
+        filteredSpecs.map((spec, index) => (
+          <DocumentListItem
+            key={spec.specId || index}
+            document={{
+              name: spec.specNumber, // Document name
+              type: spec.specType || 'application/pdf', // Default to PDF
+              size: spec.specSize || 0, // Default size
+              description: spec.specDescription, // Description
+            }}
+            containerComponent="div"
+            enableDownloadButton
+          />
+        ))
+      ) : (
+        <p></p>
+      )}
+    </div>
+  );
+}

src/index.jsx

@@ -23,6 +23,7 @@ import BiorepoGuidelinesContent from './biorepo_components/BiorepoGuidelinesCont
 import BiorepoAboutSamplesContent from './biorepo_components/BiorepoAboutSamplesContent';
 import BiorepoCollectionsContent from './biorepo_components/BiorepoCollectionsContent';
 import BiorepoChecklistsContent from './biorepo_components/BiorepoChecklistsContent';
+import BiorepoCollectionPageContent from './biorepo_components/BiorepoCollectionPageContent';
 
 ReactDOM.render(<BiorepoPage />, document.getElementById('biorepo-page'));
 
@@ -50,3 +51,8 @@ const biorepoChecklistsElement = document.getElementById('biorepo-checklists-con
 if (biorepoChecklistsElement) {
   ReactDOM.render(<BiorepoChecklistsContent />, biorepoChecklistsElement);
 }
+
+const biorepoCollectionPageElement = document.getElementById('biorepo-collection-page-content');
+if (biorepoCollectionPageElement) {
+  ReactDOM.render(<BiorepoCollectionPageContent />, biorepoCollectionPageElement);
+}