wip

Author: DavideIadeluca

…src/forum/components/NotificationList.js …rc/forum/components/NotificationList.tsxframework/core/js/src/forum/components/NotificationList.js renamed to framework/core/js/src/forum/components/NotificationList.tsx framework/core/js/src/forum/components/NotificationList.js renamed to framework/core/js/src/forum/components/NotificationList.tsx

@@ -1,5 +1,5 @@
-import app from '../../forum/app';
-import Component from '../../common/Component';
+import app from '../app';
+import Component, { ComponentAttrs } from '../../common/Component';
 import listItems from '../../common/helpers/listItems';
 import Button from '../../common/components/Button';
 import Link from '../../common/components/Link';
@@ -9,12 +9,26 @@ import Tooltip from '../../common/components/Tooltip';
 import HeaderList from './HeaderList';
 import HeaderListGroup from './HeaderListGroup';
 import NotificationType from './NotificationType';
+import extractText from '../../common/utils/extractText';
+
+import type NotificationListState from '../states/NotificationListState';
+import type Notification from '../../common/models/Notification';
+import type Mithril from 'mithril';
+
+export type NotificationGroup = {
+  discussion: Discussion | null;
+  notifications: Notification[];
+};
+
+export interface INotificationListAttrs extends ComponentAttrs {
+  state: NotificationListState;
+}
 
 /**
  * The `NotificationList` component displays a list of the logged-in user's
  * notifications, grouped by discussion.
  */
-export default class NotificationList extends Component {
+export default class NotificationList<CustomAttrs extends INotificationListAttrs = INotificationListAttrs> extends Component<CustomAttrs> {
   view() {
     const state = this.attrs.state;
 
@@ -34,7 +48,7 @@ export default class NotificationList extends Component {
   }
 
   controlItems() {
-    const items = new ItemList();
+    const items = new ItemList<Mithril.Children>();
     const state = this.attrs.state;
 
     items.add(
@@ -58,7 +72,7 @@ export default class NotificationList extends Component {
           icon="fas fa-trash-alt"
           title={app.translator.trans('core.forum.notifications.delete_all_tooltip')}
           onclick={() => {
-            if (confirm(app.translator.trans('core.forum.notifications.delete_all_confirm'))) {
+            if (confirm(extractText(app.translator.trans('core.forum.notifications.delete_all_confirm')))) {
               state.deleteAll.call(state);
             }
           }}
@@ -70,13 +84,13 @@ export default class NotificationList extends Component {
     return items;
   }
 
-  content(state) {
+  content(state: NotificationListState) {
     if (!state.isLoading() && state.hasItems()) {
       return state.getPages().map((page) => {
-        const groups = [];
+        const groups: NotificationGroup[] = [];
         const discussions = {};
 
-        page.items.forEach((notification) => {
+        page.items.forEach((notification: Notification) => {
           const subject = notification.subject();
 
           if (typeof subject === 'undefined') return;
@@ -101,7 +115,6 @@ export default class NotificationList extends Component {
 
         return groups.map((group) => {
           const badges = group.discussion && group.discussion.badges().toArray();
-
           return (
             <HeaderListGroup
               label={
@@ -115,7 +128,9 @@ export default class NotificationList extends Component {
                 )
               }
             >
-              {group.notifications.map((notification) => <NotificationType notification={notification} />).filter((component) => !!component)}
+              {group.notifications
+                .map((notification: Notification) => <NotificationType notification={notification} />)
+                .filter((component: Mithril.Children) => !!component)}
             </HeaderListGroup>
           );
         });