work on navbar

web/static/src/ts/widgets/Discuss.ts

@@ -18,7 +18,7 @@ interface State {
 export class Discuss extends Widget<{}, State> {
   template = "web.discuss";
   widgets = { Clock, Counter, ColorWidget };
-  state = { validcounter: true, color: "red" };
+  state: State = { validcounter: true, color: "red" };
 
   resetCounter(ev: MouseEvent) {
     if (this.refs.counter instanceof Counter) {

web/static/src/ts/widgets/Navbar.ts

@@ -1,6 +1,5 @@
-import { Menu } from "../env";
 import { MenuItem } from "../misc/menu_helpers";
-import { Widget } from "./widget";
+import { PureWidget } from "./widget";
 
 //------------------------------------------------------------------------------
 // Types
@@ -15,16 +14,21 @@ export interface Props {
 // Navbar
 //------------------------------------------------------------------------------
 
-export class Navbar extends Widget<Props, {}> {
+export class Navbar extends PureWidget<Props, {}> {
   template = "web.navbar";
 
-  getUrl(menu: Menu) {
-    const action_id = String(menu.actionID);
-    return this.env.router.formatURL("", { action_id });
+  getUrl(menu: MenuItem) {
+    const action_id = String(menu.actionId);
+    const menu_id = String(menu.menuId);
+    return this.env.router.formatURL("", { action_id, menu_id });
   }
 
   toggleHome(ev: MouseEvent) {
     ev.preventDefault();
     this.trigger("toggle_home_menu");
   }
+
+  openMenu(menu: MenuItem) {
+    this.trigger("open_menu", menu);
+  }
 }

web/static/src/ts/widgets/home_menu.ts

@@ -21,8 +21,8 @@ export class HomeMenu extends Widget<Props, {}> {
     return info.roots.map(root => info.menuMap[root]!);
   }
 
-  openApp(app: MenuItem, event: MouseEvent) {
+  openMenu(app: MenuItem, event: MouseEvent) {
     event.preventDefault();
-    this.trigger("app_opened", app);
+    this.trigger("open_menu", app);
   }
 }

web/static/src/ts/widgets/notification.ts

@@ -4,7 +4,9 @@ import { Widget } from "./widget";
 export class Notification extends Widget<INotification, {}> {
   template = "web.notification";
 
-  close() {
+  close(ev: MouseEvent) {
+    // we do not want the url to change
+    ev.preventDefault();
     this.env.notifications.close(this.props.id);
   }
 }

web/static/src/ts/widgets/root.ts

@@ -89,7 +89,8 @@ export class Root extends Widget<Props, State> {
     this.updateState({ inHome: !this.state.inHome });
   }
 
-  openApp(app: MenuItem) {
-    this.updateAppState(app, app.actionId);
+  openMenu(menu: MenuItem) {
+    const app = this.props.menuInfo.menuMap[menu.menuId]!;
+    this.updateAppState(app, menu.actionId);
   }
 }

web/static/src/ts/widgets/widget.ts

@@ -2,3 +2,23 @@ import { BaseWidget } from "../core/base_widget";
 import { Env } from "../env";
 
 export class Widget<Props, State> extends BaseWidget<Env, Props, State> {}
+
+// TODO: move this to PureComponent in core
+export class PureWidget<Props, State> extends Widget<Props, State> {
+  shouldUpdate(nextProps: Props): boolean {
+    for (let k in nextProps) {
+      if (nextProps[k] !== this.props[k]) {
+        return true;
+      }
+    }
+    return false;
+  }
+  async updateState(nextState: Partial<State>) {
+    for (let k in nextState) {
+      if (nextState[k] !== this.state[k]) {
+        return;
+      }
+    }
+    return super.updateState(nextState);
+  }
+}