@seafile/comment-editor 0.0.1-alpha.0

package/dist/basic-sdk/comment/components/global-comment/index.js

@@ -0,0 +1,212 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactI18next = require("react-i18next");
+var _reactstrap = require("reactstrap");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _dayjs = _interopRequireDefault(require("dayjs"));
+var _context = _interopRequireDefault(require("../../../context"));
+var _core = require("../../../extension/core");
+var _constants = require("../../constants");
+var _useCommentList = _interopRequireDefault(require("../../hooks/comment-hooks/use-comment-list"));
+var _commentItemCollapseWrapper = _interopRequireDefault(require("../comment-item-collapse-wrapper"));
+var _commentItemWrapper = _interopRequireDefault(require("../comment-item-wrapper"));
+var _globalCommentBodyHeader = _interopRequireDefault(require("./global-comment-body-header"));
+var _globalCommentEditor = _interopRequireDefault(require("./global-comment-editor"));
+var _globalCommentHeader = _interopRequireDefault(require("./global-comment-header"));
+require("./index.css");
+const GlobalComment = _ref => {
+  let {
+    editor,
+    deleteUnseenNotifications,
+    t
+  } = _ref;
+  const contentRef = (0, _react.useRef)(null);
+  const commentDetailRef = (0, _react.useRef)(null);
+  const [activeCommentGroup, setActiveCommentGroup] = (0, _react.useState)(null);
+  const [showEditor, setShowEditor] = (0, _react.useState)(false);
+  const [isScrollDisplayed, setIsScrollDisplayed] = (0, _react.useState)(false);
+  const [globalCommentContent, setGlobalCommentContent] = (0, _react.useState)(null);
+  const {
+    commentList,
+    commentType,
+    setCommentType,
+    dispatch
+  } = (0, _useCommentList.default)();
+  const detectScroll = (0, _react.useCallback)(() => {
+    if (!contentRef.current) return;
+    const contentContainer = contentRef.current;
+    const isShowScroll = contentContainer.scrollHeight > contentContainer.clientHeight;
+    setIsScrollDisplayed(isShowScroll);
+  }, []);
+  const onCommentsPanelBodyScroll = (0, _react.useCallback)(position => {
+    var _contentRef$current, _contentRef$current2;
+    (_contentRef$current = contentRef.current) === null || _contentRef$current === void 0 ? void 0 : _contentRef$current.scrollTo({
+      top: position === 'top' ? 0 : (_contentRef$current2 = contentRef.current) === null || _contentRef$current2 === void 0 ? void 0 : _contentRef$current2.scrollHeight,
+      behavior: 'smooth'
+    });
+  }, [contentRef]);
+  (0, _react.useEffect)(() => {
+    detectScroll();
+    // When a comment is updated, update the comment details page
+    if (activeCommentGroup) {
+      const newActiveCommentGroup = commentList.find(item => item.id === activeCommentGroup.id);
+      setActiveCommentGroup(newActiveCommentGroup);
+      deleteUnseenNotifications && deleteUnseenNotifications(newActiveCommentGroup);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [commentList, detectScroll]);
+  const updateScrollPosition = (0, _react.useCallback)(() => {
+    var _contentRef$current3;
+    const resolvedDom = document.querySelector('.sdoc-resolved');
+    (_contentRef$current3 = contentRef.current) === null || _contentRef$current3 === void 0 ? void 0 : _contentRef$current3.scrollTo({
+      top: resolvedDom.offsetTop,
+      behavior: 'smooth'
+    });
+  }, []);
+  const insertComment = (0, _react.useCallback)(async (elementId, comment) => {
+    const res = await _context.default.insertComment(comment);
+    const {
+      comment: returnComment
+    } = res.data;
+    const newComment = {
+      ...comment,
+      id: returnComment.id,
+      user_name: returnComment.user_name,
+      avatar_url: returnComment.avatar_url,
+      replies: []
+    };
+    dispatch({
+      type: 'INSERT_COMMENT',
+      payload: {
+        element_id: elementId,
+        comment: newComment
+      }
+    });
+  }, [dispatch]);
+  const insertDocComment = (0, _react.useCallback)(commentDetail => {
+    var _commentDetailRef$cur;
+    // Reply to a comment
+    if (activeCommentGroup && (_commentDetailRef$cur = commentDetailRef.current) !== null && _commentDetailRef$cur !== void 0 && _commentDetailRef$cur.insertContent) {
+      commentDetailRef.current.insertContent(commentDetail);
+    } else {
+      // Insert global comment
+      const user = _context.default.getUserInfo();
+      const elementId = _constants.DOC_COMMENT_ELEMENT_ID;
+      const time = (0, _dayjs.default)().format('YYYY-MM-DD HH:mm:ss');
+      const comment = {
+        comment: commentDetail,
+        detail: {
+          element_id: elementId,
+          comment: commentDetail
+        },
+        author: user.username,
+        updated_at: time
+      };
+      insertComment(elementId, comment);
+      detectScroll();
+    }
+    // After the comment is inserted, scroll to the bottom
+    setTimeout(() => {
+      onCommentsPanelBodyScroll('bottom');
+    }, 500);
+  }, [activeCommentGroup, detectScroll, insertComment, onCommentsPanelBodyScroll]);
+  const hiddenCommentEditor = (0, _react.useCallback)(() => {
+    setShowEditor(false);
+  }, []);
+  const isClickCommentPanelBody = (0, _react.useCallback)(event => {
+    if (contentRef.current && contentRef.current.contains(event.target)) return true;
+    return false;
+  }, []);
+  const getNodeByElementId = (0, _react.useCallback)(elementId => {
+    if (elementId !== _constants.DOC_COMMENT_ELEMENT_ID) {
+      return (0, _core.getNodeById)(editor.children, elementId);
+    }
+    return null;
+  }, [editor.children]);
+  const setCurrentCommentGroup = (0, _react.useCallback)(commentGroupId => {
+    const activeCommentGroup = commentList.find(item => item.id === commentGroupId);
+    if (activeCommentGroup) {
+      setActiveCommentGroup(activeCommentGroup);
+      deleteUnseenNotifications && deleteUnseenNotifications(activeCommentGroup);
+    } else {
+      setActiveCommentGroup(null);
+    }
+  }, [commentList, deleteUnseenNotifications]);
+  const commentEditorPlaceholder = !activeCommentGroup ? t('Enter_comment_shift_enter_for_new_line_Enter_to_send') : t('Enter_reply_shift_Enter_for_new_line_Enter_to_send');
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-comment-drawer"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "comments-panel-wrapper"
+  }, /*#__PURE__*/_react.default.createElement(_globalCommentHeader.default, {
+    toggle: () => {},
+    activeCommentGroup: activeCommentGroup,
+    setCurrentCommentGroup: setCurrentCommentGroup
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "comments-panel-body"
+  }, !activeCommentGroup && /*#__PURE__*/_react.default.createElement(_globalCommentBodyHeader.default, {
+    commentList: commentList,
+    commentType: commentType,
+    setCommentType: setCommentType
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    ref: contentRef,
+    className: "comments-panel-body__content"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    id: "global-comment-list-container",
+    className: "sdoc-comment-list-container"
+  }, !activeCommentGroup && Array.isArray(commentList) && commentList.map(comment => {
+    var _comment$replies, _comment$replies2;
+    const replyCount = (_comment$replies = comment.replies) === null || _comment$replies === void 0 ? void 0 : _comment$replies.length;
+    const latestReply = ((_comment$replies2 = comment.replies) === null || _comment$replies2 === void 0 ? void 0 : _comment$replies2.length) > 0 ? comment.replies[comment.replies.length - 1] : null;
+    const elementId = comment.detail.element_id;
+    const element = getNodeByElementId(elementId);
+    return /*#__PURE__*/_react.default.createElement(_commentItemCollapseWrapper.default, {
+      key: comment.id,
+      editor: editor,
+      element: element,
+      topLevelComment: comment,
+      replyCount: replyCount,
+      latestReply: latestReply,
+      setCurrentCommentGroup: setCurrentCommentGroup
+    });
+  }), activeCommentGroup && /*#__PURE__*/_react.default.createElement(_commentItemWrapper.default, {
+    key: activeCommentGroup.id,
+    editor: editor,
+    element: getNodeByElementId(activeCommentGroup.detail.element_id),
+    container: "global-comment-list-container",
+    commentDetailRef: commentDetailRef,
+    comment: activeCommentGroup,
+    isGlobalComment: true,
+    isActive: true,
+    updateScrollPosition: updateScrollPosition,
+    isClickCommentPanelBody: isClickCommentPanelBody,
+    setCurrentCommentGroup: setCurrentCommentGroup
+  }))), /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)('global-comment-input-wrapper', {
+      'active': globalCommentContent === null || globalCommentContent === void 0 ? void 0 : globalCommentContent.trim()
+    })
+  }, !showEditor && /*#__PURE__*/_react.default.createElement(_reactstrap.Input, {
+    value: globalCommentContent !== null && globalCommentContent !== void 0 && globalCommentContent.trim() ? '.....' : '',
+    readOnly: true,
+    placeholder: commentEditorPlaceholder,
+    onFocus: () => {
+      setShowEditor(true);
+    }
+  }), showEditor && /*#__PURE__*/_react.default.createElement(_globalCommentEditor.default, {
+    globalCommentContent: globalCommentContent,
+    isScrollDisplayed: isScrollDisplayed,
+    type: activeCommentGroup ? 'replay' : 'comment',
+    hiddenCommentEditor: hiddenCommentEditor,
+    insertDocComment: insertDocComment,
+    onContentChange: content => {
+      setGlobalCommentContent(content);
+    }
+  })))));
+};
+var _default = exports.default = (0, _reactI18next.withTranslation)('sdoc-editor')(GlobalComment);

