Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[RFR] Migrate simple example to hooks #3225

Merged
merged 15 commits into from
Jun 4, 2019
Merged

[RFR] Migrate simple example to hooks #3225

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
e8fdf27
Migrate PostList to hooks
zyhou May 15, 2019
dbb35ec
Migrate PostCreate to hooks
zyhou May 15, 2019
46f7572
Migrate ResetViewsButton to hooks
zyhou May 15, 2019
ddc2d8b
Migrate CommentEdit to hooks
zyhou May 15, 2019
1f38c91
Migrate CommentList to hooks
zyhou May 15, 2019
859e0b2
Migrate PostPreview to hooks
zyhou May 15, 2019
f415f25
Migrate PostQuickCreateCancelButton to hooks
zyhou May 15, 2019
a213f75
Migrate PostReferenceInput to hooks
zyhou May 15, 2019
1d5a259
Migrate UserEdit hooks
zyhou May 15, 2019
1362065
useCallback on all event
zyhou May 15, 2019
5f6c468
Migrate PostQuickCreate to hook
zyhou May 15, 2019
647aca9
Review isLoading
zyhou May 23, 2019
07ecfbc
fix bug uselector ? Lets see
zyhou May 24, 2019
9b130d0
Remove Connect in PostQuickCreate
fzaninotto May 24, 2019
0555f09
use makeStyles from material-ui core
zyhou May 25, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
114 changes: 60 additions & 54 deletions examples/simple/src/comments/CommentEdit.js
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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,
zyhou marked this conversation as resolved.
Show resolved Hide resolved
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