Migrate to typescript (#56)

build/manifest/main.go

@@ -38,8 +38,8 @@ const manifest = JSON.parse(` + "`" + `
 ` + "`" + `);
 
 export default manifest;
-export const id = manifest.id;
-export const version = manifest.version;
+export const id: string = manifest.id;
+export const version: string = manifest.version;
 `
 
 func main() {
@@ -145,7 +145,7 @@ func applyManifest(manifest *model.Manifest) error {
 
 		// write generated code to file by using JS file template.
 		if err := ioutil.WriteFile(
-			"webapp/src/manifest.js",
+			"webapp/src/manifest.ts",
 			[]byte(fmt.Sprintf(pluginIDJSFileTemplate, manifestStr)),
 			0644,
 		); err != nil {

webapp/.eslintrc.json

@@ -12,7 +12,8 @@
     },
     "parser": "babel-eslint",
     "plugins": [
-        "react"
+        "react",
+        "@typescript-eslint"
     ],
     "env": {
         "browser": true,
@@ -38,7 +39,7 @@
         "brace-style": [2, "1tbs", { "allowSingleLine": false }],
         "camelcase": [2, {"properties": "never"}],
         "capitalized-comments": 0,
-        "class-methods-use-this": 1,
+        "class-methods-use-this": 0,
         "comma-dangle": [2, "never"],
         "comma-spacing": [2, {"before": false, "after": true}],
         "comma-style": [2, "last"],
@@ -202,7 +203,7 @@
         "react/jsx-closing-bracket-location": [2, { "location": "tag-aligned" }],
         "react/jsx-curly-spacing": [2, "never"],
         "react/jsx-equals-spacing": [2, "never"],
-        "react/jsx-filename-extension": 2,
+        "react/jsx-filename-extension": [2, { "extensions": [".tsx"] }],
         "react/jsx-first-prop-new-line": [2, "multiline"],
         "react/jsx-handler-names": 0,
         "react/jsx-indent": [2, 4],

webapp/package.json

@@ -2,12 +2,14 @@
   "name": "jitsi",
   "version": "1.1.0",
   "description": "Jitsi audio and video conferencing plugin for Mattermost",
-  "main": "src/index.jsx",
+  "main": "src/index.tsx",
   "scripts": {
     "build": "webpack --mode=production",
     "debug": "webpack --mode=none",
-    "lint": "eslint --ignore-pattern node_modules --ignore-pattern dist --ext .js --ext .jsx --ext tsx --ext ts . --quiet",
-    "fix": "eslint --ignore-pattern node_modules --ignore-pattern dist --ext .js --ext .jsx --ext tsx --ext ts . --quiet --fix",
+    "webpack-stats": "webpack --profile --json > stats.json",
+    "bundle-analyzer": "webpack-bundle-analyzer stats.json",
+    "lint": "eslint --ignore-pattern node_modules --ignore-pattern dist --ext .ts --ext .tsx --ext tsx --ext ts . --quiet",
+    "fix": "eslint --ignore-pattern node_modules --ignore-pattern dist --ext .ts --ext .tsx --ext tsx --ext ts . --quiet --fix",
     "test": "jest --forceExit --detectOpenHandles --verbose",
     "test:watch": "jest --watch",
     "test-ci": "jest --forceExit --detectOpenHandles --maxWorkers=2"
@@ -31,6 +33,7 @@
     "@types/react": "16.9.17",
     "@types/react-dom": "16.9.4",
     "@types/react-intl": "2.3.18",
+    "@types/react-redux": "7.1.9",
     "@types/react-router-dom": "4.3.4",
     "@types/react-transition-group": "4.2.2",
     "@typescript-eslint/eslint-plugin": "1.13.0",
@@ -52,18 +55,18 @@
     "jest-canvas-mock": "2.2.0",
     "jest-junit": "10.0.0",
     "mattermost-webapp": "github:mattermost/mattermost-webapp#23f5f93d9f12a7e2b5623e5cee6814366abd9a0f",
+    "ts-loader": "7.0.5",
     "webpack": "4.35.0",
+    "webpack-bundle-analyzer": "3.8.0",
     "webpack-cli": "3.3.5"
   },
   "dependencies": {
     "core-js": "3.6.2",
     "mattermost-redux": "5.22.0",
-    "moment": "^2.26.0",
     "react": "16.4.1",
     "react-redux": "5.0.7",
     "redux": "4.0.1",
-    "typescript": "3.5.3",
-    "superagent": "^5.0.5"
+    "typescript": "3.5.3"
   },
   "jest": {
     "snapshotSerializers": [

webapp/src/actions/index.js → webapp/src/actions/index.ts

@@ -1,13 +1,15 @@
 import {PostTypes} from 'mattermost-redux/action_types';
+import {DispatchFunc, GetStateFunc} from 'mattermost-redux/types/actions';
+import {Post} from 'mattermost-redux/types/posts';
 
 import Client from '../client';
 
-export function startMeeting(channelId, personal = false, topic = '', meetingId = 0) {
-    return async (dispatch, getState) => {
+export function startMeeting(channelId: string, personal: boolean = false, topic: string = '', meetingId: string = '') {
+    return async (dispatch: DispatchFunc, getState: GetStateFunc) => {
         try {
             await Client.startMeeting(channelId, personal, topic, meetingId);
         } catch (error) {
-            const post = {
+            const post: Post = {
                 id: 'jitsiPlugin' + Date.now(),
                 create_at: Date.now(),
                 update_at: 0,
@@ -19,9 +21,17 @@ export function startMeeting(channelId, personal = false, topic = '', meetingId
                 root_id: '',
                 parent_id: '',
                 original_id: '',
+                reply_count: 0,
                 message: 'We could not start a meeting at this time.',
                 type: 'system_ephemeral',
                 props: {},
+                metadata: {
+                    embeds: [],
+                    emojis: [],
+                    files: [],
+                    images: {},
+                    reactions: []
+                },
                 hashtags: '',
                 pending_post_id: ''
             };
@@ -44,8 +54,8 @@ export function startMeeting(channelId, personal = false, topic = '', meetingId
     };
 }
 
-export function enrichMeetingJwt(meetingJwt) {
-    return async (dispatch, getState) => {
+export function enrichMeetingJwt(meetingJwt: string) {
+    return async (dispatch: DispatchFunc, getState: GetStateFunc) => {
         try {
             const data = await Client.enrichMeetingJwt(meetingJwt);
             return {data};

webapp/src/client/client.js → webapp/src/client/client.ts

@@ -4,23 +4,24 @@ import {ClientError} from 'mattermost-redux/client/client4';
 import {id} from '../manifest';
 
 export default class Client {
+    url: string;
+
     constructor() {
-        if (window.basename) {
-            this.url = window.basename + '/plugins/' + id;
-        } else {
-            this.url = '/plugins/' + id;
+        this.url = '/plugins/' + id;
+        if ((window as any).basename) {
+            this.url = (window as any).basename + '/plugins/' + id;
         }
     }
 
-    startMeeting = async (channelId, personal = false, topic = '', meetingId = 0) => {
+    startMeeting = async (channelId: string, personal: boolean = false, topic: string = '', meetingId: string = '') => {
         return this.doPost(`${this.url}/api/v1/meetings`, {channel_id: channelId, personal, topic, meeting_id: meetingId});
     }
 
-    enrichMeetingJwt = async (meetingJwt) => {
+    enrichMeetingJwt = async (meetingJwt: string) => {
         return this.doPost(`${this.url}/api/v1/meetings/enrich`, {jwt: meetingJwt});
     }
 
-    doPost = async (url, body, headers = {}) => {
+    doPost = async (url: string, body: any, headers: any = {}) => {
         const options = {
             method: 'post',
             body: JSON.stringify(body),

webapp/src/client/index.js → webapp/src/client/index.ts

@@ -1,4 +1,4 @@
-import ClientClass from './client.js';
+import ClientClass from './client';
 
 const Client = new ClientClass();
 

webapp/src/components/icon.jsx → webapp/src/components/icon.tsx

@@ -1,7 +1,6 @@
-import React from 'react';
+import * as React from 'react';
 
-import {Svgs} from '../constants';
-import {makeStyleFromTheme} from 'mattermost-redux/utils/theme_utils';
+import Svgs from '../constants/svgs';
 
 export default class Icon extends React.PureComponent {
     render() {
@@ -15,11 +14,12 @@ export default class Icon extends React.PureComponent {
         );
     }
 }
-const getStyle = makeStyleFromTheme(() => {
+
+function getStyle(): {[key: string]: React.CSSProperties} {
     return {
         iconStyle: {
             position: 'relative',
             top: '-1px'
         }
     };
-});
+}

webapp/src/components/post_type_jitsi/index.ts

@@ -0,0 +1,39 @@
+import {connect} from 'react-redux';
+import {bindActionCreators, Dispatch} from 'redux';
+
+import {getBool, getTheme} from 'mattermost-redux/selectors/entities/preferences';
+import {GlobalState} from 'mattermost-redux/types/store';
+import {GenericAction} from 'mattermost-redux/types/actions';
+
+import {Post} from 'mattermost-redux/types/posts';
+
+import {displayUsernameForUser} from '../../utils/user_utils';
+import {enrichMeetingJwt} from '../../actions';
+
+import {PostTypeJitsi} from './post_type_jitsi';
+
+type OwnProps = {
+    post: Post,
+}
+
+function mapStateToProps(state: GlobalState, ownProps: OwnProps) {
+    const post = ownProps.post;
+    const user = state.entities.users.profiles[post.user_id];
+
+    return {
+        ...ownProps,
+        theme: getTheme(state),
+        creatorName: displayUsernameForUser(user, state.entities.general.config),
+        useMilitaryTime: getBool(state, 'display_settings', 'use_military_time', false)
+    };
+}
+
+function mapDispatchToProps(dispatch: Dispatch<GenericAction>) {
+    return {
+        actions: bindActionCreators({
+            enrichMeetingJwt
+        }, dispatch)
+    };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(PostTypeJitsi);