[New] Show comments from json-ld

kbss-cvut · Sep 30, 2021 · 00b1952 · 00b1952
1 parent ca00212
commit 00b1952
Show file tree

Hide file tree

Showing 11 changed files with 51 additions and 26 deletions.
diff --git a/src/components/Answer.jsx b/src/components/Answer.jsx
@@ -149,7 +149,7 @@ const Answer = (props) => {
       <div>
         <span>{label}</span>
         {questionHelp}
-        <QuestionCommentIcon />
+        <QuestionCommentIcon question={question}/>
       </div>
     );
   }

diff --git a/src/components/Question.jsx b/src/components/Question.jsx
@@ -323,7 +323,7 @@ export default class Question extends React.Component {
   }
 
   _renderQuestionComment() {
-    return <QuestionCommentIcon />
+    return <QuestionCommentIcon question={this.props.question} />
   }
 
   _renderPrefixes() {

diff --git a/src/components/comment/CommentList.jsx b/src/components/comment/CommentList.jsx
@@ -1,20 +1,36 @@
 import React from "react";
 import CommentView from "./CommentView";
+import Constants from "../../constants/Constants";
+
+// TODO make util function
+const _getComments = (question) => {
+
+    if (!question[Constants.HAS_COMMENT]) {
+        question[Constants.HAS_COMMENT] = [];
+    }
+    if (!Array.isArray(question[Constants.HAS_COMMENT])) {
+        question[Constants.HAS_COMMENT] = [question[Constants.HAS_COMMENT]];
+    }
+
+    return question[Constants.HAS_COMMENT];
+};
+
 
 const CommentList = (props) => {
     return (
         <>
-            {props.comments.map((comment) => (
-                <div className="comment-list-items" key={comment.id}>
+            {_getComments(props.question).map((comment) => (
+                <div key={comment["@id"]}
+                    className="comment-list-items">
                     <CommentView
-                        author={comment.author}
-                        timestamp={comment.timestamp}
-                        commentValue={comment.commentValue}
+                        commentValue={comment[Constants.HAS_COMMENT_VALUE]}
+                        author={comment[Constants.HAS_AUTHOR]["@id"]}
+                        timestamp={comment[Constants.HAS_TIMESTAMP]}
                     />
                 </div>
             ))}
         </>
     )
-}
+};
 
 export default CommentList;
diff --git a/src/components/comment/CommentView.jsx b/src/components/comment/CommentView.jsx
@@ -5,7 +5,7 @@ import en from "javascript-time-ago/locale/en";
 const CommentView = (props) => {
     TimeAgo.addLocale(en);
     const time = new TimeAgo('en-US');
-    const timeAgo = time.format(props.timestamp);
+    const timeAgo = time.format(parseInt(props.timestamp));
 
     return (
         <div className="comment-content">

diff --git a/src/components/comment/QuestionCommentIcon.jsx b/src/components/comment/QuestionCommentIcon.jsx
@@ -1,10 +1,11 @@
 import React, {useRef, useState} from "react";
-import QuestionComment from "../../styles/icons/QuestionComment";
+import CommentBubble from "../../styles/icons/CommentBubble";
 import {Overlay, Tooltip} from "react-bootstrap";
 import CommentList from "./CommentList";
 import NewComment from "./NewComment";
+import PropTypes from "prop-types";
 
-const QuestionCommentIcon = () => {
+const QuestionCommentIcon = (props) => {
     const target = useRef(null);
 
     const [show, setShow] = useState(false);
@@ -23,15 +24,15 @@ const QuestionCommentIcon = () => {
     return (
         <>
             <span ref={target} onClick={() => setShow(!show)}>
-                <QuestionComment />
+                <CommentBubble />
             </span>
 
             <Overlay target={target.current} show={show} placement="right" rootClose={true} onHide={hideOverlay}>
-                {(props) => (
-                    <Tooltip className="comment-tooltip" {...props}>
+                {(overlayProps) => (
+                    <Tooltip className="comment-tooltip" {...overlayProps}>
                         <span>
                             <NewComment onAddComment={addCommentHandler}/>
-                            <CommentList comments={comment}/>
+                            <CommentList question={props.question} comments={comment}/>
                         </span>
                     </Tooltip>
                 )}
@@ -40,4 +41,8 @@ const QuestionCommentIcon = () => {
     );
 }
 
+QuestionCommentIcon.propTypes = {
+    question: PropTypes.object.isRequired
+};
+
 export default QuestionCommentIcon;
diff --git a/src/components/wizard/VerticalWizardNav.jsx b/src/components/wizard/VerticalWizardNav.jsx
@@ -25,7 +25,7 @@ const VerticalWizardNav = ({ steps, onNavigate, currentStep }) => {
                         className={Question.getEmphasizedClass(step)}
                     >
                         {JsonLdUtils.getLocalized(step[JsonLdUtils.RDFS_LABEL], options.intl)}
-                        <QuestionCommentIcon />
+                        <QuestionCommentIcon question={step}/>
                     </ListGroupItem>
                 ))}
             </ListGroup>

diff --git a/src/constants/Constants.js b/src/constants/Constants.js
@@ -94,6 +94,10 @@ export default class Constants {
   static HAS_DECLARED_PREFIX = 'http://onto.fel.cvut.cz/ontologies/form-spin/has-declared-prefix';
   static PREFIX = 'http://www.w3.org/ns/shacl#prefix';
   static NAMESPACE = 'http://www.w3.org/ns/shacl#namespace';
+  static HAS_COMMENT = 'http://onto.fel.cvut.cz/ontologies/form/has-comment'
+  static HAS_COMMENT_VALUE = 'http://onto.fel.cvut.cz/ontologies/form/has-comment-value'
+  static HAS_AUTHOR = 'http://onto.fel.cvut.cz/ontologies/form/has-author'
+  static HAS_TIMESTAMP = 'http://onto.fel.cvut.cz/ontologies/form/has-timestamp'
 
   static NOT_ANSWERED_QUESTION = 'http://onto.fel.cvut.cz/ontologies/form/not-answered-question';
   static ANSWERED_QUESTION = 'http://onto.fel.cvut.cz/ontologies/form/answered-question';

diff --git a/src/styles/icons/QuestionComment.jsx → src/styles/icons/CommentBubble.jsx b/src/styles/icons/QuestionComment.jsx → src/styles/icons/CommentBubble.jsx
@@ -1,6 +1,6 @@
 import React from "react";
 
-const QuestionComment = () => {
+const CommentBubble = () => {
     return(
         <svg
             className="question-comment"
@@ -21,4 +21,4 @@ const QuestionComment = () => {
     )
 }
 
-export default QuestionComment
+export default CommentBubble
diff --git a/src/util/JsonLdFramingUtils.js b/src/util/JsonLdFramingUtils.js
@@ -12,7 +12,8 @@ const formShape = {
     Constants.IS_RELEVANT_IF,
     Constants.HAS_ANSWER,
     Constants.HAS_DECLARED_PREFIX,
-    Constants.HAS_OPTION
+    Constants.HAS_OPTION,
+    Constants.HAS_COMMENT
   ]
 };
 

diff --git a/test/rendering/TestApp.jsx b/test/rendering/TestApp.jsx
@@ -63,9 +63,9 @@ class TestApp extends React.Component {
       ...getP('startingQuestionId', 'layout-options-65'),
       startingStep: 1,
       users: [
-          {id: "http://fel.cvut.cz/people/maxchopart", label: "Max Chopart"},
-          {id: "http://fel.cvut.cz/people/miroslavblasko", label: "Miroslav Blasko"}],
-      currentUser: "http://fel.cvut.cz/people/maxchopart"
+          {id: "http://fel.cvut.cz/people/max-chopart", label: "Max Chopart"},
+          {id: "http://fel.cvut.cz/people/miroslav-blasko", label: "Miroslav Blasko"}],
+      currentUser: "http://fel.cvut.cz/people/max-chopart"
     };
 
     return (

diff --git a/test/rendering/form1.json b/test/rendering/form1.json
@@ -76,8 +76,7 @@
          "@type" : "@id"
       },
       "has-comment-value" : {
-         "@id" : "http://onto.fel.cvut.cz/ontologies/form/has-comment-value",
-         "@type" : "@id"
+         "@id" : "http://onto.fel.cvut.cz/ontologies/form/has-comment-value"
       },
       "has-unit" : {
          "@id" : "http://onto.fel.cvut.cz/ontologies/form/has-unit"
@@ -509,13 +508,13 @@
             {
                "@type" : "form:comment",
                "has-comment-value" : "Some comment",
-               "has-author"  : "http://fel.cvut.cz/people/maxchopart",
+               "has-author"  : "http://fel.cvut.cz/people/max-chopart",
                "has-timestamp" : "151652672357"
             },
             {
                "@type" : "form:comment",
                "has-comment-value" : "Another comment",
-               "has-author"  : "Miroslav Blasko",
+               "has-author"  : "http://fel.cvut.cz/people/miroslav-blasko",
                "has-timestamp" : "763763782"
             }
          ]