Translate right panel stuff to ts

Add actions for right panel

src/components/views/right_panel/HeaderButton.tsx

@@ -19,18 +19,33 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import Analytics from '../../../Analytics';
 import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
 
-export default class HeaderButton extends React.Component {
-    constructor() {
-        super();
+interface IProps {
+    // Whether this button is highlighted
+    isHighlighted: boolean;
+    // click handler
+    onClick: () => void;
+    // The badge to display above the icon
+    badge: React.ReactNode;
+    // The parameters to track the click event
+    analytics: string[];
+
+    // Button name
+    name: string;
+    // Button title
+    title: string;
+};
+
+export default class HeaderButton extends React.Component<IProps> {
+    constructor(props: IProps) {
+        super(props);
         this.onClick = this.onClick.bind(this);
     }
 
-    onClick(ev) {
+    onClick(_ev: React.KeyboardEvent) {
         Analytics.trackEvent(...this.props.analytics);
         this.props.onClick();
     }
@@ -51,19 +66,3 @@ export default class HeaderButton extends React.Component {
         />;
     }
 }
-
-HeaderButton.propTypes = {
-    // Whether this button is highlighted
-    isHighlighted: PropTypes.bool.isRequired,
-    // click handler
-    onClick: PropTypes.func.isRequired,
-    // The badge to display above the icon
-    badge: PropTypes.node,
-    // The parameters to track the click event
-    analytics: PropTypes.arrayOf(PropTypes.string).isRequired,
-
-    // Button name
-    name: PropTypes.string.isRequired,
-    // Button title
-    title: PropTypes.string.isRequired,
-};

src/components/views/right_panel/HeaderButtons.tsx

@@ -21,42 +21,52 @@ limitations under the License.
 import React from 'react';
 import dis from '../../../dispatcher/dispatcher';
 import RightPanelStore from "../../../stores/RightPanelStore";
+import {RightPanelPhases} from "../../../stores/RightPanelStorePhases";
+import {Action} from '../../../dispatcher/actions';
 
-export const HEADER_KIND_ROOM = "room";
-export const HEADER_KIND_GROUP = "group";
+export enum HeaderKind {
+  Room = "room",
+  Group = "group",
+}
 
-const HEADER_KINDS = [HEADER_KIND_GROUP, HEADER_KIND_ROOM];
+interface IState {
+    headerKind: HeaderKind;
+    phase: RightPanelPhases;
+}
 
-export default class HeaderButtons extends React.Component {
-    constructor(props, kind) {
+interface IProps {}
+
+export default class HeaderButtons extends React.Component<IProps, IState> {
+    private storeToken: ReturnType<RightPanelStore["addListener"]>;
+    private dispatcherRef: string;
+
+    constructor(props: IProps, kind: HeaderKind) {
         super(props);
 
-        if (!HEADER_KINDS.includes(kind)) throw new Error(`Invalid header kind: ${kind}`);
-
         const rps = RightPanelStore.getSharedInstance();
         this.state = {
             headerKind: kind,
-            phase: kind === HEADER_KIND_ROOM ? rps.visibleRoomPanelPhase : rps.visibleGroupPanelPhase,
+            phase: kind === HeaderKind.Room ? rps.visibleRoomPanelPhase : rps.visibleGroupPanelPhase,
         };
     }
 
     componentDidMount() {
-        this._storeToken = RightPanelStore.getSharedInstance().addListener(this.onRightPanelUpdate.bind(this));
-        this._dispatcherRef = dis.register(this.onAction.bind(this)); // used by subclasses
+        this.storeToken = RightPanelStore.getSharedInstance().addListener(this.onRightPanelUpdate.bind(this));
+        this.dispatcherRef = dis.register(this.onAction.bind(this)); // used by subclasses
     }
 
     componentWillUnmount() {
-        if (this._storeToken) this._storeToken.remove();
-        if (this._dispatcherRef) dis.unregister(this._dispatcherRef);
+        if (this.storeToken) this.storeToken.remove();
+        if (this.dispatcherRef) dis.unregister(this.dispatcherRef);
     }
 
     onAction(payload) {
         // Ignore - intended to be overridden by subclasses
     }
 
-    setPhase(phase, extras) {
+    setPhase(phase: RightPanelPhases, extras) {
         dis.dispatch({
-            action: 'set_right_panel_phase',
+            action: Action.SetRightPanelPhase,
             phase: phase,
             refireParams: extras,
         });
@@ -72,13 +82,23 @@ export default class HeaderButtons extends React.Component {
 
     onRightPanelUpdate() {
         const rps = RightPanelStore.getSharedInstance();
-        if (this.state.headerKind === HEADER_KIND_ROOM) {
+        if (this.state.headerKind === HeaderKind.Room) {
             this.setState({phase: rps.visibleRoomPanelPhase});
-        } else if (this.state.headerKind === HEADER_KIND_GROUP) {
+        } else if (this.state.headerKind === HeaderKind.Group) {
             this.setState({phase: rps.visibleGroupPanelPhase});
         }
     }
 
+    // XXX: Make renderButtons a prop
+    renderButtons(): JSX.Element[] {
+        // Ignore - intended to be overridden by subclasses
+        // Return empty fragment to satisfy the type
+        return [
+          <React.Fragment>
+          </React.Fragment>
+        ];
+    }
+
     render() {
         // inline style as this will be swapped around in future commits
         return <div className="mx_HeaderButtons" role="tablist">