[Enhancement #60] Persistence issue of comments is solved, layout iss…

…ue with commentIcon and helpIcon is solved
kbss-cvut · Oct 15, 2021 · 4d1f369 · 4d1f369
1 parent 327118e
commit 4d1f369
Show file tree

Hide file tree

Showing 8 changed files with 54 additions and 105 deletions.
diff --git a/src/components/Answer.jsx b/src/components/Answer.jsx
@@ -15,6 +15,7 @@ import { ConfigurationContext } from '../contexts/ConfigurationContext';
 import HelpIcon from './HelpIcon';
 import JsonLdUtils from 'jsonld-utils';
 import QuestionCommentIcon from "./comment/QuestionCommentIcon";
+import {Col, Row} from "react-bootstrap";
 
 const Answer = (props) => {
   const formGenContext = React.useContext(FormGenContext);
@@ -146,11 +147,19 @@ const Answer = (props) => {
     ) : null;
 
     return (
-      <div>
-        <span>{label}</span>
-        {questionHelp}
-        <QuestionCommentIcon question={question} onChange={props.onCommentChange} />
-      </div>
+        <Row>
+          <Col className="no-padding-right" lg="auto">{label}</Col>
+          {questionHelp ?
+              <>
+                <Col lg="1">{questionHelp}</Col>
+                <Col lg="1"><QuestionCommentIcon question={question} onChange={props.onCommentChange}/></Col>
+              </>
+              : <Col lg="1"><QuestionCommentIcon
+                  question={question}
+                  onChange={props.onCommentChange}/>
+              </Col>
+          }
+        </Row>
     );
   }
 

diff --git a/src/components/Question.jsx b/src/components/Question.jsx
@@ -149,22 +149,23 @@ export default class Question extends React.Component {
             <Card className="mb-3">
               <Accordion.Toggle as={Card.Header} onClick={this._toggleCollapse} className={headerClassName}>
                 <Row>
-                  <Col className="col-sm-auto no-padding-right">
+                  <Col className="no-padding-right" lg="auto">
                     <h6 className="d-inline" id={question['@id']}>
                       {collapsible && this._renderCollapseToggle()}
                       {label}
                     </h6>
                   </Col>
                   {this._renderQuestionHelp() ?
                       <>
-                        <Col className="col-sm-auto">
+                        <Col lg="auto">
                           {this._renderQuestionHelp()}
                         </Col>
-                        <Col className="col-sm-auto">
+                        <Col lg="auto">
                           {this._renderQuestionComment()}
                         </Col>
                       </>
-                      : this._renderQuestionComment()}
+                      : <Col lg="auto">{this._renderQuestionComment()}</Col>
+                  }
                 </Row>
               </Accordion.Toggle>
               {collapsible ? <Accordion.Collapse>{cardBody}</Accordion.Collapse> : { cardBody }}

diff --git a/src/components/comment/CommentForm.jsx b/src/components/comment/CommentForm.jsx
@@ -1,45 +1,18 @@
-import React, {useContext, useState} from "react";
+import React, {useState} from "react";
 import {Button, Form, Col, Row} from "react-bootstrap";
-import {ConfigurationContext} from "../../contexts/ConfigurationContext";
 import PropTypes from "prop-types";
 import ArrowRight from "../../styles/icons/ArrowRight";
 
 const CommentForm = (props) => {
-    const context = useContext(ConfigurationContext);
-
-    const [author, setAuthor] = useState('');
-    const [timestamp, setTimestamp] = useState(null);
     const [commentValue, setCommentValue] = useState('');
 
-    const getAuthor = () => {
-        const users = context.options.users;
-        const currentUser = context.options.currentUser;
-
-        const currentUserId = users.find(c => c.id === currentUser);
-        setAuthor(currentUserId.label)
-    }
-
-    const getTimeStamp = () => {
-        setTimestamp(Date.now());
-    }
-
     const onValueChange = (e) => {
         setCommentValue(e.target.value);
-        getAuthor();
-        getTimeStamp();
     }
 
     const submitHandler = (e) => {
         e.preventDefault();
-
         props.onChange(commentValue);
-
-        const comment = {
-            author: author,
-            timestamp: timestamp,
-            commentValue: commentValue
-        };
-        props.onSaveComment(comment);
         setCommentValue('');
     }
 
@@ -73,7 +46,6 @@ const CommentForm = (props) => {
 }
 
 CommentForm.propTypes = {
-    onSaveComment: PropTypes.func.isRequired,
     onChange: PropTypes.func.isRequired
 };
 

diff --git a/src/components/comment/CommentList.jsx b/src/components/comment/CommentList.jsx
@@ -1,18 +1,19 @@
 import React from "react";
 import CommentView from "./CommentView";
 import PropTypes from "prop-types";
+import Constants from "../../constants/Constants";
 
 
 const CommentList = (props) => {
     return (
         <>
             {props.comment.map((comment) => (
-                <div key={comment.timestamp}
+                <div key={JSON.stringify(comment[Constants.HAS_TIMESTAMP])}
                     className="comment-list-items">
                     <CommentView
-                        commentValue={comment.commentValue}
-                        author={comment.author}
-                        timestamp={comment.timestamp}
+                        commentValue={comment[Constants.HAS_COMMENT_VALUE]}
+                        author={comment[Constants.HAS_AUTHOR]}
+                        timestamp={comment[Constants.HAS_TIMESTAMP]}
                     />
                 </div>
             ))}
@@ -21,7 +22,6 @@ const CommentList = (props) => {
 };
 
 CommentList.propTypes = {
-    question: PropTypes.object.isRequired,
     comment: PropTypes.array.isRequired
 };
 

diff --git a/src/components/comment/CommentView.jsx b/src/components/comment/CommentView.jsx
@@ -1,20 +1,25 @@
 import React from "react";
 import TimeAgo from "javascript-time-ago";
 import en from "javascript-time-ago/locale/en";
+import Constants from "../../constants/Constants";
 
 const CommentView = (props) => {
+    const parseJsonComment = (value, constant) => {
+        const jsonComment = JSON.parse(JSON.stringify(value));
+        return jsonComment[constant];
+    }
+
     TimeAgo.addLocale(en);
     const time = new TimeAgo('en-US');
-    const timeAgo = time.format(parseInt(props.timestamp));
-
+    const timeAgo = time.format(parseJsonComment(props.timestamp, [Constants.HAS_TIMESTAMP]));
     return (
         <div className="comment-content">
             <div className="row">
-                <span className="col-auto comment-author">{props.author}</span>
+                <span className="col-auto comment-author">{parseJsonComment(props.author, [Constants.HAS_AUTHOR])}</span>
                 <span className="col-auto text-muted comment-timestamp">{timeAgo}</span>
             </div>
             <div className="row">
-                <span className="col comment-value">{props.commentValue}</span>
+                <span className="col comment-value">{parseJsonComment(props.commentValue, [Constants.HAS_COMMENT_VALUE])}</span>
             </div>
         </div>
     );

diff --git a/src/components/comment/NewComment.jsx b/src/components/comment/NewComment.jsx
diff --git a/src/components/comment/QuestionCommentIcon.jsx b/src/components/comment/QuestionCommentIcon.jsx
@@ -2,32 +2,20 @@ import React, {useContext, useRef, useState} from "react";
 import CommentBubble from "../../styles/icons/CommentBubble";
 import {Badge, Overlay, Tooltip} from "react-bootstrap";
 import CommentList from "./CommentList";
-import NewComment from "./NewComment";
 import PropTypes from "prop-types";
 import Constants from "../../constants/Constants";
 import {ConfigurationContext} from "../../contexts/ConfigurationContext";
+import CommentForm from "./CommentForm";
 
 const QuestionCommentIcon = (props) => {
     const context = useContext(ConfigurationContext);
-
     const target = useRef(null);
-
     const [show, setShow] = useState(false);
-    const [comment, setComment] = useState([]);
-    const [commentIndex, setCommentIndex] = useState(0);
 
     const hideOverlay = () => {
         setShow(false);
     }
 
-    const addCommentHandler = (comment) => {
-        setComment(prevComment => {
-            return [comment, ...prevComment];
-        });
-
-        setCommentIndex(commentIndex + 1);
-    }
-
     // TODO make util function
     const _getComments = () => {
         const question = props.question;
@@ -45,7 +33,7 @@ const QuestionCommentIcon = (props) => {
     const onCommentValueChangeHandler = (value) => {
         const change = {};
         _setComment(change, value);
-        props.onChange(commentIndex, change);
+        props.onChange(getCommentsLength(), change);
     };
 
     const _setComment = (change, value) => {
@@ -66,27 +54,23 @@ const QuestionCommentIcon = (props) => {
         setShow(!show);
     }
 
+    const getCommentsLength = () => {
+       return _getComments().length;
+    }
+
     return (
         <>
             <span ref={target} onClick={onClickHandler}>
                 <CommentBubble/>
-                {commentIndex > 0 ? <Badge className="comment-badge" pill variant="primary">{commentIndex}</Badge> : null}
+                {getCommentsLength() > 0 ? <Badge className="comment-badge" pill variant="primary">{getCommentsLength()}</Badge> : null}
             </span>
 
             <Overlay target={target.current} show={show} placement="right" rootClose={true} onHide={hideOverlay}>
                 {(overlayProps) => (
                     <Tooltip className="comment-tooltip" {...overlayProps}>
                         <span>
-                            <NewComment
-                                onAddComment={addCommentHandler}
-                                onChange={props.onChange}
-                                onCommentValueChange={onCommentValueChangeHandler}
-                                comment={_getComments()}
-                            />
-                            <CommentList
-                                question={props.question}
-                                comment={comment}
-                            />
+                            <CommentForm onChange={onCommentValueChangeHandler} />
+                            <CommentList comment={_getComments()} />
                         </span>
                     </Tooltip>
                 )}

diff --git a/src/components/wizard/WizardStep.jsx b/src/components/wizard/WizardStep.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button, ButtonToolbar, Card } from 'react-bootstrap';
+import {Button, ButtonToolbar, Card, Col, Row} from 'react-bootstrap';
 import JsonLdUtils from 'jsonld-utils';
 import PropTypes from 'prop-types';
 import Constants from '../../constants/Constants';
@@ -91,9 +91,16 @@ export default class WizardStep extends React.Component {
       <div className="wizard-step">
         <Card className="wizard-step-content">
           <Card.Header className="bg-primary text-white" as="h6" id={this.props.step['@id']}>
-            {JsonLdUtils.getLocalized(this.props.step[JsonLdUtils.RDFS_LABEL], this.props.options.intl)}
-            {this._renderHelpIcon()}
-            {this._renderQuestionCommentIcon()}
+            <Row>
+              <Col className="no-padding-right" lg="auto">{JsonLdUtils.getLocalized(this.props.step[JsonLdUtils.RDFS_LABEL], this.props.options.intl)}</Col>
+              {this._renderHelpIcon() ?
+                  <>
+                    <Col lg="auto">{this._renderHelpIcon()}</Col>
+                    <Col lg="auto">{this._renderQuestionCommentIcon()}</Col>
+                  </>
+                  : <Col lg="auto">{this._renderQuestionCommentIcon()}</Col>
+              }
+            </Row>
           </Card.Header>
           <Card.Body className={categoryClass}>
             {questionElement}