@blocklet/discuss-kit 1.0.0

package/lib/es/did-comment.js

@@ -0,0 +1,377 @@
+import { useMemo, useEffect, useContext } from "react";
+import styled from "@emotion/styled";
+import joinUrl from "url-join";
+import PropTypes from "prop-types";
+import useAsyncRetry from "react-use/lib/useAsyncRetry";
+import SessionManager from "@arcblock/did-connect/lib/SessionManager";
+import { SessionContext } from "@arcblock/did-connect/lib/Session";
+import Button from "@arcblock/ux/lib/Button";
+import Box from "@mui/material/Box";
+import CircularProgress from "@mui/material/CircularProgress";
+import ButtonGroup from "@mui/material/ButtonGroup";
+import { useLocaleContext, LocaleProvider } from "@arcblock/ux/lib/Locale/context";
+import { ErrorBoundary } from "react-error-boundary";
+import { InternalThemeProvider, CommentsProvider, useCommentsContext, BinaryThumb, CommentInput, CommentList } from "@blocklet/discuss-kit-ux";
+import ErrorFallback from "./components/error-fallback";
+import { translations } from "./locales";
+import getWsClient, { useSubscription } from "./ws";
+import api, { fetchRatingStats } from "./api";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+const getPrefix = () => {
+  var _a, _b;
+  const service = (_b = (_a = window.blocklet) == null ? void 0 : _a.componentMountPoints) == null ? void 0 : _b.find((x) => x.name === "did-comments");
+  return service ? joinUrl(service.mountPoint, "/") : "";
+};
+const formatComment = (comment) => {
+  var _a;
+  return {
+    ...comment,
+    rootId: comment.commentId,
+    author: comment.commenter,
+    createdAt: comment.createdAt ? new Date(comment.createdAt) : null,
+    updatedAt: comment.updatedAt ? new Date(comment.updatedAt) : null,
+    deletedAt: comment.deletedAt ? new Date(comment.deletedAt) : null,
+    replies: (_a = comment.replies) == null ? void 0 : _a.map(formatComment)
+  };
+};
+const commentAPI = {
+  fetchComments: async (params) => {
+    const copy = {
+      ...params,
+      embed: params.rootId ? "rating" : "replies,rating",
+      size: params.limit
+    };
+    const {
+      data: {
+        data,
+        nextCursor,
+        total
+      }
+    } = await api.get("/comments", {
+      params: copy
+    });
+    return {
+      data: data == null ? void 0 : data.map(formatComment),
+      nextCursor,
+      total
+    };
+  },
+  fetchCommentPosition: async ({
+    id,
+    ...params
+  }) => {
+    const {
+      data
+    } = await api.get(`/comments/${id}/position`, {
+      params
+    });
+    return data;
+  },
+  deleteComment: async ({
+    id
+  }) => {
+    const {
+      data
+    } = await api.delete(`/comments/${id}`);
+    return data;
+  },
+  updateComment: async ({
+    id
+  }, content) => {
+    await api.put(`/comments/${id}`, {
+      content
+    });
+  },
+  reply: async ({
+    id,
+    rootId
+  }, content) => {
+    const {
+      data
+    } = await api.post(`/comments/${rootId || id}/replies`, {
+      content,
+      parentId: id
+    });
+    return formatComment(data);
+  },
+  rate: async (comment, value, ratingType) => {
+    await api.post(`/objects/${comment.objectId}/comments/${comment.id}/ratings`, {
+      ratingType,
+      value
+    });
+  },
+  unrate: async (comment) => {
+    await api.delete(`/objects/${comment.objectId}/comments/${comment.id}/ratings`);
+  }
+};
+function DIDComment({
+  showConnectBtn,
+  object,
+  onChange
+}) {
+  const {
+    session
+  } = useContext(SessionContext) || {};
+  const {
+    state,
+    sort,
+    add,
+    updateCommentState
+  } = useCommentsContext();
+  const {
+    total,
+    order,
+    initialized
+  } = state;
+  const {
+    t
+  } = useLocaleContext();
+  const objectRatingState = useAsyncRetry(() => fetchRatingStats(object.id));
+  const handlers = {
+    ADD_COMMENT: (data) => add(formatComment(data)),
+    RATING: () => objectRatingState.retry(),
+    RATING_COMMENT: async ({
+      commentId
+    }) => {
+      const rating = await fetchRatingStats(commentId);
+      updateCommentState(commentId, (current) => ({
+        ...current,
+        rating
+      }));
+    }
+  };
+  useSubscription(object.id, ({
+    event,
+    data
+  }) => {
+    var _a;
+    (_a = handlers[event]) == null ? void 0 : _a.call(handlers, data);
+  }, [object.id, state]);
+  if (!initialized) {
+    return /* @__PURE__ */ jsx(CircularProgress, {});
+  }
+  const sendComment = async (content) => {
+    const {
+      data
+    } = await api.post("/comments", {
+      content,
+      object
+    });
+    add(formatComment(data));
+    onChange();
+  };
+  const handleOnRate = async ({
+    ratingType,
+    value
+  }) => {
+    if (!session.user) {
+      session.login();
+      throw new Error("Unauthenticated.");
+    }
+    await api.post(`/objects/${object.id}/ratings`, {
+      ratingType,
+      value
+    });
+  };
+  const handleOnUnrate = async () => {
+    if (!session.user) {
+      session.login();
+      throw new Error("Unauthenticated.");
+    }
+    await api.delete(`/objects/${object.id}/ratings`);
+  };
+  return /* @__PURE__ */ jsxs(Container, {
+    children: [/* @__PURE__ */ jsxs(Fragment, {
+      children: [/* @__PURE__ */ jsxs(Box, {
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+        children: [/* @__PURE__ */ jsx(Box, {
+          mb: 1,
+          children: objectRatingState.value && /* @__PURE__ */ jsx(BinaryThumb, {
+            selectedValue: objectRatingState.value.myRating,
+            countPerValue: objectRatingState.value.counts,
+            onRate: handleOnRate,
+            onUnrate: handleOnUnrate,
+            variant: "inverse",
+            size: "lg"
+          })
+        }), showConnectBtn && (session.user ? /* @__PURE__ */ jsx(SessionManager, {
+          style: {
+            padding: 0
+          },
+          showText: true,
+          showRole: true,
+          session
+        }) : /* @__PURE__ */ jsx(Button, {
+          size: "medium",
+          variant: "contained",
+          color: "primary",
+          onClick: () => session.login(),
+          children: t("connect")
+        })), !showConnectBtn && !session.user && /* @__PURE__ */ jsx(Button, {
+          size: "medium",
+          variant: "contained",
+          color: "primary",
+          onClick: () => session.login(),
+          children: t("connect")
+        })]
+      }), !session.user && /* @__PURE__ */ jsx("div", {
+        className: "input-no-connect",
+        children: /* @__PURE__ */ jsxs("span", {
+          className: "connect-tip",
+          children: [t("connectDIDWallet"), " ", /* @__PURE__ */ jsx("a", {
+            className: "down-load-wallet",
+            href: "https://www.didwallet.io/",
+            target: "_blank",
+            rel: "noreferrer",
+            children: t("installDIDWallet")
+          })]
+        })
+      }), session.user && /* @__PURE__ */ jsx(Box, {
+        mt: 2.5,
+        children: /* @__PURE__ */ jsx(CommentInput, {
+          send: sendComment
+        })
+      })]
+    }), !!total && /* @__PURE__ */ jsxs(Box, {
+      display: "flex",
+      justifyContent: "space-between",
+      mt: 4,
+      children: [/* @__PURE__ */ jsxs("span", {
+        children: [total > 0 ? `${total} ${t("comments")}` : t("comment"), " "]
+      }), /* @__PURE__ */ jsxs(ButtonGroup, {
+        children: [/* @__PURE__ */ jsx(Button, {
+          variant: "contained",
+          color: order !== "desc" ? "primary" : "inherit",
+          size: "small",
+          onClick: () => sort("asc"),
+          children: t("oldest")
+        }), /* @__PURE__ */ jsx(Button, {
+          variant: "contained",
+          color: order === "desc" ? "primary" : "inherit",
+          size: "small",
+          onClick: () => sort("desc"),
+          children: t("newest")
+        })]
+      })]
+    }), /* @__PURE__ */ jsx(CommentList, {})]
+  });
+}
+DIDComment.propTypes = {
+  showConnectBtn: PropTypes.bool,
+  object: PropTypes.object.isRequired,
+  onChange: PropTypes.func
+};
+DIDComment.defaultProps = {
+  showConnectBtn: false,
+  onChange: () => {
+  }
+};
+function Wrapper({
+  target,
+  prefix,
+  flatView,
+  ...rest
+}) {
+  if (!(target == null ? void 0 : target.id)) {
+    throw new Error("target is required.");
+  }
+  const {
+    locale
+  } = useLocaleContext();
+  const object = useMemo(
+    () => ({
+      ...target,
+      link: window.location.href
+    }),
+    [target]
+  );
+  const _prefix = prefix || getPrefix();
+  if (!_prefix) {
+    throw new Error("prefix is required.");
+  }
+  const wsClient = getWsClient(_prefix);
+  useEffect(() => {
+    wsClient.connect();
+    return () => {
+      if (wsClient.isConnected()) {
+        wsClient.disconnect();
+      }
+    };
+  }, []);
+  api.defaults.baseURL = joinUrl(_prefix, "/api/");
+  return /* @__PURE__ */ jsx(ErrorBoundary, {
+    FallbackComponent: ErrorFallback,
+    children: /* @__PURE__ */ jsx(LocaleProvider, {
+      translations,
+      locale,
+      children: /* @__PURE__ */ jsx(InternalThemeProvider, {
+        children: /* @__PURE__ */ jsx(CommentsProvider, {
+          target: object,
+          api: commentAPI,
+          flatView,
+          children: /* @__PURE__ */ jsx(DIDComment, {
+            ...rest,
+            object
+          })
+        })
+      })
+    })
+  });
+}
+Wrapper.propTypes = {
+  target: PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    title: PropTypes.string,
+    desc: PropTypes.string,
+    owner: PropTypes.string
+  }).isRequired,
+  showConnectBtn: PropTypes.bool,
+  onChange: PropTypes.func,
+  prefix: PropTypes.string,
+  flatView: PropTypes.bool
+};
+Wrapper.defaultProps = {
+  showConnectBtn: false,
+  onChange: () => {
+  },
+  prefix: "",
+  flatView: false
+};
+const Container = styled.div`
+  background-color: #fff;
+  width: 100%;
+  margin: 0 auto;
+  box-sizing: border-box;
+  padding: ${(props) => props.padding ? "20px" : "0"};
+  color: #25292f;
+  border: ${(props) => props.border ? "1px solid rgb(208, 215, 222)" : "none"};
+  border-radius: 6px;
+  .input-no-connect {
+    margin: 24px 0 0 0;
+    display: flex;
+    font-size: 16px;
+    width: 100%;
+    text-align: start;
+    word-break: break-all;
+    flex-direction: column;
+    .connect-tip {
+      background: #f2f3f5;
+      padding: 10px;
+      border-radius: 4px;
+      box-sizing: border-box;
+      color: #c4c5ca;
+      margin-bottom: 10px;
+    }
+    .down-load-wallet {
+      color: #6bbdfe;
+    }
+    @media (max-width: 768px) {
+      font-size: 14px;
+    }
+  }
+`;
+export {
+  Wrapper as default
+};

