Merge branch 'comments-support-users' into 'master'

feat(services): add users to comments

See merge request !524

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,6 +67,7 @@ const Editoria = () => {
         />
       </>
     ),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [layout, finalConfig],
   );
   return <>{EditoriaComponent}</>;

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

@@ -4,7 +4,7 @@ import React from 'react';
 import ConnectedComment from './ConnectedComment';
 import ConnectedTrackChange from './ConnectedTrackChange';
 
-export default ({ commentsTracks, view, position, recalculateTops }) => {
+export default ({ commentsTracks, view, position, recalculateTops, users }) => {
   if (!position) return null;
   return (
     <>
@@ -24,6 +24,7 @@ export default ({ commentsTracks, view, position, recalculateTops }) => {
               key={id}
               recalculateTops={recalculateTops}
               top={top}
+              users={users}
             />
           );
         }
@@ -34,6 +35,7 @@ export default ({ commentsTracks, view, position, recalculateTops }) => {
             top={top}
             trackChange={commentTrack}
             trackChangeId={id}
+            users={users}
             view={view}
           />
         );

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

@@ -22,7 +22,7 @@ const ConnectedCommentStyled = styled.div`
   ${override('Wax.CommentOuterBox')}
 `;
 
-export default ({ comment, top, commentId, recalculateTops }) => {
+export default ({ comment, top, commentId, recalculateTops, users }) => {
   const context = useContext(WaxContext);
   const {
     pmViews,
@@ -74,9 +74,14 @@ export default ({ comment, top, commentId, recalculateTops }) => {
 
   const onClickPost = ({ commentValue, title }) => {
     setClickPost(true);
+    const currentUser = user || (users || []).find(u => u.currentUser === true);
+
     const obj = {
       content: commentValue,
-      displayName: user.username,
+      displayName: currentUser
+        ? currentUser.displayName || currentUser.username
+        : 'Anonymous',
+      userId: currentUser ? currentUser.userId : '1',
       timestamp: Math.floor(Date.now()),
     };
 
@@ -200,10 +205,11 @@ export default ({ comment, top, commentId, recalculateTops }) => {
           recalculateTops={recalculateTops}
           showTitle={showTitle}
           title={comment.attrs.title}
+          users={users}
         />
       </ConnectedCommentStyled>
     ),
-    [isActive, top, comment.attrs.conversation.length],
+    [isActive, top, comment.attrs.conversation.length, users],
   );
   return <>{MemorizedComponent}</>;
 };

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

@@ -6,7 +6,7 @@ import { each, uniqBy, sortBy } from 'lodash';
 import { WaxContext, DocumentHelpers } from 'wax-prosemirror-core';
 import BoxList from './BoxList';
 
-export default ({ area }) => {
+export default ({ area, users }) => {
   const {
     pmViews,
     pmViews: { main },
@@ -170,10 +170,11 @@ export default ({ area }) => {
         commentsTracks={marksNodes[area] || []}
         position={position}
         recalculateTops={recalculateTops}
+        users={users}
         view={main}
       />
     ),
-    [marksNodes[area] || [], position],
+    [marksNodes[area] || [], position, users],
   );
   return <>{CommentTrackComponent}</>;
 };

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

@@ -83,6 +83,7 @@ const CommentBox = props => {
     onTextAreaBlur,
     title,
     showTitle,
+    users,
   } = props;
 
   // send signal to make this comment active
@@ -110,7 +111,12 @@ const CommentBox = props => {
           </Resolve>
         </Head>
       )}
-      <CommentItemList active={active} data={commentData} title={title} />
+      <CommentItemList
+        active={active}
+        data={commentData}
+        title={title}
+        users={users}
+      />
       {active && (
         <StyledReply
           isNewComment={commentData.length === 0}
@@ -133,6 +139,7 @@ CommentBox.propTypes = {
     PropTypes.shape({
       content: PropTypes.string.isRequired,
       displayName: PropTypes.string.isRequired,
+      userId: PropTypes.string,
       timestamp: PropTypes.string.number,
     }),
   ),
@@ -152,12 +159,20 @@ CommentBox.propTypes = {
   onTextAreaBlur: PropTypes.func.isRequired,
   title: PropTypes.string,
   showTitle: PropTypes.bool.isRequired,
+  users: PropTypes.arrayOf(
+    PropTypes.shape({
+      displayName: PropTypes.string.isRequired,
+      userId: PropTypes.string.isRequired,
+      currentUser: PropTypes.bool,
+    }),
+  ),
 };
 
 CommentBox.defaultProps = {
   active: false,
   commentData: [],
   title: null,
+  users: [],
 };
 
 export default CommentBox;

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

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { clone, uniqueId } from 'lodash';
 import { override, th } from '@pubsweet/ui-toolkit';
-
 import CommentItem from './CommentItem';
 
 const Wrapper = styled.div`
@@ -34,7 +33,7 @@ const More = styled.span`
 `;
 
 const CommentItemList = props => {
-  const { active, className, data, title } = props;
+  const { active, className, data, title, users } = props;
   if (!data || data.length === 0) return null;
 
   const [items, setItems] = useState(data);
@@ -54,6 +53,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 +62,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,16 +87,25 @@ CommentItemList.propTypes = {
     PropTypes.shape({
       content: PropTypes.string.isRequired,
       displayName: PropTypes.string.isRequired,
+      id: PropTypes.string,
       timestamp: PropTypes.number.isRequired,
     }),
   ),
   title: PropTypes.string,
+  users: PropTypes.arrayOf(
+    PropTypes.shape({
+      displayName: PropTypes.string.isRequired,
+      userId: PropTypes.string.isRequired,
+      currentUser: PropTypes.bool,
+    }),
+  ),
 };
 
 CommentItemList.defaultProps = {
   active: false,
   data: [],
   title: null,
+  users: [],
 };
 
 export default CommentItemList;