package/dist/basic-sdk/comment/components/index.js

@@ -0,0 +1,21 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "EditorComment", {
+  enumerable: true,
+  get: function () {
+    return _editorComment.default;
+  }
+});
+Object.defineProperty(exports, "GlobalComment", {
+  enumerable: true,
+  get: function () {
+    return _globalComment.default;
+  }
+});
+var _editorComment = _interopRequireDefault(require("./editor-comment"));
+var _globalComment = _interopRequireDefault(require("./global-comment"));
+require("./style.css");

package/dist/basic-sdk/comment/components/style.css

@@ -0,0 +1,40 @@
+/* editor-comment css */
+.sdoc-comment-container {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+}
+
+.sdoc-comment-container .comment-container-main {
+  position: absolute;
+  width: 100%;
+  top: 0;
+}
+
+.sdoc-comment-container .comment-container-right {
+  position: absolute;
+  left: 100%;
+}
+
+.sdoc-comment-container .comment-container-right .comment-add-wrapper {
+  position: absolute;
+  left: -22px;
+  width: 20px;
+}
+
+.sdoc-comment-container .comment-container-right .comment-add-wrapper .sdocfont {
+  color: #999;
+  background-color: #FFF;
+}
+
+.sdoc-comment-container .comment-container-right .comment-add-wrapper .sdocfont:hover {
+  color: #333;
+  cursor: pointer;
+}
+
+.sdoc-comment-container .comment-container-right .comment-list-wrapper {
+  position: absolute;
+  left: 14px;
+  width: 280px;
+}

