Fix type errors

index.d.ts

@@ -1,12 +1,12 @@
 import { Reducer } from 'redux'
+import {GenerateAuthActions} from './src/actions'
+import {GenerateRequireSignInWrapper} from './src/generate-require-signin-wrapper'
 import {
-  ActionsGeneratorExport,
-  GenerateRequireSignInWrapperConfig,
-  RequireSignInWrapper,
+  ReduxState,
 } from './src/types'
 
-export const reduxTokenAuthReducer: Reducer<{}>
+export const reduxTokenAuthReducer: Reducer<ReduxState>
 
-export const generateAuthActions: ActionsGeneratorExport
+export const generateAuthActions: GenerateAuthActions
 
-export const generateRequireSignInWrapper: (config: GenerateRequireSignInWrapperConfig) => RequireSignInWrapper
+export const generateRequireSignInWrapper: GenerateRequireSignInWrapper

package.json

@@ -50,6 +50,7 @@
     "axios": "^0.19.2",
     "react": "^16.13.1",
     "react-redux": "^7.2.0",
-    "redux": "^4.0.5"
+    "redux": "^4.0.5",
+    "redux-thunk": "^2.3.0"
   }
 }

src/actions.ts

@@ -1,6 +1,5 @@
 import axios from 'axios'
 import {
-  Dispatch,
   Store,
 } from 'redux'
 import {
@@ -11,7 +10,6 @@ import {
   UserRegistrationDetails,
   UserSignInCredentials,
   UserSignOutCredentials,
-  ActionsExport,
   REGISTRATION_REQUEST_SENT,
   REGISTRATION_REQUEST_SUCCEEDED,
   REGISTRATION_REQUEST_FAILED,
@@ -38,6 +36,7 @@ import {
   SignOutRequestSucceededAction,
   SignOutRequestFailedAction,
   SetHasVerificationBeenAttemptedAction,
+  AppThunk,
 } from './types'
 import AsyncLocalStorage from './AsyncLocalStorage'
 import {
@@ -122,7 +121,7 @@ export const setHasVerificationBeenAttempted = (
 // Async Redux Thunk actions:
 ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 
-const generateAuthActions = (config: { [key: string]: any }): ActionsExport => {
+const generateAuthActions = (config: { [key: string]: any }) => {
   const {
     authUrl,
     storage,
@@ -134,7 +133,7 @@ const generateAuthActions = (config: { [key: string]: any }): ActionsExport => {
 
   const registerUser = (
     userRegistrationDetails: UserRegistrationDetails,
-  ) => async function (dispatch: Dispatch<{}>): Promise<void> {
+  ): AppThunk => async function (dispatch) {
     dispatch(registrationRequestSent())
     const {
       email,
@@ -168,7 +167,7 @@ const generateAuthActions = (config: { [key: string]: any }): ActionsExport => {
 
   const verifyToken = (
     verificationParams: VerificationParams,
-  ) => async function (dispatch: Dispatch<{}>): Promise<void> {
+  ): AppThunk => async function (dispatch) {
     dispatch(verifyTokenRequestSent())
     try {
       const response = await axios({
@@ -187,7 +186,7 @@ const generateAuthActions = (config: { [key: string]: any }): ActionsExport => {
 
   const signInUser = (
     userSignInCredentials: UserSignInCredentials,
-  ) => async function (dispatch: Dispatch<{}>): Promise<void> {
+  ): AppThunk => async function (dispatch) {
     dispatch(signInRequestSent())
     const {
       email,
@@ -212,7 +211,7 @@ const generateAuthActions = (config: { [key: string]: any }): ActionsExport => {
     }
   }
 
-  const signOutUser = () => async function (dispatch: Dispatch<{}>): Promise<void> {
+  const signOutUser = (): AppThunk => async function (dispatch) {
     const userSignOutCredentials: UserSignOutCredentials = {
       'access-token': await Storage.getItem('access-token') as string,
       client: await Storage.getItem('client') as string,
@@ -257,3 +256,4 @@ const generateAuthActions = (config: { [key: string]: any }): ActionsExport => {
 }
 
 export default generateAuthActions
+export type GenerateAuthActions = typeof generateAuthActions

src/generate-require-signin-wrapper.tsx

@@ -1,31 +1,35 @@
 import * as React from 'react'
-import { ComponentClass } from 'react'
-import { connect } from 'react-redux'
+import { connect, ConnectedProps } from 'react-redux'
 import {
   GenerateRequireSignInWrapperConfig,
   ReduxState,
-  RequireSignInWrapper,
 } from './types'
 
 const generateRequireSignInWrapper = (
   { redirectPathIfNotSignedIn }: GenerateRequireSignInWrapperConfig
-): RequireSignInWrapper => {
-  const requireSignInWrapper = (PageComponent: ComponentClass): ComponentClass => {
-    interface WrapperProps {
-      readonly hasVerificationBeenAttempted: boolean
-      readonly isSignedIn: boolean
+) => {
+  const requireSignInWrapper = (PageComponent: React.ComponentClass | React.FunctionComponent) => {
+
+    const mapStateToProps = (state: ReduxState) => ({
+      hasVerificationBeenAttempted: state.reduxTokenAuth.currentUser.hasVerificationBeenAttempted,
+      isSignedIn: state.reduxTokenAuth.currentUser.isSignedIn
+    })
+
+    const connector = connect(mapStateToProps)
+    type PropsFromRedux = ConnectedProps<typeof connector>
+
+    type Props = PropsFromRedux & {
       readonly history: {
         readonly replace: (path: string) => void
       }
     }
-
-    class GatedPage extends React.Component<WrapperProps> {
-      public componentWillReceiveProps(nextProps: WrapperProps): void {
+    class GatedPage extends React.Component<Props> {
+      public componentDidUpdate() {
         const {
           history,
           hasVerificationBeenAttempted,
           isSignedIn,
-        } = nextProps
+        } = this.props
         if (hasVerificationBeenAttempted && !isSignedIn) {
           history.replace(redirectPathIfNotSignedIn)
         }
@@ -44,11 +48,6 @@ const generateRequireSignInWrapper = (
       }
     }
 
-    const mapStateToProps = (state: ReduxState) => ({
-      hasVerificationBeenAttempted: state.reduxTokenAuth.currentUser.hasVerificationBeenAttempted,
-      isSignedIn: state.reduxTokenAuth.currentUser.isSignedIn
-    })
-
     return connect(
       mapStateToProps,
     )(GatedPage)
@@ -58,3 +57,4 @@ const generateRequireSignInWrapper = (
 }
 
 export default generateRequireSignInWrapper
+export type GenerateRequireSignInWrapper = typeof generateRequireSignInWrapper

src/reducers/index.ts

@@ -1,10 +1,9 @@
 import {
   combineReducers,
-  Reducer,
 } from 'redux'
 import currentUser from './current-user'
 
-const reduxTokenAuthReducer: Reducer<{}> = combineReducers({
+const reduxTokenAuthReducer = combineReducers({
   currentUser,
 })
 

src/types.ts

@@ -1,8 +1,8 @@
-import { ComponentClass } from 'react'
 import {
-  Dispatch,
   Store,
+  Action
 } from 'redux'
+import { ThunkAction } from 'redux-thunk'
 
 export interface UserAttributes {
   [key: string]: string | number | null
@@ -179,7 +179,15 @@ export type ReduxAction = RegistrationRequestSentAction
   | SignOutRequestFailedAction
   | SetHasVerificationBeenAttemptedAction
 
-export type ReduxAsyncAction = (input?: any) => (dispatch: Dispatch<{}>) => Promise<void>
+
+export type AppThunk<ReturnType = Promise<void>> = ThunkAction<
+  ReturnType,
+  ReduxState,
+  unknown,
+  Action<string>
+>
+
+export type ReduxAsyncAction = (input?: any) => AppThunk
 
 export type VerifyCredentialsFunction = (store: Store<{}>) => void
 
@@ -201,7 +209,7 @@ export interface GenerateRequireSignInWrapperConfig {
   readonly redirectPathIfNotSignedIn: string
 }
 
-export type RequireSignInWrapper = (PageComponent: ComponentClass) => ComponentClass
+// export type RequireSignInWrapper = (PageComponent: ComponentClass) => ComponentClass
 
 export interface DeviceStorage {
   readonly getItem: (key: string) => Promise<any>