package/lib/es/hooks.js

@@ -0,0 +1,197 @@
+import { useMemo, useRef, useEffect } from "react";
+import useSetState from "react-use/lib/useSetState";
+import uniqBy from "lodash/uniqBy";
+import orderBy from "lodash/orderBy";
+import Toast from "@arcblock/ux/lib/Toast";
+import { fetchRatingStats, fetchMoreReplies, fetchComments } from "./api";
+import { useSubscription } from "./ws";
+const lastItem = (arr) => (arr == null ? void 0 : arr.length) ? arr[arr.length - 1] : null;
+const getInitialState = () => ({
+  comments: [],
+  cursor: null,
+  total: 0,
+  initialized: false,
+  loading: true,
+  error: null,
+  rating: {},
+  sortType: localStorage.getItem("sortType") || "asc"
+});
+const useComments = ({ objectId, flatMode }, deps = []) => {
+  const [state, setState] = useSetState(getInitialState());
+  const commentsKeyById = useMemo(() => {
+    return state.comments.reduce((acc, cur) => {
+      var _a;
+      acc[cur.id] = cur;
+      if ((_a = cur.replies) == null ? void 0 : _a.length) {
+        cur.replies.forEach((item) => {
+          acc[item.id] = item;
+        });
+      }
+      return acc;
+    }, {});
+  }, [state]);
+  const hasMore = useMemo(() => !!state.cursor, [state]);
+  const fetchParamsRef = useRef({
+    objectId,
+    size: 12,
+    embed: "replies,rating",
+    ...flatMode && { includeReplies: 1 }
+  });
+  const updateCommentList = () => {
+    setState({ comments: [...state.comments] });
+  };
+  const updateComment = (commentId, mapper) => {
+    const commentOrReply = commentsKeyById[commentId];
+    if (commentOrReply) {
+      const rootComment = commentsKeyById[commentOrReply.commentId];
+      if (!rootComment || flatMode) {
+        const index = state.comments.findIndex((item) => item.id === commentId);
+        if (index !== -1) {
+          state.comments[index] = mapper(state.comments[index]);
+          updateCommentList();
+        }
+      } else {
+        const index = rootComment.replies.findIndex((item) => item.id === commentId);
+        if (index !== -1) {
+          rootComment.replies[index] = mapper(rootComment.replies[index]);
+          updateComment(rootComment.id, (current) => ({
+            ...current,
+            replies: [...rootComment.replies]
+          }));
+        }
+      }
+    }
+  };
+  const addComment = (commentOrReply) => {
+    if (commentsKeyById[commentOrReply.id]) {
+      return;
+    }
+    const rootComment = commentsKeyById[commentOrReply.commentId];
+    if (!rootComment || flatMode) {
+      const comments = uniqBy([...state.comments, commentOrReply], "id");
+      setState({ comments: orderBy(comments, ["createdAt"], [state.sortType]), total: state.total + 1 });
+    } else {
+      updateComment(rootComment.id, (current) => {
+        var _a;
+        const replies = uniqBy([...rootComment.replies || [], commentOrReply], "id");
+        const newComment = {
+          ...current,
+          replies: orderBy(replies, ["createdAt"], ["asc"]),
+          totalReplies: (current.totalReplies || 0) + 1
+        };
+        if (!current.repliesCursor) {
+          newComment.repliesCursor = (_a = lastItem(current.replies)) == null ? void 0 : _a.createdAt;
+        }
+        return newComment;
+      });
+    }
+  };
+  const removeComment = (comment) => {
+    const isReply = comment.commentId;
+    if (isReply && !flatMode) {
+      updateComment(comment.commentId, (current) => {
+        return {
+          ...current,
+          replies: (current.replies || []).map((item) => {
+            if (item.id === comment.id) {
+              return { ...item, deletedAt: new Date() };
+            }
+            return item;
+          })
+        };
+      });
+    } else {
+      updateComment(comment.id, (current) => {
+        return { ...current, deletedAt: new Date() };
+      });
+    }
+  };
+  const handlers = {
+    ADD_COMMENT: (data) => addComment(data),
+    RATING: async () => {
+      const rating = await fetchRatingStats(objectId);
+      setState({ rating });
+    },
+    RATING_COMMENT: async ({ commentId }) => {
+      const rating = await fetchRatingStats(commentId);
+      updateComment(commentId, (current) => ({
+        ...current,
+        rating
+      }));
+    }
+  };
+  useSubscription(
+    objectId,
+    ({ event, data }) => {
+      var _a;
+      (_a = handlers[event]) == null ? void 0 : _a.call(handlers, data);
+    },
+    [objectId, state]
+  );
+  const fetch = async () => {
+    try {
+      setState({ loading: true });
+      return fetchComments({ ...fetchParamsRef.current, order: state.sortType, cursor: state.cursor });
+    } catch (e) {
+      Toast.warning("Failed to load comments data.");
+      setState({ error: e });
+      return { comments: [], total: 0, cursor: null };
+    } finally {
+      setState({ loading: false });
+    }
+  };
+  const loadMore = async () => {
+    if (hasMore) {
+      const { data: comments, total, nextCursor } = await fetch();
+      const sorted = orderBy([...state.comments, ...comments], ["createdAt"], [state.sortType]);
+      setState({ comments: sorted, total, cursor: nextCursor });
+    }
+  };
+  const loadMoreReplies = async (commentId) => {
+    var _a;
+    const rootComment = commentsKeyById[commentId];
+    const cursor = rootComment.repliesCursor || ((_a = lastItem(rootComment.replies)) == null ? void 0 : _a.createdAt);
+    const data = await fetchMoreReplies({
+      commentId,
+      cursor,
+      embed: "rating"
+    });
+    const loadedReplies = data.data;
+    let replies = uniqBy([...rootComment.replies || [], ...loadedReplies || []], "id");
+    replies = orderBy(replies, ["createdAt"], ["asc"]);
+    updateComment(commentId, (current) => {
+      var _a2;
+      return {
+        ...current,
+        replies,
+        totalReplies: data.total,
+        repliesCursor: (_a2 = lastItem(loadedReplies)) == null ? void 0 : _a2.createdAt
+      };
+    });
+  };
+  const sort = (sortType) => {
+    setState({ sortType, cursor: null });
+    localStorage.setItem("sortType", sortType);
+  };
+  useEffect(() => {
+    const init = async () => {
+      setState({ ...getInitialState(), initialized: false });
+      const [{ data: comments, total, nextCursor }, rating] = await Promise.all([fetch(), fetchRatingStats(objectId)]);
+      setState({ comments, total, cursor: nextCursor, rating, initialized: true });
+    };
+    init();
+  }, [objectId, state.sortType, ...deps || []]);
+  return {
+    ...state,
+    hasMore,
+    loadMore,
+    sort,
+    addComment,
+    updateComment,
+    loadMoreReplies,
+    removeComment
+  };
+};
+export {
+  useComments
+};