package/dist/basic-sdk/comment/constants/index.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.UP = exports.POPOVER_ADDING_HEIGHT = exports.LINE_HEIGHT = exports.FONT_SIZE_WIDTH = exports.DOWN = exports.DOC_NOTIFICATION_REDUCER_TYPE = exports.DOC_COMMENT_ELEMENT_ID = exports.COMMENT_URL_CLASSNAME = exports.COMMENT_TYPES = void 0;
+const COMMENT_TYPES = exports.COMMENT_TYPES = {
+  DOC: 'Doc_comments',
+  ALL: 'All_comments',
+  RESOLVED: 'Resolved_comments',
+  UNRESOLVED: 'Unresolved_comments'
+};
+const DOWN = exports.DOWN = 'down';
+const UP = exports.UP = 'up';
+const FONT_SIZE_WIDTH = exports.FONT_SIZE_WIDTH = 15;
+const LINE_HEIGHT = exports.LINE_HEIGHT = 22;
+const POPOVER_ADDING_HEIGHT = exports.POPOVER_ADDING_HEIGHT = 10;
+const COMMENT_URL_CLASSNAME = exports.COMMENT_URL_CLASSNAME = 'sdoc-comment-url';
+const DOC_COMMENT_ELEMENT_ID = exports.DOC_COMMENT_ELEMENT_ID = '0';
+const DOC_NOTIFICATION_REDUCER_TYPE = exports.DOC_NOTIFICATION_REDUCER_TYPE = {
+  FETCHING: 'fetching',
+  FETCHED: 'fetched',
+  FETCH_ERROR: 'error',
+  ADD: 'add',
+  DEL: 'del'
+};

