Show timer view and stop timer

src/js/api/Client.js

@@ -56,4 +56,6 @@ export default class Client {
   }
 
   createActivity = activity => this.#client.post("activities", { activity })
+
+  stopTimer = timedActivity => this.#client.get(`activities/${timedActivity.id}/stop_timer`)
 }

src/js/background.js

@@ -58,6 +58,19 @@ chrome.runtime.onMessage.addListener(action => {
     })
   }
 
+  if (action.type === "stopTimer") {
+    const { timedActivity, service } = action.payload
+    getCurrentTab().then(tab => {
+      getSettings().then(settings => {
+        const apiClient = new ApiClient(settings)
+        apiClient
+          .stopTimer(timedActivity)
+          .then(() => resetBubble({ tab, apiClient, service }))
+          .catch(() => null)
+      })
+    })
+  }
+
   if (action.type === "openOptions") {
     let url
     if (isChrome()) {

src/js/components/App.js

@@ -3,6 +3,7 @@ import PropTypes from "prop-types"
 import Spinner from "components/Spinner"
 import Form from "components/Form"
 import Calendar from "components/Calendar"
+import TimerView from "components/App/TimerView"
 import { observable, computed } from "mobx"
 import { Observer, observer } from "mobx-react"
 import { Spring, animated, config } from "react-spring/renderprops"
@@ -135,6 +136,15 @@ class App extends Component {
     this.changeset.date = formatDate(date)
   }
 
+  handleStopTimer = timedActivity => {
+    const { service } = this.props
+
+    chrome.runtime.sendMessage({
+      type: "stopTimer",
+      payload: { timedActivity, service },
+    })
+  }
+
   handleSubmit = event => {
     event.preventDefault()
     const { service } = this.props
@@ -198,7 +208,9 @@ class App extends Component {
             <Header subdomain={subdomain} />
             <Observer>
               {() =>
-                timedActivity ? null : (
+                timedActivity ? (
+                  <TimerView timedActivity={timedActivity} onStopTimer={this.handleStopTimer} />
+                ) : (
                   <>
                     <Calendar
                       fromDate={parseISO(fromDate)}

src/js/components/App/TimerView.js

@@ -0,0 +1,40 @@
+import React from "react"
+import PropTypes from "prop-types"
+import Timer from "components/shared/Timer"
+import { parseISO } from "date-fns"
+
+export default function TimerView({ timedActivity, onStopTimer }) {
+  const handleStopTimer = () => {
+    onStopTimer(timedActivity)
+  }
+
+  return (
+    <div className="moco-bx-timer-view">
+      <h3>
+        {timedActivity.customer_name}:<br />
+        {timedActivity.assignment_name}
+      </h3>
+      <h3>{timedActivity.task_name}</h3>
+      <br />
+      <Timer
+        startedAt={parseISO(timedActivity.timer_started_at)}
+        offset={timedActivity.seconds}
+        style={{ color: "red", fontSize: "60px", display: "inline-block" }}
+      />
+      <button className="moco-bx-btn btn-stop-timer" onClick={handleStopTimer}>
+        Timer Stoppen
+      </button>
+    </div>
+  )
+}
+
+TimerView.propTypes = {
+  timedActivity: PropTypes.shape({
+    customer_name: PropTypes.string.isRequired,
+    assignment_name: PropTypes.string.isRequired,
+    task_name: PropTypes.string.isRequired,
+    timer_started_at: PropTypes.string.isRequired,
+    seconds: PropTypes.number.isRequired,
+  }).isRequired,
+  onStopTimer: PropTypes.func.isRequired,
+}