react-admin | react reach-router mobx antd

react-admin uses Polyglot as its default i18n provider. This is how you define singular and plural forms of a message:

name: 'Singular |||| Plural'

In some languages, you might need more than two variations:

name: 'WhenZero |||| WhenOne |||| WhenMoreThanOne'

In react-admin, you can call the useTranslate hook to get a translate function. This function accepts 2 arguments:

• the translation key
• an object of variables to interpolate in the translated message.

If you read polyglot documentation, you'll see there is a special variable you can pass in the second argument, called smart_count. This variable is used by polyglot to return the correct pluralized form of your message.

react-admin use this feature to get the correct title. In the case of the resource name, we display the pluralized version for the list page and the menu items, and the singular one for create, edit and show.

You can separate the two applications, each with their own routes and redux provider.

Try to add a header to the response by wrapping Json> (that implement Responder trait) with a custom struct (see Rocket docs on custom responders:

I believe you didn't add the customers resource in App.tsx. As per the documentation

You must add a for the reference resource - react-admin needs it to fetch the reference data. You can omit the list prop in this reference if you want to hide it in the sidebar menu.

If you add customers as a Resource, you'd see the referencing and rendering perfectly.

You can set its mutationMode to pessimistic.

Extract from the documentation:

The view exposes two buttons, Save and Delete, which perform “mutations” (i.e. they alter the data). React-admin offers three modes for mutations. The mode determines when the side effects (redirection, notifications, etc.) are executed:

-pessimistic: The mutation is passed to the dataProvider first. When the dataProvider returns successfully, the mutation is applied locally, and the side effects are executed.

-optimistic: The mutation is applied locally and the side effects are executed immediately. Then the mutation is passed to the dataProvider. If the dataProvider returns successfully, nothing happens (as the mutation was already applied locally). If the dataProvider returns in error, the page is refreshed and an error notification is shown.

-undoable (default): The mutation is applied locally and the side effects are executed immediately. Then a notification is shown with an undo button. If the user clicks on undo, the mutation is never sent to the dataProvider, and the page is refreshed. Otherwise, after a 5 seconds delay, the mutation is passed to the dataProvider. If the dataProvider returns successfully, nothing happens (as the mutation was already applied locally). If the dataProvider returns in error, the page is refreshed and an error notification is shown.

The server response must contain the header: "Content-Range" indicating the total number of items in the collection: https://marmelab.com/react-admin/DataProviders.html#usage

You should definitely NOT use react-admin's or for this use case - they are designed to use the dataProvider as datasource.

Writing your own table with material-ui components is the way to go.

You haven't declared the stores resource in your Admin component.

Add a inside Admin

Are you using react-admin-firebase? If so, there's a config setting to specify that you want filenames rather than the index. From the docs: