comment memo for now

wax-prosemirror-components/src/components/comments/ConnectedComment.js

@@ -12,118 +12,118 @@ const ConnectedCommentStyled = styled.div`
 `;
 
 export default ({ comment, top, commentId }) => {
-  const MemorizedComponent = memo(() => {
-    const {
-      view,
-      view: {
-        main: {
-          props: { user },
-        },
+  // const MemorizedComponent = memo(() => {
+  const {
+    view,
+    view: {
+      main: {
+        props: { user },
       },
-      app,
-      activeView,
-    } = useContext(WaxContext);
+    },
+    app,
+    activeView,
+  } = useContext(WaxContext);
 
-    const { state, dispatch } = activeView;
-    const viewId = comment.attrs.viewid;
+  const { state, dispatch } = activeView;
+  const viewId = comment.attrs.viewid;
 
-    const allCommentsWithSameId = DocumentHelpers.findAllMarksWithSameId(
-      view[viewId].state,
-      comment,
-    );
+  const allCommentsWithSameId = DocumentHelpers.findAllMarksWithSameId(
+    view[viewId].state,
+    comment,
+  );
 
-    const commentMark = state.schema.marks.comment;
+  const commentMark = state.schema.marks.comment;
 
-    let active = false;
+  let active = false;
 
-    const styles = {
-      top: `${top}px`,
-    };
+  const styles = {
+    top: `${top}px`,
+  };
 
-    const commentPlugin = app.PmPlugins.get('commentPlugin');
-    const activeComment = commentPlugin.getState(activeView.state).comment;
-
-    if (activeComment && commentId === activeComment.attrs.id) active = true;
-
-    const onClickPost = content => {
-      const { tr } = state;
-
-      const obj = {
-        content,
-        displayName: user.username,
-        timestamp: Math.floor(Date.now() / 300000),
-      };
-
-      comment.attrs.conversation.push(obj);
-
-      allCommentsWithSameId.forEach(singleComment => {
-        dispatch(
-          tr.addMark(
-            singleComment.pos,
-            singleComment.pos + singleComment.nodeSize,
-            commentMark.create({
-              ...((comment && comment.attrs) || {}),
-              conversation: comment.attrs.conversation,
-            }),
-          ),
-        );
-      });
-    };
+  const commentPlugin = app.PmPlugins.get('commentPlugin');
+  const activeComment = commentPlugin.getState(activeView.state).comment;
+
+  if (activeComment && commentId === activeComment.attrs.id) active = true;
 
-    const onClickBox = () => {
-      if (active) {
-        view[viewId].focus();
-        return false;
-      }
+  const onClickPost = content => {
+    const { tr } = state;
 
-      const maxPos = maxBy(allCommentsWithSameId, 'pos');
-      maxPos.pos += last(allCommentsWithSameId).node.nodeSize;
+    const obj = {
+      content,
+      displayName: user.username,
+      timestamp: Math.floor(Date.now() / 300000),
+    };
+
+    comment.attrs.conversation.push(obj);
 
-      view[viewId].dispatch(
-        view[viewId].state.tr.setSelection(
-          new TextSelection(
-            view[viewId].state.tr.doc.resolve(maxPos.pos, maxPos.pos),
-          ),
+    allCommentsWithSameId.forEach(singleComment => {
+      dispatch(
+        tr.addMark(
+          singleComment.pos,
+          singleComment.pos + singleComment.nodeSize,
+          commentMark.create({
+            ...((comment && comment.attrs) || {}),
+            conversation: comment.attrs.conversation,
+          }),
         ),
       );
+    });
+  };
 
+  const onClickBox = () => {
+    if (active) {
       view[viewId].focus();
-      return true;
-    };
+      return false;
+    }
 
-    const onClickResolve = () => {
-      let maxPos = comment.pos;
-      let minPos = comment.pos;
+    const maxPos = maxBy(allCommentsWithSameId, 'pos');
+    maxPos.pos += last(allCommentsWithSameId).node.nodeSize;
 
-      allCommentsWithSameId.forEach(singleComment => {
-        const markPosition = DocumentHelpers.findMarkPosition(
-          state,
-          singleComment.pos,
-          'comment',
-        );
-        if (markPosition.from < minPos) minPos = markPosition.from;
-        if (markPosition.to > maxPos) maxPos = markPosition.to;
-      });
-
-      if (allCommentsWithSameId.length > 1)
-        maxPos += last(allCommentsWithSameId).node.nodeSize;
-      dispatch(state.tr.removeMark(minPos, maxPos, commentMark));
-      activeView.focus();
-    };
-
-    return (
-      <ConnectedCommentStyled data-box={commentId} style={styles}>
-        <CommentBox
-          key={commentId}
-          active={active}
-          commentId={commentId}
-          commentData={comment.attrs.conversation}
-          onClickPost={onClickPost}
-          onClickBox={onClickBox}
-          onClickResolve={onClickResolve}
-        />
-      </ConnectedCommentStyled>
+    view[viewId].dispatch(
+      view[viewId].state.tr.setSelection(
+        new TextSelection(
+          view[viewId].state.tr.doc.resolve(maxPos.pos, maxPos.pos),
+        ),
+      ),
     );
-  });
-  return <MemorizedComponent />;
+
+    view[viewId].focus();
+    return true;
+  };
+
+  const onClickResolve = () => {
+    let maxPos = comment.pos;
+    let minPos = comment.pos;
+
+    allCommentsWithSameId.forEach(singleComment => {
+      const markPosition = DocumentHelpers.findMarkPosition(
+        state,
+        singleComment.pos,
+        'comment',
+      );
+      if (markPosition.from < minPos) minPos = markPosition.from;
+      if (markPosition.to > maxPos) maxPos = markPosition.to;
+    });
+
+    if (allCommentsWithSameId.length > 1)
+      maxPos += last(allCommentsWithSameId).node.nodeSize;
+    dispatch(state.tr.removeMark(minPos, maxPos, commentMark));
+    activeView.focus();
+  };
+
+  return (
+    <ConnectedCommentStyled data-box={commentId} style={styles}>
+      <CommentBox
+        key={commentId}
+        active={active}
+        commentId={commentId}
+        commentData={comment.attrs.conversation}
+        onClickPost={onClickPost}
+        onClickBox={onClickBox}
+        onClickResolve={onClickResolve}
+      />
+    </ConnectedCommentStyled>
+  );
+  // });
+  // return <MemorizedComponent />;
 };