datajunction-ui/dist/index-CUYphHvc.js

DataJunction UI

import { jsx as i, jsxs as o } from "react/jsx-runtime";
import { useContext as N, useState as f, useEffect as y } from "react";
import { D as g, b2 as _, z as u, aO as v } from "./index-n79cxNwC.js";
const b = (s, r) => {
  const m = new Map(r.map((n) => [n.name, n]));
  return s.map((n) => {
    var d;
    const t = m.get(n.entity_name);
    return {
      ...n,
      node_type: t == null ? void 0 : t.type,
      display_name: (d = t == null ? void 0 : t.current) == null ? void 0 : d.displayName
    };
  });
};
function S() {
  const s = N(g).DataJunctionAPI, [r, m] = f([]), [n, t] = f(!0);
  y(() => {
    async function c() {
      try {
        const e = await s.getSubscribedHistory(50) || [], a = Array.from(new Set(e.map((h) => h.entity_name))), p = a.length ? await s.getNodesByNames(a) : [], l = b(e, p);
        m(l);
      } catch (e) {
        console.error("Error fetching notifications:", e);
      } finally {
        t(!1);
      }
    }
    c();
  }, [s]);
  const d = _(r);
  return /* @__PURE__ */ i("div", { className: "mid", children: /* @__PURE__ */ o("div", { className: "card", children: [
    /* @__PURE__ */ i("div", { className: "card-header", children: /* @__PURE__ */ i("h2", { children: "Notifications" }) }),
    /* @__PURE__ */ i("div", { className: "card-body", children: /* @__PURE__ */ i("div", { className: "notifications-list", children: n ? /* @__PURE__ */ i("div", { style: { padding: "2rem", textAlign: "center" }, children: /* @__PURE__ */ i(u, {}) }) : r.length === 0 ? /* @__PURE__ */ i(
      "div",
      {
        style: {
          padding: "2rem 1rem",
          color: "#666",
          textAlign: "center"
        },
        children: "No notifications yet. Watch nodes to receive updates when they change."
      }
    ) : d.map((c) => /* @__PURE__ */ o("div", { className: "notification-group", children: [
      /* @__PURE__ */ i(
        "div",
        {
          style: {
            padding: "0.5rem 0.75rem",
            backgroundColor: "#f8f9fa",
            borderBottom: "1px solid #eee",
            fontSize: "12px",
            fontWeight: 600,
            color: "#666",
            textTransform: "uppercase",
            letterSpacing: "0.5px"
          },
          children: c.label
        }
      ),
      c.items.map((e) => {
        var l;
        const a = (l = e.details) == null ? void 0 : l.version, p = a ? `/nodes/${e.entity_name}/revisions/${a}` : `/nodes/${e.entity_name}/history`;
        return /* @__PURE__ */ o(
          "a",
          {
            className: "notification-item",
            href: p,
            children: [
              /* @__PURE__ */ o("span", { className: "notification-node", children: [
                /* @__PURE__ */ o("span", { className: "notification-title", children: [
                  e.display_name || e.entity_name,
                  a && /* @__PURE__ */ i("span", { className: "badge version", children: a })
                ] }),
                e.display_name && /* @__PURE__ */ i("span", { className: "notification-entity", children: e.entity_name })
              ] }),
              /* @__PURE__ */ o("span", { className: "notification-meta", children: [
                e.node_type && /* @__PURE__ */ i(
                  "span",
                  {
                    className: `node_type__${e.node_type} badge node_type`,
                    children: e.node_type.toUpperCase()
                  }
                ),
                e.activity_type,
                "d by",
                " ",
                /* @__PURE__ */ i("span", { style: { color: "#333" }, children: e.user }),
                " ·",
                " ",
                v(e.created_at)
              ] })
            ]
          },
          e.id
        );
      })
    ] }, c.label)) }) })
  ] }) });
}
export {
  S as NotificationsPage
};
//# sourceMappingURL=index-CUYphHvc.js.map