Consider including a TypeScript definition file about redux-auth-wrapper

[goemen]

I am willing to help

[jaszczw]

I have something like this in my project. I am not an expert 'typescripter' myself, so if you notice something that could be improved I would appreciate feedback, but for all of cases that I have encountered it works properly.

declare module 'redux-auth-wrapper' {
  import {Component, ComponentClass, StatelessComponent, ReactNode} from 'react';

  interface UserAuthConfigObject {
    authSelector: (state, ownProps?) => any;
    authenticatingSelector?: (state, ownProps?) => Boolean;
    LoadingComponent?: Component<any, any>;
    FailureComponent?: Component<any, any>;
    failureRedirectPath?: String | ((state, ownProps?) => String);
    redirectQueryParamName?: String;
    redirectAction?: Function;
    wrapperDisplayName?: String;
    predicate?: (authData: any) => Boolean;
    allowRedirectBack?: Boolean | ((location, redirectPath) => Boolean);
    propMapper?: Function;
  }

  interface UserAuthWrapperReturn {
    onEnter: (state, nextState, replace) => any;
  }

  export type UserAuthWrapperDecorator = <TOriginalProps>(
    component: ComponentClass<TOriginalProps> | StatelessComponent<TOriginalProps> | ReactNode
  ) => ComponentClass<TOriginalProps> & UserAuthWrapperReturn;

  export function UserAuthWrapper(configObject: UserAuthConfigObject): UserAuthWrapperDecorator;
}

[jonaskello]

Including typings directly in this repo would be great! There are some typings at DefinitelyTyped that could be useful as a starting point.

[mjrussell]

Good suggestion, I'd be happy to include a typescript definition file if someone wants to work on this and submit a PR. Unfortunately I don't think that I have time to currently work on adding typescript support.

[gidich]

@mjrussell

I've created a minimalist typescript definition file for redux-auth-wrapper ( very lightweight, but gets the job done ) I can add to the typings directory or add to this project as a pull request, do you have any preferences?

index.d.ts

import * as React from 'react';

declare var UserAuthWrapper: any;

declare interface UserAuthWrapper extends React.Component<any,any> {
    children?: React.ReactElement<any>;
}

-Patrick

P.S. Thanks for creating this project, it's great!

[mjrussell]

@gidich does this work for you? UserAuthWrapper is a higher order component that first takes the config object and then returns a component. Im not very familiar with the type script syntax but it looks to me like you are saying UserAuthWrapper is a component with this defenition

[gidich]

@mjrussell this does indeed work for me, the approach I took was to add it to a separate type definition library.

I'll try to see if it also works for me within the actual library.

the following specifies that it is a higher order component:

children?: React.ReactElement<any>;

which specifies that the following is legal:

<Route path="foo" component={UserIsAuthenticated(Foo)}/>

[mjrussell]

Hmm but it is not being passed as children (because it is not rendered as a React Component in the Route definition, it is function being applied a component definition). I think it should look much more similar to the one from react-redux's connect. They behave very similarly to
https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/react-redux/react-redux-2.1.2.d.ts:

  export function connect(mapStateToProps?: MapStateToProps,
                          mapDispatchToProps?: MapDispatchToPropsFunction|MapDispatchToPropsObject,
                          mergeProps?: MergeProps,
                          options?: Options): ClassDecorator;

  interface MapStateToProps {
    (state: any, ownProps?: any): any;
  }

  interface MapDispatchToPropsFunction {
    (dispatch: Dispatch<any>, ownProps?: any): any;
  }

  interface MapDispatchToPropsObject {
    [name: string]: ActionCreator<any>;
  }

  interface MergeProps {
    (stateProps: any, dispatchProps: any, ownProps: any): any;
  }

  interface Options {
    /**
     * If true, implements shouldComponentUpdate and shallowly compares the result of mergeProps,
     * preventing unnecessary updates, assuming that the component is a “pure” component
     * and does not rely on any input or state other than its props and the selected Redux store’s state.
     * Defaults to true.
     * @default true
     */
    pure: boolean;
  }

Except there would be only an config arg with all the properties described in the Readme's API.

[mjrussell]

@klapek this looks great! I think it would be a great start for PR.

I'd like to keep the d.ts file co-located with the project, and probably add some tests, similar to what Definitively typed does - https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/react-redux

[mjrussell]

If you want to take that on yourself that would be awesome, otherwise you can get the PR started and I can try to add some of the additional stuff to it

[Kamahl19]

@mjrussell Hey, any update on typings?

[mjrussell]

@Kamahl19 have you tried using the ones from DefinitelyTyped?