forum: resolve some typings issues & move Notifications to not use Component#render

js/src/common/Session.ts

@@ -8,7 +8,7 @@ export default class Session {
     /**
      * The current authenticated user.
      */
-    user?: User;
+    user: User;
 
     /**
      * The CSRF token.

js/src/common/components/Dropdown.tsx

@@ -31,7 +31,7 @@ export interface DropdownProps extends ComponentProps {
  * The children will be displayed as a list inside of the dropdown menu.
  */
 export default class Dropdown<T extends DropdownProps = DropdownProps> extends Component<T> {
-    showing: boolean;
+    showing: boolean = false;
 
     static initProps(props: DropdownProps) {
         props.className = props.className || '';

js/src/forum/Forum.ts

@@ -42,7 +42,7 @@ export default class Forum extends Application {
     history: History = new History();
 
     cache: {
-        notifications?: Notification[];
+        notifications?: Notification[][];
         discussionList?: DiscussionList;
         [key: string]: any;
     } = {};

js/src/forum/components/HeaderSecondary.tsx

@@ -1,3 +1,5 @@
+import {Vnode} from 'mithril';
+
 import Component from '../../common/Component';
 import Button from '../../common/components/Button';
 import LogInModal from './LogInModal';
@@ -29,9 +31,11 @@ export default class HeaderSecondary extends Component {
         items.add('search', Search.component(), 30);
 
         if (app.forum.attribute('showLanguageSelector') && Object.keys(app.data.locales).length > 1) {
-            const locales = [];
+            const locales: Vnode<any, any>[] = [];
 
             for (const locale in app.data.locales) {
+                if (!app.data.locales.hasOwnProperty(locale)) continue;
+
                 locales.push(
                     Button.component({
                         active: app.data.locale === locale,
@@ -60,8 +64,8 @@ export default class HeaderSecondary extends Component {
         }
 
         if (app.session.user) {
-            items.add('notifications', NotificationsDropdown.component(), 10);
-            items.add('session', SessionDropdown.component(), 0);
+            items.add('notifications', <NotificationsDropdown />, 10);
+            items.add('session', <SessionDropdown />, 0);
         } else {
             if (app.forum.attribute('allowSignUp')) {
                 items.add(

js/src/forum/components/NotificationList.tsx

@@ -44,7 +44,7 @@ export default class NotificationList extends Component {
                 <div className="NotificationList-content">
                     {pages.length
                         ? pages.map(notifications => {
-                              const groups = [];
+                              const groups: { discussion: Discussion; notifications: Notification[] }[] = [];
                               const discussions = {};
 
                               notifications.forEach(notification => {
@@ -71,7 +71,7 @@ export default class NotificationList extends Component {
                               });
 
                               return groups.map(group => {
-                                  const badges = group.discussion && group.discussion.badges().toArray();
+                                  const badges = group.discussion?.badges().toArray();
 
                                   return (
                                       <div className="NotificationGroup">
@@ -129,6 +129,8 @@ export default class NotificationList extends Component {
         };
 
         $scrollParent.on('scroll', this.scrollHandler);
+
+        this.load();
     }
 
     onremove(vnode) {

js/src/forum/components/NotificationsDropdown.tsx

@@ -3,13 +3,13 @@ import icon from '../../common/helpers/icon';
 import NotificationList from './NotificationList';
 
 export default class NotificationsDropdown extends Dropdown {
-    list = new NotificationList();
+    list = (<NotificationList />);
 
     static initProps(props) {
         props.className = props.className || 'NotificationsDropdown';
         props.buttonClassName = props.buttonClassName || 'Button Button--flat';
         props.menuClassName = props.menuClassName || 'Dropdown-menu--right';
-        props.label = props.label || app.translator.trans('core.forum.notifications.tooltip');
+        props.label = props.label || app.translator.transText('core.forum.notifications.tooltip');
         props.icon = props.icon || 'fas fa-bell';
 
         super.initProps(props);
@@ -40,7 +40,7 @@ export default class NotificationsDropdown extends Dropdown {
     getMenu() {
         return (
             <div className={'Dropdown-menu ' + this.props.menuClassName} onclick={this.menuClick.bind(this)}>
-                {this.showing ? this.list.render() : ''}
+                {this.showing && this.list}
             </div>
         );
     }
@@ -48,8 +48,6 @@ export default class NotificationsDropdown extends Dropdown {
     onclick() {
         if (app.drawer.isOpen()) {
             this.goToRoute();
-        } else {
-            this.list.load();
         }
     }
 
@@ -65,7 +63,7 @@ export default class NotificationsDropdown extends Dropdown {
         return app.session.user.newNotificationCount();
     }
 
-    menuClick(e) {
+    menuClick(e: MouseEvent) {
         // Don't close the notifications dropdown if the user is opening a link in a
         // new tab or window.
         if (e.shiftKey || e.metaKey || e.ctrlKey || e.which === 2) e.stopPropagation();

js/webpack-flarum-shims.d.ts

@@ -5,13 +5,13 @@ import * as _dayjs from 'dayjs';
 import classNames from 'classnames';
 
 interface m extends Mithril.Static {
-    prop: Stream.Static;
+    prop: typeof Stream;
 }
 
 declare global {
     const m: m;
     const dayjs: typeof _dayjs;
-    const classNames: classNames;
+    const classNames: typeof classNames;
 }
 
 export as namespace Mithril;