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.

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] Add invite to create the first record when the list is empty #4065

Closed
wants to merge 4 commits into from

Conversation

m4theushw
Copy link
Contributor

@m4theushw m4theushw commented Nov 27, 2019

Closes #2639

  • Invite to create the first record
  • Add tests
  • French translations
  • Write docs showing how to override <EmptyState />

empty-state

@fzaninotto
Copy link
Member

Very encouraging!

@m4theushw m4theushw force-pushed the empty-state branch 2 times, most recently from e8f6fa6 to 0e63a83 Compare November 29, 2019 17:39
@m4theushw m4theushw changed the title [WIP] Add invite to create the first record when the list is empty [RFR] Add invite to create the first record when the list is empty Nov 29, 2019
@fzaninotto
Copy link
Member

Could you PR against next rather than master?

@@ -28,6 +28,7 @@ Here are all the props accepted by the `<List>` component:
* [`filterDefaultValues`](#filter-default-values) (the default values for `alwaysOn` filters)
* [`pagination`](#pagination)
* [`aside`](#aside-component)
* [`emptyState`](#empty-state)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd call it empty instead

@@ -683,6 +685,34 @@ const Aside = ({ data, ids }) => (
```
{% endraw %}

### Empty state

When there is no result, and there is no active filter, and the resource has a create page then a special page inviting the user to create the first record is displayed. Use the `emptyState` prop to modify that page, passing your custom component:
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
When there is no result, and there is no active filter, and the resource has a create page then a special page inviting the user to create the first record is displayed. Use the `emptyState` prop to modify that page, passing your custom component:
When there is no result, and there is no active filter, and the resource has a create page, react-admin displays a special page inviting the user to create the first record.
You can use the `emptyState` prop to replace that page by a custom component:

```
{% endraw %}

The `emptyState` component receives the same props as the `aside` prop. Read the [section above](#aside-component) to check them.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

no, please repeat them - developers don't read the docs sequentially.


const EmptyState = ({ basePath }) => (
<div style={{ textAlign: 'center', margin: '1em' }}>
<h1>No products available</h1>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd use resource in the example

const resourceName = translate(`resources.${resource}.name`, {
smart_count: 0,
_: inflection.humanize(resource),
}).toLowerCase();
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We don't use toLowerCase anywhere else on the naming, and I humanize should do the trick.

>
<Title title={title} defaultTitle={defaultTitle} />

const renderChildren = () => (
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

renderList?

@m4theushw m4theushw closed this Dec 4, 2019
@fzaninotto
Copy link
Member

Why did you close your PR?

@m4theushw
Copy link
Contributor Author

@fzaninotto I will open another PR targeting next. To use this one I would have to first merge with master since the branches are out-of-sync.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Empty List Invite
2 participants