Convert files related to redux from js to ts

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

@@ -2,12 +2,17 @@ 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, ShowRhsPluginActionData} from 'src/types';
+import {Item} from 'src/types/gitlab_items';
+import {GlobalState, pluginStateKey} from 'src/types/store';
 
 export function getConnected(reminder = false) {
-    return async (dispatch) => {
+    return async (dispatch: Dispatch<AnyAction>) => {
         let data;
         try {
             data = await Client.getConnected(reminder);
@@ -24,8 +29,8 @@ export function getConnected(reminder = false) {
     };
 }
 
-function checkAndHandleNotConnected(data) {
-    return async (dispatch) => {
+function checkAndHandleNotConnected(data: {id: string}) {
+    return async (dispatch: Dispatch<AnyAction>) => {
         if (data && data.id === 'not_connected') {
             dispatch({
                 type: ActionTypes.RECEIVED_CONNECTED,
@@ -42,16 +47,16 @@ function checkAndHandleNotConnected(data) {
     };
 }
 
-export function getReviewDetails(prList) {
-    return async (dispatch, getState) => {
+export function getReviewDetails(prList: Item[]) {
+    return async (dispatch: Dispatch<AnyAction>) => {
         let data;
         try {
             data = await Client.getPrsDetails(prList);
         } catch (error) {
             return {error};
         }
 
-        const connected = await checkAndHandleNotConnected(data)(dispatch, getState);
+        const connected = await checkAndHandleNotConnected(data)(dispatch);
         if (!connected) {
             return {error: data};
         }
@@ -65,16 +70,16 @@ export function getReviewDetails(prList) {
     };
 }
 
-export function getYourPrDetails(prList) {
-    return async (dispatch, getState) => {
+export function getYourPrDetails(prList: Item[]) {
+    return async (dispatch: Dispatch<AnyAction>) => {
         let data;
         try {
             data = await Client.getPrsDetails(prList);
         } catch (error) {
             return {error};
         }
 
-        const connected = await checkAndHandleNotConnected(data)(dispatch, getState);
+        const connected = await checkAndHandleNotConnected(data)(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) => {
+    return async (dispatch: Dispatch<AnyAction>) => {
         let data;
         try {
             data = await Client.getLHSData();
         } catch (error) {
             return {error};
         }
 
-        const connected = await checkAndHandleNotConnected(data)(
-            dispatch,
-            getState,
-        );
+        const connected = await checkAndHandleNotConnected(data)(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 = getState()[`plugins-${manifest.id}` as pluginStateKey].gitlabUsers[userID];
         if (
             user &&
             user.last_try &&
@@ -182,8 +158,8 @@ export function getGitlabUser(userID) {
         let data;
         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,8 +179,8 @@ export function getGitlabUser(userID) {
     };
 }
 
-export function getChannelSubscriptions(channelId) {
-    return async (dispatch) => {
+export function getChannelSubscriptions(channelId: string) {
+    return async (dispatch: Dispatch<AnyAction>) => {
         if (!channelId) {
             return {};
         }
@@ -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 {
@@ -133,8 +133,7 @@
     font-size: 12px;
     font-weight: 600;
     line-height: 16px;
-    letterSpacing: 0.02em;
-    textTransform: uppercase;
+    letter-spacing: 0.02em;
     margin: 0 0 4px 0;
     color: rgba(var(--center-channel-color-rgb), 0.72);
 }

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

@@ -2,8 +2,10 @@ import {combineReducers} from 'redux';
 
 import ActionTypes from '../action_types';
 import Constants from '../constants';
+import {Item} from 'src/types/gitlab_items';
+import {ConnectedData, GitlabUsersData, LHSData, ShowRhsPluginActionData, SubscriptionData} from 'src/types';
 
-function connected(state = false, action) {
+function connected(state = false, action: {type: string, data: ConnectedData}) {
     switch (action.type) {
     case ActionTypes.RECEIVED_CONNECTED:
         return action.data.connected;
@@ -12,7 +14,7 @@ function connected(state = false, action) {
     }
 }
 
-function gitlabURL(state = '', action) {
+function gitlabURL(state = '', action: {type: string, data: ConnectedData}) {
     switch (action.type) {
     case ActionTypes.RECEIVED_CONNECTED:
         if (action.data && action.data.gitlab_url) {
@@ -24,7 +26,7 @@ function gitlabURL(state = '', action) {
     }
 }
 
-function organization(state = '', action) {
+function organization(state = '', action: {type: string, data: ConnectedData}) {
     switch (action.type) {
     case ActionTypes.RECEIVED_CONNECTED:
         if (action.data && action.data.organization) {
@@ -36,7 +38,7 @@ function organization(state = '', action) {
     }
 }
 
-function username(state = '', action) {
+function username(state = '', action: {type: string, data: ConnectedData}) {
     switch (action.type) {
     case ActionTypes.RECEIVED_CONNECTED:
         return action.data.gitlab_username;
@@ -51,7 +53,7 @@ function settings(
         daily_reminder: true,
         notifications: true,
     },
-    action,
+    action: {type: string, data: ConnectedData},
 ) {
     switch (action.type) {
     case ActionTypes.RECEIVED_CONNECTED:
@@ -61,7 +63,7 @@ function settings(
     }
 }
 
-function clientId(state = '', action) {
+function clientId(state = '', action: {type: string, data: ConnectedData}) {
     switch (action.type) {
     case ActionTypes.RECEIVED_CONNECTED:
         return action.data.gitlab_client_id;
@@ -70,7 +72,7 @@ function clientId(state = '', action) {
     }
 }
 
-function reviewDetails(state = [], action) {
+function reviewDetails(state = [], action: {type: string, data: Item}) {
     switch (action.type) {
     case ActionTypes.RECEIVED_REVIEW_DETAILS:
         return action.data;
@@ -79,7 +81,7 @@ function reviewDetails(state = [], action) {
     }
 }
 
-function yourPrDetails(state = [], action) {
+function yourPrDetails(state = [], action: {type: string, data: Item}) {
     switch (action.type) {
     case ActionTypes.RECEIVED_YOUR_PR_DETAILS:
         return action.data;
@@ -88,7 +90,7 @@ function yourPrDetails(state = [], action) {
     }
 }
 
-function lhsData(state = [], action) {
+function lhsData(state = [], action: {type: string, data: LHSData}) {
     switch (action.type) {
     case ActionTypes.RECEIVED_LHS_DATA:
         return action.data;
@@ -97,16 +99,7 @@ function lhsData(state = [], action) {
     }
 }
 
-function mentions(state = [], action) {
-    switch (action.type) {
-    case ActionTypes.RECEIVED_MENTIONS:
-        return action.data;
-    default:
-        return state;
-    }
-}
-
-function rhsPluginAction(state = null, action) {
+function rhsPluginAction(state = null, action: {type: string, showRHSPluginAction: ShowRhsPluginActionData}) {
     switch (action.type) {
     case ActionTypes.RECEIVED_SHOW_RHS_ACTION:
         return action.showRHSPluginAction;
@@ -115,7 +108,7 @@ function rhsPluginAction(state = null, action) {
     }
 }
 
-function rhsState(state = null, action) {
+function rhsState(state = null, action: {type: string, state: string}) {
     switch (action.type) {
     case ActionTypes.UPDATE_RHS_STATE:
         return action.state;
@@ -124,7 +117,7 @@ function rhsState(state = null, action) {
     }
 }
 
-function gitlabUsers(state = {}, action) {
+function gitlabUsers(state: Record<string, GitlabUsersData> = {}, action: {type: string, data: GitlabUsersData, userID: string}) {
     switch (action.type) {
     case ActionTypes.RECEIVED_GITLAB_USER: {
         const nextState = {...state};
@@ -136,7 +129,7 @@ function gitlabUsers(state = {}, action) {
     }
 }
 
-function subscriptions(state = {}, action) {
+function subscriptions(state: Record<string, SubscriptionData> = {}, action: {type: string, data: {channelId: string, subscriptions: SubscriptionData}}) {
     switch (action.type) {
     case ActionTypes.RECEIVED_CHANNEL_SUBSCRIPTIONS: {
         const nextState = {...state};
@@ -156,7 +149,6 @@ export default combineReducers({
     username,
     settings,
     clientId,
-    mentions,
     gitlabUsers,
     rhsPluginAction,
     rhsState,

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

@@ -3,8 +3,10 @@ import {getConfig} from 'mattermost-redux/selectors/entities/general';
 import {createSelector} from 'reselect';
 
 import manifest from '../manifest';
+import {Item} from 'src/types/gitlab_items';
+import {GlobalState, PluginState, pluginStateKey} from 'src/types/store';
 
-export const getPluginServerRoute = (state) => {
+export const getPluginServerRoute = (state: GlobalState) => {
     const config = getConfig(state);
 
     let basePath = '';
@@ -19,7 +21,7 @@ export const getPluginServerRoute = (state) => {
     return basePath + '/plugins/' + manifest.id;
 };
 
-function mapPrsToDetails(prs, details) {
+function mapPrsToDetails(prs: Item[], details: Item[]) {
     if (!prs || !prs.length) {
         return [];
     }
@@ -39,11 +41,11 @@ function mapPrsToDetails(prs, details) {
     });
 }
 
-export const getPluginState = (state) => state[`plugins-${manifest.id}`];
+export const getPluginState = (state: GlobalState) => state[`plugins-${manifest.id}` as pluginStateKey];
 
 export const getSidebarData = createSelector(
     getPluginState,
-    (pluginState) => {
+    (pluginState: PluginState) => {
         return {
             username: pluginState.username,
             reviewDetails: pluginState.reviewDetails,