diff --git a/client/coral-admin/src/components/UserDetailComment.css b/client/coral-admin/src/components/UserDetailComment.css
index 71cc19640..bdf1ac520 100644
--- a/client/coral-admin/src/components/UserDetailComment.css
+++ b/client/coral-admin/src/components/UserDetailComment.css
@@ -34,7 +34,7 @@
color: #063b9a;
text-decoration: none;
font-weight: 500;
- letter-spacing: .5px;
+ letter-spacing: 0.5px;
margin-left: 10px;
font-size: 13px;
margin-left: 5px;
@@ -109,7 +109,7 @@
}
.external {
- font-size: .7em;
+ font-size: 0.7em;
text-decoration: none;
color: #063b9a;
cursor: pointer;
@@ -119,7 +119,7 @@
&:hover {
text-decoration: underline;
- opacity: .9;
+ opacity: 0.9;
}
> i {
@@ -139,3 +139,25 @@
margin-right: 5px;
}
}
+
+.bodyHistoryToggle {
+ color: #666;
+ font-size: 12px;
+ line-height: 1px;
+ font-weight: 300;
+ text-decoration: underline;
+ &:hover {
+ cursor: pointer;
+ }
+}
+
+.editedCommentBody {
+ padding: 0 5px 5px 5px;
+}
+
+.editedComment {
+ margin-top: 6px;
+ font-weight: 300;
+ font-size: 16px;
+ overflow-wrap: break-word;
+}
diff --git a/client/coral-admin/src/components/UserDetailComment.js b/client/coral-admin/src/components/UserDetailComment.js
index f98ff3f0f..7e0495b42 100644
--- a/client/coral-admin/src/components/UserDetailComment.js
+++ b/client/coral-admin/src/components/UserDetailComment.js
@@ -19,6 +19,8 @@ import TimeAgo from 'coral-framework/components/TimeAgo';
import t from 'coral-framework/services/i18n';
class UserDetailComment extends React.Component {
+ state = { showingEditHistory: false };
+
approve = () =>
this.props.comment.status === 'ACCEPTED'
? null
@@ -29,6 +31,29 @@ class UserDetailComment extends React.Component {
? null
: this.props.rejectComment({ commentId: this.props.comment.id });
+ getBodyHistory = () => {
+ const bodyHistory = [];
+ const comment = this.props.comment;
+ for (let i = 0; i < comment.body_history.length - 1; i++) {
+ bodyHistory.push(
+
+
+
+
+
+ {comment.body_history[i].body}
+
+
+ );
+ }
+
+ return bodyHistory;
+ };
+
+ toggleEditHistory = () => {
+ this.setState({ showingEditHistory: !this.state.showingEditHistory });
+ };
+
render() {
const {
comment,
@@ -81,6 +106,14 @@ class UserDetailComment extends React.Component {
({t('comment.edited')})
+
+ {this.state.showingEditHistory
+ ? t('comment.hide_edit_history')
+ : t('comment.show_edit_history')}
+
) : null}
@@ -142,6 +175,14 @@ class UserDetailComment extends React.Component {
+
+ {this.state.showingEditHistory ? (
+
+ {t('comment.edit_history')}
+ {this.getBodyHistory()}
+
+ ) : null}
+
);
diff --git a/client/coral-admin/src/containers/UserDetailComment.js b/client/coral-admin/src/containers/UserDetailComment.js
index 4661f3236..0e17e7cc7 100644
--- a/client/coral-admin/src/containers/UserDetailComment.js
+++ b/client/coral-admin/src/containers/UserDetailComment.js
@@ -42,6 +42,10 @@ export default withFragments({
status_history {
type
}
+ body_history {
+ body
+ created_at
+ }
${getSlotFragmentSpreads(slots, 'comment')}
...${getDefinitionName(CommentLabels.fragments.comment)}
...${getDefinitionName(CommentDetails.fragments.comment)}
diff --git a/client/coral-admin/src/routes/Moderation/components/Comment.css b/client/coral-admin/src/routes/Moderation/components/Comment.css
index fc2236167..1c6db1cb3 100644
--- a/client/coral-admin/src/routes/Moderation/components/Comment.css
+++ b/client/coral-admin/src/routes/Moderation/components/Comment.css
@@ -62,7 +62,7 @@
font-weight: 300;
margin-bottom: 8px;
overflow-wrap: break-word;
- word-break:break-word;
+ word-break: break-word;
}
.body {
@@ -103,7 +103,7 @@
color: #063b9a;
text-decoration: none;
font-weight: 500;
- letter-spacing: .5px;
+ letter-spacing: 0.5px;
margin-left: 10px;
font-size: 13px;
margin-left: 5px;
@@ -111,14 +111,14 @@
border-bottom: solid 1px;
line-height: 16px;
&:hover {
- opacity: .9;
+ opacity: 0.9;
cursor: pointer;
}
}
}
.username {
- color: #393B44;
+ color: #393b44;
text-decoration: none;
cursor: pointer;
font-weight: 600;
@@ -127,12 +127,12 @@
margin-left: -5px;
transition: background-color 200ms ease;
&:hover {
- background-color: #E0E0E0;
+ background-color: #e0e0e0;
}
}
.external {
- font-size: .7em;
+ font-size: 0.7em;
text-decoration: none;
color: #063b9a;
cursor: pointer;
@@ -140,7 +140,7 @@
white-space: nowrap;
&:hover {
text-decoration: underline;
- opacity: .9;
+ opacity: 0.9;
}
i {
font-size: 12px;
@@ -196,3 +196,25 @@
.commentContentFooter {
flex: 1;
}
+
+.bodyHistoryToggle {
+ color: #666;
+ font-size: 12px;
+ line-height: 1px;
+ font-weight: 300;
+ text-decoration: underline;
+ &:hover {
+ cursor: pointer;
+ }
+}
+
+.editedCommentBody {
+ padding: 0 5px 5px 5px;
+}
+
+.editedComment {
+ margin-top: 6px;
+ font-weight: 300;
+ font-size: 16px;
+ overflow-wrap: break-word;
+}
diff --git a/client/coral-admin/src/routes/Moderation/components/Comment.js b/client/coral-admin/src/routes/Moderation/components/Comment.js
index 798675081..60d23e69f 100644
--- a/client/coral-admin/src/routes/Moderation/components/Comment.js
+++ b/client/coral-admin/src/routes/Moderation/components/Comment.js
@@ -22,6 +22,8 @@ import t from 'coral-framework/services/i18n';
class Comment extends React.Component {
ref = null;
+ state = { showingEditHistory: false };
+
handleRef = ref => (this.ref = ref);
handleFocusOrClick = () => {
@@ -45,6 +47,30 @@ class Comment extends React.Component {
? null
: this.props.rejectComment({ commentId: this.props.comment.id });
+ getBodyHistory = () => {
+ const bodyHistory = [];
+ const comment = this.props.comment;
+ for (let i = 0; i < comment.body_history.length - 1; i++) {
+ bodyHistory.push(
+
+
+
+
+
+ {comment.body_history[i].body}
+
+
+ );
+ }
+
+ return bodyHistory;
+ };
+
+ toggleEditHistory = () => {
+ this.setState({ showingEditHistory: !this.state.showingEditHistory });
+ this.props.clearHeightCache && this.props.clearHeightCache();
+ };
+
componentDidUpdate(prev) {
if (!prev.selected && this.props.selected) {
this.ref.focus();
@@ -137,6 +163,14 @@ class Comment extends React.Component {
({t('comment.edited')})
+
+ {this.state.showingEditHistory
+ ? t('comment.hide_edit_history')
+ : t('comment.show_edit_history')}
+
) : null}
@@ -201,6 +235,14 @@ class Comment extends React.Component {
+
+ {this.state.showingEditHistory ? (
+
+ {t('comment.edit_history')}
+ {this.getBodyHistory()}
+
+ ) : null}
+