Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[RFR] add UseReferenceArrayField hook #3294

Merged
merged 7 commits into from
Jun 4, 2019
Merged

[RFR] add UseReferenceArrayField hook #3294

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
2487df1
convert ReferenceArrayFieldController to a functional component
ThieryMichel Jun 2, 2019
2cf5659
use hook to connect ReferenceArrayFieldController
ThieryMichel Jun 2, 2019
23f4828
add useReferenceArray hooks
ThieryMichel Jun 2, 2019
eb15b3b
update test
ThieryMichel Jun 2, 2019
efe7347
use useRefeenceArray hhoks into ReferenceArrayField
ThieryMichel Jun 2, 2019
39ada08
add jsdoc
ThieryMichel Jun 2, 2019
1218892
Merge branch 'next' into useReferenceArrayField
fzaninotto Jun 4, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
181 changes: 120 additions & 61 deletions packages/ra-core/src/controller/field/ReferenceArrayFieldController.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,124 +1,183 @@
import React from 'react';
import assert from 'assert';
import { shallow } from 'enzyme';
import { UnconnectedReferenceArrayFieldController as ReferenceArrayFieldController } from './ReferenceArrayFieldController';
import { cleanup } from 'react-testing-library';

describe('<ReferenceArrayFieldController />', () => {
const crudGetManyAccumulate = jest.fn();
import ReferenceArrayFieldController from './ReferenceArrayFieldController';
import renderWithRedux from '../../util/renderWithRedux';
import { crudGetManyAccumulate } from '../../actions';

describe('<ReferenceArrayFieldController />', () => {
afterEach(cleanup);
it('should set the loadedOnce prop to false when related records are not yet fetched', () => {
const children = jest.fn();
const children = jest.fn().mockReturnValue('child');

shallow(
renderWithRedux(
<ReferenceArrayFieldController
record={{ id: 1, barIds: [1, 2] }}
resource="foo"
reference="bar"
source="barIds"
basePath=""
data={null}
ids={[1, 2]}
crudGetManyAccumulate={crudGetManyAccumulate}
record={{ id: 1, barIds: [1, 2] }}
source="barIds"
>
{children}
</ReferenceArrayFieldController>
</ReferenceArrayFieldController>,
{
admin: {
resources: {
bar: {
data: {},
},
},
},
}
);
assert.equal(children.mock.calls[0][0].loadedOnce, false);
expect(children.mock.calls[0][0]).toEqual({
currentSort: { field: 'id', order: 'ASC' },
loadedOnce: false,
referenceBasePath: '',
data: null,
ids: [1, 2],
});
});

it('should set the loadedOnce prop to true when at least one related record is found', () => {
const children = jest.fn();
const children = jest.fn().mockReturnValue('child');

shallow(
renderWithRedux(
<ReferenceArrayFieldController
record={{ id: 1, barIds: [1, 2] }}
resource="foo"
reference="bar"
source="barIds"
basePath=""
data={{ 1: { id: 1 } }}
ids={[1, 2]}
crudGetManyAccumulate={crudGetManyAccumulate}
>
{children}
</ReferenceArrayFieldController>
</ReferenceArrayFieldController>,
{
admin: {
resources: {
bar: {
data: {
2: {
id: 2,
title: 'hello',
},
},
},
},
},
}
);

assert.equal(children.mock.calls[0][0].loadedOnce, true);
expect(children.mock.calls[0][0]).toEqual({
currentSort: { field: 'id', order: 'ASC' },
loadedOnce: true,
referenceBasePath: '',
data: {
2: {
id: 2,
title: 'hello',
},
},
ids: [1, 2],
});
});

it('should set the data prop to the loaded data when it has been fetched', () => {
const children = jest.fn();
const data = {
1: { id: 1, title: 'hello' },
2: { id: 2, title: 'world' },
};
shallow(
const children = jest.fn().mockReturnValue('child');
renderWithRedux(
<ReferenceArrayFieldController
record={{ id: 1, barIds: [1, 2] }}
resource="foo"
reference="bar"
source="barIds"
basePath=""
data={data}
ids={[1, 2]}
crudGetManyAccumulate={crudGetManyAccumulate}
>
{children}
</ReferenceArrayFieldController>
</ReferenceArrayFieldController>,
{
admin: {
resources: {
bar: {
data: {
1: { id: 1, title: 'hello' },
2: { id: 2, title: 'world' },
},
},
},
},
}
);
assert.equal(children.mock.calls[0][0].loadedOnce, true);
assert.deepEqual(children.mock.calls[0][0].data, data);
assert.deepEqual(children.mock.calls[0][0].ids, [1, 2]);
expect(children.mock.calls[0][0]).toEqual({
currentSort: { field: 'id', order: 'ASC' },
loadedOnce: true,
referenceBasePath: '',
data: {
1: { id: 1, title: 'hello' },
2: { id: 2, title: 'world' },
},
ids: [1, 2],
});
});

it('should support record with string identifier', () => {
const children = jest.fn();
const data = {
'abc-1': { id: 'abc-1', title: 'hello' },
'abc-2': { id: 'abc-2', title: 'world' },
};
shallow(
const children = jest.fn().mockReturnValue('child');
renderWithRedux(
<ReferenceArrayFieldController
record={{ id: 1, barIds: ['abc-1', 'abc-2'] }}
resource="foo"
reference="bar"
source="barIds"
basePath=""
data={data}
ids={['abc-1', 'abc-2']}
crudGetManyAccumulate={crudGetManyAccumulate}
>
{children}
</ReferenceArrayFieldController>
</ReferenceArrayFieldController>,
{
admin: {
resources: {
bar: {
data: {
'abc-1': { id: 'abc-1', title: 'hello' },
'abc-2': { id: 'abc-2', title: 'world' },
},
},
},
},
}
);
assert.equal(children.mock.calls[0][0].loadedOnce, true);
assert.deepEqual(children.mock.calls[0][0].data, data);
assert.deepEqual(children.mock.calls[0][0].ids, ['abc-1', 'abc-2']);
expect(children.mock.calls[0][0]).toEqual({
currentSort: { field: 'id', order: 'ASC' },
loadedOnce: true,
referenceBasePath: '',
data: {
'abc-1': { id: 'abc-1', title: 'hello' },
'abc-2': { id: 'abc-2', title: 'world' },
},
ids: ['abc-1', 'abc-2'],
});
});

it('should support record with number identifier', () => {
const children = jest.fn();
const data = {
1: { id: 1, title: 'hello' },
2: { id: 2, title: 'world' },
};
shallow(
it('should dispatch crudGetManyAccumulate', () => {
const children = jest.fn().mockReturnValue('child');
const { dispatch } = renderWithRedux(
<ReferenceArrayFieldController
record={{ id: 1, barIds: [1, 2] }}
resource="foo"
reference="bar"
source="barIds"
basePath=""
data={data}
ids={[1, 2]}
crudGetManyAccumulate={crudGetManyAccumulate}
>
{children}
</ReferenceArrayFieldController>
</ReferenceArrayFieldController>,
{
admin: {
resources: {
bar: {
data: {},
},
},
},
}
);
assert.equal(children.mock.calls[0][0].loadedOnce, true);
assert.deepEqual(children.mock.calls[0][0].data, data);
assert.deepEqual(children.mock.calls[0][0].ids, [1, 2]);
expect(dispatch).toBeCalledWith(crudGetManyAccumulate('bar', [1, 2]));
});
});
92 changes: 21 additions & 71 deletions packages/ra-core/src/controller/field/ReferenceArrayFieldController.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,7 @@
import { Component, ReactNode } from 'react';
import { connect } from 'react-redux';
import get from 'lodash/get';
import { FunctionComponent, ReactNode, ReactElement } from 'react';

import { crudGetManyAccumulate as crudGetManyAccumulateAction } from '../../actions';
import { getReferencesByIds } from '../../reducer/admin/references/oneToMany';
import {
ReduxState,
Record,
RecordMap,
Dispatch,
Sort,
Identifier,
} from '../../types';
import useReferenceArray from './useReferenceArray';
import { Identifier, RecordMap, Record, Sort } from '../..';

interface ChildrenFuncParams {
loadedOnce: boolean;
Expand All @@ -24,9 +14,6 @@ interface ChildrenFuncParams {
interface Props {
basePath: string;
children: (params: ChildrenFuncParams) => ReactNode;
crudGetManyAccumulate: Dispatch<typeof crudGetManyAccumulateAction>;
data?: RecordMap;
ids: Identifier[];
record?: Record;
reference: string;
resource: string;
Expand Down Expand Up @@ -65,64 +52,27 @@ interface Props {
* </ReferenceArrayField>
*
*/
export class UnconnectedReferenceArrayFieldController extends Component<Props> {
componentDidMount() {
this.fetchReferences();
}

componentWillReceiveProps(nextProps) {
if (
(this.props.record || { id: undefined }).id !==
(nextProps.record || {}).id
) {
this.fetchReferences(nextProps);
}
}

fetchReferences({ crudGetManyAccumulate, reference, ids } = this.props) {
crudGetManyAccumulate(reference, ids);
}

render() {
const {
const ReferenceArrayFieldController: FunctionComponent<Props> = ({
resource,
reference,
basePath,
record,
source,
children,
}) => {
return children({
currentSort: {
field: 'id',
order: 'ASC',
},
...useReferenceArray({
resource,
reference,
data,
ids,
children,
basePath,
} = this.props;

const referenceBasePath = basePath.replace(resource, reference); // FIXME obviously very weak

return children({
// tslint:disable-next-line:triple-equals
loadedOnce: data != undefined,
ids,
data,
referenceBasePath,
currentSort: {
field: 'id',
order: 'ASC',
},
});
}
}

const mapStateToProps = (state: ReduxState, props: Props) => {
const { record, source, reference } = props;
const ids = get(record, source) || [];
return {
data: getReferencesByIds(state, reference, ids),
ids,
};
record,
source,
}),
}) as ReactElement<any>;
};

const ReferenceArrayFieldController = connect(
mapStateToProps,
{
crudGetManyAccumulate: crudGetManyAccumulateAction,
}
)(UnconnectedReferenceArrayFieldController);

export default ReferenceArrayFieldController;
2 changes: 2 additions & 0 deletions packages/ra-core/src/controller/field/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,11 @@ import ReferenceArrayFieldController from './ReferenceArrayFieldController';
import ReferenceFieldController from './ReferenceFieldController';
import ReferenceManyFieldController from './ReferenceManyFieldController';
import useReference from './useReference';
import useReferenceArray from './useReferenceArray';
import useReferenceMany from './useReferenceMany';

export {
useReferenceArray,
ReferenceArrayFieldController,
ReferenceFieldController,
useReference,
Expand Down
Loading