Add event emitter to rerender on settings change

src/EventEmitter.ts

@@ -0,0 +1,13 @@
+export type EventHandler = () => void | Promise<void>;
+
+export class EventEmitter {
+    private listeners: EventHandler[] = [];
+
+    public addListener(l: EventHandler) {
+        this.listeners.push(l);
+    }
+
+    public fire() {
+        this.listeners.forEach((h) => h());
+    }
+}

src/content/add-billability-chart.ts

@@ -4,7 +4,6 @@ import { toIsoDate } from '../date';
 import { endOfWeek, getWeek, startOfWeek, subWeeks } from 'date-fns';
 import { calculateTimeStats } from './stats';
 import { getSettings, updateSettings } from './settings';
-import { render } from './index';
 
 const api = new TimeChimpApi();
 
@@ -98,7 +97,6 @@ function createBillabilityCard(addTimePanel: Element) {
             relativeToContractHours: !getSettings().relativeToContractHours,
         });
         setBtnText();
-        render();
     });
 
     addTimePanel.appendChild(card);

src/content/index.ts

@@ -4,6 +4,7 @@ import { addBillabilityChart } from './add-billability-chart';
 import { Message } from '../message';
 import setDefaultOptions from 'date-fns/setDefaultOptions';
 import { TimeChimpApi, User } from '../TimeChimpApi';
+import { settingsUpdateEvent } from './settings';
 
 // Default date-fns options.
 setDefaultOptions({
@@ -18,6 +19,8 @@ const api = new TimeChimpApi();
 let currentDate = new Date();
 let currentUser: User | undefined;
 
+settingsUpdateEvent.addListener(() => render());
+
 /**
  * Listens to incoming messages, and update the billability chart.
  */
@@ -31,7 +34,7 @@ chrome.runtime.onMessage.addListener(async (msg: Message) => {
     await render(msg.userName);
 });
 
-export async function render(userName?: string) {
+async function render(userName?: string) {
     if (!currentUser || (userName && userName !== currentUser.userName)) {
         currentUser = await getUser(userName);
     }

src/content/settings.ts

@@ -1,3 +1,5 @@
+import { EventEmitter } from '../EventEmitter';
+
 const STORAGE_KEY = 'tcbc-settings';
 
 export interface Settings {
@@ -10,6 +12,8 @@ const DEFAULT_SETTINGS: Settings = {
     relativeToContractHours: false,
 };
 
+export const settingsUpdateEvent = new EventEmitter();
+
 export function getSettings(): Settings {
     // Try to load the settings.
     if (!settings) {
@@ -33,6 +37,7 @@ export function updateSettings(updates: Partial<Settings>) {
         ...updates,
     };
     saveSettings();
+    settingsUpdateEvent.fire();
 }
 
 function tryLoadSettings() {