Skip to content

Commit

Permalink
Merge pull request #3783 from marmelab/fix-reference-input-sort
Browse files Browse the repository at this point in the history
[RFR] Fix ReferenceInput Ignore its sort prop
  • Loading branch information
fzaninotto authored Oct 7, 2019
2 parents de85301 + 01b9eab commit 444da94
Show file tree
Hide file tree
Showing 3 changed files with 95 additions and 5 deletions.
3 changes: 3 additions & 0 deletions examples/simple/src/comments/CommentCreate.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@ import {
import PostReferenceInput from './PostReferenceInput';

const defaultValue = { created_at: new Date() };
const defaultSort = { field: 'title', order: 'ASC' };

const CommentCreate = props => (
<Create {...props}>
<SimpleForm redirect={false} defaultValue={defaultValue}>
Expand All @@ -20,6 +22,7 @@ const CommentCreate = props => (
allowEmpty
validate={required()}
perPage={10000}
sort={defaultSort}
/>
<TextInput
source="author.name"
Expand Down
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
import React from 'react';
import { cleanup } from '@testing-library/react';
import React, { useState, useCallback } from 'react';
import { cleanup, fireEvent } from '@testing-library/react';
import omit from 'lodash/omit';
import expect from 'expect';

import renderWithRedux from '../../util/renderWithRedux';
import ReferenceInputController from './ReferenceInputController';
import { DataProviderContext } from '../../dataProvider';
import { crudGetMatching } from '../../actions';

describe('<ReferenceInputController />', () => {
const defaultProps = {
Expand Down Expand Up @@ -34,6 +35,7 @@ describe('<ReferenceInputController />', () => {
...defaultProps,
input: { value: 1 } as any,
loading: true,
sort: { field: 'title', order: 'ASC' },
}}
>
{children}
Expand Down Expand Up @@ -62,14 +64,94 @@ describe('<ReferenceInputController />', () => {
filter: { q: '' },
loading: false,
pagination: { page: 1, perPage: 25 },
sort: { field: 'id', order: 'DESC' },
sort: { field: 'title', order: 'ASC' },
warning: null,
});
await new Promise(resolve => setTimeout(resolve));
await new Promise(resolve => setTimeout(resolve, 100));
expect(dispatch).toBeCalledTimes(6);
expect(dispatch.mock.calls[0][0].type).toBe(
'RA/CRUD_GET_MATCHING_ACCUMULATE'
);
expect(dispatch.mock.calls[0][0].meta.accumulate()).toEqual(
crudGetMatching(
'posts',
'comments@post_id',
{ page: 1, perPage: 25 },
{ field: 'title', order: 'ASC' },
{ q: '' }
)
);
expect(dispatch.mock.calls[1][0].type).toBe('RA/CRUD_GET_MANY');
});

it('should refetch reference matchingReferences when its props change', async () => {
const children = jest.fn().mockReturnValue(<p>child</p>);
const dataProvider = {
getMany: jest.fn(() =>
Promise.resolve({ data: [{ id: 1, title: 'foo' }] })
),
};

const Component = () => {
const [sort, setSort] = useState({ field: 'title', order: 'ASC' });
const handleClick = useCallback(
() => setSort({ field: 'body', order: 'DESC' }),
[setSort]
);
return (
<>
<button aria-label="Change sort" onClick={handleClick} />
<ReferenceInputController
{...{
...defaultProps,
input: { value: 1 } as any,
loading: true,
sort,
}}
>
{children}
</ReferenceInputController>
</>
);
};
const { getByLabelText, dispatch } = renderWithRedux(
<DataProviderContext.Provider value={dataProvider}>
<Component />
</DataProviderContext.Provider>,
{
admin: {
resources: { posts: { data: { 1: { id: 1 } } } },
references: {
possibleValues: { 'comments@post_id': [2, 1] },
},
},
}
);

await new Promise(resolve => setTimeout(resolve, 100));
expect(dispatch.mock.calls[0][0].meta.accumulate()).toEqual(
crudGetMatching(
'posts',
'comments@post_id',
{ page: 1, perPage: 25 },
{ field: 'title', order: 'ASC' },
{ q: '' }
)
);
fireEvent.click(getByLabelText('Change sort'));
await new Promise(resolve => setTimeout(resolve, 100));
expect(
dispatch.mock.calls[
dispatch.mock.calls.length - 1
][0].meta.accumulate()
).toEqual(
crudGetMatching(
'posts',
'comments@post_id',
{ page: 1, perPage: 25 },
{ field: 'body', order: 'DESC' },
{ q: '' }
)
);
});
});
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
import { useEffect } from 'react';
import isEqual from 'lodash/isEqual';

import { getStatusForInput as getDataStatus } from './referenceDataStatus';
import useTranslate from '../../i18n/useTranslate';
import { Sort, Record, Pagination } from '../../types';
Expand Down Expand Up @@ -84,12 +87,14 @@ const useReferenceInputController = ({
filterToQuery,
referenceSource = defaultReferenceSource,
resource,
sort: sortOverride,
source,
}: Option): ReferenceInputValue => {
const translate = useTranslate();

const { pagination, setPagination } = usePaginationState({ perPage });
const { sort, setSort } = useSortState();
const { sort, setSort } = useSortState(sortOverride);

const { filter: filterValue, setFilter } = useFilterState({
permanentFilter: filter,
filterToQuery,
Expand Down

0 comments on commit 444da94

Please sign in to comment.