[Enhancement #51] Comments are now listed

package.json

@@ -74,6 +74,7 @@
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.2",
     "html-webpack-plugin": "^4.3.0",
+    "javascript-time-ago": "^2.3.8",
     "jest": "^26.0.1",
     "prettier": "^2.0.5",
     "query-string": "^6.13.5",

src/components/Answer.jsx

@@ -14,7 +14,7 @@ import { FormGenContext } from '../contexts/FormGenContext';
 import { ConfigurationContext } from '../contexts/ConfigurationContext';
 import HelpIcon from './HelpIcon';
 import JsonLdUtils from 'jsonld-utils';
-import QuestionCommentIcon from "./QuestionCommentIcon";
+import QuestionCommentIcon from "./comment/QuestionCommentIcon";
 
 const Answer = (props) => {
   const formGenContext = React.useContext(FormGenContext);

src/components/Question.jsx

@@ -15,7 +15,7 @@ import MediaContent from './MediaContent';
 import { CaretSquareUp, CaretSquareDown, InfoCircle } from '../styles/icons';
 import { ConfigurationContext } from '../contexts/ConfigurationContext';
 import classNames from 'classnames';
-import QuestionCommentIcon from "./QuestionCommentIcon";
+import QuestionCommentIcon from "./comment/QuestionCommentIcon";
 
 // TODO Remove once the pretty layout is tested
 const PRETTY_ANSWERABLE_LAYOUT = true;

src/components/comment/CommentForm.jsx

@@ -0,0 +1,62 @@
+import React, {useContext, useState} from "react";
+import {Button, Form} from "react-bootstrap";
+import {ConfigurationContext} from "../../contexts/ConfigurationContext";
+
+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 commentValueChangeHandler = (e) => {
+        setCommentValue(e.target.value);
+        getTimeStamp();
+        getAuthor();
+    }
+
+    const submitHandler = (e) => {
+        e.preventDefault();
+
+        const comment = {
+            author: author,
+            timestamp: timestamp,
+            commentValue: commentValue
+        };
+        props.onSaveComment(comment);
+        console.log(comment)
+        setCommentValue('');
+    }
+    return (
+        <Form onSubmit={submitHandler}>
+            <Form.Group className="mb-3" controlId="formBasicComment">
+                <Form.Label>Comments</Form.Label>
+                <Form.Control
+                    name="comment"
+                    as="textarea"
+                    placeholder="Write your comments here"
+                    required
+                    value={commentValue}
+                    onChange={commentValueChangeHandler}
+                />
+            </Form.Group>
+            <Button variant="primary" type="submit">
+                Submit
+            </Button>
+        </Form>
+    )
+}
+
+export default CommentForm;

src/components/comment/CommentList.jsx

@@ -0,0 +1,21 @@
+import React from "react";
+import CommentView from "./CommentView";
+
+const CommentList = (props) => {
+    return (
+        <>
+            {props.comments.map((comment) => (
+                <>
+                    <CommentView
+                        author={comment.author}
+                        timestamp={comment.timestamp}
+                        commentValue={comment.commentValue}
+                    />
+                    <br/>
+                </>
+            ))}
+        </>
+    )
+}
+
+export default CommentList;

src/components/comment/CommentView.jsx

@@ -0,0 +1,23 @@
+import React from "react";
+import TimeAgo from "javascript-time-ago";
+import en from "javascript-time-ago/locale/en";
+
+const CommentView = (props) => {
+    TimeAgo.addDefaultLocale(en);
+    const time = new TimeAgo('en-US');
+    const timeAgo = time.format(props.timestamp)
+
+    return (
+        <div className="comment-content">
+            <div className="row">
+                <span className="col-md-auto comment-author">{props.author}</span>
+                <span className="text-muted col-sm-auto timestamp">{timeAgo}</span>
+            </div>
+            <div className="row">
+                <span className="comment-value col">{props.commentValue}</span>
+            </div>
+        </div>
+    );
+}
+
+export default CommentView;

src/components/comment/NewComment.jsx

@@ -0,0 +1,18 @@
+import React from "react";
+import CommentForm from "./CommentForm";
+
+const NewComment = (props) => {
+    const saveCommentHandler = (enteredComment) => {
+        const comment = {
+            ...enteredComment,
+            id: Math.random().toString()
+        }
+        props.onAddComment(comment);
+    }
+
+    return (
+        <CommentForm onSaveComment={saveCommentHandler}/>
+    )
+}
+
+export default NewComment;