fix/hours-in-brackets-unbillable (#13)

* Set billable to false if hours are entere in brackets

* Fix code style

* Add TODO comment for refactoring

src/js/components/App.js

@@ -14,7 +14,7 @@ import {
   findProjectByValue,
   findProjectByIdentifier,
   findTask,
-  formatDate
+  formatDate,
 } from "utils"
 import InvalidConfigurationError from "components/Errors/InvalidConfigurationError"
 import UpgradeRequiredError from "components/Errors/UpgradeRequiredError"
@@ -34,7 +34,7 @@ class App extends Component {
       name: PropTypes.string,
       description: PropTypes.string,
       projectId: PropTypes.string,
-      taskId: PropTypes.string
+      taskId: PropTypes.string,
     }),
     subdomain: PropTypes.string,
     activities: PropTypes.array,
@@ -46,22 +46,24 @@ class App extends Component {
     fromDate: PropTypes.string,
     toDate: PropTypes.string,
     errorType: PropTypes.string,
-    errorMessage: PropTypes.string
+    errorMessage: PropTypes.string,
-  };
+  }
 
   static defaultProps = {
     activities: [],
     schedules: [],
     projects: [],
-    roundTimeEntries: false
+    roundTimeEntries: false,
-  };
+  }
 
-  @observable changeset = {};
+  @observable changeset = {}
-  @observable formErrors = {};
+  @observable formErrors = {}
 
   @computed get changesetWithDefaults() {
     const { service, projects, lastProjectId, lastTaskId } = this.props
 
+    // TODO: extract project, task and billable to own methods
+
     const project =
       findProjectByValue(this.changeset.assignment_id)(projects) ||
       findProjectByIdentifier(service?.projectId)(projects) ||
@@ -69,9 +71,10 @@ class App extends Component {
       head(projects)
 
     const task =
-      findTask(this.changeset.task_id || service?.taskId || lastTaskId)(
+      findTask(this.changeset.task_id || service?.taskId || lastTaskId)(project) ||
-        project
+      head(project?.tasks)
-      ) || head(project?.tasks)
+
+    const billable = /\(.+\)/.test(this.changeset.hours) === true ? false : !!task?.billable
 
     const defaults = {
       remote_service: service?.name,
@@ -80,13 +83,11 @@ class App extends Component {
       date: formatDate(new Date()),
       assignment_id: project?.value,
       task_id: task?.value,
-      billable: task?.billable,
+      billable,
       hours: "",
-      seconds:
+      seconds: this.changeset.hours && new TimeInputParser(this.changeset.hours).parseSeconds(),
-        this.changeset.hours &&
-        new TimeInputParser(this.changeset.hours).parseSeconds(),
       description: service?.description,
-      tag: ""
+      tag: "",
     }
 
     return { ...defaults, ...this.changeset }
@@ -105,7 +106,7 @@ class App extends Component {
   handleChange = event => {
     const { projects } = this.props
     const {
-      target: { name, value }
+      target: { name, value },
     } = event
 
     this.changeset[name] = value
@@ -114,11 +115,11 @@ class App extends Component {
       const project = findProjectByValue(value)(projects)
       this.changeset.task_id = head(project?.tasks)?.value
     }
-  };
+  }
 
   handleSelectDate = date => {
     this.changeset.date = formatDate(date)
-  };
+  }
 
   handleSubmit = event => {
     event.preventDefault()
@@ -128,23 +129,23 @@ class App extends Component {
       type: "createActivity",
       payload: {
         activity: extractAndSetTag(this.changesetWithDefaults),
-        service
+        service,
-      }
+      },
     })
-  };
+  }
 
   handleKeyDown = event => {
     if (event.keyCode === 27) {
       event.stopPropagation()
       chrome.runtime.sendMessage({ type: "closePopup" })
     }
-  };
+  }
 
   handleSetFormErrors = ({ type, payload }) => {
     if (type === "setFormErrors") {
       this.formErrors = payload
     }
-  };
+  }
 
   render() {
     const {
@@ -156,7 +157,7 @@ class App extends Component {
       fromDate,
       toDate,
       errorType,
-      errorMessage
+      errorMessage,
     } = this.props
 
     if (loading) {
@@ -176,12 +177,7 @@ class App extends Component {
     }
 
     return (
-      <Spring
+      <Spring native from={{ opacity: 0 }} to={{ opacity: 1 }} config={config.stiff}>
-        native
-        from={{ opacity: 0 }}
-        to={{ opacity: 1 }}
-        config={config.stiff}
-      >
         {props => (
           <animated.div className="moco-bx-app-container" style={props}>
             <Header subdomain={subdomain} />