From 84d977f81911ce55edad047b850a3bb37d38d4e7 Mon Sep 17 00:00:00 2001
From: David Sevilla Martin <me@datitisev.me>
Date: Wed, 15 Apr 2020 17:47:32 -0400
Subject: [PATCH] forum: add notifications page (used in mobile)

---
 .../components/NotificationsDropdown.tsx      |  2 +-
 js/src/forum/components/NotificationsPage.tsx | 30 +++++++++++++++++++
 js/src/forum/routes.ts                        |  2 ++
 3 files changed, 33 insertions(+), 1 deletion(-)
 create mode 100644 js/src/forum/components/NotificationsPage.tsx

diff --git a/js/src/forum/components/NotificationsDropdown.tsx b/js/src/forum/components/NotificationsDropdown.tsx
index 371a1afad..66ebe152e 100644
--- a/js/src/forum/components/NotificationsDropdown.tsx
+++ b/js/src/forum/components/NotificationsDropdown.tsx
@@ -31,7 +31,7 @@ export default class NotificationsDropdown extends Dropdown {
         const unread = this.getUnreadCount();
 
         return [
-            icon(this.props.icon, { className: 'Button-icon' }),
+            icon(this.props.icon!, { className: 'Button-icon' }),
             unread ? <span className="NotificationsDropdown-unread">{unread}</span> : '',
             <span className="Button-label">{this.props.label}</span>,
         ];
diff --git a/js/src/forum/components/NotificationsPage.tsx b/js/src/forum/components/NotificationsPage.tsx
new file mode 100644
index 000000000..f61923794
--- /dev/null
+++ b/js/src/forum/components/NotificationsPage.tsx
@@ -0,0 +1,30 @@
+import app from '../app';
+
+import Page from './Page';
+import NotificationList from './NotificationList';
+
+/**
+ * The `NotificationsPage` component shows the notifications list. It is only
+ * used on mobile devices where the notifications dropdown is within the drawer.
+ */
+export default class NotificationsPage extends Page {
+    list = (<NotificationList />);
+
+    oninit(vnode) {
+        super.oninit(vnode);
+
+        app.history.push('notifications');
+
+        this.bodyClass = 'App--notifications';
+    }
+
+    oncreate(vnode) {
+        super.oncreate(vnode);
+
+        m.redraw();
+    }
+
+    view() {
+        return <div className="NotificationsPage">{this.list}</div>;
+    }
+}
diff --git a/js/src/forum/routes.ts b/js/src/forum/routes.ts
index 51bdd8a0b..4f22ba3ec 100644
--- a/js/src/forum/routes.ts
+++ b/js/src/forum/routes.ts
@@ -3,6 +3,7 @@ import DiscussionPage from './components/DiscussionPage';
 import PostsUserPage from './components/PostsUserPage';
 import DiscussionsUserPage from './components/DiscussionsUserPage';
 import SettingsPage from './components/SettingsPage';
+import NotificationsPage from './components/NotificationsPage';
 
 import Discussion from '../common/models/Discussion';
 import Post from '../common/models/Post';
@@ -20,6 +21,7 @@ export default (app) => {
         'user.discussions': { path: '/u/:username/discussions', component: DiscussionsUserPage },
 
         settings: { path: '/settings', component: SettingsPage },
+        notifications: { path: '/notifications', component: NotificationsPage },
 
         'index.filter': { path: '/:filter', component: IndexPage },
     };