Implemented issue comments

client/src/components/Project/Board/IssueDetails/Users/index.jsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { Avatar, Select, Icon } from 'shared/components';
+import { User, Username, Option } from './Styles';
+import { SectionTitle } from '../Styles';
+
+const propTypes = {
+  issue: PropTypes.object.isRequired,
+  updateIssue: PropTypes.func.isRequired,
+  projectUsers: PropTypes.array.isRequired,
+};
+
+const ProjectBoardIssueDetailsUsers = ({ issue, updateIssue, projectUsers }) => {
+  const getUserById = userId => projectUsers.find(user => user.id === parseInt(userId));
+
+  const userOptions = projectUsers.map(user => ({ value: user.id, label: user.name }));
+
+  const renderUserValue = (user, withBottomMargin, removeOptionValue) => (
+    <User
+      key={user.id}
+      isSelectValue
+      withBottomMargin={withBottomMargin}
+      onClick={() => removeOptionValue && removeOptionValue(user.id)}
+    >
+      <Avatar avatarUrl={user.avatarUrl} name={user.name} size={24} />
+      <Username>{user.name}</Username>
+      {removeOptionValue && <Icon type="close" top={1} />}
+    </User>
+  );
+
+  const renderUserOption = user => (
+    <User key={user.id}>
+      <Avatar avatarUrl={user.avatarUrl} name={user.name} size={32} />
+      <Username>{user.name}</Username>
+    </User>
+  );
+
+  const renderAssignees = () => (
+    <>
+      <SectionTitle>Assignees</SectionTitle>
+      <Select
+        isMulti
+        placeholder="Unassigned"
+        value={issue.userIds}
+        options={userOptions}
+        onChange={userIds => {
+          updateIssue({ userIds, users: userIds.map(getUserById) });
+        }}
+        renderValue={({ value, removeOptionValue }) =>
+          renderUserValue(getUserById(value), true, removeOptionValue)
+        }
+        renderOption={({ value, ...optionProps }) => (
+          <Option {...optionProps}>{renderUserOption(getUserById(value))}</Option>
+        )}
+      />
+    </>
+  );
+
+  const renderReporter = () => (
+    <>
+      <SectionTitle>Reporter</SectionTitle>
+      <Select
+        value={issue.reporterId}
+        options={userOptions}
+        onChange={userId => updateIssue({ reporterId: userId })}
+        renderValue={({ value }) => renderUserValue(getUserById(value), false)}
+        renderOption={({ value, ...optionProps }) => (
+          <Option {...optionProps}>{renderUserOption(getUserById(value))}</Option>
+        )}
+      />
+    </>
+  );
+
+  return (
+    <>
+      {renderAssignees()}
+      {renderReporter()}
+    </>
+  );
+};
+
+ProjectBoardIssueDetailsUsers.propTypes = propTypes;
+
+export default ProjectBoardIssueDetailsUsers;