Merge pull request #316 from vector-im/dbkr/typescript_round_1

Initial round of typescripting
element-hq · May 11, 2022 · 66aede0 · 66aede0
2 parents fd93d89 + b231424
commit 66aede0
Show file tree

Hide file tree

Showing 12 changed files with 383 additions and 38 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -25,6 +25,11 @@ module.exports = {
             files: [
                 "src/**/*.{ts,tsx}",
             ],
+            extends: [
+                "plugin:matrix-org/typescript",
+                "plugin:matrix-org/react",
+                "prettier",
+            ],
         },
     ],
     settings: {

diff --git a/.github/workflows/lint.yaml b/.github/workflows/lint.yaml
@@ -1,9 +1,9 @@
-name: Lint and format
+name: Lint, format & type check
 on:
   pull_request: {}
 jobs:
   prettier:
-    name: Lint and format
+    name: Lint, format & type check
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
@@ -17,4 +17,6 @@ jobs:
       - name: Prettier
         run: "yarn run prettier:check"
       - name: ESLint
-        run: "yarn run lint"
+        run: "yarn run lint:js"
+      - name: Type check
+        run: "yarn run lint:types"
diff --git a/package.json b/package.json
@@ -8,7 +8,8 @@
     "build-storybook": "build-storybook",
     "prettier:check": "prettier -c src",
     "prettier:format": "prettier -w src",
-    "lint": "eslint --max-warnings 2 src"
+    "lint:js": "eslint --max-warnings 2 src",
+    "lint:types": "tsc"
   },
   "dependencies": {
     "@juggle/resize-observer": "^3.3.1",
@@ -34,7 +35,7 @@
     "color-hash": "^2.0.1",
     "events": "^3.3.0",
     "lodash-move": "^1.1.1",
-    "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#robertlong/group-call",
+    "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#acef1d7dd0b915368730efabee94deb42b2e4058",
     "mermaid": "^8.13.8",
     "normalize.css": "^8.0.1",
     "pako": "^2.0.4",
@@ -51,17 +52,24 @@
   },
   "devDependencies": {
     "@babel/core": "^7.16.5",
+    "@matrix-org/olm": "https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.8.tgz",
     "@storybook/react": "^6.5.0-alpha.5",
+    "@types/request": "^2.48.8",
+    "@typescript-eslint/eslint-plugin": "^5.22.0",
+    "@typescript-eslint/parser": "^5.22.0",
     "babel-loader": "^8.2.3",
     "eslint": "^8.14.0",
+    "eslint-config-google": "^0.14.0",
     "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-jsx-a11y": "^6.5.1",
     "eslint-plugin-matrix-org": "^0.4.0",
     "eslint-plugin-react": "^7.29.4",
     "eslint-plugin-react-hooks": "^4.5.0",
     "prettier": "^2.6.2",
     "sass": "^1.42.1",
     "storybook-builder-vite": "^0.1.12",
+    "typescript": "^4.6.4",
     "vite": "^2.4.2",
     "vite-plugin-html-template": "^1.1.0",
     "vite-plugin-svgr": "^0.4.0"

diff --git a/src/@types/global.d.ts b/src/@types/global.d.ts
@@ -0,0 +1,17 @@
+/*
+Copyright 2022 Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import "matrix-js-sdk/src/@types/global";
diff --git a/src/@types/modules.d.ts b/src/@types/modules.d.ts
@@ -0,0 +1,2 @@
+/// <reference types="vite/client" />
+/// <reference types="vite-plugin-svgr/client" />
diff --git a/src/Avatar.jsx → src/Avatar.tsx b/src/Avatar.jsx → src/Avatar.tsx
@@ -1,5 +1,6 @@
 import React, { useMemo } from "react";
 import classNames from "classnames";
+
 import styles from "./Avatar.module.css";
 
 const backgroundColors = [
@@ -13,7 +14,7 @@ const backgroundColors = [
   "#74D12C",
 ];
 
-function hashStringToArrIndex(str, arrLength) {
+function hashStringToArrIndex(str: string, arrLength: number) {
   let sum = 0;
 
   for (let i = 0; i < str.length; i++) {
@@ -23,15 +24,24 @@ function hashStringToArrIndex(str, arrLength) {
   return sum % arrLength;
 }
 
-export function Avatar({
+interface Props extends React.HTMLAttributes<HTMLDivElement> {
+  bgKey?: string;
+  src: string;
+  fallback: string;
+  size?: number;
+  className: string;
+  style: React.CSSProperties;
+}
+
+export const Avatar: React.FC<Props> = ({
   bgKey,
   src,
   fallback,
   size,
   className,
   style,
   ...rest
-}) {
+}) => {
   const backgroundColor = useMemo(() => {
     const index = hashStringToArrIndex(
       bgKey || fallback || src || "",
@@ -40,6 +50,7 @@ export function Avatar({
     return backgroundColors[index];
   }, [bgKey, src, fallback]);
 
+  /* eslint-disable jsx-a11y/alt-text */
   return (
     <div
       className={classNames(styles.avatar, styles[size || "md"], className)}
@@ -55,4 +66,4 @@ export function Avatar({
       )}
     </div>
   );
-}
+};
diff --git a/src/auth/generateRandomName.js → src/auth/generateRandomName.ts b/src/auth/generateRandomName.js → src/auth/generateRandomName.ts
@@ -19,6 +19,7 @@ import {
   adjectives,
   colors,
   animals,
+  Config,
 } from "unique-names-generator";
 
 const elements = [
@@ -142,7 +143,7 @@ const elements = [
   "oganesson",
 ];
 
-export function generateRandomName(config) {
+export function generateRandomName(config: Config): string {
   return uniqueNamesGenerator({
     dictionaries: [colors, adjectives, animals, elements],
     style: "lowerCase",

diff --git a/src/room/PTTButton.jsx → src/room/PTTButton.tsx b/src/room/PTTButton.jsx → src/room/PTTButton.tsx
@@ -16,11 +16,23 @@ limitations under the License.
 
 import React, { useCallback, useEffect, useState } from "react";
 import classNames from "classnames";
+
 import styles from "./PTTButton.module.css";
 import { ReactComponent as MicIcon } from "../icons/Mic.svg";
 import { Avatar } from "../Avatar";
 
-export function PTTButton({
+interface Props {
+  showTalkOverError: boolean;
+  activeSpeakerUserId: string;
+  activeSpeakerDisplayName: string;
+  activeSpeakerAvatarUrl: string;
+  activeSpeakerIsLocalUser: boolean;
+  size: number;
+  startTalking: () => void;
+  stopTalking: () => void;
+}
+
+export const PTTButton: React.FC<Props> = ({
   showTalkOverError,
   activeSpeakerUserId,
   activeSpeakerDisplayName,
@@ -29,17 +41,17 @@ export function PTTButton({
   size,
   startTalking,
   stopTalking,
-}) {
+}) => {
   const [isHeld, setHeld] = useState(false);
   const onDocumentMouseUp = useCallback(() => {
     if (isHeld) stopTalking();
     setHeld(false);
-  }, [isHeld, setHeld]);
+  }, [isHeld, setHeld, stopTalking]);
 
   const onButtonMouseDown = useCallback(() => {
     setHeld(true);
     startTalking();
-  }, [setHeld]);
+  }, [setHeld, startTalking]);
 
   useEffect(() => {
     window.addEventListener("mouseup", onDocumentMouseUp);
@@ -48,7 +60,6 @@ export function PTTButton({
       window.removeEventListener("mouseup", onDocumentMouseUp);
     };
   }, [onDocumentMouseUp]);
-
   return (
     <button
       className={classNames(styles.pttButton, {
@@ -79,4 +90,4 @@ export function PTTButton({
       )}
     </button>
   );
-}
+};
diff --git a/src/room/PTTCallView.jsx → src/room/PTTCallView.tsx b/src/room/PTTCallView.jsx → src/room/PTTCallView.tsx
@@ -15,6 +15,10 @@ limitations under the License.
 */
 
 import React from "react";
+import useMeasure from "react-use-measure";
+import { ResizeObserver } from "@juggle/resize-observer";
+import { OtherUserSpeakingError } from "matrix-js-sdk/src/webrtc/groupCall";
+
 import { useModalTriggerState } from "../Modal";
 import { SettingsModal } from "../settings/SettingsModal";
 import { InviteModal } from "./InviteModal";
@@ -25,14 +29,11 @@ import { Facepile } from "../Facepile";
 import { PTTButton } from "./PTTButton";
 import { PTTFeed } from "./PTTFeed";
 import { useMediaHandler } from "../settings/useMediaHandler";
-import useMeasure from "react-use-measure";
-import { ResizeObserver } from "@juggle/resize-observer";
 import { usePTT } from "./usePTT";
 import { Timer } from "./Timer";
 import { Toggle } from "../input/Toggle";
 import { getAvatarUrl } from "../matrix-utils";
 import { ReactComponent as AudioIcon } from "../icons/Audio.svg";
-import { OtherUserSpeakingError } from "matrix-js-sdk/src/webrtc/groupCall";
 
 export function PTTCallView({
   client,

diff --git a/src/room/usePTT.js → src/room/usePTT.ts b/src/room/usePTT.js → src/room/usePTT.ts
@@ -15,8 +15,26 @@ limitations under the License.
 */
 
 import { useCallback, useEffect, useState } from "react";
+import { MatrixClient } from "matrix-js-sdk/src/client";
+import { GroupCall } from "matrix-js-sdk/src/webrtc/groupCall";
+import { CallFeed, CallFeedEvent } from "matrix-js-sdk/src/webrtc/callFeed";
+
+export interface PTTState {
+  pttButtonHeld: boolean;
+  isAdmin: boolean;
+  talkOverEnabled: boolean;
+  setTalkOverEnabled: (boolean) => void;
+  activeSpeakerUserId: string;
+  startTalking: () => void;
+  stopTalking: () => void;
+  unmuteError: Error;
+}
 
-export function usePTT(client, groupCall, userMediaFeeds) {
+export const usePTT = (
+  client: MatrixClient,
+  groupCall: GroupCall,
+  userMediaFeeds: CallFeed[]
+): PTTState => {
   const [
     {
       pttButtonHeld,
@@ -41,7 +59,7 @@ export function usePTT(client, groupCall, userMediaFeeds) {
   });
 
   useEffect(() => {
-    function onMuteStateChanged(...args) {
+    function onMuteStateChanged(...args): void {
       const activeSpeakerFeed = userMediaFeeds.find((f) => !f.isAudioMuted());
 
       setState((prevState) => ({
@@ -53,7 +71,7 @@ export function usePTT(client, groupCall, userMediaFeeds) {
     }
 
     for (const callFeed of userMediaFeeds) {
-      callFeed.addListener("mute_state_changed", onMuteStateChanged);
+      callFeed.addListener(CallFeedEvent.MuteStateChanged, onMuteStateChanged);
     }
 
     const activeSpeakerFeed = userMediaFeeds.find((f) => !f.isAudioMuted());
@@ -65,7 +83,10 @@ export function usePTT(client, groupCall, userMediaFeeds) {
 
     return () => {
       for (const callFeed of userMediaFeeds) {
-        callFeed.removeListener("mute_state_changed", onMuteStateChanged);
+        callFeed.removeListener(
+          CallFeedEvent.MuteStateChanged,
+          onMuteStateChanged
+        );
       }
     };
   }, [userMediaFeeds]);
@@ -98,7 +119,7 @@ export function usePTT(client, groupCall, userMediaFeeds) {
   }, [groupCall]);
 
   useEffect(() => {
-    function onKeyDown(event) {
+    function onKeyDown(event: KeyboardEvent): void {
       if (event.code === "Space") {
         event.preventDefault();
 
@@ -108,15 +129,15 @@ export function usePTT(client, groupCall, userMediaFeeds) {
       }
     }
 
-    function onKeyUp(event) {
+    function onKeyUp(event: KeyboardEvent): void {
       if (event.code === "Space") {
         event.preventDefault();
 
         stopTalking();
       }
     }
 
-    function onBlur() {
+    function onBlur(): void {
       // TODO: We will need to disable this for a global PTT hotkey to work
       if (!groupCall.isMicrophoneMuted()) {
         groupCall.setMicrophoneMuted(true);
@@ -161,4 +182,4 @@ export function usePTT(client, groupCall, userMediaFeeds) {
     stopTalking,
     unmuteError,
   };
-}
+};
diff --git a/tsconfig.json b/tsconfig.json
@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "es2016",
+    "esModuleInterop": true,
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "noEmit": true,
+    "noImplicitAny": false,
+    "noUnusedLocals": true,
+    "jsx": "preserve",
+    "lib": [
+      "es2020",
+      "dom",
+      "dom.iterable"
+    ],
+  },
+  "include": [
+    "./src/**/*.ts",
+    "./src/**/*.tsx",
+  ],
+}