package/lib/es/index.js

@@ -0,0 +1,8 @@
+import { default as default2 } from "./did-comment";
+import { default as default3 } from "./did-comment-with-session";
+import { default as default4 } from "./theme-provider";
+export {
+  default2 as DIDComment,
+  default3 as DIDCommentWithSession,
+  default4 as ThemeProvider
+};

package/lib/es/lib/utils.js

@@ -0,0 +1,17 @@
+const protectLogin = (session, action) => {
+  if (session.user) {
+    return action();
+  }
+  return new Promise((resolve) => {
+    session.login(() => resolve(action()));
+  });
+};
+const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+const minDelay = (promise, ms) => {
+  return Promise.all([promise, sleep(ms)]).then(([result]) => result);
+};
+export {
+  minDelay,
+  protectLogin,
+  sleep
+};

package/lib/es/locales/en.js

@@ -0,0 +1,26 @@
+import flat from "flat";
+const en = flat({
+  comments: "Comments",
+  comment: "Comment",
+  poweredBy: "- powered by DID Comments",
+  connect: "Connect",
+  inputPlaceHolder: "Write a comment",
+  oldest: "Oldest",
+  newest: "Newest",
+  loadMore: "Click To Load More",
+  connectDIDWallet: "Please connect DID Wallet.",
+  installDIDWallet: "Click to get your own DID Wallet\u2192",
+  empty: "Be the first to leave a comment.",
+  delete: "Delete",
+  edit: "Edit",
+  confirm: "Confirm",
+  cancel: "Cancel",
+  tip: "Tip",
+  deleteCommentDesc: "Confirm delete this comment?",
+  readMore: "Read more",
+  showMoreReplies: "Show more replies",
+  deleted: "This comment has been deleted"
+});
+export {
+  en as default
+};