package/dist/basic-sdk/comment/helper.js

@@ -0,0 +1,184 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useCursorPosition = exports.updateElementsAttrs = exports.updateCommentedElementsAttrs = exports.getSelectionRange = exports.getSelectedElemIds = exports.getPrimaryElementId = exports.getElementCommentCountTop = exports.getDomById = exports.getCursorPosition = exports.getCommentedTextsByElementId = exports.getAvatarUrl = void 0;
+var _slate = require("@seafile/slate");
+var _slateReact = require("@seafile/slate-react");
+var _context = _interopRequireDefault(require("../context"));
+var _core = require("../extension/core");
+var _useScrollContext = require("../hooks/use-scroll-context");
+const getSelectionRange = () => {
+  if (window.getSelection) {
+    const sel = window.getSelection();
+    if (sel.getRangeAt && sel.rangeCount) {
+      return sel.getRangeAt(0);
+    }
+  } else if (document.selection && document.selection.createRange) {
+    return document.selection.createRange();
+  }
+  return null;
+};
+exports.getSelectionRange = getSelectionRange;
+const getCursorPosition = () => {
+  let x = 0;
+  let y = 0;
+  let range = getSelectionRange();
+  if (range) {
+    const rect = range.getBoundingClientRect();
+    const headerHeight = 93;
+    x = rect.x || 0;
+    y = rect.y - headerHeight + (rect.height - 24) / 2 || 0;
+  }
+  return {
+    x: x,
+    y: y
+  };
+};
+exports.getCursorPosition = getCursorPosition;
+const useCursorPosition = () => {
+  const scrollRef = (0, _useScrollContext.useScrollContext)();
+  const {
+    scrollTop = 0
+  } = scrollRef.current || {};
+  let position = getCursorPosition();
+  if (position.y !== 0) {
+    position.y = position.y + scrollTop;
+  }
+  return position;
+};
+exports.useCursorPosition = useCursorPosition;
+const getAvatarUrl = () => {
+  const server = _context.default.getSetting('serviceUrl');
+  const avatarUrl = `${server}/media/avatars/default.png`;
+  return avatarUrl;
+};
+exports.getAvatarUrl = getAvatarUrl;
+const getElementCommentCountTop = (editor, element, scrollTop) => {
+  let minY;
+  const children = element.children || [];
+  children.forEach(child => {
+    const childDom = _slateReact.ReactEditor.toDOMNode(editor, child);
+
+    // use child real dom
+    const childRealDom = childDom.childNodes[0];
+    const {
+      y
+    } = childRealDom ? childRealDom.getBoundingClientRect() : {
+      y: 0
+    };
+    if (!minY) minY = y;
+    minY = Math.min(minY, y);
+  });
+  return minY - 93 + scrollTop; // 100: header height(56) + toolbar height(37)
+};
+exports.getElementCommentCountTop = getElementCommentCountTop;
+const getSelectedElemIds = editor => {
+  const {
+    selection
+  } = editor;
+  if (!selection) return;
+  const selectedElemId = [];
+  const nodeEntries = Array.from(_slate.Editor.nodes(editor, {
+    match: n => _slate.Element.isElement(n) && _slate.Editor.isBlock(editor, n),
+    mode: 'lowest'
+  }));
+  for (const [node] of nodeEntries) {
+    selectedElemId.push(node.id);
+  }
+  return selectedElemId;
+};
+exports.getSelectedElemIds = getSelectedElemIds;
+const getCommentedTextsByElementId = (elementId, textCommentId) => {
+  const container = document.querySelector(`[data-id='${elementId}']`);
+  if (!container) return [];
+  let targetDoms = container.querySelectorAll(`.sdoc_comment_${textCommentId}`);
+  if (targetDoms.length === 0) {
+    targetDoms = container.querySelectorAll(`.removed_sdoc_comment_${textCommentId}`);
+  }
+  const texts = [];
+  targetDoms.forEach(dom => {
+    var _dom$textContent;
+    texts.push(((_dom$textContent = dom.textContent) === null || _dom$textContent === void 0 ? void 0 : _dom$textContent.trim()) || '');
+  });
+  return texts;
+};
+exports.getCommentedTextsByElementId = getCommentedTextsByElementId;
+const getDomById = elementId => {
+  const container = document.querySelector(`[data-id='${elementId}']`);
+  if (!container) return [];
+  const lastCommentedDomWithMarks = container.querySelector('.comment');
+  return lastCommentedDomWithMarks;
+};
+exports.getDomById = getDomById;
+const updateElementsAttrs = (activeElementIds, editor, text_comment_id) => {
+  if (Array.isArray(activeElementIds)) {
+    for (const elemId of activeElementIds) {
+      const dom = document.querySelectorAll(`[data-id="${elemId}"]`)[0];
+      if (!dom) continue;
+      const domNode = _slateReact.ReactEditor.toSlateNode(editor, dom);
+      const nodePath = (0, _core.findPath)(editor, domNode);
+      domNode.children.forEach((textNode, index) => {
+        if (textNode.comment) {
+          const textNodePath = [...nodePath, index];
+          _slate.Transforms.setNodes(editor, {
+            [`sdoc_comment_${text_comment_id}`]: true
+          }, {
+            at: textNodePath,
+            match: _slate.Text.isText,
+            split: true
+          });
+        }
+      });
+    }
+  }
+};
+exports.updateElementsAttrs = updateElementsAttrs;
+const updateCommentedElementsAttrs = function (activeElementIds, editor, text_comment_id) {
+  let resolved = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+  let isDeleteComment = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
+  if (Array.isArray(activeElementIds)) {
+    _slate.Editor.withoutNormalizing(editor, () => {
+      for (const elemId of activeElementIds) {
+        // const { element } = elem;
+        const dom = document.querySelector(`[data-id="${elemId}"]`);
+        if (!dom) continue;
+        const domNode = _slateReact.ReactEditor.toSlateNode(editor, dom);
+        const domNodePath = (0, _core.findPath)(editor, domNode);
+        domNode.children.forEach((child, index) => {
+          const childPath = [...domNodePath, index];
+          if (_slate.Text.isText(child) && `sdoc_comment_${text_comment_id}` in child) {
+            _slate.Transforms.unsetNodes(editor, [`sdoc_comment_${text_comment_id}`], {
+              at: childPath,
+              match: _slate.Text.isText
+            });
+            !isDeleteComment && _slate.Transforms.setNodes(editor, {
+              [`sdoc_comment_${text_comment_id}`]: resolved
+            }, {
+              at: childPath,
+              match: _slate.Text.isText
+            });
+          }
+        });
+      }
+    });
+  }
+};
+exports.updateCommentedElementsAttrs = updateCommentedElementsAttrs;
+const getPrimaryElementId = detail => {
+  if (!detail) return null;
+  let elementId;
+  const {
+    element_id,
+    element_id_list = []
+  } = detail;
+  if (element_id_list.length > 0) {
+    elementId = element_id_list[0];
+  } else {
+    elementId = element_id;
+  }
+  return elementId;
+};
+exports.getPrimaryElementId = getPrimaryElementId;

