@blocklet/discuss-kit 1.0.0

package/lib/cjs/session.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const react = require("react");
+const Session = require("@arcblock/did-connect/lib/Session");
+const { SessionProvider, SessionContext, SessionConsumer, withSession } = Session.createAuthServiceSessionContext();
+function useSessionContext() {
+  const data = react.useContext(SessionContext);
+  return data;
+}
+exports.SessionConsumer = SessionConsumer;
+exports.SessionContext = SessionContext;
+exports.SessionProvider = SessionProvider;
+exports.useSessionContext = useSessionContext;
+exports.withSession = withSession;

package/lib/cjs/theme-provider.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const react = require("react");
+const PropTypes = require("prop-types");
+const react$1 = require("@emotion/react");
+const styles = require("@mui/material/styles");
+const jsxRuntime = require("react/jsx-runtime");
+const _interopDefaultLegacy = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
+const PropTypes__default = /* @__PURE__ */ _interopDefaultLegacy(PropTypes);
+const defaultTheme = styles.createTheme({});
+const ThemeContext = react.createContext({});
+function ThemeProvider({
+  children,
+  theme: _theme
+} = {}) {
+  const [theme, setTheme] = react.useState(defaultTheme);
+  react.useEffect(() => {
+    if (_theme && typeof _theme === "object")
+      setTheme(_theme);
+  }, [_theme]);
+  if (theme) {
+    return /* @__PURE__ */ jsxRuntime.jsx(ThemeContext.Provider, {
+      value: theme,
+      children: /* @__PURE__ */ jsxRuntime.jsx(ThemeContext.Consumer, {
+        children: (themeValue) => {
+          return /* @__PURE__ */ jsxRuntime.jsx(styles.ThemeProvider, {
+            theme: themeValue,
+            children: /* @__PURE__ */ jsxRuntime.jsx(react$1.ThemeProvider, {
+              theme: themeValue,
+              children
+            })
+          });
+        }
+      })
+    });
+  }
+  return children;
+}
+ThemeProvider.propTypes = {
+  children: PropTypes__default.default.any.isRequired,
+  theme: PropTypes__default.default.object.isRequired
+};
+function useThemeContext() {
+  return react.useContext(ThemeContext);
+}
+exports.ThemeProvider = ThemeProvider;
+exports.default = ThemeProvider;
+exports.useThemeContext = useThemeContext;

package/lib/cjs/ws.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const react = require("react");
+const Cookie = require("js-cookie");
+const ws = require("@arcblock/ws");
+const _interopDefaultLegacy = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
+const Cookie__default = /* @__PURE__ */ _interopDefaultLegacy(Cookie);
+let client;
+function create(prefix) {
+  const pathPrefix = prefix;
+  const url = `//${window.location.host}${pathPrefix.replace(/\/$/, "")}`;
+  return new ws.WsClient(url, {
+    heartbeatIntervalMs: 10 * 1e3,
+    params: () => ({
+      token: Cookie__default.default.get("login_token")
+    })
+  });
+}
+function getWsClient(prefix) {
+  if (!client) {
+    client = create(prefix);
+  }
+  return client;
+}
+const useSubscription = (event, cb = () => {
+}, deps = [], prefix = "") => {
+  if (!client) {
+    client = getWsClient(prefix);
+  }
+  react.useEffect(() => {
+    client.on(event, cb);
+    return () => {
+      client.off(event, cb);
+    };
+  }, deps);
+};
+exports.create = create;
+exports.default = getWsClient;
+exports.useSubscription = useSubscription;

package/lib/es/api.js

@@ -0,0 +1,43 @@
+import axios from "axios";
+const request = axios.create({ baseURL: "/", timeout: 5e3 });
+request.interceptors.request.use(
+  (config) => {
+    return config;
+  },
+  (error) => Promise.reject(error)
+);
+const fetchRatingStats = async (id) => {
+  const { data } = await request.get(`/ratings/${id}`);
+  return data;
+};
+const fetchComments = async (params) => {
+  try {
+    const { data } = await request.get("/comments", { params });
+    return data;
+  } catch (e) {
+    console.error(e);
+    throw e;
+  }
+};
+const reply = async ({ commentId, parentId, content }) => {
+  const { data } = await request.post(`/comments/${commentId}/replies`, { content, parentId });
+  return data;
+};
+const fetchMoreReplies = async ({ commentId, cursor, limit = 10 }) => {
+  try {
+    const { data } = await request.get(`/comments/${commentId}/replies`, {
+      params: { cursor, limit, embed: "rating" }
+    });
+    return data;
+  } catch (e) {
+    console.error(e);
+    throw e;
+  }
+};
+export {
+  request as default,
+  fetchComments,
+  fetchMoreReplies,
+  fetchRatingStats,
+  reply
+};

