Resolve "Add non-uhepp comments/description for each plot"

uhepp-js/src/components/Caption.jsx

+
+import React, { useState } from "react";
+
+const Caption = ({editable, comment, handleUpdate}) => {
+  const [editMode, setEditMode] = useState(false)
+  const [cmt, setCmt] = useState(comment)
+   
+  const updateComment = (e) => {
+    if (editable) {
+      const comment = e.target.value;
+      setCmt(comment)
+    }
+  }
+
+  const handleSubmit = (e) => {
+      e.preventDefault()
+      handleUpdate(cmt)
+  }
+
+  const softLeave = () => {
+    if (comment == cmt) {
+      setEditMode(false)
+    }
+  }
+
+  const handleClick = () => {
+    if (editable) {
+      setEditMode(true)
+    }
+  }
+
+  console.log(style)
+
+  if (editMode) {
+    return (<form method="post" className="my-2 d-flex" onSubmit={e => handleSubmite(e)}>
+      <textarea name="comment" cols="40" autoFocus className="textarea form-control"
+        onBlur={() => softLeave()}
+        id="id_comment" rows="2" value={cmt} onChange={e => updateComment(e)} />
+      <div>
+        <button type="submit" className="btn btn-outline-secondary ml-1">
+            <i className="fas fa-save"></i>
+        </button>
+      </div>
+    </form>)
+  } else {
+    return <div className="plot-caption mx-5" onClick={() => handleClick()}>
+      <p>{comment}</p>
+      <i className="fas fa-pen m-1 pen text-muted"></i>
+    </div>
+  }
+}
+
+export default Caption