Save active app in session

Author: jcbrand

src/headless/shared/_converse.js

@@ -147,10 +147,11 @@ export class ConversePrivateGlobal extends EventEmitter(Object) {
     }
 
     initSession () {
-        this.session?.destroy();
-        this.session = new Model();
+        this.state.session?.destroy();
+        this.state.session = new Model();
 
         // XXX DEPRECATED
+        this.session = this.state.session;
         Object.assign(
             this, {
                 jid: undefined,

src/headless/shared/connection/index.js

@@ -20,6 +20,10 @@ Strophe.Status.RECONNECTING = i + 1;
  */
 export class Connection extends Strophe.Connection {
 
+    /**
+     * @param {string} service - The BOSH or WebSocket service URL.
+     * @param {import('strophe.js/src/types/connection').ConnectionOptions} options
+     */
     constructor (service, options) {
         super(service, options);
         // For new sessions, we need to send out a presence stanza to notify
@@ -215,6 +219,7 @@ export class Connection extends Strophe.Connection {
         const { api } = _converse;
 
         delete this.reconnecting;
+
         this.flush(); // Solves problem of returned PubSub BOSH response not received by browser
         await setUserJID(this.jid);
 

src/headless/utils/init.js

@@ -221,7 +221,6 @@ export async function initSession(_converse, jid) {
         // Set `active` flag to false when the tab gets reloaded
         window.addEventListener(getUnloadEvent(), () => safeSave(_converse.session, { active: false }));
 
-
         /**
          * Triggered once the user's session has been initialized. The session is a
          * cache which stores information about the user's current session.

src/plugins/chatboxviews/index.js

@@ -43,7 +43,6 @@ converse.plugins.add('converse-chatboxviews', {
                           <converse-roster />
                       </div>`}
             `,
-            active: true,
         });
 
         // TODO: move to own plugin

src/plugins/rootview/api.js

@@ -1,45 +1,32 @@
-import { api } from '@converse/headless';
+import { _converse, api } from '@converse/headless';
 
 const apps = new Map();
 
-function setCurrentAppInactive() {
-    const currentApp = apps_api.apps.getActive();
-    if (currentApp) {
-        apps.set(currentApp.name, {
-            ...currentApp,
-            active: false,
-        });
-    }
-}
-
 const apps_api = {
     apps: {
         /**
          * @param {import('./types').App} app
          */
         add(app) {
             if (!app.name) throw new Error("Can't add app without a name");
-            if (app.active) setCurrentAppInactive();
             apps.set(app.name, app);
         },
 
         /**
          * @returns {import('./types').App}
          */
         getActive() {
-            return Array.from(apps.values()).find((app) => app.active);
+            const name = _converse.state.session.get('active_app') ?? 'chat';
+            const apps_array = Array.from(apps.values());
+            return apps_array.find((app) => app.name === name) || apps_array[0];
         },
 
         /**
          * @param {string} name
          */
         switch(name) {
             if (apps.has(name)) {
-                setCurrentAppInactive();
-                apps.set(name, {
-                    ...apps.get(name),
-                    active: true,
-                });
+                _converse.state.session.save('active_app', name);
                 const app = apps.get(name);
                 /**
                  * Triggered when switching to a different app

src/plugins/rootview/app-container.js

@@ -1,16 +1,18 @@
-import { api } from '@converse/headless';
+import { _converse, api } from '@converse/headless';
 import { CustomElement } from 'shared/components/element.js';
 import tplAppContainer from './templates/app-container.js';
 import './app-switcher.js';
 
 export default class AppContainer extends CustomElement {
     initialize() {
         api.listen.on('appSwitch', () => this.requestUpdate());
+        this.listenTo(_converse.state.connfeedback, 'change:connection_status', () => this.requestUpdate());
     }
 
     render() {
         return tplAppContainer();
     }
 }
 
+
 api.elements.define('converse-app-container', AppContainer);

src/plugins/rootview/app-switcher.js

@@ -5,17 +5,6 @@ import tplAppSwitcher from './templates/app-switcher.js';
 import './styles/app-switcher.scss';
 
 export default class AppSwitcher extends CustomElement {
-    static get properties() {
-        return {
-            _activeApp: { type: String },
-        };
-    }
-
-    constructor() {
-        super();
-        this._activeApp = 'chat';
-    }
-
     initialize() {
         api.listen.on('appSwitch', () => this.requestUpdate());
     }

src/plugins/rootview/root.js

@@ -1,8 +1,8 @@
 import { i18n } from 'i18n';
 import { _converse, api } from '@converse/headless';
-import tplRoot from "./templates/root.js";
 import { CustomElement } from 'shared/components/element.js';
 import { getTheme } from './utils.js';
+import tplRoot from "./templates/root.js";
 
 import './styles/root.scss';
 

src/plugins/rootview/templates/app-container.js

@@ -3,7 +3,7 @@ import { api } from '@converse/headless';
 
 export default () => {
     return html`
-        <converse-app-switcher></converse-app-switcher>
+        ${api.connection.get().connected ? html`<converse-app-switcher></converse-app-switcher>` : ''}
         ${api.apps.getActive().render()}
     `;
 };

src/plugins/rootview/types.ts

@@ -4,5 +4,4 @@ export type App = {
     name: string;
     render: () => TemplateResult;
     renderControlbox?: () => TemplateResult;
-    active: boolean;
 };