Skip to content

Instantly share code, notes, and snippets.

@natrim
Created September 20, 2017 08:07
Show Gist options
  • Save natrim/863c0ec93f2d86df0fe170ddb05d5ffb to your computer and use it in GitHub Desktop.
Save natrim/863c0ec93f2d86df0fe170ddb05d5ffb to your computer and use it in GitHub Desktop.
example of AOR 1.3.0 form crash
// in src/app.js
import React from 'react';
import { jsonServerRestClient, Admin, Resource } from 'admin-on-rest';
import { PostList, PostEdit, PostCreate } from './posts';
const App = () => (
<Admin restClient={jsonServerRestClient('http://jsonplaceholder.typicode.com')}>
<Resource name="posts" list={PostList} create={PostCreate} edit={PostEdit} />
</Admin>
);
export default App;
<!-- in public/index.html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>React App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
</body>
</html>
// in src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
{
"name": "aor-form-crash",
"version": "0.1.0",
"private": true,
"dependencies": {
"admin-on-rest": "^1.3.0",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-scripts": "1.0.13"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
// in src/posts.js
import React from 'react';
import { List, Edit, Create, Datagrid, TextField, EditButton, LongTextInput, SimpleForm, TextInput, required, minLength } from 'admin-on-rest';
export const PostList = (props) => (
<List {...props}>
<Datagrid>
<TextField source="id" />
<TextField source="title" />
<TextField source="body" />
<EditButton />
</Datagrid>
</List>
);
const PostTitle = ({ record }) => {
return <span>Post {record ? `"${record.title}"` : ''}</span>;
};
export const PostEdit = (props) => {
console.log('render edit form');
return (
<Edit title={<PostTitle />} {...props}>
<BaseForm redirect="show" />
</Edit>
);
};
export const PostCreate = (props) => {
console.log('render create form');
return (
<Create {...props}>
<BaseForm redirect="edit" />
</Create>
);
};
const BaseForm = (props) => {
console.log('render base form')
return (
<SimpleForm {...props}>
<TextInput source="title" validate={[required, minLength(3)]} />
<LongTextInput source="body" />
</SimpleForm>
);
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment