From 7b405a6de3665a39a378b64ef5d4715b33d3d2e9 Mon Sep 17 00:00:00 2001
From: Manuel Bouza <manuel@bouza.ch>
Date: Mon, 11 Feb 2019 10:14:09 +0100
Subject: [PATCH] Create activity

---
 package.json                |  1 +
 src/js/api/Client.js        | 10 ++++----
 src/js/components/Bubble.js | 47 +++++++++++++++++++++++++++++++------
 src/js/utils/index.js       |  9 +++++--
 src/js/utils/urlMatcher.js  |  2 +-
 yarn.lock                   |  5 ++++
 6 files changed, 60 insertions(+), 14 deletions(-)

diff --git a/package.json b/package.json
index 3c009bb..68ba823 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "axios": "^0.18.0",
+    "date-fns": "^1.30.1",
     "lodash": "^4.17.11",
     "mobx": "^5.5.0",
     "mobx-react": "^5.2.8",
diff --git a/src/js/api/Client.js b/src/js/api/Client.js
index afafbc8..8e130f5 100644
--- a/src/js/api/Client.js
+++ b/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 });
 }
diff --git a/src/js/components/Bubble.js b/src/js/components/Bubble.js
index 604961b..86643b8 100644
--- a/src/js/components/Bubble.js
+++ b/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 -------------------------------------------------------------------
diff --git a/src/js/utils/index.js b/src/js/utils/index.js
index 8a97d7e..c334de3 100644
--- a/src/js/utils/index.js
+++ b/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 })
diff --git a/src/js/utils/urlMatcher.js b/src/js/utils/urlMatcher.js
index b3ceb26..50c948f 100644
--- a/src/js/utils/urlMatcher.js
+++ b/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),
diff --git a/yarn.lock b/yarn.lock
index 2ed8909..807073b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2116,6 +2116,11 @@ data-urls@^1.0.0:
     whatwg-mimetype "^2.2.0"
     whatwg-url "^7.0.0"
 
+date-fns@^1.30.1:
+  version "1.30.1"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-1.30.1.tgz#2e71bf0b119153dbb4cc4e88d9ea5acfb50dc05c"
+  integrity sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw==
+
 date-now@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/date-now/-/date-now-0.1.4.tgz#eaf439fd4d4848ad74e5cc7dbef200672b9e345b"