diff --git a/editors/demo/src/Editoria/Editoria.js b/editors/demo/src/Editoria/Editoria.js
index 3a72be1e77c3730d05315f894139f42e27619975..8837b278e3d8c3e0e7c6f5a3ea237f63a71cfb22 100644
--- a/editors/demo/src/Editoria/Editoria.js
+++ b/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}</>;
diff --git a/wax-prosemirror-services/src/CommentsService/components/BoxList.js b/wax-prosemirror-services/src/CommentsService/components/BoxList.js
index bdbf0458d03501de89f265a538e7c237a8a4d3c5..1b19e3839d19415b10831285c38266d40417c013 100644
--- a/wax-prosemirror-services/src/CommentsService/components/BoxList.js
+++ b/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}
/>
);
diff --git a/wax-prosemirror-services/src/CommentsService/components/ConnectedComment.js b/wax-prosemirror-services/src/CommentsService/components/ConnectedComment.js
index 2c7310e6fe2ecef635241968c755466256ffc31d..656067d7fc2dd4014fb74aa1e22ba223ce3da937 100644
--- a/wax-prosemirror-services/src/CommentsService/components/ConnectedComment.js
+++ b/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}</>;
};
diff --git a/wax-prosemirror-services/src/CommentsService/components/RightArea.js b/wax-prosemirror-services/src/CommentsService/components/RightArea.js
index 36a556f2971ca3fe2fe5a4b81a8c5f83dd59c1a0..d3644d9b52cacec690047c71d8c5ce807471df55 100644
--- a/wax-prosemirror-services/src/CommentsService/components/RightArea.js
+++ b/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}</>;
};
diff --git a/wax-prosemirror-services/src/CommentsService/components/ui/comments/CommentBox.js b/wax-prosemirror-services/src/CommentsService/components/ui/comments/CommentBox.js
index d93a906993f5392b402707d87738603673871e58..882ddeaf78aaaeb88c622a69c43aae90ff4c4c16 100644
--- a/wax-prosemirror-services/src/CommentsService/components/ui/comments/CommentBox.js
+++ b/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;
diff --git a/wax-prosemirror-services/src/CommentsService/components/ui/comments/CommentItemList.js b/wax-prosemirror-services/src/CommentsService/components/ui/comments/CommentItemList.js
index ef66d305fc864acd818380db699b3f34d1ae59ca..8610548de6d8254e4a24478a031442949baa3ac3 100644
--- a/wax-prosemirror-services/src/CommentsService/components/ui/comments/CommentItemList.js
+++ b/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;