[RFR] Migrate ra-core controllers to TypeScript

package.json

@@ -50,10 +50,10 @@
         "lolex": "~2.3.2",
         "prettier": "~1.16.4",
         "raf": "~3.4.0",
-        "ts-jest": "^23.10.4",
-        "tslint": "^5.11.0",
-        "tslint-config-prettier": "^1.15.0",
-        "tslint-plugin-prettier": "^2.0.0",
+        "ts-jest": "^23.10.5",
+        "tslint": "^5.12.1",
+        "tslint-config-prettier": "^1.18.0",
+        "tslint-plugin-prettier": "^2.0.1",
         "tslint-react": "^3.6.0",
         "wait-on": "^2.1.0"
     },
@@ -63,6 +63,6 @@
         "cypress"
     ],
     "dependencies": {
-        "typescript": "^3.1.3"
+        "typescript": "^3.3.3"
     }
 }

packages/ra-core/src/actions/accumulateActions.ts

@@ -1,12 +1,13 @@
 import { crudGetMany, crudGetMatching } from './dataActions';
+import { Pagination, Sort } from '../types';
 
 export const CRUD_GET_MANY_ACCUMULATE = 'RA/CRUD_GET_MANY_ACCUMULATE';
 
 export interface CrudGetManyAccumulateAction {
     readonly type: typeof CRUD_GET_MANY_ACCUMULATE;
     readonly payload: {
         resource: string;
-        ids: [];
+        ids: any[];
     };
     readonly meta: {
         accumulate: any;
@@ -15,7 +16,7 @@ export interface CrudGetManyAccumulateAction {
 
 export const crudGetManyAccumulate = (
     resource: string,
-    ids: []
+    ids: any[]
 ): CrudGetManyAccumulateAction => ({
     type: CRUD_GET_MANY_ACCUMULATE,
     payload: { resource, ids },
@@ -36,8 +37,8 @@ export interface CrudGetMatchingAccumulateAction {
 export const crudGetMatchingAccumulate = (
     reference: string,
     relatedTo: string,
-    pagination: { page: number; perPage: number },
-    sort: { field: string; order: string },
+    pagination: Pagination,
+    sort: Sort,
     filter: object
 ): CrudGetMatchingAccumulateAction => {
     const action = crudGetMatching(

packages/ra-core/src/actions/listActions.ts

@@ -1,6 +1,6 @@
 export const CRUD_CHANGE_LIST_PARAMS = 'RA/CRUD_CHANGE_LIST_PARAMS';
 
-interface Params {
+export interface ListParams {
     sort: string;
     order: string;
     page: number;
@@ -10,12 +10,13 @@ interface Params {
 
 export interface ChangeListParamsAction {
     readonly type: typeof CRUD_CHANGE_LIST_PARAMS;
-    readonly payload: Params;
+    readonly payload: ListParams;
     readonly meta: { resource: string };
 }
+
 export const changeListParams = (
     resource: string,
-    params: Params
+    params: ListParams
 ): ChangeListParamsAction => ({
     type: CRUD_CHANGE_LIST_PARAMS,
     payload: params,

packages/ra-core/src/controller/CreateController.spec.js → packages/ra-core/src/controller/CreateController.spec.tsx

@@ -1,17 +1,27 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 
-import { CreateController } from './CreateController';
+import { CreateControllerView as CreateController } from './CreateController';
 
 describe('CreateController', () => {
     describe('Presetting the record from the location', () => {
         const defaultProps = {
             basePath: '',
-            crudCreate: () => {},
+            crudCreate: jest.fn(),
+            hasCreate: true,
+            hasEdit: true,
+            hasList: true,
+            hasShow: true,
             isLoading: false,
-            location: {},
-            match: {},
+            location: {
+                pathname: '/foo',
+                search: undefined,
+                state: undefined,
+                hash: undefined,
+            },
+            match: { isExact: true, path: '/foo', params: undefined, url: '' },
             resource: 'foo',
+            title: 'Foo',
             translate: x => x,
         };
 
@@ -33,7 +43,10 @@ describe('CreateController', () => {
             const props = {
                 ...defaultProps,
                 children: childrenMock,
-                location: { state: { record: { foo: 'bar' } } },
+                location: {
+                    ...defaultProps.location,
+                    state: { record: { foo: 'bar' } },
+                },
             };
 
             shallow(<CreateController {...props} />);
@@ -47,7 +60,10 @@ describe('CreateController', () => {
             const props = {
                 ...defaultProps,
                 children: childrenMock,
-                location: { search: '?foo=baz&array[]=1&array[]=2' },
+                location: {
+                    ...defaultProps.location,
+                    search: '?foo=baz&array[]=1&array[]=2',
+                },
             };
 
             shallow(<CreateController {...props} />);
@@ -64,6 +80,7 @@ describe('CreateController', () => {
                 ...defaultProps,
                 children: childrenMock,
                 location: {
+                    ...defaultProps.location,
                     state: { record: { foo: 'bar' } },
                     search: '?foo=baz',
                 },

packages/ra-core/src/controller/CreateController.js → packages/ra-core/src/controller/CreateController.tsx

@@ -1,13 +1,44 @@
-import { Component } from 'react';
-import PropTypes from 'prop-types';
+import { Component, ReactNode } from 'react';
 import { connect } from 'react-redux';
 import compose from 'recompose/compose';
 import inflection from 'inflection';
 import { parse } from 'query-string';
 
-import translate from '../i18n/translate';
+import withTranslate from '../i18n/translate';
 import { crudCreate as crudCreateAction } from '../actions';
 import checkMinimumRequiredProps from './checkMinimumRequiredProps';
+import { Location } from 'history';
+import { match as Match } from 'react-router';
+import { Record, Translate, Dispatch } from '../types';
+import { RedirectionSideEffect } from '../sideEffect';
+
+interface ChildrenFuncParams {
+    isLoading: boolean;
+    defaultTitle: string;
+    save: (record: Partial<Record>, redirect: RedirectionSideEffect) => void;
+    resource: string;
+    basePath: string;
+    record?: Record;
+    redirect: RedirectionSideEffect;
+    translate: Translate;
+}
+
+interface Props {
+    basePath: string;
+    children: (params: ChildrenFuncParams) => ReactNode;
+    crudCreate: Dispatch<typeof crudCreateAction>;
+    hasCreate: boolean;
+    hasEdit: boolean;
+    hasList: boolean;
+    hasShow: boolean;
+    isLoading: boolean;
+    location: Location;
+    match: Match;
+    record?: Record;
+    resource: string;
+    title: string | ReactNode;
+    translate: Translate;
+}
 
 /**
  * Page component for the Create view
@@ -50,7 +81,13 @@ import checkMinimumRequiredProps from './checkMinimumRequiredProps';
  *     );
  *     export default App;
  */
-export class CreateController extends Component {
+export class CreateControllerView extends Component<Props> {
+    public static defaultProps = {
+        record: {},
+    };
+
+    private record;
+
     constructor(props) {
         super(props);
         const {
@@ -67,12 +104,16 @@ export class CreateController extends Component {
 
     defaultRedirectRoute() {
         const { hasShow, hasEdit } = this.props;
-        if (hasEdit) return 'edit';
-        if (hasShow) return 'show';
+        if (hasEdit) {
+            return 'edit';
+        }
+        if (hasShow) {
+            return 'show';
+        }
         return 'list';
     }
 
-    save = (record, redirect) => {
+    save = (record: Partial<Record>, redirect: RedirectionSideEffect) => {
         this.props.crudCreate(
             this.props.resource,
             record,
@@ -90,7 +131,9 @@ export class CreateController extends Component {
             translate,
         } = this.props;
 
-        if (!children) return null;
+        if (!children) {
+            return null;
+        }
 
         const resourceName = translate(`resources.${resource}.name`, {
             smart_count: 1,
@@ -112,38 +155,19 @@ export class CreateController extends Component {
     }
 }
 
-CreateController.propTypes = {
-    basePath: PropTypes.string.isRequired,
-    children: PropTypes.func.isRequired,
-    crudCreate: PropTypes.func.isRequired,
-    hasCreate: PropTypes.bool,
-    hasEdit: PropTypes.bool,
-    hasList: PropTypes.bool,
-    hasShow: PropTypes.bool,
-    isLoading: PropTypes.bool.isRequired,
-    location: PropTypes.object.isRequired,
-    match: PropTypes.object.isRequired,
-    record: PropTypes.object,
-    resource: PropTypes.string.isRequired,
-    title: PropTypes.any,
-    translate: PropTypes.func.isRequired,
-};
-
-CreateController.defaultProps = {
-    record: {},
-};
-
 function mapStateToProps(state) {
     return {
         isLoading: state.admin.loading > 0,
     };
 }
 
-export default compose(
+const CreateController = compose(
     checkMinimumRequiredProps('Create', ['basePath', 'location', 'resource']),
     connect(
         mapStateToProps,
         { crudCreate: crudCreateAction }
     ),
-    translate
-)(CreateController);
+    withTranslate
+)(CreateControllerView);
+
+export default CreateController;