Convert files related to redux from js to ts

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

@@ -2,13 +2,18 @@ import {getCurrentChannelId, getCurrentUserId} from 'mattermost-redux/selectors/
 
 import {PostTypes} from 'mattermost-redux/action_types';
 
+import {AnyAction, Dispatch} from 'redux';
+
 import Client from '../client';
 import ActionTypes from '../action_types';
-import manifest from '../manifest';
+import {APIError, ConnectedData, GitlabUsersData, LHSData, ShowRhsPluginActionData, SubscriptionData} from 'src/types';
+import {Item} from 'src/types/gitlab_items';
+import {GlobalState} from 'src/types/store';
+import {getPluginState} from 'src/selectors';
 
 export function getConnected(reminder = false) {
-    return async (dispatch) => {
-        let data;
+    return async (dispatch: Dispatch<AnyAction>) => {
+        let data: ConnectedData;
         try {
             data = await Client.getConnected(reminder);
         } catch (error) {
@@ -24,8 +29,8 @@ export function getConnected(reminder = false) {
     };
 }
 
-function checkAndHandleNotConnected(data) {
-    return async (dispatch) => {
+function checkAndHandleNotConnected(data: APIError) {
+    return async (dispatch: Dispatch<AnyAction>) => {
         if (data && data.id === 'not_connected') {
             dispatch({
                 type: ActionTypes.RECEIVED_CONNECTED,
@@ -34,24 +39,24 @@ function checkAndHandleNotConnected(data) {
                     gitlab_username: '',
                     gitlab_client_id: '',
                     settings: {},
-                },
+                } as ConnectedData,
             });
             return false;
         }
         return true;
     };
 }
 
-export function getReviewDetails(prList) {
-    return async (dispatch, getState) => {
-        let data;
+export function getReviewDetails(prList: Item[]) {
+    return async (dispatch: Dispatch<AnyAction>) => {
+        let data: Item | APIError;
         try {
             data = await Client.getPrsDetails(prList);
         } catch (error) {
             return {error};
         }
 
-        const connected = await checkAndHandleNotConnected(data)(dispatch, getState);
+        const connected = await checkAndHandleNotConnected(data as APIError)(dispatch);
         if (!connected) {
             return {error: data};
         }
@@ -65,16 +70,16 @@ export function getReviewDetails(prList) {
     };
 }
 
-export function getYourPrDetails(prList) {
-    return async (dispatch, getState) => {
-        let data;
+export function getYourPrDetails(prList: Item[]) {
+    return async (dispatch: Dispatch<AnyAction>) => {
+        let data: Item | APIError;
         try {
             data = await Client.getPrsDetails(prList);
         } catch (error) {
             return {error};
         }
 
-        const connected = await checkAndHandleNotConnected(data)(dispatch, getState);
+        const connected = await checkAndHandleNotConnected(data as APIError)(dispatch);
         if (!connected) {
             return {error: data};
         }
@@ -88,45 +93,16 @@ export function getYourPrDetails(prList) {
     };
 }
 
-export function getMentions() {
-    return async (dispatch, getState) => {
-        let data;
-        try {
-            data = await Client.getMentions();
-        } catch (error) {
-            return {error};
-        }
-
-        const connected = await checkAndHandleNotConnected(data)(
-            dispatch,
-            getState,
-        );
-        if (!connected) {
-            return {error: data};
-        }
-
-        dispatch({
-            type: ActionTypes.RECEIVED_MENTIONS,
-            data,
-        });
-
-        return {data};
-    };
-}
-
 export function getLHSData() {
-    return async (dispatch, getState) => {
-        let data;
+    return async (dispatch: Dispatch<AnyAction>) => {
+        let data: LHSData | APIError;
         try {
             data = await Client.getLHSData();
         } catch (error) {
             return {error};
         }
 
-        const connected = await checkAndHandleNotConnected(data)(
-            dispatch,
-            getState,
-        );
+        const connected = await checkAndHandleNotConnected(data as APIError)(dispatch);
         if (!connected) {
             return {error: data};
         }
@@ -144,14 +120,14 @@ export function getLHSData() {
  * Stores "showRHSPlugin" action returned by
  * "registerRightHandSidebarComponent" in plugin initialization.
  */
-export function setShowRHSAction(showRHSPluginAction) {
+export function setShowRHSAction(showRHSPluginAction: () => ShowRhsPluginActionData) {
     return {
         type: ActionTypes.RECEIVED_SHOW_RHS_ACTION,
         showRHSPluginAction,
     };
 }
 
-export function updateRHSState(rhsState) {
+export function updateRHSState(rhsState: string) {
     return {
         type: ActionTypes.UPDATE_RHS_STATE,
         state: rhsState,
@@ -160,13 +136,13 @@ export function updateRHSState(rhsState) {
 
 const GITLAB_USER_GET_TIMEOUT_MILLISECONDS = 1000 * 60 * 60; // 1 hour
 
-export function getGitlabUser(userID) {
-    return async (dispatch, getState) => {
+export function getGitlabUser(userID: string) {
+    return async (dispatch: Dispatch<AnyAction>, getState: () => GlobalState) => {
         if (!userID) {
             return {};
         }
 
-        const user = getState()[`plugins-${manifest.id}`].gitlabUsers[userID];
+        const user = getPluginState(getState()).gitlabUsers[userID];
         if (
             user &&
             user.last_try &&
@@ -179,11 +155,11 @@ export function getGitlabUser(userID) {
             return {data: user};
         }
 
-        let data;
+        let data: GitlabUsersData;
         try {
             data = await Client.getGitlabUser(userID);
-        } catch (error) {
-            if (error.status === 404) {
+        } catch (error: unknown) {
+            if ((error as APIError).status === 404) {
                 dispatch({
                     type: ActionTypes.RECEIVED_GITLAB_USER,
                     userID,
@@ -203,13 +179,13 @@ export function getGitlabUser(userID) {
     };
 }
 
-export function getChannelSubscriptions(channelId) {
-    return async (dispatch) => {
+export function getChannelSubscriptions(channelId: string) {
+    return async (dispatch: Dispatch<AnyAction>) => {
         if (!channelId) {
             return {};
         }
 
-        let subscriptions;
+        let subscriptions: SubscriptionData;
         try {
             subscriptions = await Client.getChannelSubscriptions(channelId);
         } catch (error) {
@@ -228,8 +204,8 @@ export function getChannelSubscriptions(channelId) {
     };
 }
 
-export function sendEphemeralPost(message) {
-    return (dispatch, getState) => {
+export function sendEphemeralPost(message: string) {
+    return (dispatch: Dispatch<AnyAction>, getState: () => GlobalState) => {
         const timestamp = Date.now();
         const state = getState();
 

webapp/src/client/client.js

@@ -18,10 +18,6 @@ export default class Client {
         return this.doGet(`${this.url}/lhs-data`);
     }
 
-    getMentions = async () => {
-        return this.doGet(`${this.url}/mentions`);
-    };
-
     getGitlabUser = async (userID) => {
         return this.doPost(`${this.url}/user`, {user_id: userID});
     };

webapp/src/components/rhs_sidebar/rhs_sidebar.css

@@ -88,13 +88,13 @@
 .gitlab-rhs-Description {
     font-size: 12px;
     font-weight: 400;
-    letterSpacing: 0;
+    letter-spacing: 0;
 }
 
 .gitlab-rhs-Username {
     font-size: 11px;
     font-weight: 600;
-    letterSpacing: 0.02em;
+    letter-spacing: 0.02em;
 }
 
 .gitlab-rhs-GitLabURL {
@@ -129,12 +129,12 @@
 }
 
 .gitlab-rhs-SubscriptionHeader {
-    font-family: 'Open Sans';
+    font-family: 'Open Sans' !important;
     font-size: 12px;
     font-weight: 600;
     line-height: 16px;
-    letterSpacing: 0.02em;
-    textTransform: uppercase;
+    letter-spacing: 0.02em;
+    text-transform: uppercase;
     margin: 0 0 4px 0;
     color: rgba(var(--center-channel-color-rgb), 0.72);
 }

webapp/src/components/user_attribute/index.ts

@@ -0,0 +1,41 @@
+import {connect} from 'react-redux';
+import {AnyAction, Dispatch, bindActionCreators} from 'redux';
+
+import {UserProfile} from 'mattermost-redux/types/users';
+
+import {getGitlabUser} from '../../actions';
+
+import {GlobalState, pluginStateKey} from 'src/types/store';
+
+import UserAttribute from './user_attribute';
+
+export type UserAttributeProps = UserAttributeStateProps & UserAttributeDispatchProps
+
+type UserAttributeDispatchProps = ReturnType<typeof mapDispatchToProps>;
+type UserAttributeStateProps = ReturnType<typeof mapStateToProps>;
+
+function mapStateToProps(state: GlobalState, ownProps: {user: UserProfile}) {
+    const idUser = ownProps.user ? ownProps.user.id : '';
+    const user = state[pluginStateKey].gitlabUsers[idUser] || {};
+    return {
+        id: idUser,
+        username: user.username,
+        gitlabURL: state[pluginStateKey].gitlabURL,
+    };
+}
+
+function mapDispatchToProps(dispatch: Dispatch<AnyAction>) {
+    return {
+        actions: bindActionCreators(
+            {
+                getGitlabUser,
+            },
+            dispatch,
+        ),
+    };
+}
+
+export default connect(
+    mapStateToProps,
+    mapDispatchToProps,
+)(UserAttribute as React.ComponentType<UserAttributeStateProps & UserAttributeDispatchProps>);

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

@@ -1,19 +1,10 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, {PureComponent} from 'react';
 
-export default class UserAttribute extends React.PureComponent {
-    static propTypes = {
-        id: PropTypes.string.isRequired,
-        username: PropTypes.string,
-        gitlabURL: PropTypes.string,
-        actions: PropTypes.shape({
-            getGitlabUser: PropTypes.func.isRequired,
-        }).isRequired,
-    };
+import type {UserAttributeProps} from '.';
 
-    constructor(props) {
-        super(props);
-        props.actions.getGitlabUser(props.id);
+export default class UserAttribute extends PureComponent<UserAttributeProps> {
+    componentDidMount() {
+        this.props.actions.getGitlabUser(this.props.id);
     }
 
     render() {

webapp/src/index.ts

@@ -2,9 +2,6 @@
 // See License.txt for license information.
 
 import {getConfig} from 'mattermost-redux/selectors/entities/general';
-
-import {GlobalState} from 'mattermost-redux/types/store';
-
 import {Store, Action} from 'redux';
 
 import SidebarHeader from './components/sidebar_header';
@@ -14,6 +11,8 @@ import UserAttribute from './components/user_attribute';
 import SidebarRight from './components/sidebar_right';
 import LinkTooltip from './components/link_tooltip';
 
+import {GlobalState} from './types/store';
+
 import Reducer from './reducers';
 import {getConnected, setShowRHSAction} from './actions';
 import {