Added comments to news items

src/components/comments.js

@@ -0,0 +1,169 @@
+import React, { useState } from 'react'
+
+import ReactButton from './reactButton.js'
+
+import styles from './comments.module.css'
+
+function CommentInput({ onSubmit }) {
+  const [val, setVal] = useState('')
+  return (
+    <div className={styles.commentAreaContainer}>
+      <textarea
+        autoFocus
+        className={styles.commentArea}
+        value={val}
+        onChange={(e) => {
+          setVal(e.target.value)
+        }}
+      />
+      <div>
+        <span
+          onClick={() => {
+            onSubmit(val)
+          }}
+          className={styles.button}
+        >
+          Submit
+        </span>
+      </div>
+    </div>
+  )
+}
+
+function Comment({ comment, index, onComment, onDelete, onReact, uid }) {
+  const [displayed, setDisplayed] = useState(true)
+  const [commenting, setCommenting] = useState(false)
+  const { text, subComments, date, user, reacts } = comment
+  const own = uid === user
+
+  return (
+    <div className={styles.comment}>
+      <div className={`${styles.commentData} ${own && styles.ownComment}`}>
+        <div className={styles.commentHeader}>
+          <div className={styles.userContainer}>
+            <div
+              className={styles.showHide}
+              onClick={() => {
+                setDisplayed(!displayed)
+              }}
+            >
+              {displayed ? '[-]' : '[+]'}
+            </div>
+            <div>User #{user}</div>
+          </div>
+          <div>{date}</div>
+        </div>
+        <div className={`${!displayed && styles.hidden}`}>
+          <div className={styles.commentText}> {text}</div>
+          <div className={styles.actionsContainer}>
+            <div
+              className={styles.button}
+              onClick={() => {
+                setCommenting(true)
+              }}
+            >
+              Reply...
+            </div>
+            {own && (
+              <div
+                className={styles.button}
+                onClick={() => {
+                  onDelete([index])
+                }}
+              >
+                Delete
+              </div>
+            )}
+            <ReactButton
+              onClick={(reaction, isDelete) => {
+                onReact([index], reaction, isDelete)
+              }}
+              uid={uid}
+              existingReacts={reacts}
+            />
+          </div>
+          {commenting && (
+            <CommentInput
+              onSubmit={(e) => {
+                onComment([index], e)
+                setCommenting(false)
+              }}
+            />
+          )}
+        </div>
+      </div>
+      <div className={`${!displayed && styles.hidden}`}>
+        {subComments &&
+          subComments.map((sc, i) => {
+            return (
+              <Comment
+                comment={sc}
+                onReact={(path, reaction, isDelete) => {
+                  onReact([...path, index], reaction, isDelete)
+                }}
+                onDelete={(path) => {
+                  onDelete([...path, index])
+                }}
+                onComment={(path, text) => {
+                  onComment([...path, index], text)
+                }}
+                index={i}
+                key={i}
+                uid={uid}
+              />
+            )
+          })}
+      </div>
+    </div>
+  )
+}
+
+export default function Comments({
+  comments,
+  onComment,
+  onDelete,
+  onReact,
+  uid,
+}) {
+  const [addingNewComment, setAddingNewComment] = useState(false)
+  return (
+    <div>
+      {comments && comments.length > 0 ? (
+        comments.map((comment, i) => {
+          return (
+            <Comment
+              onReact={onReact}
+              onComment={onComment}
+              onDelete={onDelete}
+              comment={comment}
+              index={i}
+              key={i}
+              uid={uid}
+            />
+          )
+        })
+      ) : (
+        <div>
+          <div>No comments yet</div>
+        </div>
+      )}
+      {addingNewComment ? (
+        <CommentInput
+          onSubmit={(e) => {
+            setAddingNewComment(false)
+            onComment([], e)
+          }}
+        />
+      ) : (
+        <span
+          onClick={() => {
+            setAddingNewComment(true)
+          }}
+          className={styles.button}
+        >
+          Add new
+        </span>
+      )}
+    </div>
+  )
+}