[RFR] Migrate ra-core controllers to TypeScript

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

@@ -6,16 +6,19 @@ export interface CrudGetManyAccumulateAction {
     readonly type: typeof CRUD_GET_MANY_ACCUMULATE;
     readonly payload: {
         resource: string;
-        ids: [];
+        ids: any[];
     };
     readonly meta: {
         accumulate: any;
     };
 }
 
+// Used to type the dispatcher function (the one injected by mapDispatchToProps)
+export type CrudGetManyAccumulate = (resource: string, ids: any[]) => void;
+
 export const crudGetManyAccumulate = (
     resource: string,
-    ids: []
+    ids: any[]
 ): CrudGetManyAccumulateAction => ({
     type: CRUD_GET_MANY_ACCUMULATE,
     payload: { resource, ids },

packages/ra-core/src/actions/dataActions/crudGetManyReference.ts

@@ -3,6 +3,17 @@ import { GET_MANY_REFERENCE } from '../../dataFetchActions';
 import { FETCH_END, FETCH_ERROR } from '../fetchActions';
 import { NotificationSideEffect } from '../../sideEffect';
 
+export type CrudGetManyReference = (
+    reference: string,
+    target: string,
+    id: Identifier,
+    relatedTo: string,
+    pagination: Pagination,
+    sort: Sort,
+    filter: object,
+    source: string
+) => void;
+
 export const crudGetManyReference = (
     reference: string,
     target: string,

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

@@ -1,22 +1,24 @@
 import React from 'react';
 import assert from 'assert';
 import { shallow } from 'enzyme';
-import { ReferenceArrayFieldController } from './ReferenceArrayFieldController';
+import { ReferenceArrayFieldControllerView as ReferenceArrayFieldController } from './ReferenceArrayFieldController';
 
 describe('<ReferenceArrayFieldController />', () => {
+    const crudGetManyAccumulate = jest.fn();
+
     it('should set the loadedOnce prop to false when related records are not yet fetched', () => {
         const children = jest.fn();
 
         shallow(
             <ReferenceArrayFieldController
-                record={{ barIds: [1, 2] }}
+                record={{ id: 1, barIds: [1, 2] }}
                 resource="foo"
                 reference="bar"
                 source="barIds"
                 basePath=""
                 data={null}
                 ids={[1, 2]}
-                crudGetManyAccumulate={() => {}}
+                crudGetManyAccumulate={crudGetManyAccumulate}
             >
                 {children}
             </ReferenceArrayFieldController>
@@ -29,14 +31,14 @@ describe('<ReferenceArrayFieldController />', () => {
 
         shallow(
             <ReferenceArrayFieldController
-                record={{ barIds: [1, 2] }}
+                record={{ id: 1, barIds: [1, 2] }}
                 resource="foo"
                 reference="bar"
                 source="barIds"
                 basePath=""
                 data={{ 1: { id: 1 } }}
                 ids={[1, 2]}
-                crudGetManyAccumulate={() => {}}
+                crudGetManyAccumulate={crudGetManyAccumulate}
             >
                 {children}
             </ReferenceArrayFieldController>
@@ -53,14 +55,14 @@ describe('<ReferenceArrayFieldController />', () => {
         };
         shallow(
             <ReferenceArrayFieldController
-                record={{ barIds: [1, 2] }}
+                record={{ id: 1, barIds: [1, 2] }}
                 resource="foo"
                 reference="bar"
                 source="barIds"
                 basePath=""
                 data={data}
                 ids={[1, 2]}
-                crudGetManyAccumulate={() => {}}
+                crudGetManyAccumulate={crudGetManyAccumulate}
             >
                 {children}
             </ReferenceArrayFieldController>
@@ -78,14 +80,14 @@ describe('<ReferenceArrayFieldController />', () => {
         };
         shallow(
             <ReferenceArrayFieldController
-                record={{ barIds: ['abc-1', 'abc-2'] }}
+                record={{ id: 1, barIds: ['abc-1', 'abc-2'] }}
                 resource="foo"
                 reference="bar"
                 source="barIds"
                 basePath=""
                 data={data}
                 ids={['abc-1', 'abc-2']}
-                crudGetManyAccumulate={() => {}}
+                crudGetManyAccumulate={crudGetManyAccumulate}
             >
                 {children}
             </ReferenceArrayFieldController>
@@ -103,14 +105,14 @@ describe('<ReferenceArrayFieldController />', () => {
         };
         shallow(
             <ReferenceArrayFieldController
-                record={{ barIds: [1, 2] }}
+                record={{ id: 1, barIds: [1, 2] }}
                 resource="foo"
                 reference="bar"
                 source="barIds"
                 basePath=""
                 data={data}
                 ids={[1, 2]}
-                crudGetManyAccumulate={() => {}}
+                crudGetManyAccumulate={crudGetManyAccumulate}
             >
                 {children}
             </ReferenceArrayFieldController>

packages/ra-core/src/controller/field/ReferenceArrayFieldController.js → packages/ra-core/src/controller/field/ReferenceArrayFieldController.tsx

@@ -1,10 +1,33 @@
-import { Component } from 'react';
-import PropTypes from 'prop-types';
+import { Component, ReactNode } from 'react';
 import { connect } from 'react-redux';
 import get from 'lodash/get';
 
-import { crudGetManyAccumulate as crudGetManyAccumulateAction } from '../../actions';
+import {
+    crudGetManyAccumulate as crudGetManyAccumulateAction,
+    CrudGetManyAccumulate,
+} from '../../actions';
 import { getReferencesByIds } from '../../reducer/admin/references/oneToMany';
+import { ReduxState, Record, RecordMap } from '../../types';
+
+interface ChildrenFuncParams {
+    loadedOnce: boolean;
+    ids: any[];
+    data: RecordMap;
+    referenceBasePath: string;
+    currentSort: any;
+}
+
+interface Props {
+    basePath: string;
+    children: (params: ChildrenFuncParams) => ReactNode;
+    crudGetManyAccumulate: CrudGetManyAccumulate;
+    data?: RecordMap;
+    ids: any[];
+    record?: Record;
+    reference: string;
+    resource: string;
+    source: string;
+}
 
 /**
  * A container component that fetches records from another resource specified
@@ -38,13 +61,16 @@ import { getReferencesByIds } from '../../reducer/admin/references/oneToMany';
  * </ReferenceArrayField>
  *
  */
-export class ReferenceArrayFieldController extends Component {
+export class ReferenceArrayFieldControllerView extends Component<Props> {
     componentDidMount() {
         this.fetchReferences();
     }
 
     componentWillReceiveProps(nextProps) {
-        if ((this.props.record || {}).id !== (nextProps.record || {}).id) {
+        if (
+            (this.props.record || { id: undefined }).id !==
+            (nextProps.record || {}).id
+        ) {
             this.fetchReferences(nextProps);
         }
     }
@@ -66,6 +92,7 @@ export class ReferenceArrayFieldController extends Component {
         const referenceBasePath = basePath.replace(resource, reference); // FIXME obviously very weak
 
         return children({
+            // tslint:disable-next-line:triple-equals
             loadedOnce: data != undefined,
             ids,
             data,
@@ -75,24 +102,7 @@ export class ReferenceArrayFieldController extends Component {
     }
 }
 
-ReferenceArrayFieldController.propTypes = {
-    addLabel: PropTypes.bool,
-    basePath: PropTypes.string.isRequired,
-    classes: PropTypes.object,
-    className: PropTypes.string,
-    children: PropTypes.func.isRequired,
-    crudGetManyAccumulate: PropTypes.func.isRequired,
-    data: PropTypes.object,
-    ids: PropTypes.array.isRequired,
-    label: PropTypes.string,
-    record: PropTypes.object.isRequired,
-    reference: PropTypes.string.isRequired,
-    resource: PropTypes.string.isRequired,
-    sortBy: PropTypes.string,
-    source: PropTypes.string.isRequired,
-};
-
-const mapStateToProps = (state, props) => {
+const mapStateToProps = (state: ReduxState, props: Props) => {
     const { record, source, reference } = props;
     const ids = get(record, source) || [];
     return {
@@ -101,9 +111,11 @@ const mapStateToProps = (state, props) => {
     };
 };
 
-export default connect(
+const ReferenceArrayFieldController = connect(
     mapStateToProps,
     {
         crudGetManyAccumulate: crudGetManyAccumulateAction,
     }
-)(ReferenceArrayFieldController);
+)(ReferenceArrayFieldControllerView);
+
+export default ReferenceArrayFieldController;