Centralize all redux types into one place, add overrides for the connect, useSelector and useDispatch functions

packages/app/components/auth/PanelTransition.tsx

@@ -1,7 +1,8 @@
 import React, { CSSProperties, MouseEventHandler, ReactElement, ReactNode } from 'react';
+
 import { AccountsState } from 'app/components/accounts';
 import { User } from 'app/components/user';
-import { connect } from 'react-redux';
+import { connect } from 'app/functions';
 import { TransitionMotion, spring, PlainStyle, Style, TransitionStyle, TransitionPlainStyle } from 'react-motion';
 import { Panel, PanelBody, PanelFooter, PanelHeader } from 'app/components/ui/Panel';
 import { Form } from 'app/components/ui/form';
@@ -9,7 +10,6 @@ import MeasureHeight from 'app/components/MeasureHeight';
 import panelStyles from 'app/components/ui/panel.scss';
 import icons from 'app/components/ui/icons.scss';
 import authFlow from 'app/services/authFlow';
-import { RootState } from 'app/reducers';
 
 import { Provider as AuthContextProvider } from './Context';
 import { getLogin, State as AuthState } from './reducer';
@@ -546,7 +546,7 @@ class PanelTransition extends React.PureComponent<Props, State> {
 }
 
 export default connect(
-    (state: RootState) => {
+    (state) => {
         const login = getLogin(state);
         let user = {
             ...state.user,

packages/app/components/auth/actions.ts

@@ -23,7 +23,7 @@ import dispatchBsod from 'app/components/ui/bsod/dispatchBsod';
 import { create as createPopup } from 'app/components/ui/popup/actions';
 import ContactForm from 'app/components/contact';
 import { Account } from 'app/components/accounts/reducer';
-import { ThunkAction, Dispatch } from 'app/reducers';
+import { Action as AppAction, Dispatch } from 'app/types';
 import { Resp } from 'app/services/request';
 
 import { Credentials, Client, OAuthState, getCredentials } from './reducer';
@@ -189,7 +189,7 @@ export function register({
     );
 }
 
-export function activate({ key = '' }: { key: string }): ThunkAction<Promise<Account>> {
+export function activate({ key = '' }: { key: string }): AppAction<Promise<Account>> {
     return wrapInLoader((dispatch) =>
         activateEndpoint(key)
             .then(authHandler(dispatch))
@@ -239,7 +239,7 @@ export function setLogin(login: string | null): SetCredentialsAction {
     return setCredentials(login ? { login } : null);
 }
 
-export function relogin(login: string | null): ThunkAction {
+export function relogin(login: string | null): AppAction {
     return (dispatch, getState) => {
         const credentials = getCredentials(getState());
         const returnUrl = credentials.returnUrl || location.pathname + location.search;
@@ -266,7 +266,7 @@ function requestTotp({
     login: string;
     password: string;
     rememberMe: boolean;
-}): ThunkAction {
+}): AppAction {
     return (dispatch, getState) => {
         // merging with current credentials to propogate returnUrl
         const credentials = getCredentials(getState());
@@ -521,7 +521,7 @@ export function setOAuthCode(payload: { success: boolean; code: string; displayC
     };
 }
 
-export function resetOAuth(): ThunkAction {
+export function resetOAuth(): AppAction {
     return (dispatch): void => {
         localStorage.removeItem('oauthData');
         dispatch(setOAuthRequest({}));
@@ -531,7 +531,7 @@ export function resetOAuth(): ThunkAction {
 /**
  * Resets all temporary state related to auth
  */
-export function resetAuth(): ThunkAction {
+export function resetAuth(): AppAction {
     return (dispatch, getSate): Promise<void> => {
         dispatch(setLogin(null));
         dispatch(resetOAuth());
@@ -588,7 +588,7 @@ export function setLoadingState(isLoading: boolean): SetLoadingAction {
     };
 }
 
-function wrapInLoader<T>(fn: ThunkAction<Promise<T>>): ThunkAction<Promise<T>> {
+function wrapInLoader<T>(fn: AppAction<Promise<T>>): AppAction<Promise<T>> {
     return (dispatch, getState) => {
         dispatch(setLoadingState(true));
         const endLoading = () => dispatch(setLoadingState(false));
@@ -671,3 +671,12 @@ function validationErrorsHandler(
         return Promise.reject(resp);
     };
 }
+
+export type Action =
+    | ErrorAction
+    | CredentialsAction
+    | AccountSwitcherAction
+    | LoadingAction
+    | ClientAction
+    | OAuthAction
+    | ScopesAction;

packages/app/components/auth/finish/Finish.tsx

@@ -1,10 +1,10 @@
 import React, { MouseEventHandler } from 'react';
-import { connect } from 'react-redux';
 import { defineMessages, FormattedMessage as Message } from 'react-intl';
 import { Helmet } from 'react-helmet-async';
+
+import { connect } from 'app/functions';
 import { Button } from 'app/components/ui/form';
 import copy from 'app/services/copy';
-import { RootState } from 'app/reducers';
 
 import styles from './finish.scss';
 
@@ -104,7 +104,7 @@ class Finish extends React.Component<Props> {
     };
 }
 
-export default connect(({ auth }: RootState) => {
+export default connect(({ auth }) => {
     if (!auth || !auth.client || !auth.oauth) {
         throw new Error('Can not connect Finish component. No auth data in state');
     }

packages/app/components/auth/reducer.ts

@@ -1,6 +1,7 @@
 import { combineReducers, Reducer } from 'redux';
-import { RootState } from 'app/reducers';
-import { Scope } from '../../services/api/oauth';
+
+import { State as RootState } from 'app/types';
+import { Scope } from 'app/services/api/oauth';
 
 import {
     ErrorAction,