package/dist/basic-sdk/comment/hooks/comment-hooks/use-comment-context.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useCommentContext = exports.CommentContext = void 0;
+var _react = _interopRequireWildcard(require("react"));
+const CommentContext = exports.CommentContext = /*#__PURE__*/_react.default.createContext();
+const useCommentContext = () => {
+  const {
+    commentsInfo,
+    dispatch
+  } = (0, _react.useContext)(CommentContext);
+  return {
+    commentsInfo,
+    dispatch
+  };
+};
+exports.useCommentContext = useCommentContext;

package/dist/basic-sdk/comment/hooks/comment-hooks/use-comment-list.js

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _constants = require("../../constants");
+var _useCommentContext = require("./use-comment-context");
+const useCommentList = () => {
+  const {
+    commentsInfo,
+    dispatch
+  } = (0, _useCommentContext.useCommentContext)();
+  const {
+    comment_list
+  } = commentsInfo || {};
+  const [commentType, setCommentType] = (0, _react.useState)(_constants.COMMENT_TYPES.ALL);
+  const [commentList, setCommentList] = (0, _react.useState)([]);
+  (0, _react.useEffect)(() => {
+    if (commentType === _constants.COMMENT_TYPES.ALL) {
+      const commentList = comment_list.map(item => {
+        item.replies = item.replies.filter(reply => !['True', 'False'].includes(reply.reply));
+        return item;
+      });
+      setCommentList(commentList);
+    } else if (commentType === _constants.COMMENT_TYPES.RESOLVED) {
+      const commentList = comment_list.filter(item => item.resolved);
+      setCommentList(commentList);
+    } else if (commentType === _constants.COMMENT_TYPES.UNRESOLVED) {
+      const commentList = comment_list.filter(item => !item.resolved);
+      setCommentList(commentList);
+    } else if (commentType === _constants.COMMENT_TYPES.DOC) {
+      const commentList = comment_list.filter(comment => comment.detail.element_id === _constants.DOC_COMMENT_ELEMENT_ID);
+      setCommentList(commentList);
+    }
+  }, [commentType, comment_list]);
+  return {
+    dispatch,
+    commentList,
+    commentType,
+    setCommentType
+  };
+};
+var _default = exports.default = useCommentList;

