Skip to content

Commit fdb8552

Browse files
djhidjhi
committed
Make useSupportCreateSuggestion compatible with ReferenceInput
1 parent e5a0535 commit fdb8552

15 files changed

+254
-138
lines changed

‎examples/simple/src/comments/CommentEdit.tsx

+69-7
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,12 @@
1-
import { Card, Typography } from '@material-ui/core';
1+
import {
2+
Card,
3+
Typography,
4+
Dialog,
5+
DialogContent,
6+
TextField as MuiTextField,
7+
DialogActions,
8+
Button,
9+
} from '@material-ui/core';
210
import { makeStyles } from '@material-ui/core/styles';
311
import * as React from 'react';
412
import {
@@ -14,6 +22,8 @@ import {
1422
Title,
1523
minLength,
1624
Record,
25+
useCreateSuggestion,
26+
useCreate,
1727
} from 'react-admin'; // eslint-disable-line import/no-unresolved
1828

1929
const LinkToRelatedPost = ({ record }: { record?: Record }) => (
@@ -34,13 +44,64 @@ const useEditStyles = makeStyles({
3444
},
3545
});
3646

37-
const OptionRenderer = ({ record }: { record?: Record }) => (
38-
<span>
39-
{record?.title} - {record?.id}
40-
</span>
41-
);
47+
const OptionRenderer = ({ record }: { record?: Record }) => {
48+
return record.id === '@@ra-create' ? (
49+
<span>{record.name}</span>
50+
) : (
51+
<span>
52+
{record?.title} - {record?.id}
53+
</span>
54+
);
55+
};
56+
57+
const inputText = record =>
58+
record.id === '@@ra-create'
59+
? record.name
60+
: `${record.title} - ${record.id}`;
4261

43-
const inputText = record => `${record.title} - ${record.id}`;
62+
const CreatePost = () => {
63+
const { filter, onCancel, onCreate } = useCreateSuggestion();
64+
const [value, setValue] = React.useState(filter || '');
65+
const [create] = useCreate('posts');
66+
const handleSubmit = (event: React.FormEvent) => {
67+
event.preventDefault();
68+
create(
69+
{
70+
payload: {
71+
data: {
72+
title: value,
73+
},
74+
},
75+
},
76+
{
77+
onSuccess: ({ data }) => {
78+
setValue('');
79+
const choice = data;
80+
onCreate(value, choice);
81+
},
82+
}
83+
);
84+
return false;
85+
};
86+
return (
87+
<Dialog open onClose={onCancel}>
88+
<form onSubmit={handleSubmit}>
89+
<DialogContent>
90+
<MuiTextField
91+
label="New post title"
92+
value={value}
93+
onChange={event => setValue(event.target.value)}
94+
autoFocus
95+
/>
96+
</DialogContent>
97+
<DialogActions>
98+
<Button type="submit">Save</Button>
99+
<Button onClick={onCancel}>Cancel</Button>
100+
</DialogActions>
101+
</form>
102+
</Dialog>
103+
);
104+
};
44105

45106
const CommentEdit = props => {
46107
const classes = useEditStyles();
@@ -86,6 +147,7 @@ const CommentEdit = props => {
86147
fullWidth
87148
>
88149
<AutocompleteInput
150+
create={<CreatePost />}
89151
matchSuggestion={(
90152
filterValue,
91153
suggestion

‎examples/simple/src/posts/PostEdit.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ const CreateCategory = ({
5353
const [value, setValue] = React.useState(filter || '');
5454
const handleSubmit = (event: React.FormEvent) => {
5555
event.preventDefault();
56-
const choice = { name: value, id: value };
56+
const choice = { name: value, id: value.toLowerCase() };
5757
onAddChoice(choice);
5858
onCreate(value, choice);
5959
setValue('');

‎packages/ra-core/src/controller/field/ReferenceFieldController.spec.tsx

+8
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,7 @@ describe('<ReferenceFieldController />', () => {
8484
referenceRecord: { id: 123, title: 'foo' },
8585
resourceLinkPath: '/posts/123',
8686
error: null,
87+
refetch: expect.any(Function),
8788
});
8889
});
8990

@@ -116,6 +117,7 @@ describe('<ReferenceFieldController />', () => {
116117
referenceRecord: { id: 123, title: 'foo' },
117118
resourceLinkPath: '/prefix/posts/123',
118119
error: null,
120+
refetch: expect.any(Function),
119121
});
120122
});
121123

@@ -148,6 +150,7 @@ describe('<ReferenceFieldController />', () => {
148150
referenceRecord: { id: 123, title: 'foo' },
149151
resourceLinkPath: '/edit/123',
150152
error: null,
153+
refetch: expect.any(Function),
151154
});
152155
});
153156

@@ -180,6 +183,7 @@ describe('<ReferenceFieldController />', () => {
180183
referenceRecord: { id: 123, title: 'foo' },
181184
resourceLinkPath: '/show/123',
182185
error: null,
186+
refetch: expect.any(Function),
183187
});
184188
});
185189

