fix: re-added the original resourceCatalog as some sites still use it

index.html

@@ -14,10 +14,10 @@
     />
     <script type="module">
       import {
-        resourceCatalog,
+        onRampsResourceCatalog,
         shadowTarget,
-      } from "http://localhost:3000/xras-ui.js";
-      resourceCatalog({
+      } from "http://localhost:52984/xras-ui.js";
+      onRampsResourceCatalog({
         target: shadowTarget(
           document.getElementById("resource-catalog-react"),
           { accessStyles: true }

src/main.jsx

@@ -18,7 +18,10 @@ import publicationsConfig from "./publications/helpers/config";
 import { publications_store } from "./publications/helpers/reducers";
 
 import OnRampsResourceCatalog from "./onramps-resource-catalog/ResourceCatalog";
-import catalogSlice from "./onramps-resource-catalog/helpers/catalogSlice";
+import onRampsCatalogSlice from "./onramps-resource-catalog/helpers/catalogSlice";
+
+import ResourceCatalog from "./resource-catalog/ResourceCatalog";
+import catalogSlice from "./resource-catalog/helpers/catalogSlice";
 
 export function shadowTarget(
   host,
@@ -125,10 +128,10 @@ export function publicationsSelect({ target, routes }) {
   );
 }
 
-export function resourceCatalog({ target, catalogSources, onRamps }) {
+export function onRampsResourceCatalog({ target, catalogSources, onRamps }) {
   const store = configureStore({
     reducer: {
-      resourceCatalog: catalogSlice,
+      resourceCatalog: onRampsCatalogSlice,
     },
   });
   ReactDOM.createRoot(target).render(
@@ -137,3 +140,31 @@ export function resourceCatalog({ target, catalogSources, onRamps }) {
     </Provider>
   );
 }
+
+export function resourceCatalog({
+  target,
+  apiUrl,
+  excludedCategories,
+  excludedFilters,
+  excludedResources,
+  allowedCategories,
+  allowedFilters,
+}) {
+  const store = configureStore({
+    reducer: {
+      resourceCatalog: catalogSlice,
+    },
+  });
+  ReactDOM.createRoot(target).render(
+    <Provider store={store}>
+      <ResourceCatalog
+        apiUrl={apiUrl}
+        excludedCategories={excludedCategories}
+        excludedFilters={excludedFilters}
+        excludedResources={excludedResources}
+        allowedCategories={allowedCategories}
+        allowedFilters={allowedFilters}
+      />
+    </Provider>
+  );
+}

src/onramps-resource-catalog/helpers/accessText.jsx

@@ -1,8 +1,10 @@
+const baseUrl = import.meta.url.replace(/\/[^/]+$/, "");
+
 export const accessText = (
   <>
     <div className="row">
       <div className="col d-flex">
-        <img alt="Access Logo" style={{ height: "75px" }} src="/access_logo.png" />
+        <img alt="Access Logo" style={{ height: "75px" }} src={`${baseUrl}/access_logo.png`} />
       </div>
     </div>
     <div className="row">

src/resource-catalog/Filter.jsx

@@ -0,0 +1,34 @@
+import { useDispatch } from "react-redux";
+import { toggleFilter } from "./helpers/catalogSlice";
+
+const Filter = ({ filter }) => {
+  const dispatch = useDispatch();
+  const handleChange = () => {
+    dispatch(toggleFilter(filter));
+  };
+
+  return (
+    <div className="row">
+      <div className="col">
+        <div className="form-check">
+          <label
+            className="form-check-label"
+            htmlFor={`filter_${filter.featureId}`}
+          >
+            {filter.name}
+          </label>
+          <input
+            className="form-check-input"
+            type="checkbox"
+            value={filter.featureId}
+            id={`filter_${filter.featureId}`}
+            checked={filter.selected}
+            onChange={handleChange}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Filter;

src/resource-catalog/FilterCategory.jsx

@@ -0,0 +1,20 @@
+import Filter from "./Filter";
+
+const FilterCategory = ({ category }) => {
+  return (
+    <div className="row">
+      <div className="col">
+        <div className="fw-bold mb-1 mt-1">
+          <abbr title={category.categoryDescription}>
+            {category.categoryName}
+          </abbr>
+        </div>
+        {category.features.map((f) => (
+          <Filter filter={f} key={f.featureId} />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default FilterCategory;

src/resource-catalog/Filters.jsx

@@ -0,0 +1,29 @@
+import { useSelector, useDispatch } from "react-redux";
+import { resetFilters, selectFilters } from "./helpers/catalogSlice";
+import FilterCategory from "./FilterCategory";
+
+const Filters = () => {
+  const dispatch = useDispatch();
+  const filters = useSelector(selectFilters);
+  const selected = filters.filter(
+    (f) => f.features.filter((fl) => fl.selected).length > 0
+  );
+
+  return (
+    <div>
+      <h4 className="mb-0">Filters</h4>
+      {filters.map((f) => (
+        <FilterCategory category={f} key={f.categoryId} />
+      ))}
+      <button
+        className="btn btn-warning mt-2 mb-2"
+        onClick={() => dispatch(resetFilters())}
+        disabled={selected.length == 0}
+      >
+        Reset Filters
+      </button>
+    </div>
+  );
+};
+
+export default Filters;

src/resource-catalog/Resource.jsx

@@ -0,0 +1,88 @@
+import Accordion from "react-bootstrap/Accordion";
+
+const Resource = ({ resource }) => {
+  const renderFeatures = (features) => {
+    if (features.length == 0) {
+      return "";
+    }
+
+    return (
+      <ul>
+        {features.map((f, i) => (
+          <li key={`feature_${resource.resourceId}_${i}`}>{f}</li>
+        ))}
+      </ul>
+    );
+  };
+
+  const renderDescription = (title, content) => {
+    if (content && content != "") {
+      return (
+        <>
+          <div className="row">
+            <div className="col fw-bold">{title}</div>
+          </div>
+          <div className="row mb-3">
+            <div
+              className="col"
+              dangerouslySetInnerHTML={{ __html: content }}
+            />
+          </div>
+        </>
+      );
+    }
+    return "";
+  };
+
+  return (
+    <Accordion.Item eventKey={resource.resourceId}>
+      <Accordion.Header>{resource.resourceName}</Accordion.Header>
+      <Accordion.Body>
+        <table className="table">
+          <tbody>
+            <tr>
+              <td className="fw-bold">Resource Type:</td>
+              <td>{resource.resourceType}</td>
+            </tr>
+            <tr>
+              <td className="fw-bold">Organization:</td>
+              <td>{resource.organization}</td>
+            </tr>
+            <tr>
+              <td className="fw-bold">Units:</td>
+              <td>{resource.units}</td>
+            </tr>
+            <tr>
+              <td className="fw-bold">User Guide:</td>
+              <td>
+                {resource.userGuideUrl == "" ? (
+                  ""
+                ) : (
+                  <a
+                    href={resource.userGuideUrl}
+                    target="_blank"
+                    rel="noreferrer"
+                  >
+                    Link to User Guide
+                  </a>
+                )}
+              </td>
+            </tr>
+            <tr>
+              <td className="fw-bold">Features Available:</td>
+              <td>{renderFeatures(resource.features)}</td>
+            </tr>
+          </tbody>
+        </table>
+        {renderDescription(
+          "Resource Description",
+          resource.resourceDescription
+        )}
+        {renderDescription("Allocations Description", resource.description)}
+        {renderDescription("Recommended Use", resource.recommendedUse)}
+      </Accordion.Body>
+    </Accordion.Item>
+  );
+};
+
+export default Resource;

src/resource-catalog/ResourceList.jsx

@@ -0,0 +1,25 @@
+import { useSelector } from "react-redux";
+import Resource from "./Resource";
+import { selectResources } from "./helpers/catalogSlice";
+import Accordion from "react-bootstrap/Accordion";
+
+const ResourceList = () => {
+  const resources = useSelector(selectResources);
+
+  if (resources.length == 0) {
+    return <div className="fw-bold">No Resources Match Your Filters</div>;
+  }
+
+  return (
+    <div>
+      <h4 className="mb-0">Resources</h4>
+      <Accordion>
+        {resources.map((r) => (
+          <Resource resource={r} key={r.resourceId} />
+        ))}
+      </Accordion>
+    </div>
+  );
+};
+
+export default ResourceList;