Skip to content

Commit

Permalink
Merge pull request #3225 from marmelab/migrate-example-simple-hooks
Browse files Browse the repository at this point in the history 
[RFR] Migrate simple example to hooks
  • Loading branch information
@fzaninotto
fzaninotto authored Jun 4, 2019
2 parents ade3229 + 0555f09 commit f389aa6
Show file tree
Hide file tree
Showing 11 changed files with 454 additions and 453 deletions.
114 changes: 60 additions & 54 deletions examples/simple/src/comments/CommentEdit.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import Card from '@material-ui/core/Card';
import Typography from '@material-ui/core/Typography';
import { withStyles } from '@material-ui/core/styles';
import { makeStyles } from '@material-ui/core/styles';
import React from 'react';
import {
AutocompleteInput,
Expand All @@ -25,71 +25,77 @@ const LinkToRelatedPost = ({ record }) => (
</Link>
);

const editStyles = {
const useEditStyles = makeStyles({
actions: {
float: 'right',
},
card: {
marginTop: '1em',
maxWidth: '30em',
},
};
});

const CommentEdit = props => {
const classes = useEditStyles();

const CommentEdit = withStyles(editStyles)(({ classes, ...props }) => (
<EditController {...props}>
{({ resource, record, redirect, save, basePath, version }) => (
<div className="edit-page">
<Title defaultTitle={`Comment #${record ? record.id : ''}`} />
<div className={classes.actions}>
<EditActions
basePath={basePath}
resource={resource}
data={record}
hasShow
hasList
return (
<EditController {...props}>
{({ resource, record, redirect, save, basePath, version }) => (
<div className="edit-page">
<Title
defaultTitle={`Comment #${record ? record.id : ''}`}
/>
</div>
<Card className={classes.card}>
{record && (
<SimpleForm
<div className={classes.actions}>
<EditActions
basePath={basePath}
redirect={redirect}
resource={resource}
record={record}
save={save}
version={version}
>
<DisabledInput source="id" fullWidth />
<ReferenceInput
source="post_id"
reference="posts"
perPage={15}
sort={{ field: 'title', order: 'ASC' }}
fullWidth
data={record}
hasShow
hasList
/>
</div>
<Card className={classes.card}>
{record && (
<SimpleForm
basePath={basePath}
redirect={redirect}
resource={resource}
record={record}
save={save}
version={version}
>
<AutocompleteInput
optionText="title"
options={{ fullWidth: true }}
<DisabledInput source="id" fullWidth />
<ReferenceInput
source="post_id"
reference="posts"
perPage={15}
sort={{ field: 'title', order: 'ASC' }}
fullWidth
>
<AutocompleteInput
optionText="title"
options={{ fullWidth: true }}
/>
</ReferenceInput>
<LinkToRelatedPost />
<TextInput
source="author.name"
validate={minLength(10)}
fullWidth
/>
</ReferenceInput>
<LinkToRelatedPost />
<TextInput
source="author.name"
validate={minLength(10)}
fullWidth
/>
<DateInput source="created_at" fullWidth />
<LongTextInput
source="body"
validate={minLength(10)}
fullWidth
/>
</SimpleForm>
)}
</Card>
</div>
)}
</EditController>
));
<DateInput source="created_at" fullWidth />
<LongTextInput
source="body"
validate={minLength(10)}
fullWidth
/>
</SimpleForm>
)}
</Card>
</div>
)}
</EditController>
);
};

export default CommentEdit;
128 changes: 64 additions & 64 deletions examples/simple/src/comments/CommentList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import CardContent from '@material-ui/core/CardContent';
import CardHeader from '@material-ui/core/CardHeader';
import Grid from '@material-ui/core/Grid';
import Toolbar from '@material-ui/core/Toolbar';
import { withStyles } from '@material-ui/core/styles';
import { makeStyles } from '@material-ui/core/styles';
import { unparse as convertToCSV } from 'papaparse/papaparse.min';
import {
DateField,
Expand Down Expand Up @@ -101,7 +101,7 @@ const CommentPagination = ({
);
};

const listStyles = theme => ({
const useListStyles = makeStyles(theme => ({
card: {
height: '100%',
display: 'flex',
Expand All @@ -118,73 +118,73 @@ const listStyles = theme => ({
cardActions: {
justifyContent: 'flex-end',
},
});
}));

const CommentGrid = withStyles(listStyles)(
({ classes, ids, data, basePath }) => {
const translate = useTranslate();
return (
<Grid spacing={2} container>
{ids.map(id => (
<Grid item key={id} sm={12} md={6} lg={4}>
<Card className={classes.card}>
<CardHeader
className="comment"
title={
<TextField
record={data[id]}
source="author.name"
/>
}
subheader={
<DateField
record={data[id]}
source="created_at"
/>
}
avatar={
<Avatar>
<PersonIcon />
</Avatar>
}
/>
<CardContent className={classes.cardContent}>
<TextField record={data[id]} source="body" />
</CardContent>
<CardContent className={classes.cardLink}>
{translate('comment.list.about')}&nbsp;
<ReferenceField
resource="comments"
record={data[id]}
source="post_id"
reference="posts"
basePath={basePath}
>
<TextField
source="title"
className={classes.cardLinkLink}
/>
</ReferenceField>
</CardContent>
<CardActions className={classes.cardActions}>
<EditButton
resource="posts"
basePath={basePath}
const CommentGrid = ({ ids, data, basePath }) => {
const translate = useTranslate();
const classes = useListStyles();

return (
<Grid spacing={2} container>
{ids.map(id => (
<Grid item key={id} sm={12} md={6} lg={4}>
<Card className={classes.card}>
<CardHeader
className="comment"
title={
<TextField
record={data[id]}
source="author.name"
/>
<ShowButton
resource="posts"
basePath={basePath}
}
subheader={
<DateField
record={data[id]}
source="created_at"
/>
</CardActions>
</Card>
</Grid>
))}
</Grid>
);
}
);
}
avatar={
<Avatar>
<PersonIcon />
</Avatar>
}
/>
<CardContent className={classes.cardContent}>
<TextField record={data[id]} source="body" />
</CardContent>
<CardContent className={classes.cardLink}>
{translate('comment.list.about')}&nbsp;
<ReferenceField
resource="comments"
record={data[id]}
source="post_id"
reference="posts"
basePath={basePath}
>
<TextField
source="title"
className={classes.cardLinkLink}
/>
</ReferenceField>
</CardContent>
<CardActions className={classes.cardActions}>
<EditButton
resource="posts"
basePath={basePath}
record={data[id]}
/>
<ShowButton
resource="posts"
basePath={basePath}
record={data[id]}
/>
</CardActions>
</Card>
</Grid>
))}
</Grid>
);
};

CommentGrid.defaultProps = {
data: {},
Expand Down
39 changes: 20 additions & 19 deletions examples/simple/src/comments/PostPreview.js
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,25 @@
import React from 'react';
import { connect } from 'react-redux';
import { useSelector } from 'react-redux';
import { SimpleShowLayout, TextField } from 'react-admin';

const PostPreviewView = ({ isLoading, ...props }) => (
<SimpleShowLayout {...props}>
<TextField source="id" />
<TextField source="title" />
<TextField source="teaser" />
</SimpleShowLayout>
);
const PostPreview = props => {
const record = useSelector(
state =>
state.admin.resources[props.resource]
? state.admin.resources[props.resource].data[props.id]
: null,
[props.resource, props.id],
);
const version = useSelector(state => state.admin.ui.viewVersion);
const isLoading = useSelector(state => state.admin.loading > 0);

const mapStateToProps = (state, props) => ({
record: state.admin.resources[props.resource]
? state.admin.resources[props.resource].data[props.id]
: null,
isLoading: state.admin.loading > 0,
version: state.admin.ui.viewVersion,
});
return (
<SimpleShowLayout version={version} record={record} {...props}>
<TextField source="id" />
<TextField source="title" />
<TextField source="teaser" />
</SimpleShowLayout>
);
};

export default connect(
mapStateToProps,
{}
)(PostPreviewView);
export default PostPreview;
Loading

0 comments on commit f389aa6

Please sign in to comment.