@@ -205,6 +209,7 @@ describe('<ReferenceFieldController />', () => {
205209
referenceRecord: { id: 123, title: 'foo' },
206210
resourceLinkPath: '/posts/123/show',
207211
error: null,
212+
refetch: expect.any(Function),
208213
});
209214
});
210215

@@ -238,6 +243,7 @@ describe('<ReferenceFieldController />', () => {
238243
referenceRecord: { id: 123, title: 'foo' },
239244
resourceLinkPath: '/edit/123/show',
240245
error: null,
246+
refetch: expect.any(Function),
241247
});
242248
});
243249

@@ -271,6 +277,7 @@ describe('<ReferenceFieldController />', () => {
271277
referenceRecord: { id: 123, title: 'foo' },
272278
resourceLinkPath: '/show/123/show',
273279
error: null,
280+
refetch: expect.any(Function),
274281
});
275282
});
276283

@@ -296,6 +303,7 @@ describe('<ReferenceFieldController />', () => {
296303
referenceRecord: { id: 123, title: 'foo' },
297304
resourceLinkPath: false,
298305
error: null,
306+
refetch: expect.any(Function),
299307
});
300308
});
301309
});

‎packages/ra-core/src/controller/input/ReferenceInputController.spec.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -170,6 +170,7 @@ describe('<ReferenceInputController />', () => {
170170
'possibleValues.showFilter',
171171
])
172172
).toEqual({
173+
refetch: expect.any(Function),
173174
possibleValues: {
174175
basePath: '/comments',
175176
currentSort: {

‎packages/ra-core/src/controller/input/useReferenceInputController.ts

+4
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import { useSortState } from '..';
1717
import useFilterState from '../useFilterState';
1818
import useSelectionState from '../useSelectionState';
1919
import { useResourceContext } from '../../core';
20+
import { Refetch } from '../../dataProvider';
2021

2122
const defaultReferenceSource = (resource: string, source: string) =>
2223
`${resource}@${source}`;
@@ -126,6 +127,7 @@ export const useReferenceInputController = (
126127
// fetch current value
127128
const {
128129
referenceRecord,
130+
refetch,
129131
error: referenceError,
130132
loading: referenceLoading,
131133
loaded: referenceLoaded,
@@ -202,6 +204,7 @@ export const useReferenceInputController = (
202204
loading: possibleValuesLoading || referenceLoading,
203205
loaded: possibleValuesLoaded && referenceLoaded,
204206
filter: filterValues,
207+
refetch,
205208
setFilter,
206209
pagination,
207210
setPagination,
@@ -238,6 +241,7 @@ export interface ReferenceInputValue {
238241
setSort: (sort: SortPayload) => void;
239242
sort: SortPayload;
240243
warning?: string;
244+
refetch: Refetch;
241245
}
242246

243247
interface Option {

‎packages/ra-core/src/controller/useReference.spec.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -143,6 +143,7 @@ describe('useReference', () => {
143143
loading: true,
144144
loaded: true,
145145
error: null,
146+
refetch: expect.any(Function),
146147
});
147148
});
148149

@@ -171,6 +172,7 @@ describe('useReference', () => {
171172
loading: true,
172173
loaded: false,
173174
error: null,
175+
refetch: expect.any(Function),
174176
});
175177
});
176178
});

‎packages/ra-core/src/controller/useReference.ts

+6-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Record } from '../types';
2-
import { useGetMany } from '../dataProvider';
2+
import { Refetch, useGetMany } from '../dataProvider';
33

44
interface Option {
55
id: string;
@@ -11,6 +11,7 @@ export interface UseReferenceProps {
1111
loaded: boolean;
1212
referenceRecord?: Record;
1313
error?: any;
14+
refetch: Refetch;
1415
}
1516

1617
/**
@@ -41,9 +42,12 @@ export interface UseReferenceProps {
4142
* @returns {ReferenceProps} The reference record
4243
*/
4344
export const useReference = ({ reference, id }: Option): UseReferenceProps => {
44-
const { data, error, loading, loaded } = useGetMany(reference, [id]);
45+
const { data, error, loading, loaded, refetch } = useGetMany(reference, [
46+
id,
47+
]);
4548
return {
4649
referenceRecord: error ? undefined : data[0],
50+
refetch,
4751
error,
4852
loading,
4953
loaded,

‎packages/ra-core/src/dataProvider/useGetMany.spec.tsx

+3
Original file line numberDiff line numberDiff line change
@@ -217,6 +217,7 @@ describe('useGetMany', () => {
217217
loading: true,
218218
loaded: true,
219219
error: null,
220+
refetch: expect.any(Function),
220221
});
221222
});
222223

@@ -257,6 +258,7 @@ describe('useGetMany', () => {
257258
loading: false,
258259
loaded: true,
259260
error: null,
261+
refetch: expect.any(Function),
260262
});
261263
});
262264
});
@@ -310,6 +312,7 @@ describe('useGetMany', () => {
310312
loading: true,
311313
loaded: false,
312314
error: null,
315+
refetch: expect.any(Function),
313316
});
314317
});
315318

0 commit comments

Comments
 (0)