use urls instead of callbacks to navigate in session picker

src/domain/SessionPickerViewModel.js

@@ -15,15 +15,14 @@ limitations under the License.
 */
 
 import {SortedArray} from "../observable/index.js";
-import {SessionLoadViewModel} from "./SessionLoadViewModel.js";
 import {ViewModel} from "./ViewModel.js";
 import {avatarInitials, getIdentifierColorNumber} from "./avatar.js";
 
 class SessionItemViewModel extends ViewModel {
-    constructor(sessionInfo, pickerVM) {
-        super({});
+    constructor(options, pickerVM) {
+        super(options);
         this._pickerVM = pickerVM;
-        this._sessionInfo = sessionInfo;
+        this._sessionInfo = options.sessionInfo;
         this._isDeleting = false;
         this._isClearing = false;
         this._error = null;
@@ -76,6 +75,10 @@ class SessionItemViewModel extends ViewModel {
         return this._sessionInfo.id;
     }
 
+    get openUrl() {
+        return this.urlRouter.urlForSegment("session", this.id);
+    }
+
     get label() {
         const {userId, comment} =  this._sessionInfo;
         if (comment) {
@@ -127,11 +130,10 @@ class SessionItemViewModel extends ViewModel {
 export class SessionPickerViewModel extends ViewModel {
     constructor(options) {
         super(options);
-        const {storageFactory, sessionInfoStorage, sessionCallback, createSessionContainer} = options;
+        const {storageFactory, sessionInfoStorage, sessionInfoCallback} = options;
         this._storageFactory = storageFactory;
         this._sessionInfoStorage = sessionInfoStorage;
-        this._sessionCallback = sessionCallback;
-        this._createSessionContainer = createSessionContainer;
+        this._sessionInfoCallback = sessionInfoCallback;
         this._sessions = new SortedArray((s1, s2) => s1.id.localeCompare(s2.id));
         this._loadViewModel = null;
         this._error = null;
@@ -140,7 +142,9 @@ export class SessionPickerViewModel extends ViewModel {
     // this loads all the sessions
     async load() {
         const sessions = await this._sessionInfoStorage.getAll();
-        this._sessions.setManyUnsorted(sessions.map(s => new SessionItemViewModel(s, this)));
+        this._sessions.setManyUnsorted(sessions.map(s => {
+            return new SessionItemViewModel(this.childOptions({sessionInfo: s}), this);
+        }));
     }
 
     // for the loading of 1 picked session
@@ -148,34 +152,6 @@ export class SessionPickerViewModel extends ViewModel {
         return this._loadViewModel;
     }
 
-    async pick(id) {
-        if (this._loadViewModel) {
-            return;
-        }
-        const sessionVM = this._sessions.array.find(s => s.id === id);
-        if (sessionVM) {
-            this._loadViewModel = new SessionLoadViewModel({
-                createAndStartSessionContainer: () => {
-                    const sessionContainer = this._createSessionContainer();
-                    sessionContainer.startWithExistingSession(sessionVM.id);
-                    return sessionContainer;
-                },
-                sessionCallback: sessionContainer => {
-                    if (sessionContainer) {
-                        // make parent view model move away
-                        this._sessionCallback(sessionContainer);
-                    } else {
-                        // show list of session again
-                        this._loadViewModel = null;
-                        this.emitChange("loadViewModel");
-                    }
-                }
-            });
-            this._loadViewModel.start();
-            this.emitChange("loadViewModel");
-        }
-    }
-
     async _exportData(id) {
         const sessionInfo = await this._sessionInfoStorage.get(id);
         const stores = await this._storageFactory.export(id);
@@ -213,9 +189,7 @@ export class SessionPickerViewModel extends ViewModel {
         return this._sessions;
     }
 
-    cancel() {
-        if (!this._loadViewModel) {
-            this._sessionCallback();
-        }
+    get cancelUrl() {
+        return this.urlRouter.urlForSegment("login");
     }
 }

src/ui/web/login/SessionPickerView.js

@@ -79,7 +79,7 @@ class SessionPickerItemView extends TemplateView {
         }));
         const errorMessage = t.if(vm => vm.error, t.createTemplate(t => t.p({className: "error"}, vm => vm.error)));
         return t.li([
-            t.div({className: "session-info"}, [
+            t.a({className: "session-info", href: vm.openUrl}, [
                 t.div({className: `avatar usercolor${vm.avatarColorNumber}`}, vm => vm.avatarInitials),
                 t.div({className: "user-id"}, vm => vm.label),
             ]),
@@ -98,11 +98,6 @@ export class SessionPickerView extends TemplateView {
     render(t, vm) {
         const sessionList = new ListView({
             list: vm.sessions,
-            onItemClick: (item, event) => {
-                if (event.target.closest(".session-info")) {
-                    vm.pick(item.value.id);
-                }
-            },
             parentProvidesUpdates: false,
         }, sessionInfo => {
             return new SessionPickerItemView(sessionInfo);
@@ -118,9 +113,9 @@ export class SessionPickerView extends TemplateView {
                         className: "styled secondary",
                         onClick: async () => vm.import(await selectFileAsText("application/json"))
                     }, vm.i18n`Import a session`),
-                    t.button({
-                        className: "styled primary",
-                        onClick: () => vm.cancel()
+                    t.a({
+                        className: "button styled primary",
+                        href: vm.cancelUrl
                     }, vm.i18n`Sign In`)
                 ]),
                 t.if(vm => vm.loadViewModel, vm => new SessionLoadStatusView(vm.loadViewModel)),