synapse-react-client
Version:
[](https://badge.fury.io/js/synapse-react-client) [](https://github.com/prettier/prettie
140 lines (139 loc) • 4.22 kB
JavaScript
import { jsx as t, jsxs as I, Fragment as R } from "react/jsx-runtime";
import v from "../layout/InfiniteTableLayout.js";
import { useGetForumThreadsInfinite as C } from "../../synapse-queries/forum/useForum.js";
import { AVATAR as y } from "../../utils/SynapseConstants.js";
import { Link as E } from "@mui/material";
import { DiscussionThreadOrder as a } from "@sage-bionetworks/synapse-types";
import { createColumnHelper as M, useReactTable as _, getCoreRowModel as x } from "@tanstack/react-table";
import z from "dayjs";
import F from "lodash-es/isEmpty";
import { useState as L, useMemo as c } from "react";
import O from "../IconSvg/IconSvg.js";
import i from "../TanStackTable/ColumnHeader.js";
import P from "../TanStackTable/StyledTanStackTable.js";
import { UserBadge as w } from "../UserCard/UserBadge.js";
import { UserCard as D } from "../UserCard/UserCard.js";
const o = M();
function U(l) {
return [
o.accessor("title", {
header: (e) => /* @__PURE__ */ t(i, { ...e, title: "Topic" }),
cell: ({ row: e }) => /* @__PURE__ */ I(E, { onClick: () => l(e.original.id), children: [
e.original.isPinned ? /* @__PURE__ */ t(O, { icon: "pushpin" }) : /* @__PURE__ */ t(R, {}),
e.original.title
] }),
enableSorting: !0,
size: 250
}),
o.accessor("createdBy", {
header: (e) => /* @__PURE__ */ t(i, { ...e, title: "Author" }),
cell: ({ getValue: e }) => /* @__PURE__ */ t(w, { userId: e() }),
enableSorting: !1,
size: 60
}),
o.accessor("activeAuthors", {
header: (e) => /* @__PURE__ */ t(i, { ...e, title: "Active Users" }),
cell: ({ getValue: e }) => e().map((s) => /* @__PURE__ */ t("div", { className: "avatarContainer", children: /* @__PURE__ */ t(
D,
{
showCardOnHover: !0,
className: "ActiveUsers",
size: y,
avatarSize: "MEDIUM",
ownerId: s
}
) }, s)),
enableSorting: !1
}),
o.accessor("numberOfReplies", {
header: (e) => /* @__PURE__ */ t(i, { ...e, title: "Replies" }),
cell: ({ getValue: e }) => e().toLocaleString(),
enableSorting: !0,
minSize: 10,
size: 20
}),
o.accessor("numberOfViews", {
header: (e) => /* @__PURE__ */ t(i, { ...e, title: "Views" }),
cell: ({ getValue: e }) => e().toLocaleString(),
enableSorting: !0,
minSize: 10,
size: 20
}),
o.accessor("lastActivity", {
header: (e) => /* @__PURE__ */ t(i, { ...e, title: "Activity" }),
cell: ({ getValue: e }) => z(e()).format("L"),
enableSorting: !0,
size: 30
})
];
}
function ee({
forumId: l,
limit: e,
filter: s,
onClickLink: m
}) {
const [r, g] = L([
{
desc: !0,
id: "lastActivity"
}
]), p = c(() => {
if (!F(r)) {
if (r[0].id == "lastActivity")
return a.PINNED_AND_LAST_ACTIVITY;
if (r[0].id == "numberOfReplies")
return a.NUMBER_OF_REPLIES;
if (r[0].id == "title")
return a.THREAD_TITLE;
if (r[0].id == "numberOfViews")
return a.NUMBER_OF_VIEWS;
}
return a.PINNED_AND_LAST_ACTIVITY;
}, [r]), { data: d, isLoading: u, hasNextPage: h, fetchNextPage: S, isFetchingNextPage: b } = C(
l,
e,
p,
!r[0]?.desc,
s
), T = c(
() => d?.pages.flatMap((n) => n.results) ?? [],
[d]
), A = c(() => U(m), [m]), f = _({
data: T,
columns: A,
state: {
sorting: r
},
onSortingChange: g,
getRowId: (n) => n.id,
getCoreRowModel: x(),
columnResizeMode: "onChange",
manualSorting: !0,
enableMultiSort: !1,
enableFilters: !1
}), N = !u && f.getRowModel().rows.length === 0;
return /* @__PURE__ */ t("div", { className: "ForumTable", children: /* @__PURE__ */ t(
v,
{
table: /* @__PURE__ */ t(
P,
{
table: f,
styledTableContainerProps: { sx: { my: 2, maxHeight: "250px" } }
}
),
isLoading: u,
isEmpty: N,
hasNextPage: h,
onFetchNextPageClicked: () => {
S();
},
isFetchingNextPage: b
}
) });
}
export {
ee as ForumTable
};
//# sourceMappingURL=ForumTable.js.map