Use Frontend Extenders, Switch to yarn & Basic TS Refactor (#124)

* chore: switch to yarn

* refactor: use frontend extenders

* refactor: convert basic modules to TS

* chore: remove unused import

* refactor: convert existing Model to TS

* chore: typings

* chore: add shims

.github/workflows/frontend.yml

@@ -12,7 +12,7 @@ jobs:
 
       frontend_directory: ./js
       backend_directory: .
-      js_package_manager: npm
+      js_package_manager: yarn
       main_git_branch: master
 
     secrets:

js/src/@types/shims.d.ts

@@ -0,0 +1,32 @@
+import Rank from '../common/models/Rank';
+
+declare module 'flarum/common/models/Discussion' {
+  export default interface Discussion {
+    votes(): number;
+    hasUpvoted(): boolean;
+    hasDownvoted(): boolean;
+    canVote(): boolean;
+    seeVotes(): boolean;
+  }
+}
+
+declare module 'flarum/common/models/Post' {
+  export default interface Post {
+    upvotes(): unknown;
+    downvotes(): unknown;
+    votes(): number;
+    canVote(): boolean;
+    canSeeVotes(): boolean;
+    hasUpvoted(): boolean;
+    hasDownvoted(): boolean;
+    seeVoters(): boolean;
+  }
+}
+
+declare module 'flarum/common/models/User' {
+  export default interface User {
+    points(): number;
+    ranks(): Rank[];
+    canHaveVotingNotifications(): boolean;
+  }
+}

js/src/admin/extend.ts

@@ -0,0 +1,3 @@
+import { default as commonExtend } from '../common/extend';
+
+export default [...commonExtend];

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

@@ -1,10 +1,9 @@
 import app from 'flarum/admin/app';
 import SettingsPage from './components/SettingsPage';
-import Rank from '../common/models/Rank';
 
-app.initializers.add('fof-gamification', (app) => {
-  app.store.models.ranks = Rank;
+export { default as extend } from './extend';
 
+app.initializers.add('fof-gamification', (app) => {
   app.extensionData
     .for('fof-gamification')
     .registerPermission(

js/src/common/extend.ts

@@ -0,0 +1,7 @@
+import Extend from 'flarum/common/extenders';
+import Rank from './models/Rank';
+
+export default [
+  new Extend.Store() //
+    .add('ranks', Rank),
+];

js/src/common/models/Rank.ts

@@ -0,0 +1,15 @@
+import Model from 'flarum/common/Model';
+
+export default class Rank extends Model {
+  points() {
+    return Model.attribute<number>('points').call(this);
+  }
+
+  name() {
+    return Model.attribute<string>('name').call(this);
+  }
+
+  color() {
+    return Model.attribute<string>('color').call(this);
+  }
+}

js/src/forum/extend.ts

@@ -0,0 +1,38 @@
+import Extend from 'flarum/common/extenders';
+import { default as commonExtend } from '../common/extend';
+
+import RankingsPage from './components/RankingsPage';
+import Discussion from 'flarum/common/models/Discussion';
+import Post from 'flarum/common/models/Post';
+import User from 'flarum/common/models/User';
+
+import Rank from '../common/models/Rank';
+
+export default [
+  ...commonExtend,
+
+  new Extend.Routes() //
+    .add('rankings', '/rankings', RankingsPage),
+
+  new Extend.Model(Discussion) //
+    .attribute<number>('votes')
+    .attribute<boolean>('hasUpvoted')
+    .attribute<boolean>('hasDownvoted')
+    .attribute<boolean>('canVote')
+    .attribute<boolean>('seeVotes'),
+
+  new Extend.Model(Post) //
+    .hasMany('upvotes')
+    .hasMany('downvotes')
+    .attribute<number>('votes')
+    .attribute<boolean>('canVote')
+    .attribute<boolean>('canSeeVotes')
+    .attribute<boolean>('hasUpvoted')
+    .attribute<boolean>('hasDownvoted')
+    .attribute<boolean>('seeVoters'),
+
+  new Extend.Model(User) //
+    .attribute<number>('points')
+    .hasMany<Rank>('ranks')
+    .attribute<boolean>('canHaveVotingNotifications'),
+];

js/src/forum/index.ts

@@ -0,0 +1,40 @@
+import app from 'flarum/forum/app';
+
+import addHotnessSort from './addHotnessSort';
+import addVoteButtons from './addVoteButtons';
+import addUpvotesToDiscussion from './addUpvotesToDiscussion';
+import addUserInfo from './addUserInfo';
+import addPusher from './addPusher';
+import addAlternateLayout from './addAlternateLayout';
+
+import setting from './helpers/setting';
+import addVotesSort from './addVotesSort';
+import useAlternatePostVoteLayout from './useAlternatePostVoteLayout';
+import addNotifications from './addNotifications';
+import addVotersToDiscussionPageSideBar from './addVotersToDiscussionPageSideBar';
+import addUpvoteTabToUserProfile from './addUpvoteTabToUserProfile';
+
+export { default as extend } from './extend';
+
+app.initializers.add('fof-gamification', () => {
+  addVoteButtons();
+  addHotnessSort();
+  addVotesSort();
+  addUserInfo();
+  addUpvotesToDiscussion();
+  addPusher();
+  addNotifications();
+  addVotersToDiscussionPageSideBar();
+  addUpvoteTabToUserProfile();
+
+  if (setting('useAlternateLayout', true)) {
+    addAlternateLayout();
+  }
+
+  if (setting('altPostVotingUi', true)) {
+    useAlternatePostVoteLayout();
+  }
+});
+
+export * from './components';
+export * from './helpers';