Convert files related to redux from js to ts

webapp/src/actions/index.ts

@@ -7,13 +7,13 @@ 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 {APIError, ConnectedData, GitlabUsersData, LHSData, ShowRhsPluginActionData, SubscriptionData} 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: Dispatch<AnyAction>) => {
-        let data;
+        let data: ConnectedData;
         try {
             data = await Client.getConnected(reminder);
         } catch (error) {
@@ -29,7 +29,7 @@ export function getConnected(reminder = false) {
     };
 }
 
-function checkAndHandleNotConnected(data: {id: string}) {
+function checkAndHandleNotConnected(data: APIError) {
     return async (dispatch: Dispatch<AnyAction>) => {
         if (data && data.id === 'not_connected') {
             dispatch({
@@ -39,7 +39,7 @@ function checkAndHandleNotConnected(data: {id: string}) {
                     gitlab_username: '',
                     gitlab_client_id: '',
                     settings: {},
-                },
+                } as ConnectedData,
             });
             return false;
         }
@@ -49,14 +49,14 @@ function checkAndHandleNotConnected(data: {id: string}) {
 
 export function getReviewDetails(prList: Item[]) {
     return async (dispatch: Dispatch<AnyAction>) => {
-        let data;
+        let data: Item | APIError;
         try {
             data = await Client.getPrsDetails(prList);
         } catch (error) {
             return {error};
         }
 
-        const connected = await checkAndHandleNotConnected(data)(dispatch);
+        const connected = await checkAndHandleNotConnected(data as APIError)(dispatch);
         if (!connected) {
             return {error: data};
         }
@@ -72,14 +72,14 @@ export function getReviewDetails(prList: Item[]) {
 
 export function getYourPrDetails(prList: Item[]) {
     return async (dispatch: Dispatch<AnyAction>) => {
-        let data;
+        let data: Item | APIError;
         try {
             data = await Client.getPrsDetails(prList);
         } catch (error) {
             return {error};
         }
 
-        const connected = await checkAndHandleNotConnected(data)(dispatch);
+        const connected = await checkAndHandleNotConnected(data as APIError)(dispatch);
         if (!connected) {
             return {error: data};
         }
@@ -95,14 +95,14 @@ export function getYourPrDetails(prList: Item[]) {
 
 export function getLHSData() {
     return async (dispatch: Dispatch<AnyAction>) => {
-        let data;
+        let data: LHSData | APIError;
         try {
             data = await Client.getLHSData();
         } catch (error) {
             return {error};
         }
 
-        const connected = await checkAndHandleNotConnected(data)(dispatch);
+        const connected = await checkAndHandleNotConnected(data as APIError)(dispatch);
         if (!connected) {
             return {error: data};
         }
@@ -155,7 +155,7 @@ export function getGitlabUser(userID: string) {
             return {data: user};
         }
 
-        let data;
+        let data: GitlabUsersData;
         try {
             data = await Client.getGitlabUser(userID);
         } catch (error: unknown) {
@@ -185,7 +185,7 @@ export function getChannelSubscriptions(channelId: string) {
             return {};
         }
 
-        let subscriptions;
+        let subscriptions: SubscriptionData;
         try {
             subscriptions = await Client.getChannelSubscriptions(channelId);
         } catch (error) {

webapp/src/components/rhs_sidebar/rhs_sidebar.css

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

webapp/src/reducers/index.ts

@@ -1,20 +1,20 @@
-import {combineReducers} from 'redux';
+import {combineReducers, Reducer} 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: {type: string, data: ConnectedData}) {
+const connected: Reducer<boolean, {type: string, data: ConnectedData}> = (state = false, action) => {
     switch (action.type) {
     case ActionTypes.RECEIVED_CONNECTED:
         return action.data.connected;
     default:
         return state;
     }
-}
+};
 
-function gitlabURL(state = '', action: {type: string, data: ConnectedData}) {
+const gitlabURL: Reducer<string, {type: string, data: ConnectedData}> = (state = '', action) => {
     switch (action.type) {
     case ActionTypes.RECEIVED_CONNECTED:
         if (action.data && action.data.gitlab_url) {
@@ -24,9 +24,9 @@ function gitlabURL(state = '', action: {type: string, data: ConnectedData}) {
     default:
         return state;
     }
-}
+};
 
-function organization(state = '', action: {type: string, data: ConnectedData}) {
+const organization: Reducer<string, {type: string, data: ConnectedData}> = (state = '', action) => {
     switch (action.type) {
     case ActionTypes.RECEIVED_CONNECTED:
         if (action.data && action.data.organization) {
@@ -36,68 +36,69 @@ function organization(state = '', action: {type: string, data: ConnectedData}) {
     default:
         return state;
     }
-}
+};
 
-function username(state = '', action: {type: string, data: ConnectedData}) {
+const username: Reducer<string, {type: string, data: ConnectedData}> = (state = '', action) => {
     switch (action.type) {
     case ActionTypes.RECEIVED_CONNECTED:
         return action.data.gitlab_username;
     default:
         return state;
     }
-}
-
-function settings(
-    state = {
-        sidebar_buttons: Constants.SETTING_BUTTONS_TEAM,
-        daily_reminder: true,
-        notifications: true,
-    },
-    action: {type: string, data: ConnectedData},
-) {
+};
+
+const settings: Reducer<{
+    sidebar_buttons: string,
+    daily_reminder: boolean,
+    notifications: boolean,
+}, {type: string, data: ConnectedData}> = (state = {
+    sidebar_buttons: Constants.SETTING_BUTTONS_TEAM,
+    daily_reminder: true,
+    notifications: true,
+}, action) => {
     switch (action.type) {
     case ActionTypes.RECEIVED_CONNECTED:
         return action.data.settings;
     default:
         return state;
     }
-}
+};
 
-function clientId(state = '', action: {type: string, data: ConnectedData}) {
+const clientId: Reducer<string, {type: string, data: ConnectedData}> = (state = '', action) => {
     switch (action.type) {
     case ActionTypes.RECEIVED_CONNECTED:
         return action.data.gitlab_client_id;
     default:
         return state;
     }
-}
+};
 
-function reviewDetails(state = [], action: {type: string, data: Item}) {
+const reviewDetails: Reducer<Item[] | null, {type: string, data: Item[]}> = (state = [], action) => {
     switch (action.type) {
     case ActionTypes.RECEIVED_REVIEW_DETAILS:
         return action.data;
     default:
         return state;
     }
-}
+};
 
-function yourPrDetails(state = [], action: {type: string, data: Item}) {
+const yourPrDetails: Reducer<Item[] | null, {type: string, data: Item[]}> = (state = [], action) => {
     switch (action.type) {
     case ActionTypes.RECEIVED_YOUR_PR_DETAILS:
         return action.data;
     default:
         return state;
     }
-}
+};
 
-function lhsData(state = [], action: {type: string, data: LHSData}) {
+const lhsData: Reducer<LHSData | null, {type: string, data: LHSData}> = (state = null, action) => {
     switch (action.type) {
     case ActionTypes.RECEIVED_LHS_DATA:
         return action.data;
     default:
         return state;
     }
-}
+};
 
 function rhsPluginAction(state = null, action: {type: string, showRHSPluginAction: ShowRhsPluginActionData}) {
     switch (action.type) {
@@ -108,16 +109,16 @@ function rhsPluginAction(state = null, action: {type: string, showRHSPluginActio
     }
 }
 
-function rhsState(state = null, action: {type: string, state: string}) {
+const rhsState: Reducer<string | null, {type: string, state: string}> = (state = null, action) => {
     switch (action.type) {
     case ActionTypes.UPDATE_RHS_STATE:
         return action.state;
     default:
         return state;
     }
-}
+};
 
-function gitlabUsers(state: Record<string, GitlabUsersData> = {}, action: {type: string, data: GitlabUsersData, userID: string}) {
+const gitlabUsers: Reducer<Record<string, GitlabUsersData>, {type: string, data: GitlabUsersData, userID: string}> = (state = {}, action) => {
     switch (action.type) {
     case ActionTypes.RECEIVED_GITLAB_USER: {
         const nextState = {...state};
@@ -127,9 +128,9 @@ function gitlabUsers(state: Record<string, GitlabUsersData> = {}, action: {type:
     default:
         return state;
     }
-}
+};
 
-function subscriptions(state: Record<string, SubscriptionData> = {}, action: {type: string, data: {channelId: string, subscriptions: SubscriptionData}}) {
+const subscriptions: Reducer<Record<string, SubscriptionData>, {type: string, data: {channelId: string, subscriptions: SubscriptionData}}> = (state = {}, action) => {
     switch (action.type) {
     case ActionTypes.RECEIVED_CHANNEL_SUBSCRIPTIONS: {
         const nextState = {...state};
@@ -140,7 +141,7 @@ function subscriptions(state: Record<string, SubscriptionData> = {}, action: {ty
     default:
         return state;
     }
-}
+};
 
 export default combineReducers({
     connected,

webapp/src/selectors/index.ts

@@ -5,6 +5,7 @@ import {createSelector} from 'reselect';
 import manifest from '../manifest';
 import {Item} from 'src/types/gitlab_items';
 import {GlobalState, PluginState, pluginStateKey} from 'src/types/store';
+import {SideBarData} from 'src/types';
 
 export const getPluginServerRoute = (state: GlobalState) => {
     const config = getConfig(state);
@@ -21,7 +22,7 @@ export const getPluginServerRoute = (state: GlobalState) => {
     return basePath + '/plugins/' + manifest.id;
 };
 
-function mapPrsToDetails(prs: Item[], details: Item[]) {
+function mapPrsToDetails(prs?: Item[], details?: Item[]): Item[] {
     if (!prs || !prs.length) {
         return [];
     }
@@ -49,18 +50,18 @@ export const getSidebarData = createSelector(
         return {
             username: pluginState.username,
             reviewDetails: pluginState.reviewDetails,
-            reviews: mapPrsToDetails(pluginState.lhsData?.reviews, pluginState.reviewDetails),
-            yourAssignedPrs: mapPrsToDetails(pluginState.lhsData?.yourAssignedPrs, pluginState.yourPrDetails),
+            reviews: mapPrsToDetails(pluginState.lhsData?.reviews, pluginState.reviewDetails || []),
+            yourAssignedPrs: mapPrsToDetails(pluginState.lhsData?.yourAssignedPrs, pluginState.yourPrDetails || []),
             yourPrDetails: pluginState.yourPrDetails,
             yourAssignedIssues: pluginState.lhsData?.yourAssignedIssues,
             todos: pluginState.lhsData?.todos,
             org: pluginState.organization,
             gitlabURL: pluginState.gitlabURL,
             rhsState: pluginState.rhsState,
-        };
+        } as SideBarData;
     },
 );
 
-export const getConnected = (state) => state[`plugins-${manifest.id}`].connected;
+export const getConnected = (state: GlobalState) => getPluginState(state).connected;
 
-export const getConnectedGitlabUrl = (state) => state[`plugins-${manifest.id}`].gitlabURL;
+export const getConnectedGitlabUrl = (state: GlobalState) => getPluginState(state).gitlabURL;

webapp/src/types/index.ts

@@ -45,3 +45,16 @@ export type APIError = {
     message: string;
     status: number;
 }
+
+export type SideBarData = {
+    username: string;
+    reviewDetails: Item[];
+    reviews: Item[];
+    yourAssignedPrs: Item[];
+    yourPrDetails: Item[];
+    yourAssignedIssues: Item[];
+    todos: Item[];
+    org: string;
+    gitlabURL: string;
+    rhsState: string;
+}

webapp/src/types/store.ts

@@ -1,26 +1,11 @@
 import {GlobalState as ReduxGlobalState} from 'mattermost-redux/types/store';
 
-import {Item} from './gitlab_items';
-
-import {GitlabUsersData, LHSData, ShowRhsPluginActionData, UserSettingsData} from '.';
+import combinedReducers from '../reducers';
 
 export type GlobalState = ReduxGlobalState & {
     'plugins-com.github.manland.mattermost-plugin-gitlab': PluginState
 };
 
-export type PluginState = {
-    connected: boolean,
-    gitlabURL: string,
-    organization: string,
-    username: string,
-    reviewDetails: Item[],
-    yourPrDetails: Item[],
-    lhsData: LHSData,
-    rhsState: string,
-    settings: UserSettingsData,
-    gitlab_client_id: string;
-    gitlabUsers: Record<string, GitlabUsersData>,
-    rhsPluginAction: ShowRhsPluginActionData,
-};
+export type PluginState = ReturnType<typeof combinedReducers>
 
 export type pluginStateKey = 'plugins-com.github.manland.mattermost-plugin-gitlab'