83 lines
2.1 KiB
TypeScript
83 lines
2.1 KiB
TypeScript
import React from 'react';
|
|
import {
|
|
Admin,
|
|
Create,
|
|
type DataProvider,
|
|
EditGuesser,
|
|
ListGuesser,
|
|
Resource,
|
|
ShowGuesser,
|
|
required,
|
|
AutocompleteInput,
|
|
ReferenceInput,
|
|
SimpleForm,
|
|
TextInput,
|
|
Datagrid,
|
|
List,
|
|
TextField,
|
|
SearchInput,
|
|
} from 'react-admin';
|
|
import authProvider from './authProvider';
|
|
import { QueryClient } from 'react-query';
|
|
|
|
const queryClient = new QueryClient({
|
|
defaultOptions: {
|
|
queries: {
|
|
refetchOnWindowFocus: false,
|
|
},
|
|
},
|
|
});
|
|
|
|
export const App = ({ dataProvider }: { dataProvider: DataProvider }) => {
|
|
return (
|
|
<Admin
|
|
dataProvider={dataProvider}
|
|
authProvider={authProvider}
|
|
queryClient={queryClient}
|
|
>
|
|
<Resource
|
|
name="books"
|
|
list={ListGuesser}
|
|
create={BookCreate}
|
|
edit={EditGuesser}
|
|
show={ShowGuesser}
|
|
/>
|
|
<Resource
|
|
name="authors"
|
|
list={AuthorList}
|
|
edit={EditGuesser}
|
|
show={ShowGuesser}
|
|
recordRepresentation={(record) =>
|
|
`${record.first_name} ${record.last_name}`
|
|
}
|
|
/>
|
|
</Admin>
|
|
);
|
|
};
|
|
|
|
const AuthorList = () => (
|
|
<List filters={[<SearchInput source="q" alwaysOn key="q" />]}>
|
|
<Datagrid rowClick="edit">
|
|
<TextField source="id" />
|
|
<TextField source="first_name" />
|
|
<TextField source="last_name" />
|
|
</Datagrid>
|
|
</List>
|
|
);
|
|
|
|
// The default value for the title field should cause a server validation error as it's not unique
|
|
const BookCreate = () => (
|
|
<Create>
|
|
<SimpleForm>
|
|
<ReferenceInput source="author_id" reference="authors">
|
|
<AutocompleteInput validate={required()} />
|
|
</ReferenceInput>
|
|
<TextInput
|
|
source="title"
|
|
validate={required()}
|
|
defaultValue="Anna Karenina"
|
|
/>
|
|
</SimpleForm>
|
|
</Create>
|
|
);
|