package/dist/basic-sdk/comment/hooks/comment-hooks/use-comment-mount.js

@@ -0,0 +1,58 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useCommentsMount = void 0;
+var _react = require("react");
+var _constants = require("../../../constants");
+var _context = _interopRequireDefault(require("../../../context"));
+var _eventBus = _interopRequireDefault(require("../../../utils/event-bus"));
+const useCommentsMount = dispatch => {
+  const request = (0, _react.useCallback)(async () => {
+    dispatch({
+      type: 'FETCHING_STATE'
+    });
+    try {
+      const res = await _context.default.listComments();
+      const comments = res.data.comments;
+      dispatch({
+        type: 'RECEIVE_STATE',
+        payload: comments
+      });
+    } catch (error) {
+      console.log(error);
+      dispatch({
+        type: 'FETCHING_ERROR'
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const reRequest = (0, _react.useCallback)(async () => {
+    dispatch({
+      type: 'REFETCHING_STATE'
+    });
+    try {
+      const res = await _context.default.listComments();
+      const comments = res.data.comments;
+      dispatch({
+        type: 'RECEIVE_STATE',
+        payload: comments
+      });
+    } catch (error) {
+      console.log(error);
+      // dispatch({type: 'FETCHING_ERROR'});
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  (0, _react.useEffect)(() => {
+    request();
+    const eventBus = _eventBus.default.getInstance();
+    const unsubscribeNewNotification = eventBus.subscribe(_constants.INTERNAL_EVENT.NEW_NOTIFICATION, reRequest);
+    return () => {
+      unsubscribeNewNotification();
+    };
+  }, [request, reRequest]);
+};
+exports.useCommentsMount = useCommentsMount;

package/dist/basic-sdk/comment/hooks/notification-hooks/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "NotificationContext", {
+  enumerable: true,
+  get: function () {
+    return _useNotificationContext.NotificationContext;
+  }
+});
+Object.defineProperty(exports, "useNotificationContext", {
+  enumerable: true,
+  get: function () {
+    return _useNotificationContext.useNotificationContext;
+  }
+});
+Object.defineProperty(exports, "useNotificationsMount", {
+  enumerable: true,
+  get: function () {
+    return _useNotificationMount.useNotificationsMount;
+  }
+});
+var _useNotificationContext = require("./use-notification-context");
+var _useNotificationMount = require("./use-notification-mount");

package/dist/basic-sdk/comment/hooks/notification-hooks/use-notification-context.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useNotificationContext = exports.NotificationContext = void 0;
+var _react = _interopRequireWildcard(require("react"));
+const NotificationContext = exports.NotificationContext = /*#__PURE__*/_react.default.createContext();
+const useNotificationContext = () => {
+  const {
+    notificationsInfo,
+    dispatch
+  } = (0, _react.useContext)(NotificationContext);
+  return {
+    notificationsInfo,
+    dispatch
+  };
+};
+exports.useNotificationContext = useNotificationContext;