From 44dbb98a7ea31445e85a4c9fe49f669495492d23 Mon Sep 17 00:00:00 2001
From: Giannis kopanas <jkopanas@gmail.com>
Date: Fri, 1 Dec 2023 13:52:47 +0200
Subject: [PATCH] fix(components): add users to comments through layout
---
editors/demo/src/Editoria/Editoria.js | 3 ++-
wax-prosemirror-core/src/Wax.js | 2 --
wax-prosemirror-core/src/WaxView.js | 2 --
.../src/CommentsService/components/BoxList.js | 4 ++-
.../components/ConnectedComment.js | 17 ++++++------
.../CommentsService/components/RightArea.js | 5 ++--
.../components/ui/comments/CommentBox.js | 16 +++++++++++-
.../components/ui/comments/CommentItemList.js | 26 +++++++++----------
8 files changed, 44 insertions(+), 31 deletions(-)
diff --git a/editors/demo/src/Editoria/Editoria.js b/editors/demo/src/Editoria/Editoria.js
index 85de6f39e..8837b278e 100644
--- a/editors/demo/src/Editoria/Editoria.js
+++ b/editors/demo/src/Editoria/Editoria.js
@@ -67,7 +67,8 @@ const Editoria = () => {
/>
</>
),
- [key, finalConfig, layout],
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ [layout, finalConfig],
);
return <>{EditoriaComponent}</>;
};
diff --git a/wax-prosemirror-core/src/Wax.js b/wax-prosemirror-core/src/Wax.js
index 75749f585..6eed226c9 100644
--- a/wax-prosemirror-core/src/Wax.js
+++ b/wax-prosemirror-core/src/Wax.js
@@ -42,7 +42,6 @@ const Wax = forwardRef((props, ref) => {
readonly,
value,
user,
- users,
onChange,
targetFormat,
scrollMargin,
@@ -81,7 +80,6 @@ const Wax = forwardRef((props, ref) => {
undefined
}
user={user}
- users={users}
value={value}
>
{({ editor }) => <WaxRender className={className} editor={editor} />}
diff --git a/wax-prosemirror-core/src/WaxView.js b/wax-prosemirror-core/src/WaxView.js
index d5d314222..5b0112f67 100644
--- a/wax-prosemirror-core/src/WaxView.js
+++ b/wax-prosemirror-core/src/WaxView.js
@@ -38,7 +38,6 @@ const WaxView = forwardRef((props, ref) => {
readonly,
autoFocus,
user,
- users,
targetFormat,
serializer,
scrollMargin,
@@ -74,7 +73,6 @@ const WaxView = forwardRef((props, ref) => {
dispatchTransaction,
disallowedTools: [],
user,
- users,
scrollMargin: scrollMargin || 200,
scrollThreshold: scrollThreshold || 200,
attributes: {
diff --git a/wax-prosemirror-services/src/CommentsService/components/BoxList.js b/wax-prosemirror-services/src/CommentsService/components/BoxList.js
index bdbf0458d..1b19e3839 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 3f8c44cfd..656067d7f 100644
--- a/wax-prosemirror-services/src/CommentsService/components/ConnectedComment.js
+++ b/wax-prosemirror-services/src/CommentsService/components/ConnectedComment.js
@@ -22,13 +22,13 @@ 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,
pmViews: {
main: {
- props: { user, users },
+ props: { user },
},
},
app,
@@ -74,13 +74,13 @@ 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 currentUser = user || (users || []).find(u => u.currentUser === true);
+
const obj = {
content: commentValue,
- displayName: currentUser ? currentUser.username : 'Anonymous',
+ displayName: currentUser
+ ? currentUser.displayName || currentUser.username
+ : 'Anonymous',
userId: currentUser ? currentUser.userId : '1',
timestamp: Math.floor(Date.now()),
};
@@ -205,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 36a556f29..d3644d9b5 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 7059acf11..882ddeaf7 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}
@@ -153,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 ca26962ba..8610548de 100644
--- a/wax-prosemirror-services/src/CommentsService/components/ui/comments/CommentItemList.js
+++ b/wax-prosemirror-services/src/CommentsService/components/ui/comments/CommentItemList.js
@@ -1,9 +1,8 @@
-import React, { useEffect, useState, useContext } from 'react';
+import React, { useEffect, useState } 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`
@@ -34,20 +33,11 @@ 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);
- const context = useContext(WaxContext);
- const {
- pmViews: {
- main: {
- props: { users },
- },
- },
- } = context;
-
useEffect(() => {
if (!active) {
const first = clone(data[0]);
@@ -63,7 +53,7 @@ const CommentItemList = props => {
}
}, [active, data]);
- const displayName = id => users.find(user => user.userId === id);
+ const displayName = id => (users || []).find(user => user.userId === id);
return (
<Wrapper active={active} className={className}>
@@ -73,7 +63,7 @@ const CommentItemList = props => {
active={active}
content={item.content}
displayName={
- displayName(item.userId)?.displayName || item.displayName
+ (displayName(item.userId) || {}).displayName || item.displayName
}
key={uniqueId('comment-item-')}
timestamp={item.timestamp}
@@ -102,12 +92,20 @@ CommentItemList.propTypes = {
}),
),
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;
--
GitLab