Update for Flarum 1.0 and convert to typescript

composer.json

@@ -22,7 +22,7 @@
         "forum": "https://discuss.flarum.org/d/19532"
     },
     "require": {
-        "flarum/core": "^0.1.0-beta.16"
+        "flarum/core": "^1.0"
     },
     "extra": {
         "flarum-extension": {

js/package.json

@@ -1,13 +1,12 @@
 {
     "name": "@clarkwinkelmann/catch-the-fish",
-    "version": "0.0.0",
     "private": true,
     "dependencies": {
         "dayjs": "^1.9.4",
-        "flarum": "0.1.0-beta.16",
-        "flarum-webpack-config": "^0.1.0-beta.10",
-        "webpack": "^4.0.0",
-        "webpack-cli": "^3.0.7"
+        "flarum-tsconfig": "^1.0",
+        "flarum-webpack-config": "^1.0",
+        "webpack": "^4.0",
+        "webpack-cli": "^3.0"
     },
     "scripts": {
         "dev": "webpack --mode development --watch",

js/shims.d.ts

@@ -0,0 +1,30 @@
+import Mithril from 'mithril';
+import * as _dayjs from 'dayjs';
+
+declare global {
+    const m: Mithril.Static;
+    const dayjs: typeof _dayjs;
+}
+
+import Fish from './src/forum/models/Fish';
+import Round from './src/forum/models/Round';
+
+declare module 'flarum/common/models/User' {
+    export default interface User {
+        catchTheFishBasket(): Fish[] | false
+    }
+}
+
+declare module 'flarum/common/models/Forum' {
+    export default interface Forum {
+        catchTheFishActiveRounds(): Round[] | false
+
+        catchTheFishCanModerate(): boolean
+
+        catchTheFishCanSeeRankingsPage(): boolean
+
+        catchTheFishCanSeeProfileRankings(): boolean
+
+        catchTheFishAnimateFlip(): boolean
+    }
+}

js/src/admin/index.js → js/src/admin/index.ts

@@ -1,4 +1,4 @@
-import app from 'flarum/app';
+import app from 'flarum/admin/app';
 import settings from './settings';
 
 app.initializers.add('clarkwinkelmann-catch-the-fish', () => {

js/src/admin/settings.js → js/src/admin/settings.ts

@@ -1,20 +1,19 @@
-import app from 'flarum/app';
-import Switch from 'flarum/components/Switch';
-
-/* global m */
+import app from 'flarum/admin/app';
+import Switch from 'flarum/common/components/Switch';
+import ExtensionPage from 'flarum/admin/components/ExtensionPage';
 
 const settingsPrefix = 'catch-the-fish.';
 const translationPrefix = 'clarkwinkelmann-catch-the-fish.admin.settings.';
 
-export default function () {
+export default function (this: ExtensionPage) {
     return [
         m('.Form-group', [
             m('label', app.translator.trans(translationPrefix + 'discussion-age')),
             m('input.FormControl', {
                 type: 'number',
                 min: 1,
                 step: 1,
-                bidi: this.setting(settingsPrefix + 'discussionAgeDays', 14),
+                bidi: this.setting(settingsPrefix + 'discussionAgeDays', '14'),
             }),
         ]),
         m('.Form-group', [
@@ -23,7 +22,7 @@ export default function () {
                 type: 'number',
                 min: 1,
                 step: 1,
-                bidi: this.setting(settingsPrefix + 'postAgeDays', 14),
+                bidi: this.setting(settingsPrefix + 'postAgeDays', '14'),
             }),
         ]),
         m('.Form-group', [
@@ -32,7 +31,7 @@ export default function () {
                 type: 'number',
                 min: 1,
                 step: 1,
-                bidi: this.setting(settingsPrefix + 'userAgeDays', 14),
+                bidi: this.setting(settingsPrefix + 'userAgeDays', '14'),
             }),
         ]),
         m('.Form-group', [
@@ -41,21 +40,21 @@ export default function () {
                 type: 'number',
                 min: 1,
                 step: 1,
-                bidi: this.setting(settingsPrefix + 'autoPlacedAfterMinutes', 5),
+                bidi: this.setting(settingsPrefix + 'autoPlacedAfterMinutes', '5'),
             }),
         ]),
         m('.Form-group', [
             Switch.component({
                 state: this.setting(settingsPrefix + 'alertRound', '1')() === '1',
-                onchange: value => {
+                onchange: (value: string) => {
                     this.setting(settingsPrefix + 'alertRound')(value ? '1' : '0');
                 },
             }, app.translator.trans(translationPrefix + 'alert-round')),
         ]),
         m('.Form-group', [
             Switch.component({
                 state: this.setting(settingsPrefix + 'animateFlip', '1')() === '1',
-                onchange: value => {
+                onchange: (value: string) => {
                     this.setting(settingsPrefix + 'animateFlip')(value ? '1' : '0');
                 },
             }, app.translator.trans(translationPrefix + 'animate-flip')),

js/src/forum/addDropAreas.js → js/src/forum/addDropAreas.ts

@@ -1,22 +1,25 @@
 import {extend, override} from 'flarum/common/extend';
-import app from 'flarum/app';
+import app from 'flarum/forum/app';
+import ItemList from 'flarum/common/utils/ItemList';
 import CommentPost from 'flarum/forum/components/CommentPost';
 import UserCard from 'flarum/forum/components/UserCard';
 import DiscussionHero from 'flarum/forum/components/DiscussionHero';
 import DropArea from './components/DropArea';
 import MovingFish from './components/MovingFish';
 
-/* global m */
+function fishIdFromEvent(event: DragEvent): string | null {
+    if (!event.dataTransfer) {
+        return null;
+    }
 
-function fishIdFromEvent(event) {
     const data = event.dataTransfer.getData("text/plain");
 
     const match = /^fish:([0-9]+)$/.exec(data);
 
     return match ? match[1] : null;
 }
 
-function movingFishContent(dragover, model) {
+function movingFishContent(dragover: boolean, model) {
     const content = [];
 
     if (dragover) {
@@ -100,13 +103,13 @@ function addDropAttrs(attrs, modelProperty) {
     };
 }
 
-function addAreaToComponent(component, viewName, modelProperty) {
+function addAreaToComponent(component: any, viewName: string, modelProperty: string) {
     if (viewName === 'content') {
         override(component, viewName, function (content) {
             return content().concat(movingFishContent(this.fishDragOver, this.attrs[modelProperty]));
         });
     } else {
-        extend(component, viewName, function (items) {
+        extend(component, viewName, function (items: ItemList) {
             items.add('catchthefish-fish-and-drop', movingFishContent(this.fishDragOver, this.attrs[modelProperty]));
         });
     }

js/src/forum/addFishBasket.js → js/src/forum/addFishBasket.ts

@@ -1,11 +1,10 @@
 import {extend} from 'flarum/common/extend';
+import ItemList from 'flarum/common/utils/ItemList';
 import HeaderPrimary from 'flarum/forum/components/HeaderPrimary';
 import Basket from './components/Basket';
 
-/* global m */
-
 export default function () {
-    extend(HeaderPrimary.prototype, 'items', items => {
+    extend(HeaderPrimary.prototype, 'items', function (items: ItemList) {
         items.add('catchthefish-basket', m(Basket));
     });
 }

js/src/forum/addModels.js → js/src/forum/addModels.ts

@@ -1,11 +1,11 @@
-import app from 'flarum/app';
+import app from 'flarum/forum/app';
 import Model from 'flarum/common/Model';
 import Discussion from 'flarum/common/models/Discussion';
 import Post from 'flarum/common/models/Post';
 import User from 'flarum/common/models/User';
 import Forum from 'flarum/common/models/Forum';
 import Fish from './models/Fish';
-import Ranking from "./models/Ranking";
+import Ranking from './models/Ranking';
 import Round from './models/Round';
 
 export default function () {

js/src/forum/addNavLinks.js → js/src/forum/addNavLinks.ts

@@ -1,12 +1,13 @@
 import {extend} from 'flarum/common/extend';
-import app from 'flarum/app';
+import app from 'flarum/forum/app';
 import IndexPage from 'flarum/forum/components/IndexPage';
 import LinkButton from 'flarum/common/components/LinkButton';
+import ItemList from 'flarum/common/utils/ItemList';
 
 const translationPrefix = 'clarkwinkelmann-catch-the-fish.forum.nav.';
 
 export default function () {
-    extend(IndexPage.prototype, 'navItems', function (items) {
+    extend(IndexPage.prototype, 'navItems', function (items: ItemList) {
         if (app.forum.catchTheFishCanSeeRankingsPage()) {
             items.add('catchthefish-rankings', LinkButton.component({
                 icon: 'fas fa-fish',

js/src/forum/addPages.js → js/src/forum/addPages.ts

@@ -1,4 +1,4 @@
-import app from 'flarum/app';
+import app from 'flarum/forum/app';
 import Rankings from "./pages/Rankings";
 import RoundList from './pages/RoundList';
 import RoundSettings from './pages/RoundSettings';

js/src/forum/addRoundAlert.js → js/src/forum/addRoundAlert.ts

@@ -1,12 +1,10 @@
 import {override} from 'flarum/common/extend';
-import app from 'flarum/app';
+import app from 'flarum/forum/app';
 import IndexPage from 'flarum/forum/components/IndexPage';
 import RoundAlert from './components/RoundAlert';
 
-/* global m */
-
 export default function () {
-    override(IndexPage.prototype, 'hero', function (original) {
+    override(IndexPage.prototype, 'hero', function (original: any) {
         const existing = original();
 
         const rounds = app.forum.catchTheFishActiveRounds();

js/src/forum/components/Basket.js → js/src/forum/components/Basket.ts

@@ -1,17 +1,17 @@
-import app from 'flarum/app';
+import {ClassComponent} from 'mithril';
+import app from 'flarum/forum/app';
+import User from 'flarum/common/models/User';
 import FishImage from './FishImage';
 
-/* global m, dayjs */
-
 const translationPrefix = 'clarkwinkelmann-catch-the-fish.forum.basket.';
 
-export default class Basket {
+export default class Basket implements ClassComponent {
     view() {
         if (!app.session.user) {
             return m('div');
         }
 
-        const basket = app.session.user.catchTheFishBasket();
+        const basket = (app.session.user as User).catchTheFishBasket();
 
         if (!basket) {
             return m('div');
@@ -29,7 +29,11 @@ export default class Basket {
             fishesThatCanBePlaced.map(fish => m('.catchthefish-basket-entry', [
                 m('.catchthefish-basket-fish', {
                     draggable: true,
-                    ondragstart(event) {
+                    ondragstart(event: DragEvent) {
+                        if (!event.dataTransfer) {
+                            return;
+                        }
+
                         event.dataTransfer.setData('text/plain', 'fish:' + fish.id());
                     },
                 }, m(FishImage, {

js/src/forum/components/DropArea.js → js/src/forum/components/DropArea.ts

@@ -1,8 +1,7 @@
-import app from 'flarum/app';
+import {ClassComponent} from 'mithril';
+import app from 'flarum/forum/app';
 
-/* global m */
-
-export default class DropArea {
+export default class DropArea implements ClassComponent {
     view() {
         return m('.catchthefish-drop-area', app.translator.trans('clarkwinkelmann-catch-the-fish.forum.drop-area.message'));
     }

js/src/forum/components/EditFish.js → js/src/forum/components/EditFish.ts

@@ -1,30 +1,41 @@
-import app from 'flarum/app';
+import {ClassComponent, Vnode} from 'mithril';
+import app from 'flarum/forum/app';
 import Button from 'flarum/common/components/Button';
 import extractText from 'flarum/common/utils/extractText';
-
-/* global m */
+import Fish from '../models/Fish';
+import Round from '../models/Round';
 
 const translationPrefix = 'clarkwinkelmann-catch-the-fish.forum.edit-fish.';
 
-export default class EditFish {
-    oninit(vnode) {
-        this.fish = vnode.attrs.fish;
-        this.dirty = false;
-        this.processing = false;
+interface EditFishAttrs {
+    fish?: Fish
+    round: Round
+    onsave?: () => void
+    ondelete?: () => void
+}
+
+export default class EditFish implements ClassComponent<EditFishAttrs> {
+    fish!: Fish
+    dirty: boolean = false
+    processing: boolean = false
 
-        if (typeof this.fish === 'undefined') {
-            this.fish = app.store.createRecord('catchthefish-fishes', {
+    oninit(vnode: Vnode<EditFishAttrs, this>) {
+        let {fish} = vnode.attrs;
+        if (typeof fish === 'undefined') {
+            fish = app.store.createRecord('catchthefish-fishes', {
                 attributes: {
                     round_id: vnode.attrs.round.id(),
                     name: '',
                 },
-            });
+            }) as Fish;
         }
+
+        this.fish = fish;
     }
 
-    view(vnode) {
+    view(vnode: Vnode<EditFishAttrs, this>) {
         return m('form', {
-            onsubmit: event => {
+            onsubmit: (event: Event) => {
                 event.preventDefault();
                 this.saveRecord(vnode);
             },
@@ -33,9 +44,9 @@ export default class EditFish {
                 m('label', app.translator.trans(translationPrefix + 'name')),
                 m('input.FormControl', {
                     value: this.fish.name(),
-                    oninput: event => {
+                    oninput: (event: Event) => {
                         this.fish.pushAttributes({
-                            name: event.target.value,
+                            name: (event.target as HTMLInputElement).value,
                         });
 
                         this.dirty = true;
@@ -70,7 +81,7 @@ export default class EditFish {
         return this.dirty;
     }
 
-    saveRecord(vnode) {
+    saveRecord(vnode: Vnode<EditFishAttrs, this>) {
         this.processing = true;
 
         this.fish.save(this.fish.data.attributes).then(() => {
@@ -88,7 +99,7 @@ export default class EditFish {
         });
     }
 
-    deleteRecord(vnode) {
+    deleteRecord(vnode: Vnode<EditFishAttrs, this>) {
         if (!confirm(extractText(app.translator.trans(translationPrefix + 'delete-confirmation', {
             name: this.fish.name(),
         })))) {