[Fix #67 / Fix] Fix author label that was not displayed correctly; Fi…

…x map key issue

src/components/comment/CommentList.jsx

@@ -7,20 +7,20 @@ import Constants from "../../constants/Constants";
 const CommentList = (props) => {
     const addComments = () => {
         return (
-            props.comment.map((comment) => (
-            <div key={JSON.stringify(comment[Constants.HAS_TIMESTAMP])}
-                 className="comment-list-items">
-                <CommentView
-                    commentValue={comment[Constants.HAS_COMMENT_VALUE]}
-                    author={comment[Constants.HAS_AUTHOR] ? comment[Constants.HAS_AUTHOR] : null}
-                    timestamp={comment[Constants.HAS_TIMESTAMP]}
-                />
-            </div>
-        )));
+            props.comment.map((comment, index) => (
+                <div key={index}
+                     className="comment-list-items">
+                    <CommentView
+                        commentValue={comment[Constants.HAS_COMMENT_VALUE]}
+                        author={comment[Constants.HAS_AUTHOR] ? comment[Constants.HAS_AUTHOR] : null}
+                        timestamp={comment[Constants.HAS_TIMESTAMP]}
+                    />
+                </div>
+            )));
     }
 
     const renderSortedComments = () => {
-        return addComments().sort((a,b) => {
+        return addComments().sort((a, b) => {
             return new Date(a.HAS_TIMESTAMP).getTime()
                 - new Date(b.HAS_TIMESTAMP).getTime()
         }).reverse();

src/components/comment/CommentView.jsx

@@ -1,37 +1,39 @@
-import React, {useState} from "react";
+import React, {useContext, useState} from "react";
 import TimeAgo from "javascript-time-ago";
 import en from "javascript-time-ago/locale/en";
 import Constants from "../../constants/Constants";
+import {ConfigurationContext} from "../../contexts/ConfigurationContext";
 
 const UNKNOWN_AUTHOR = "Unknown author";
 
 const CommentView = (props) => {
+    const { options } = useContext(ConfigurationContext);
+
     TimeAgo.addLocale(en);
     const time = new TimeAgo('en-US');
 
     const [show, setShow] = useState(false);
 
-    const parseJsonComment = (value, constant) => {
-        const jsonComment = JSON.parse(JSON.stringify(value));
-        return jsonComment[constant];
-    }
+    const getAuthorLabel = () => {
+        const users = options.users;
+        const currentUser = options.currentUser;
+        const currentUserId = users.find(c => c.id === currentUser);
 
-    const getAuthor = () => {
         if (props.author) {
-            return parseJsonComment(props.author, [Constants.HAS_AUTHOR]);
-        } else return UNKNOWN_AUTHOR;
+            return "... " + currentUserId.label;
+        }
+        return UNKNOWN_AUTHOR;
     }
 
-    const getSplitAuthor = () => {
-        let commentAuthor = {};
+    const getFullAuthor = () => {
         if (props.author) {
-            commentAuthor = parseJsonComment(props.author, [Constants.HAS_AUTHOR]);
-            return "..." + commentAuthor.split('/people/').pop();
-        } else return UNKNOWN_AUTHOR;
+            return props.author[Constants.HAS_AUTHOR];
+        }
+        return UNKNOWN_AUTHOR;
     }
 
     const getTimeAgo = () => {
-        return time.format(parseJsonComment(props.timestamp, [Constants.HAS_TIMESTAMP]));
+        return time.format(props.timestamp[Constants.HAS_TIMESTAMP]);
     }
 
     const onMouseEventHandler = () => {
@@ -42,12 +44,12 @@ const CommentView = (props) => {
         <div className="comment-content">
             <div className="row">
                 <span className="col-auto comment-author" onMouseEnter={onMouseEventHandler} onMouseLeave={onMouseEventHandler}>
-                    {show ? getAuthor() : getSplitAuthor()}
+                    {show ? getFullAuthor() : getAuthorLabel()}
                 </span>
                 <span className="col-auto text-muted comment-timestamp">{getTimeAgo()}</span>
             </div>
             <div className="row">
-                <span className="col comment-value">{parseJsonComment(props.commentValue, [Constants.HAS_COMMENT_VALUE])}</span>
+                <span className="col comment-value">{props.commentValue[Constants.HAS_COMMENT_VALUE]}</span>
             </div>
         </div>
     );