Polished existing features, added items to sidebar navigation

client/src/Project/Board/IssueDetails/Title/index.jsx

@@ -0,0 +1,53 @@
+import React, { useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+
+import { KeyCodes } from 'shared/constants/keyCodes';
+import { is, generateErrors } from 'shared/utils/validation';
+import { TitleTextarea, ErrorText } from './Styles';
+
+const propTypes = {
+  issue: PropTypes.object.isRequired,
+  updateIssue: PropTypes.func.isRequired,
+};
+
+const ProjectBoardIssueDetailsTitle = ({ issue, updateIssue }) => {
+  const $titleInputRef = useRef();
+  const [error, setError] = useState(null);
+
+  const handleTitleChange = () => {
+    setError(null);
+
+    const title = $titleInputRef.current.value;
+    if (title === issue.title) return;
+
+    const errors = generateErrors({ title }, { title: [is.required(), is.maxLength(200)] });
+
+    if (errors.title) {
+      setError(errors.title);
+    } else {
+      updateIssue({ title });
+    }
+  };
+
+  return (
+    <>
+      <TitleTextarea
+        minRows={1}
+        placeholder="Short summary"
+        defaultValue={issue.title}
+        ref={$titleInputRef}
+        onBlur={handleTitleChange}
+        onKeyDown={event => {
+          if (event.keyCode === KeyCodes.ENTER) {
+            event.target.blur();
+          }
+        }}
+      />
+      {error && <ErrorText>{error}</ErrorText>}
+    </>
+  );
+};
+
+ProjectBoardIssueDetailsTitle.propTypes = propTypes;
+
+export default ProjectBoardIssueDetailsTitle;