@local-civics/hub-ui 0.1.174 → 0.1.176

package/dist/index.mjs

@@ -5579,30 +5579,46 @@ const PathwayCard = (props) => {
   const completedCount = badges.filter((b) => b.completedAt).length;
   const target = props.target || badges.length;
   const categoryTargets = (_a = props.criteria) != null ? _a : {};
+  const categoryIds = Object.keys(categoryTargets);
   const points = (_b = props.points) != null ? _b : {};
-  const allCategories = Array.from(
-    new Set(badges.flatMap((b) => b.categories || []))
-  );
   const [filters, setFilters] = React.useState(
     () => {
       const obj = {};
-      allCategories.forEach((cat) => {
-        obj[cat] = { label: cat, isActive: false };
+      categoryIds.forEach((id) => {
+        obj[id] = {
+          id,
+          isActive: false
+        };
       });
       return obj;
     }
   );
-  const toggleFilter = (label) => {
-    setFilters((prev) => __spreadProps$1(__spreadValues$2({}, prev), {
-      [label]: __spreadProps$1(__spreadValues$2({}, prev[label]), {
-        isActive: !prev[label].isActive
-      })
-    }));
+  React.useEffect(() => {
+    setFilters((prev) => {
+      const next = {};
+      categoryIds.forEach((id) => {
+        var _a2, _b2;
+        next[id] = {
+          id,
+          isActive: (_b2 = (_a2 = prev[id]) == null ? void 0 : _a2.isActive) != null ? _b2 : false
+        };
+      });
+      return next;
+    });
+  }, [categoryIds]);
+  const toggleFilter = (id) => {
+    setFilters((prev) => {
+      return __spreadProps$1(__spreadValues$2({}, prev), {
+        [id]: __spreadProps$1(__spreadValues$2({}, prev[id]), {
+          isActive: !prev[id].isActive
+        })
+      });
+    });
   };
   const activeFilters = Object.values(filters).filter((f) => f.isActive);
   const filteredBadges = activeFilters.length === 0 ? badges : badges.filter(
     (b) => activeFilters.some(
-      (f) => (b.categories || []).includes(f.label)
+      (f) => (b.categories || []).includes(f.id)
     )
   );
   const filterClassName = "inline-block px-4 py-2 bg-gray-600 text-white rounded-full cursor-pointer text-sm";
@@ -5620,17 +5636,18 @@ const PathwayCard = (props) => {
       points,
       height: "sm"
     }
-  ), /* @__PURE__ */ React.createElement("div", { className: "flex flex-wrap gap-2 mt-3" }, allCategories.map((cat, i) => {
-    var _a2;
-    const isActive = (_a2 = filters[cat]) == null ? void 0 : _a2.isActive;
+  ), /* @__PURE__ */ React.createElement("div", { className: "flex flex-wrap gap-2 mt-3" }, categoryIds.map((id) => {
+    var _a2, _b2, _c2;
+    const isActive = (_a2 = filters[id]) == null ? void 0 : _a2.isActive;
+    const label = (_c2 = (_b2 = props.categoryNames) == null ? void 0 : _b2[id]) != null ? _c2 : id;
     return /* @__PURE__ */ React.createElement(
       "div",
       {
-        key: i,
-        onClick: () => toggleFilter(cat),
+        key: id,
+        onClick: () => toggleFilter(id),
         className: isActive ? `${filterClassName} bg-gray-700` : "inline-block px-4 py-2 rounded-full hover:bg-gray-200 cursor-pointer text-sm"
       },
-      cat
+      label
     );
   })), /* @__PURE__ */ React.createElement("div", { className: "mt-2 grid grid-cols-1 gap-y-2 max-h-[18rem] overflow-y-auto" }, filteredBadges.map((b) => {
     const buttonText = b.completedAt ? "Completed" : b.startedAt ? "Continue" : "Start";