[2.x] refactor(core): progress on TS conversion

framework/core/js/src/forum/components/HeaderSecondary.js → framework/core/js/src/forum/components/HeaderSecondary.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 Button from '../../common/components/Button';
 import SessionDropdown from './SessionDropdown';
 import SelectDropdown from '../../common/components/SelectDropdown';
@@ -8,23 +8,22 @@ import ItemList from '../../common/utils/ItemList';
 import listItems from '../../common/helpers/listItems';
 import GlobalSearch from './GlobalSearch';
 
+import type Mithril from 'mithril';
+
+export interface IHeaderSecondaryAttrs extends ComponentAttrs {}
+
 /**
  * The `HeaderSecondary` component displays secondary header controls, such as
  * the search box and the user menu. On the default skin, these are shown on the
  * right side of the header.
  */
-export default class HeaderSecondary extends Component {
+export default class HeaderSecondary<CustomAttrs extends IHeaderSecondaryAttrs = IHeaderSecondaryAttrs> extends Component<CustomAttrs> {
   view() {
     return <ul className="Header-controls">{listItems(this.items().toArray())}</ul>;
   }
 
-  /**
-   * Build an item list for the controls.
-   *
-   * @return {ItemList}
-   */
   items() {
-    const items = new ItemList();
+    const items = new ItemList<Mithril.Children>();
 
     items.add('search', <GlobalSearch state={app.search.state} />, 30);
 

framework/core/js/src/forum/components/PostEdited.js → framework/core/js/src/forum/components/PostEdited.tsx

@@ -1,21 +1,19 @@
-import app from '../../forum/app';
-import Component from '../../common/Component';
+import app from '../app';
+import Component, { ComponentAttrs } from '../../common/Component';
 import humanTime from '../../common/utils/humanTime';
 import Tooltip from '../../common/components/Tooltip';
 
+import type Post from '../../common/models/Post';
+
+export interface IPostEditedAttrs extends ComponentAttrs {
+  post: Post;
+}
+
 /**
  * The `PostEdited` component displays information about when and by whom a post
  * was edited.
- *
- * ### Attrs
- *
- * - `post`
  */
-export default class PostEdited extends Component {
-  oninit(vnode) {
-    super.oninit(vnode);
-  }
-
+export default class PostEdited<CustomAttrs extends IPostEditedAttrs = IPostEditedAttrs> extends Component<CustomAttrs> {
   view() {
     const post = this.attrs.post;
     const editedUser = post.editedUser();
@@ -27,8 +25,4 @@ export default class PostEdited extends Component {
       </Tooltip>
     );
   }
-
-  oncreate(vnode) {
-    super.oncreate(vnode);
-  }
 }

framework/core/js/src/forum/components/TerminalPost.tsx

@@ -0,0 +1,36 @@
+import app from '../app';
+import Component, { ComponentAttrs } from '../../common/Component';
+import humanTime from '../../common/helpers/humanTime';
+
+import Icon from '../../common/components/Icon';
+
+import type Discussion from '../../common/models/Discussion';
+
+export interface ITerminalPostAttrs extends ComponentAttrs {
+  discussion: Discussion;
+  lastPost?: boolean;
+}
+
+/**
+ * Displays information about a the first or last post in a discussion.
+ */
+export default class TerminalPost<CustomAttrs extends ITerminalPostAttrs = ITerminalPostAttrs> extends Component<CustomAttrs> {
+  view() {
+    const discussion = this.attrs.discussion;
+    const lastPost = this.attrs.lastPost && discussion.replyCount();
+
+    const user = discussion[lastPost ? 'lastPostedUser' : 'user']();
+    const time = discussion[lastPost ? 'lastPostedAt' : 'createdAt']();
+
+    return (
+      <span>
+        {!!lastPost && <Icon name={'fas fa-reply'} />}{' '}
+        {time &&
+          app.translator.trans('core.forum.discussion_list.' + (lastPost ? 'replied' : 'started') + '_text', {
+            user,
+            ago: humanTime(time),
+          })}
+      </span>
+    );
+  }
+}

framework/core/js/src/forum/components/UserCard.js → framework/core/js/src/forum/components/UserCard.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 humanTime from '../../common/utils/humanTime';
 import ItemList from '../../common/utils/ItemList';
 import UserControls from '../utils/UserControls';
@@ -12,19 +12,22 @@ import classList from '../../common/utils/classList';
 import Icon from '../../common/components/Icon';
 import Avatar from '../../common/components/Avatar';
 
+import type Mithril from 'mithril';
+import type User from '../../common/models/User';
+
+export interface IUserCardAttrs extends ComponentAttrs {
+  userd: User;
+  className?: string;
+  editable?: boolean;
+  controlsButtonClassName?: string;
+}
+
 /**
  * The `UserCard` component displays a user's profile card. This is used both on
  * the `UserPage` (in the hero) and in discussions, shown when hovering over a
  * post author.
- *
- * ### Attrs
- *
- * - `user`
- * - `className`
- * - `editable`
- * - `controlsButtonClassName`
  */
-export default class UserCard extends Component {
+export default class UserCard<CustomAttrs extends IUserCardAttrs = IUserCardAttrs> extends Component<CustomAttrs> {
   view() {
     const user = this.attrs.user;
     const color = user.color();
@@ -42,7 +45,7 @@ export default class UserCard extends Component {
   }
 
   profileItems() {
-    const items = new ItemList();
+    const items = new ItemList<Mithril.Children>();
 
     items.add('avatar', this.avatar(), 100);
     items.add('content', this.content(), 10);
@@ -69,7 +72,7 @@ export default class UserCard extends Component {
   }
 
   contentItems() {
-    const items = new ItemList();
+    const items = new ItemList<Mithril.Children>();
 
     const user = this.attrs.user;
     const badges = user.badges().toArray();
@@ -87,11 +90,10 @@ export default class UserCard extends Component {
 
   /**
    * Build an item list of tidbits of info to show on this user's profile.
-   *
-   * @return {ItemList<import('mithril').Children>}
    */
   infoItems() {
-    const items = new ItemList();
+    const items = new ItemList<Mithril.Children>();
+
     const user = this.attrs.user;
     const lastSeenAt = user.lastSeenAt();
 
@@ -115,7 +117,7 @@ export default class UserCard extends Component {
   }
 
   controlsItems() {
-    const items = new ItemList();
+    const items = new ItemList<Mithril.Children>();
 
     const user = this.attrs.user;
     const controls = UserControls.controls(user, this).toArray();