feat(services): add users to comments

editors/demo/src/Editoria/Editoria.js

@@ -26,6 +26,11 @@ const user = {
   username: 'admin',
 };
 
+// const users = [{
+//   userId: 'b3cfc28e-0f2e-45b5-b505-e66783d4f946',
+//   username: 'admin',
+// }];
+
 const Editoria = () => {
   const [width] = useWindowSize();
 
@@ -62,7 +67,7 @@ const Editoria = () => {
         />
       </>
     ),
-    [layout, finalConfig],
+    [key, finalConfig, layout],
   );
   return <>{EditoriaComponent}</>;
 };

wax-prosemirror-core/src/Wax.js

@@ -42,6 +42,7 @@ const Wax = forwardRef((props, ref) => {
     readonly,
     value,
     user,
+    users,
     onChange,
     targetFormat,
     scrollMargin,
@@ -80,6 +81,7 @@ const Wax = forwardRef((props, ref) => {
             undefined
           }
           user={user}
+          users={users}
           value={value}
         >
           {({ editor }) => <WaxRender className={className} editor={editor} />}

wax-prosemirror-core/src/WaxView.js

@@ -38,6 +38,7 @@ const WaxView = forwardRef((props, ref) => {
     readonly,
     autoFocus,
     user,
+    users,
     targetFormat,
     serializer,
     scrollMargin,
@@ -73,6 +74,7 @@ const WaxView = forwardRef((props, ref) => {
             dispatchTransaction,
             disallowedTools: [],
             user,
+            users,
             scrollMargin: scrollMargin || 200,
             scrollThreshold: scrollThreshold || 200,
             attributes: {

wax-prosemirror-services/src/CommentsService/components/ConnectedComment.js

@@ -28,7 +28,7 @@ export default ({ comment, top, commentId, recalculateTops }) => {
     pmViews,
     pmViews: {
       main: {
-        props: { user },
+        props: { user, users },
       },
     },
     app,
@@ -74,9 +74,14 @@ export default ({ comment, top, commentId, recalculateTops }) => {
 
   const onClickPost = ({ commentValue, title }) => {
     setClickPost(true);
+    let currentUser = users.find(u => u.currentUser === true);
+    if (user) {
+      currentUser = user;
+    }
     const obj = {
       content: commentValue,
-      displayName: user.username,
+      displayName: currentUser ? currentUser.username : 'Anonymous',
+      userId: currentUser ? currentUser.userId : '1',
       timestamp: Math.floor(Date.now()),
     };
 

wax-prosemirror-services/src/CommentsService/components/ui/comments/CommentBox.js

@@ -133,6 +133,7 @@ CommentBox.propTypes = {
     PropTypes.shape({
       content: PropTypes.string.isRequired,
       displayName: PropTypes.string.isRequired,
+      userId: PropTypes.string,
       timestamp: PropTypes.string.number,
     }),
   ),

wax-prosemirror-services/src/CommentsService/components/ui/comments/CommentItemList.js

-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useContext } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { clone, uniqueId } from 'lodash';
 import { override, th } from '@pubsweet/ui-toolkit';
-
+import { WaxContext } from 'wax-prosemirror-core';
 import CommentItem from './CommentItem';
 
 const Wrapper = styled.div`
@@ -39,6 +39,15 @@ const CommentItemList = props => {
 
   const [items, setItems] = useState(data);
 
+  const context = useContext(WaxContext);
+  const {
+    pmViews: {
+      main: {
+        props: { users },
+      },
+    },
+  } = context;
+
   useEffect(() => {
     if (!active) {
       const first = clone(data[0]);
@@ -54,6 +63,8 @@ const CommentItemList = props => {
     }
   }, [active, data]);
 
+  const displayName = id => users.find(user => user.userId === id);
+
   return (
     <Wrapper active={active} className={className}>
       {title && <CommentTitle>{title}</CommentTitle>}
@@ -61,7 +72,9 @@ const CommentItemList = props => {
         <CommentItem
           active={active}
           content={item.content}
-          displayName={item.displayName}
+          displayName={
+            displayName(item.userId)?.displayName || item.displayName
+          }
           key={uniqueId('comment-item-')}
           timestamp={item.timestamp}
         />
@@ -84,6 +97,7 @@ CommentItemList.propTypes = {
     PropTypes.shape({
       content: PropTypes.string.isRequired,
       displayName: PropTypes.string.isRequired,
+      id: PropTypes.string,
       timestamp: PropTypes.number.isRequired,
     }),
   ),