Convert files related to redux from js to ts

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

@@ -1,40 +1,45 @@
 import {Client4} from 'mattermost-redux/client';
 import {ClientError} from 'mattermost-redux/client/client4';
 
+import {Item, TooltipData} from 'src/types/gitlab_items';
+import {APIError, ConnectedData, GitlabUsersData, LHSData, SubscriptionData} from 'src/types';
+
 export default class Client {
-    setServerRoute = (url) => {
+    private url = '';
+
+    setServerRoute(url: string): void {
         this.url = `${url}/api/v1`;
     }
 
-    getConnected = async (reminder = false) => {
+    async getConnected(reminder: boolean): Promise<ConnectedData> {
         return this.doGet(`${this.url}/connected?reminder=` + reminder);
-    };
+    }
 
-    getPrsDetails = async (prList) => {
+    async getPrsDetails(prList: any): Promise<Item | APIError> {
         return this.doPost(`${this.url}/prdetails`, prList);
     }
 
-    getLHSData= async () => {
+    async getLHSData(): Promise<LHSData | APIError> {
         return this.doGet(`${this.url}/lhs-data`);
     }
 
-    getGitlabUser = async (userID) => {
+    async getGitlabUser(userID: string): Promise<GitlabUsersData> {
         return this.doPost(`${this.url}/user`, {user_id: userID});
-    };
+    }
 
-    getIssue = async (owner, repo, issueNumber) => {
+    async getIssue(owner: string, repo: string, issueNumber: string): Promise<TooltipData | null> {
         return this.doGet(`${this.url}/issue?owner=${owner}&repo=${repo}&number=${issueNumber}`);
     }
 
-    getPullRequest = async (owner, repo, prNumber) => {
+    async getPullRequest(owner: string, repo: string, prNumber: string): Promise<TooltipData | null> {
         return this.doGet(`${this.url}/mergerequest?owner=${owner}&repo=${repo}&number=${prNumber}`);
     }
 
-    getChannelSubscriptions = async (channelID) => {
+    async getChannelSubscriptions(channelID: string): Promise<SubscriptionData> {
         return this.doGet(`${this.url}/channel/${channelID}/subscriptions`);
-    };
+    }
 
-    doGet = async (url, body, headers = {}) => {
+    private async doGet(url: string, body?: any, headers: Record<string, any> = {}): Promise<any> {
         headers['X-Timezone-Offset'] = new Date().getTimezoneOffset();
 
         const options = {
@@ -55,9 +60,9 @@ export default class Client {
             status_code: response.status,
             url,
         });
-    };
+    }
 
-    doPost = async (url, body, headers = {}) => {
+    private async doPost(url: string, body: any, headers: Record<string, any> = {}): Promise<any> {
         headers['X-Timezone-Offset'] = new Date().getTimezoneOffset();
 
         const options = {
@@ -79,9 +84,9 @@ export default class Client {
             status_code: response.status,
             url,
         });
-    };
+    }
 
-    doDelete = async (url, body, headers = {}) => {
+    private async doDelete(url: string, body?: any, headers: Record<string, any> = {}): Promise<any> {
         headers['X-Timezone-Offset'] = new Date().getTimezoneOffset();
 
         const options = {
@@ -102,9 +107,9 @@ export default class Client {
             status_code: response.status,
             url,
         });
-    };
+    }
 
-    doPut = async (url, body, headers = {}) => {
+    private async doPut(url: string, body: any, headers: Record<string, any> = {}): Promise<any> {
         headers['X-Timezone-Offset'] = new Date().getTimezoneOffset();
 
         const options = {
@@ -126,5 +131,5 @@ export default class Client {
             status_code: response.status,
             url,
         });
-    };
+    }
 }

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/user_attribute/index.ts

@@ -38,4 +38,4 @@ function mapDispatchToProps(dispatch: Dispatch<AnyAction>) {
 export default connect(
     mapStateToProps,
     mapDispatchToProps,
-)(UserAttribute as React.ComponentType<UserAttributeStateProps & UserAttributeDispatchProps>);
+)(UserAttribute);

webapp/src/components/user_attribute/user_attribute.tsx

@@ -1,36 +1,40 @@
-import React, {PureComponent} from 'react';
+import React, {useEffect, CSSProperties} from 'react';
 
-import type {UserAttributeProps} from '.';
-
-export default class UserAttribute extends PureComponent<UserAttributeProps> {
-    componentDidMount() {
-        this.props.actions.getGitlabUser(this.props.id);
-    }
-
-    render() {
-        const username = this.props.username;
-        const baseURL = this.props.gitlabURL;
+interface UserAttributeProps {
+    id: string;
+    username?: string;
+    gitlabURL?: string;
+    actions: {
+        getGitlabUser: (id: string) => void;
+    };
+}
 
-        if (!username || !baseURL) {
-            return null;
-        }
+const UserAttribute = ({id, username, gitlabURL, actions}: UserAttributeProps) => {
+    useEffect(() => {
+        actions.getGitlabUser(id);
+    }, [id, actions]);
 
-        return (
-            <div style={style.container}>
-                <a
-                    href={baseURL + '/' + username}
-                    target='_blank'
-                    rel='noopener noreferrer'
-                >
-                    <i className='fa fa-gitlab'/>{' ' + username}
-                </a>
-            </div>
-        );
+    if (!username || !gitlabURL) {
+        return null;
     }
-}
 
-const style = {
+    return (
+        <div style={style.container}>
+            <a
+                href={`${gitlabURL}/${username}`}
+                target='_blank'
+                rel='noopener noreferrer'
+            >
+                <i className='fa fa-gitlab'/>{' ' + username}
+            </a>
+        </div>
+    );
+};
+
+const style: {container: CSSProperties} = {
     container: {
         margin: '5px 0',
     },
 };
+
+export default UserAttribute;

webapp/src/types/gitlab_items.ts

@@ -74,6 +74,7 @@ export interface GitlabItemsProps {
 }
 
 export interface TooltipData {
+    owner: string;
     state: string;
     type: string;
     repo: string;