Create activity

src/js/api/Client.js

@@ -1,8 +1,8 @@
 import axios from "axios"
 
 export default class Client {
-  #client
-  #apiKey
+  #client;
+  #apiKey;
 
   constructor({ subdomain, apiKey, clientVersion }) {
     this.#apiKey = apiKey
@@ -20,7 +20,9 @@ export default class Client {
     })
   }
 
-  login = () => this.#client.post("session", { api_key: this.#apiKey })
+  login = () => this.#client.post("session", { api_key: this.#apiKey });
 
-  projects = () => this.#client.get("projects")
+  projects = () => this.#client.get("projects");
+
+  createActivity = activity => this.#client.post("activities", { activity });
 }

src/js/components/Bubble.js

@@ -6,7 +6,12 @@ import Form from "components/Form"
 import { observable, computed } from "mobx"
 import { observer } from "mobx-react"
 import logoUrl from "images/logo.png"
-import { findLastProject, findLastTask, groupedProjectOptions } from "utils"
+import {
+  findLastProject,
+  findLastTask,
+  groupedProjectOptions,
+  currentDate
+} from "utils"
 
 @observer
 class Bubble extends Component {
@@ -26,6 +31,8 @@ class Bubble extends Component {
     })
   };
 
+  #apiClient;
+
   @observable isLoading = true;
   @observable isOpen = false;
   @observable projects;
@@ -36,9 +43,9 @@ class Bubble extends Component {
   @computed get changesetWithDefaults() {
     const { service } = this.props
 
-    const project = findLastProject(service.projectId || this.lastProjectId)(
-      this.projects
-    ) || this.projects[0]
+    const project =
+      findLastProject(service.projectId || this.lastProjectId)(this.projects) ||
+      this.projects[0]
 
     const defaults = {
       id: service.id,
@@ -55,9 +62,32 @@ 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() {
     const { settings } = this.props
-    this.apiClient = new ApiClient(settings)
+    this.#apiClient = new ApiClient(settings)
     this.fetchData()
     window.addEventListener("keydown", this.handleKeyDown)
   }
@@ -75,7 +105,7 @@ class Bubble extends Component {
   };
 
   fetchData = () => {
-    this.apiClient
+    this.#apiClient
       .projects()
       .then(({ data }) => {
         this.projects = groupedProjectOptions(data.projects)
@@ -108,7 +138,10 @@ class Bubble extends Component {
 
   handleSubmit = event => {
     event.preventDefault()
-    this.close()
+    this.#apiClient
+      .createActivity(this.activityParams)
+      .then(() => this.close())
+      .catch(error => console.log(error))
   };
 
   // RENDER -------------------------------------------------------------------

src/js/utils/index.js

@@ -9,6 +9,7 @@ import {
   find,
   curry
 } from "lodash/fp"
+import { format } from "date-fns"
 
 const nilToArray = input => input || []
 
@@ -25,9 +26,10 @@ export const findLastTask = id =>
   )
 
 function taskOptions(tasks) {
-  return tasks.map(({ id, name }) => ({
+  return tasks.map(({ id, name, billable }) => ({
     label: name,
-    value: id
+    value: id,
+    billable
   }))
 }
 
@@ -55,3 +57,6 @@ export const trace = curry((tag, value) => {
   console.log(tag, value)
   return value
 })
+
+export const currentDate = (locale = "de") =>
+  format(new Date(), "YYYY-MM-DD", { locale })

src/js/utils/urlMatcher.js

@@ -34,7 +34,7 @@ export const createEnhancer = document => services => (key, url) => {
     ...service,
     key,
     url,
-    id: evaluate(service.id),
+    id: evaluate(service.id) || match.id,
     description: evaluate(service.description),
     projectId: evaluate(service.projectId),
     taskId: evaluate(service.taskId),