feature/show-customer-in-project-select (#15)

* Fix code styles

* Show customer name in select control if props.data.customerName is defined.

* Pump version and update changelock

CHANGELOG.md

@@ -56,3 +56,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [1.1.3] - 2019-04-10
 ### Fixed
 - Read projected identifier in Asana's "My tasks"-view
+
+## [1.1.4] - 2019-04-11
+### Added
+- Show customer name in the project select box

package.json

@@ -1,7 +1,7 @@
 {
   "name": "moco-browser-extensions",
   "description": "Browser plugin for MOCO",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "license": "MIT",
   "scripts": {
     "start": "yarn start:chrome",

src/js/components/Select.js

@@ -1,6 +1,6 @@
 import React, { Component } from "react"
 import PropTypes from "prop-types"
-import ReactSelect, { createFilter } from "react-select"
+import ReactSelect, { createFilter, components } from "react-select"
 import {
   values,
   isString,
@@ -10,11 +10,11 @@ import {
   compose,
   property,
   flatMap,
-  pathEq
+  pathEq,
+  isNil,
 } from "lodash/fp"
 
-const hasOptionGroups = options =>
-  options.some(option => Boolean(option.options))
+const hasOptionGroups = options => options.some(option => Boolean(option.options))
 
 const customTheme = theme => ({
   ...theme,
@@ -22,30 +22,30 @@ const customTheme = theme => ({
   spacing: {
     ...theme.spacing,
     baseUnit: 3,
-    controlHeight: 32
+    controlHeight: 32,
   },
   colors: {
     ...theme.colors,
     primary: "#38b5eb",
     primary75: "rgba(56, 181, 235, 0.25)",
     primary50: "#38b5eb",
-    primary25: "#38b5eb"
-  }
+    primary25: "#38b5eb",
+  },
 })
 
 const customStyles = props => ({
   control: (base, _state) => ({
     ...base,
-    borderColor: props.hasError ? "#FB3A2F" : base.borderColor
+    borderColor: props.hasError ? "#FB3A2F" : base.borderColor,
   }),
   valueContainer: base => ({
     ...base,
-    padding: "4px 12px"
+    padding: "4px 12px",
   }),
   input: base => ({
     ...base,
     border: "0 !important",
-    boxShadow: "0 !important"
+    boxShadow: "0 !important",
   }),
   groupHeading: (base, _state) => ({
     ...base,
@@ -53,16 +53,14 @@ const customStyles = props => ({
     textTransform: "none",
     fontWeight: "bold",
     fontSize: "100%",
-    padding: "2px 7px 4px"
+    padding: "2px 7px 4px",
   }),
   option: (base, state) => ({
     ...base,
-    padding: hasOptionGroups(state.options)
-      ? "4px 7px 4px 20px"
-      : "4px 7px 4px",
+    padding: hasOptionGroups(state.options) ? "4px 7px 4px 20px" : "4px 7px 4px",
     backgroundColor: state.isFocused ? "#38b5eb" : "none",
-    color: state.isFocused ? "white" : "hsl(0, 0%, 20%)"
-  })
+    color: state.isFocused ? "white" : "hsl(0, 0%, 20%)",
+  }),
 })
 
 const filterOption = createFilter({
@@ -70,27 +68,38 @@ const filterOption = createFilter({
     join(" "),
     filter(value => isString(value) || isNumber(value)),
     values,
-    property("data")
-  )
+    property("data"),
+  ),
 })
 
+SingleValue.propTypes = {
+  children: PropTypes.string.isRequired,
+  data: PropTypes.shape({
+    customerName: PropTypes.string,
+  }).isRequired,
+}
+
+function SingleValue({ children, ...props }) {
+  const label = isNil(props.data.customerName)
+    ? children
+    : `${props.data.customerName}: ${children}`
+  return <components.SingleValue {...props}>{label}</components.SingleValue>
+}
+
 export default class Select extends Component {
   static propTypes = {
     name: PropTypes.string.isRequired,
     value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     options: PropTypes.array,
     hasError: PropTypes.bool,
-    onChange: PropTypes.func.isRequired
-  };
+    onChange: PropTypes.func.isRequired,
+  }
 
   static findOptionByValue = (selectOptions, value) => {
-    const options = flatMap(
-      option => (option.options ? option.options : option),
-      selectOptions
-    )
+    const options = flatMap(option => (option.options ? option.options : option), selectOptions)
 
     return options.find(pathEq("value", value)) || null
-  };
+  }
 
   constructor(props) {
     super(props)
@@ -101,7 +110,7 @@ export default class Select extends Component {
     const { name, onChange } = this.props
     const { value } = option
     onChange({ target: { name, value } })
-  };
+  }
 
   handleKeyDown = event => {
     if (!this.select.current) {
@@ -111,7 +120,7 @@ export default class Select extends Component {
     if (!this.select.current.state.menuIsOpen && event.key === "Enter") {
       this.select.current.setState({ menuIsOpen: true })
     }
-  };
+  }
 
   render() {
     const { value, ...passThroughProps } = this.props
@@ -121,11 +130,12 @@ export default class Select extends Component {
         {...passThroughProps}
         ref={this.select}
         value={Select.findOptionByValue(this.props.options, value)}
-        onChange={this.handleChange}
-        onKeyDown={this.handleKeyDown}
         filterOption={filterOption}
         theme={customTheme}
         styles={customStyles(this.props)}
+        components={{ SingleValue }}
+        onChange={this.handleChange}
+        onKeyDown={this.handleKeyDown}
       />
     )
   }