fix/asana-refactor (#14)

* Add packages eslint-plugin-prettier and eslint-config-prettier

These packages add better code formatting support in VS Code

* Fix code styles

* Update projectId query selector for asana service

* Extract constants to own computed getter methods

* Update changelog, bump version

src/js/components/App.js

@@ -59,31 +59,39 @@ class App extends Component {
   @observable changeset = {}
   @observable formErrors = {}
 
-  @computed get changesetWithDefaults() {
-    const { service, projects, lastProjectId, lastTaskId } = this.props
-
-    // TODO: extract project, task and billable to own methods
-
-    const project =
+  @computed get project() {
+    const { service, projects, lastProjectId } = this.props
+    return (
       findProjectByValue(this.changeset.assignment_id)(projects) ||
       findProjectByIdentifier(service?.projectId)(projects) ||
       findProjectByValue(Number(lastProjectId))(projects) ||
       head(projects)
+    )
+  }
 
-    const task =
-      findTask(this.changeset.task_id || service?.taskId || lastTaskId)(project) ||
-      head(project?.tasks)
+  @computed get task() {
+    const { service, lastTaskId } = this.props
+    return (
+      findTask(this.changeset.task_id || service?.taskId || lastTaskId)(this.project) ||
+      head(this.project?.tasks)
+    )
+  }
 
-    const billable = /\(.+\)/.test(this.changeset.hours) === true ? false : !!task?.billable
+  @computed get billable() {
+    return /\(.+\)/.test(this.changeset.hours) === true ? false : !!this.task?.billable
+  }
+
+  @computed get changesetWithDefaults() {
+    const { service } = this.props
 
     const defaults = {
       remote_service: service?.name,
       remote_id: service?.id,
       remote_url: service?.url,
       date: formatDate(new Date()),
-      assignment_id: project?.value,
-      task_id: task?.value,
-      billable,
+      assignment_id: this.project?.value,
+      task_id: this.task?.value,
+      billable: this.billable,
       hours: "",
       seconds: this.changeset.hours && new TimeInputParser(this.changeset.hours).parseSeconds(),
       description: service?.description,

src/js/remoteServices.js

@@ -5,33 +5,25 @@ export default {
     name: "asana",
     urlPatterns: [
       [/^https:\/\/app.asana.com\/0\/([^/]+)\/(\d+)/, ["domainUserId", "id"]],
-      [
-        /^https:\/\/app.asana.com\/0\/search\/([^/]+)\/(\d+)/,
-        ["domainUserId", "id"]
-      ]
+      [/^https:\/\/app.asana.com\/0\/search\/([^/]+)\/(\d+)/, ["domainUserId", "id"]],
     ],
     description: document =>
-      document
-        .querySelector(".ItemRow--highlighted textarea")
-        ?.textContent?.trim() ||
-      document
-        .querySelector(".ItemRow--focused textarea")
-        ?.textContent?.trim() ||
+      document.querySelector(".ItemRow--highlighted textarea")?.textContent?.trim() ||
+      document.querySelector(".ItemRow--focused textarea")?.textContent?.trim() ||
       document.querySelector(".SingleTaskPane textarea")?.textContent?.trim(),
     projectId: document => {
       const match = document
-        .querySelector(".ProjectPageHeader-projectName")
+        .querySelector(".TaskProjectPill-projectName")
         ?.textContent?.trim()
         ?.match(projectRegex)
       return match && match[1]
-    }
+    },
   },
 
   "github-pr": {
     name: "github",
     urlPatterns: ["https\\://github.com/:org/:repo/pull/:id(/:tab)"],
-    id: (document, service, { org, repo, id }) =>
-      [service.key, org, repo, id].join("."),
+    id: (document, service, { org, repo, id }) => [service.key, org, repo, id].join("."),
     description: (document, service, { org, repo, id }) =>
       document.querySelector(".js-issue-title")?.textContent?.trim(),
     projectId: document => {
@@ -40,16 +32,15 @@ export default {
         ?.textContent.trim()
         ?.match(projectRegex)
       return match && match[1]
-    }
+    },
   },
 
   "github-issue": {
     name: "github",
     urlPatterns: ["https\\://github.com/:org/:repo/issues/:id"],
-    id: (document, service, { org, repo, id }) =>
-      [service.key, org, repo, id].join("."),
+    id: (document, service, { org, repo, id }) => [service.key, org, repo, id].join("."),
     description: (document, service, { org, repo, id }) =>
-      document.querySelector(".js-issue-title")?.textContent?.trim()
+      document.querySelector(".js-issue-title")?.textContent?.trim(),
   },
 
   jira: {
@@ -58,11 +49,11 @@ export default {
       "https\\://:org.atlassian.net/secure/RapidBoard.jspa",
       "https\\://:org.atlassian.net/browse/:id",
       "https\\://:org.atlassian.net/jira/software/projects/:projectId/boards/:board",
-      "https\\://:org.atlassian.net/jira/software/projects/:projectId/boards/:board/backlog"
+      "https\\://:org.atlassian.net/jira/software/projects/:projectId/boards/:board/backlog",
     ],
     queryParams: {
       id: "selectedIssue",
-      projectId: "projectKey"
+      projectId: "projectKey",
     },
     description: (document, service, { id }) => {
       const title =
@@ -70,45 +61,38 @@ export default {
           .querySelector('[aria-label="Edit Summary"]')
           ?.parentNode?.querySelector("h1")
           ?.textContent?.trim() ||
-        document
-          .querySelector(".ghx-selected .ghx-summary")
-          ?.textContent?.trim()
+        document.querySelector(".ghx-selected .ghx-summary")?.textContent?.trim()
       return `#${id} ${title || ""}`
-    }
+    },
   },
 
   meistertask: {
     name: "meistertask",
     urlPatterns: ["https\\://www.meistertask.com/app/task/:id/:slug"],
     description: document => {
-      const json =
-        document.getElementById("mt-toggl-data")?.dataset?.togglJson || "{}"
+      const json = document.getElementById("mt-toggl-data")?.dataset?.togglJson || "{}"
       const data = JSON.parse(json)
       return data.taskName
     },
     projectId: document => {
-      const json =
-        document.getElementById("mt-toggl-data")?.dataset?.togglJson || "{}"
+      const json = document.getElementById("mt-toggl-data")?.dataset?.togglJson || "{}"
       const data = JSON.parse(json)
-      const match =
-        data.taskName?.match(projectRegex) ||
-        data.projectName?.match(projectRegex)
+      const match = data.taskName?.match(projectRegex) || data.projectName?.match(projectRegex)
       return match && match[1]
-    }
+    },
   },
 
   trello: {
     name: "trello",
     urlPatterns: ["https\\://trello.com/c/:id/:title"],
     description: (document, service, { title }) =>
-      document.querySelector(".js-title-helper")?.textContent?.trim() || title
+      document.querySelector(".js-title-helper")?.textContent?.trim() || title,
   },
 
   youtrack: {
     name: "youtrack",
     urlPatterns: ["https\\://:org.myjetbrains.com/youtrack/issue/:id"],
-    description: document =>
-      document.querySelector("yt-issue-body h1")?.textContent?.trim()
+    description: document => document.querySelector("yt-issue-body h1")?.textContent?.trim(),
   },
 
   wunderlist: {
@@ -117,6 +101,6 @@ export default {
     description: document =>
       document
         .querySelector(".taskItem.selected .taskItem-titleWrapper-title")
-        ?.textContent?.trim()
-  }
+        ?.textContent?.trim(),
+  },
 }