Notify headerbar when profile picture has changed to bust the cache

dashboard/src/models/ProfileModel.js

@@ -2,9 +2,31 @@
 import { ROLES, API_ORIGIN } from '../constants.js';
 import { fetcher } from 'pankow';
 
+const changeHandlers = {};
+const KEYS = {
+  AVATAR: 'avatar',         // only returns a URI with cachebusting
+};
+
+function notifyChange(key, value) {
+  const listener = changeHandlers[key] || [];
+  listener.forEach(h => h(value));
+}
+
+// key is one of KEYS
+function onChange(key, handler) {
+  if (typeof handler !== 'function') return;
+
+  if (!changeHandlers[key]) changeHandlers[key] = [];
+
+  changeHandlers[key].push(handler);
+}
+
 function create() {
   const accessToken = localStorage.token;
 
+  // we use that currently only to generate the avatarUrl for the change handler
+  let profileCached = null;
+
   return {
     name: 'ProfileModel',
     async logout() {
@@ -37,6 +59,8 @@ function create() {
 
       result.body.backgroundImageUrl = result.body.hasBackgroundImage ? `${API_ORIGIN}/api/v1/profile/background_image?access_token=${accessToken}&bustcache=${Date.now()}` : '';
 
+      profileCached = result.body;
+
       return [null, result.body];
     },
     async setPassword(password, newPassword) {
@@ -118,6 +142,8 @@ function create() {
       if (error) return error;
       if (result.status !== 202) return result;
 
+      notifyChange(KEYS.AVATAR, `${API_ORIGIN}/api/v1/profile/avatar/${profileCached.id}?ts=${Date.now()}`);
+
       return null;
     },
     async setBackgroundImage(file) {
@@ -197,5 +223,7 @@ function create() {
 }
 
 export default {
+  KEYS,
+  onChange,
   create,
 };