package/lib/es/locales/index.js

@@ -0,0 +1,7 @@
+import { translations as translations$1 } from "@blocklet/discuss-kit-ux";
+import en from "./en";
+import zh from "./zh";
+const translations = { zh: { ...zh, ...translations$1.zh }, en: { ...en, ...translations$1.en } };
+export {
+  translations
+};

package/lib/es/locales/zh.js

@@ -0,0 +1,26 @@
+import flat from "flat";
+const zh = flat({
+  comments: "\u6761\u8BC4\u8BBA",
+  comment: "\u8BC4\u8BBA",
+  poweredBy: "- \u7531 DID Comments \u63D0\u4F9B\u652F\u6301",
+  connect: "\u8FDE\u63A5",
+  inputPlaceHolder: "\u5199\u8BC4\u8BBA",
+  oldest: "\u6700\u65E7",
+  newest: "\u6700\u65B0",
+  loadMore: "\u70B9\u51FB\u52A0\u8F7D\u66F4\u591A",
+  connectDIDWallet: "\u8BF7\u5148\u8FDE\u63A5 DID Wallet.",
+  installDIDWallet: "\u70B9\u51FB\u62E5\u6709\u4F60\u7684 DID Wallet\u2192",
+  empty: "\u6210\u4E3A\u7B2C\u4E00\u4E2A\u7559\u4E0B\u8BC4\u8BBA\u7684\u4EBA.",
+  delete: "\u5220\u9664",
+  edit: "\u7F16\u8F91",
+  confirm: "\u786E\u8BA4",
+  cancel: "\u53D6\u6D88",
+  tip: "\u63D0\u793A",
+  deleteCommentDesc: "\u786E\u8BA4\u5220\u9664\u8FD9\u6761\u8BC4\u8BBA?",
+  readMore: "\u66F4\u591A\u5185\u5BB9",
+  showMoreReplies: "\u663E\u793A\u66F4\u591A\u56DE\u590D",
+  deleted: "\u8BE5\u8BC4\u8BBA\u5DF2\u88AB\u5220\u9664"
+});
+export {
+  zh as default
+};

package/lib/es/session.js

@@ -0,0 +1,14 @@
+import { useContext } from "react";
+import { createAuthServiceSessionContext } from "@arcblock/did-connect/lib/Session";
+const { SessionProvider, SessionContext, SessionConsumer, withSession } = createAuthServiceSessionContext();
+function useSessionContext() {
+  const data = useContext(SessionContext);
+  return data;
+}
+export {
+  SessionConsumer,
+  SessionContext,
+  SessionProvider,
+  useSessionContext,
+  withSession
+};