package/lib/es/comment-list.js

@@ -0,0 +1,112 @@
+import { useContext, useState } from "react";
+import styled from "@emotion/styled";
+import Button from "@arcblock/ux/lib/Button";
+import CircularProgress from "@mui/material/CircularProgress";
+import { LocaleContext } from "@arcblock/ux/lib/Locale/context";
+import { Confirm } from "@arcblock/ux/lib/Dialog";
+import Comment from "./components/comment";
+import { useCommentsContext } from "./context";
+import api from "./api";
+import { jsx, jsxs } from "react/jsx-runtime";
+function CommentList() {
+  const {
+    comments,
+    loadMore,
+    hasMore,
+    loading,
+    removeComment
+  } = useCommentsContext();
+  const {
+    t
+  } = useContext(LocaleContext);
+  const [waitDelRow, setWaitDelRow] = useState({});
+  const handleConfirmDelete = async (comment) => {
+    try {
+      setWaitDelRow({});
+      await api.delete(`/comments/${comment.id}`);
+      removeComment(comment);
+    } catch (e) {
+      console.error(e);
+    }
+  };
+  if (loading) {
+    return /* @__PURE__ */ jsx(Center, {
+      style: {
+        width: "100%"
+      },
+      children: /* @__PURE__ */ jsx(CircularProgress, {})
+    });
+  }
+  return /* @__PURE__ */ jsxs(Container, {
+    children: [comments.length === 0 && /* @__PURE__ */ jsx("div", {
+      className: "empty",
+      children: t("empty")
+    }), comments.length > 0 && comments.map((comment, index) => {
+      return /* @__PURE__ */ jsx(Comment, {
+        comment,
+        index: index + 1,
+        onDelete: setWaitDelRow
+      }, comment.id);
+    }), hasMore && /* @__PURE__ */ jsx("div", {
+      className: "load-more",
+      children: /* @__PURE__ */ jsx(Button, {
+        onClick: loadMore,
+        disabled: loading,
+        variant: "outlined",
+        color: "primary",
+        size: "small",
+        children: t("loadMore")
+      })
+    }), /* @__PURE__ */ jsx(Confirm, {
+      open: !!waitDelRow.id,
+      title: t("tip"),
+      onConfirm: () => {
+        handleConfirmDelete(waitDelRow);
+      },
+      confirmButton: {
+        text: t("confirm"),
+        props: {
+          variant: "contained",
+          color: "error"
+        }
+      },
+      cancelButton: {
+        text: t("cancel"),
+        props: {
+          color: "inherit"
+        }
+      },
+      onCancel: () => {
+        setWaitDelRow({});
+      },
+      children: /* @__PURE__ */ jsx("span", {
+        children: t("deleteCommentDesc")
+      })
+    })]
+  });
+}
+CommentList.propTypes = {};
+CommentList.defaultProps = {};
+const Center = styled.div`
+  width: 100%;
+  padding: 120px 0 0 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+const Container = styled.div`
+  width: 100%;
+  .empty {
+    text-align: center;
+    color: #9397a1;
+    font-size: 16px;
+    margin-top: 44px;
+  }
+  .load-more {
+    text-align: center;
+    margin: 24px 0;
+  }
+`;
+export {
+  CommentList as default
+};

package/lib/es/components/comment.js

@@ -0,0 +1,309 @@
+import * as React from "react";
+import { useContext, useState } from "react";
+import styled from "@emotion/styled";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import PropTypes from "prop-types";
+import NavigateNextIcon from "@mui/icons-material/NavigateNext";
+import DIDAddress from "@arcblock/did-connect/lib/Address";
+import { format } from "timeago.js";
+import { LocaleContext } from "@arcblock/ux/lib/Locale/context";
+import { Avatar, PostContent, CommentInput } from "@blocklet/discuss-kit-ux";
+import { BinaryThumb } from "./rating";
+import Menu from "./menu";
+import api, { reply } from "../api";
+import { protectLogin, minDelay } from "../lib/utils";
+import { useCommentsContext } from "../context";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+const SvgMessage = (props) => /* @__PURE__ */ React.createElement("svg", {
+  width: 32,
+  height: 32,
+  viewBox: "0 0 24 24",
+  ...props
+}, /* @__PURE__ */ React.createElement("path", {
+  fill: "none",
+  stroke: "#888888",
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+  strokeWidth: 2,
+  d: "m3 20l1.3-3.9A9 8 0 1 1 7.7 19L3 20"
+}));
+function CommentReplies({
+  comment,
+  onDelete,
+  ...rest
+}) {
+  const {
+    t
+  } = useContext(LocaleContext);
+  const {
+    loadMoreReplies
+  } = useCommentsContext();
+  const {
+    replies,
+    totalReplies
+  } = comment;
+  if (!(replies == null ? void 0 : replies.length)) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(Box, {
+    mt: 1,
+    ...rest,
+    children: [replies.map((item) => {
+      return /* @__PURE__ */ jsx("div", {
+        children: /* @__PURE__ */ jsx(Comment, {
+          comment: item,
+          onDelete,
+          rootComment: comment
+        })
+      }, item.id);
+    }), totalReplies > replies.length && /* @__PURE__ */ jsx(Button, {
+      onClick: () => loadMoreReplies(comment.id),
+      variant: "outlined",
+      color: "inherit",
+      size: "small",
+      endIcon: /* @__PURE__ */ jsx(NavigateNextIcon, {}),
+      sx: {
+        mt: 2,
+        ml: 6,
+        color: "grey.600",
+        borderColor: "grey.400",
+        fontSize: 12,
+        textTransform: "none"
+      },
+      children: t("showMoreReplies")
+    })]
+  });
+}
+CommentReplies.propTypes = {
+  comment: PropTypes.object.isRequired,
+  onDelete: PropTypes.func.isRequired
+};
+function Comment({
+  comment,
+  onDelete,
+  rootComment,
+  ...rest
+}) {
+  var _a, _b, _c, _d;
+  const {
+    session,
+    addComment,
+    updateComment,
+    manageMode,
+    flatMode
+  } = useCommentsContext();
+  const {
+    t,
+    locale
+  } = useContext(LocaleContext);
+  const [inputBoxVisible, setInputBoxVisible] = useState(false);
+  const [editMode, setEditMode] = useState(false);
+  const isCommenter = ((_a = session == null ? void 0 : session.user) == null ? void 0 : _a.did) === comment.commenter.did;
+  const canEditOrDelete = !comment.deletedAt && (isCommenter || manageMode);
+  const menuItems = [...canEditOrDelete ? [{
+    text: /* @__PURE__ */ jsx(Box, {
+      component: "span",
+      sx: {
+        color: "error.main"
+      },
+      children: t("delete")
+    }),
+    onClick: () => onDelete(comment)
+  }, {
+    text: /* @__PURE__ */ jsx(Box, {
+      component: "span",
+      children: t("edit")
+    }),
+    onClick: () => setEditMode(true)
+  }] : []];
+  const sendReply = async (content) => {
+    const commentId = (rootComment == null ? void 0 : rootComment.id) || comment.commentId || comment.id;
+    const data = await minDelay(reply({
+      commentId,
+      parentId: comment.id,
+      content
+    }), 800);
+    setInputBoxVisible(false);
+    addComment(data);
+  };
+  const handleOnRate = async ({
+    ratingType,
+    value
+  }) => {
+    if (!session.user) {
+      session.login();
+      throw new Error("Unauthenticated.");
+    }
+    await api.post(`/objects/${comment.objectId}/comments/${comment.id}/ratings`, {
+      ratingType,
+      value
+    });
+  };
+  const handleOnUnrate = async () => {
+    if (!session.user) {
+      session.login();
+      throw new Error("Unauthenticated.");
+    }
+    await api.delete(`/objects/${comment.objectId}/comments/${comment.id}/ratings`);
+  };
+  const handleUpdateComment = async (content) => {
+    await api.put(`/comments/${comment.id}`, {
+      content
+    });
+    updateComment(comment.id, (current) => ({
+      ...current,
+      content
+    }));
+  };
+  return /* @__PURE__ */ jsxs(Root, {
+    ...rest,
+    children: [/* @__PURE__ */ jsx(Avatar, {
+      did: comment.commenter.did,
+      src: comment.commenter.avatar,
+      size: 36,
+      shape: "circle",
+      variant: "circle"
+    }), /* @__PURE__ */ jsxs(Box, {
+      flex: "1",
+      pl: 2,
+      overflow: "hidden",
+      children: [/* @__PURE__ */ jsxs(Box, {
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "start",
+        children: [/* @__PURE__ */ jsxs(Box, {
+          children: [/* @__PURE__ */ jsxs(Box, {
+            display: "flex",
+            alignItems: "center",
+            gap: 1,
+            flexWrap: "wrap",
+            color: "#333",
+            lineHeight: 1,
+            children: [/* @__PURE__ */ jsx("span", {
+              children: comment.commenter.fullName || "Unknown"
+            }), /* @__PURE__ */ jsxs("div", {
+              children: ["(", /* @__PURE__ */ jsx(DIDAddress, {
+                copyable: false,
+                responsive: false,
+                compact: true,
+                inline: true,
+                children: comment.commenter.did
+              }), ")"]
+            }), /* @__PURE__ */ jsx(Box, {
+              width: {
+                xs: "100%",
+                md: "auto"
+              },
+              fontSize: 13,
+              color: "grey.500",
+              children: /* @__PURE__ */ jsx("span", {
+                children: format(comment.createdAt, locale === "zh" ? "zh_CN" : "en_US")
+              })
+            })]
+          }), ((_b = comment.replyTo) == null ? void 0 : _b.did) && (flatMode || comment.parentId !== comment.commentId) && /* @__PURE__ */ jsxs(Box, {
+            mt: 0.5,
+            fontSize: 13,
+            lineHeight: 1,
+            color: "primary.light",
+            sx: {
+              ".did-address-text": {
+                color: "primary.light"
+              }
+            },
+            children: ["@", /* @__PURE__ */ jsx(Box, {
+              component: "span",
+              mr: 1,
+              children: comment.replyTo.fullName
+            }), "(", /* @__PURE__ */ jsx(DIDAddress, {
+              copyable: false,
+              responsive: false,
+              compact: true,
+              inline: true,
+              children: comment.replyTo.did
+            }), ")"]
+          })]
+        }), !!(menuItems == null ? void 0 : menuItems.length) && /* @__PURE__ */ jsx(Menu, {
+          items: menuItems,
+          style: {
+            position: "absolute",
+            right: 0,
+            top: 16
+          }
+        })]
+      }), /* @__PURE__ */ jsxs(Box, {
+        mt: 1,
+        children: [!comment.deletedAt && /* @__PURE__ */ jsx(PostContent, {
+          content: comment.content,
+          editing: editMode,
+          onExitEditing: () => setEditMode(false),
+          onSubmit: handleUpdateComment
+        }), comment.deletedAt && /* @__PURE__ */ jsx(Box, {
+          display: "inline-block",
+          px: 2,
+          py: 1,
+          mt: 1,
+          fontSize: 14,
+          bgcolor: "grey.100",
+          color: "grey.600",
+          borderRadius: 1,
+          children: t("deleted")
+        })]
+      }), !manageMode && /* @__PURE__ */ jsxs(Fragment, {
+        children: [/* @__PURE__ */ jsxs(Box, {
+          display: "flex",
+          alignItems: "center",
+          mt: 1.5,
+          children: [/* @__PURE__ */ jsx(BinaryThumb, {
+            selected: (_c = comment.rating) == null ? void 0 : _c.myRating,
+            countPerValue: (_d = comment.rating) == null ? void 0 : _d.counts,
+            onRate: handleOnRate,
+            onUnrate: handleOnUnrate
+          }), /* @__PURE__ */ jsx(Box, {
+            onClick: () => protectLogin(session, () => setInputBoxVisible(!inputBoxVisible)),
+            sx: {
+              lineHeight: 1,
+              "&:hover": {
+                cursor: "pointer"
+              }
+            },
+            children: /* @__PURE__ */ jsx(SvgMessage, {
+              style: {
+                width: "auto",
+                height: 16
+              }
+            })
+          })]
+        }), inputBoxVisible && /* @__PURE__ */ jsx(Box, {
+          my: 2,
+          children: /* @__PURE__ */ jsx(CommentInput, {
+            send: sendReply
+          })
+        })]
+      }), !comment.parentId && /* @__PURE__ */ jsx(CommentReplies, {
+        comment,
+        onDelete
+      })]
+    })]
+  });
+}
+Comment.propTypes = {
+  comment: PropTypes.object.isRequired,
+  onDelete: PropTypes.func,
+  rootComment: PropTypes.object
+};
+Comment.defaultProps = {
+  onDelete: void 0,
+  rootComment: void 0
+};
+const Root = styled(Box)`
+  display: flex;
+  position: relative;
+  padding: 24px 0 0 0;
+  &:first-of-type {
+    flex-shrink: 0;
+  }
+`;
+export {
+  Comment as default
+};

package/lib/es/components/error-fallback.js

@@ -0,0 +1,23 @@
+import PropTypes from "prop-types";
+import Alert from "@mui/material/Alert";
+import AlertTitle from "@mui/material/AlertTitle";
+import { jsx, jsxs } from "react/jsx-runtime";
+function ErrorFallback({
+  error
+}) {
+  const errorMessageElement = process.env.NODE_ENV === "production" ? null : /* @__PURE__ */ jsx("pre", {
+    children: error.message
+  });
+  return /* @__PURE__ */ jsxs(Alert, {
+    severity: "warning",
+    children: [/* @__PURE__ */ jsx(AlertTitle, {
+      children: "Oops!"
+    }), "DID Comments is not working properly.", errorMessageElement]
+  });
+}
+ErrorFallback.propTypes = {
+  error: PropTypes.instanceOf(Error).isRequired
+};
+export {
+  ErrorFallback as default
+};

package/lib/es/components/menu.js

@@ -0,0 +1,77 @@
+import { useState } from "react";
+import PropTypes from "prop-types";
+import styled from "@emotion/styled";
+import IconButton from "@mui/material/IconButton";
+import MoreVertIcon from "@mui/icons-material/MoreVert";
+import Box from "@mui/material/Box";
+import MuiMenu from "@mui/material/Menu";
+import MuiMenuItem from "@mui/material/MenuItem";
+import { jsxs, jsx } from "react/jsx-runtime";
+function Menu({
+  items,
+  ...rest
+}) {
+  const [anchorEl, setAnchorEl] = useState(null);
+  const open = Boolean(anchorEl);
+  const handleClick = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+  return /* @__PURE__ */ jsxs(Root, {
+    ...rest,
+    children: [/* @__PURE__ */ jsx(IconButton, {
+      size: "medium",
+      onClick: handleClick,
+      children: /* @__PURE__ */ jsx(MoreVertIcon, {
+        sx: {
+          fontSize: 18
+        }
+      })
+    }), /* @__PURE__ */ jsx(MuiMenu, {
+      anchorEl,
+      anchorOrigin: {
+        vertical: "bottom",
+        horizontal: "right"
+      },
+      transformOrigin: {
+        vertical: "top",
+        horizontal: "right"
+      },
+      open,
+      onClose: handleClose,
+      children: items.map(({
+        onClick,
+        text,
+        ...itemProps
+      }, index) => {
+        const _onClick = () => {
+          onClick();
+          handleClose();
+        };
+        return /* @__PURE__ */ jsx(StyledMenuItem, {
+          onClick: _onClick,
+          ...itemProps,
+          children: /* @__PURE__ */ jsx(Box, {
+            minWidth: 100,
+            children: text
+          })
+        }, index);
+      })
+    })]
+  });
+}
+Menu.propTypes = {
+  items: PropTypes.array.isRequired
+};
+Menu.defaultProps = {};
+const Root = styled("div")`
+  display: inline-block;
+`;
+const StyledMenuItem = styled(MuiMenuItem)`
+  font-size: 14px;
+`;
+export {
+  Menu as default
+};