Fetch and show booked hours for service

src/css/main.scss

@@ -14,8 +14,10 @@
   border-radius: 50%;
   box-shadow: -1px -1px 15px 4px rgba(0, 0, 0, 0.05),
     2px 2px 15px 4px rgba(0, 0, 0, 0.05);
+  padding: 5px;
 
   display: flex;
+  flex-direction: column;
   justify-content: space-around;
   align-items: center;
 

src/js/api/Client.js

@@ -24,5 +24,10 @@ export default class Client {
 
   projects = () => this.#client.get("projects");
 
+  bookedHours = service =>
+    this.#client.get("activities/tags", {
+      params: { selection: [service.id], remote_service: service.name }
+    });
+
   createActivity = activity => this.#client.post("activities", { activity });
 }

src/js/components/Bubble.js

@@ -40,6 +40,7 @@ class Bubble extends Component {
   @observable projects;
   @observable lastProjectId;
   @observable lastTaskId;
+  @observable bookedHours;
   @observable changeset = {};
   @observable formErrors = {};
 
@@ -70,18 +71,28 @@ class Bubble extends Component {
     }
   }
 
+  constructor(props) {
+    super(props)
+    this.#apiClient = new ApiClient(props.settings)
+  }
+
   componentDidMount() {
     disposeOnUnmount(
       this,
       reaction(
-        () =>
+        () => (this.hasMissingConfiguration() ? null : this.props.settings),
-          this.hasMissingConfiguration() ? null : this.props.settings,
+        this.fetchProjects,
-        this.fetchData,
         {
           fireImmediately: true
         }
       )
     )
+    disposeOnUnmount(
+      this,
+      reaction(() => this.props.service, this.fetchBookedHours, {
+        fireImmediately: true
+      })
+    )
     window.addEventListener("keydown", this.handleKeyDown)
   }
 
@@ -102,7 +113,7 @@ class Bubble extends Component {
     return ["subdomain", "apiKey", "version"].some(key => !settings[key])
   };
 
-  fetchData = settings => {
+  fetchProjects = settings => {
     if (!settings) {
       return
     }
@@ -121,6 +132,16 @@ class Bubble extends Component {
       .finally(() => (this.isLoading = false))
   };
 
+  fetchBookedHours = service => {
+    this.isLoading = true
+
+    this.#apiClient
+      .bookedHours(service)
+      .then(({ data }) => (this.bookedHours = data[0]?.hours))
+      .catch(console.error)
+      .finally(() => (this.isLoading = false))
+  };
+
   // EVENT HANDLERS -----------------------------------------------------------
 
   handleKeyDown = event => {
@@ -157,13 +178,13 @@ class Bubble extends Component {
     if (error.response?.status === 422) {
       this.formErrors = error.response.data
     }
-  }
+  };
 
   // RENDER -------------------------------------------------------------------
 
   render() {
     if (this.isLoading) {
-      return null
+      return "Loading..."
     }
 
     let content
@@ -191,6 +212,7 @@ class Bubble extends Component {
           src={chrome.extension.getURL(logoUrl)}
           width="50%"
         />
+      {this.bookedHours && <span className="booked-hours"><small>{this.bookedHours}</small></span>}
         {this.isOpen && (
           <Modal>
             <Content>{content}</Content>