Refactor so that changeset can be used as activity params

src/js/components/Bubble.js

@@ -41,7 +41,7 @@ class Bubble extends Component {
   @observable lastProjectId;
   @observable lastTaskId;
   @observable changeset = {};
-  @observable errors = {};
+  @observable formErrors = {};
 
   @computed get changesetWithDefaults() {
     const { service } = this.props
@@ -50,11 +50,16 @@ class Bubble extends Component {
       findLastProject(service.projectId || this.lastProjectId)(this.projects) ||
       head(this.projects)
 
+    const task = findLastTask(service.taskId || this.lastTaskId)(project)
+
     const defaults = {
-      id: service.id,
-      name: service.name,
-      project,
-      task: findLastTask(service.taskId || this.lastTaskId)(project),
+      remote_service: service.name,
+      remote_id: service.id,
+      remote_url: window.location.href,
+      date: currentDate(),
+      assignment_id: project?.value,
+      task_id: task?.value, 
+      billable: task?.billable,
       hours: "",
       description: service.description
     }
@@ -65,29 +70,6 @@ class Bubble extends Component {
     }
   }
 
-  @computed get activityParams() {
-    const {
-      id,
-      name,
-      hours,
-      description,
-      project,
-      task
-    } = this.changesetWithDefaults
-
-    return {
-      date: currentDate(),
-      hours,
-      description,
-      assignment_id: project.value,
-      task_id: task.value,
-      billable: task.billable,
-      remote_service: name,
-      remote_id: id,
-      remote_url: window.location.href
-    }
-  }
-
   componentDidMount() {
     disposeOnUnmount(
       this,
@@ -154,7 +136,7 @@ class Bubble extends Component {
 
     this.changeset[name] = value
 
-    if (name === "project") {
+    if (name === "assignment_id") {
       this.changeset.task = null
     }
   };
@@ -162,11 +144,20 @@ class Bubble extends Component {
   handleSubmit = event => {
     event.preventDefault()
     this.#apiClient
-      .createActivity(this.activityParams)
-      .then(() => this.close())
-      .catch(error => console.log(error))
+      .createActivity(this.changesetWithDefaults)
+      .then(() => {
+        this.close()
+        this.formErrors = {}
+      })
+      .catch(this.handleSubmitError)
   };
 
+  handleSubmitError = error => {
+    if (error.response?.status === 422) {
+      this.formErrors = error.response.data
+    }
+  }
+
   // RENDER -------------------------------------------------------------------
 
   render() {

src/js/components/Form.js

@@ -21,7 +21,7 @@ class Form extends Component {
 
   isValid = () => {
     const { changeset } = this.props
-    return ["project", "task", "hours", "description"]
+    return ["assignment_id", "task_id", "hours", "description"]
       .map(prop => changeset[prop])
       .every(Boolean)
   };
@@ -34,22 +34,23 @@ class Form extends Component {
     }
 
     const { projects, changeset, onChange, onSubmit } = this.props
+    const project = Select.findOptionByValue(projects, changeset.assignment_id)
 
     return (
       <form onSubmit={onSubmit}>
         <div className="form-group">
           <Select
-            name="project"
+            name="assignment_id"
             options={projects}
-            value={changeset.project}
+            value={changeset.assignment_id}
             onChange={onChange}
           />
         </div>
         <div className="form-group">
           <Select
-            name="task"
-            options={changeset.project?.tasks || []}
-            value={changeset.task}
+            name="task_id"
+            options={project?.tasks || []}
+            value={changeset.task_id}
             onChange={onChange}
             noOptionsMessage={() => "Zuerst Projekt wählen"}
           />

src/js/components/Select.js

@@ -8,7 +8,9 @@ import {
   join,
   filter,
   compose,
-  property
+  property,
+  flatMap,
+  pathEq
 } from "lodash/fp"
 
 const customTheme = theme => ({
@@ -43,19 +45,33 @@ const filterOption = createFilter({
 export default class Select extends Component {
   static propTypes = {
     name: PropTypes.string.isRequired,
+    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    options: PropTypes.array,
     onChange: PropTypes.func.isRequired
+  };
+
+
+  static findOptionByValue = (selectOptions, value) => {
+    const options = flatMap(
+      option => (option.options ? option.options : option),
+      selectOptions
+    )
+
+    return options.find(pathEq("value", value))
   }
 
-  handleChange = value => {
+  handleChange = option => {
     const { name, onChange } = this.props
+    const { value } = option
     onChange({ target: { name, value } })
-  }
+  };
 
   render() {
-    const passThroughProps = this.props
+    const { value, ...passThroughProps } = this.props
     return (
       <ReactSelect
         {...passThroughProps}
+        value={Select.findOptionByValue(this.props.options, value)}
         onChange={this.handleChange}
         filterOption={filterOption}
         theme={customTheme}

src/js/utils/index.js

@@ -61,4 +61,5 @@ export const trace = curry((tag, value) => {
 export const currentDate = (locale = "de") =>
   format(new Date(), "YYYY-MM-DD", { locale })
 
-export const extensionSettingsUrl = () => `chrome://extensions/?id=${chrome.runtime.id}`
+export const extensionSettingsUrl = () =>
+  `chrome://extensions/?id=${chrome.runtime.id}`