How to display a custom page from a custom (non crud, custom data) json

问题

I was able to create a simple admin panel using react-admin 3.x (migated from 2.x) and as data provider the jsonServerProvider. Now I'd like to have a custom page showing some custom data.

Say I have a json like this:

{
  "title":"My custom page",
  "teaser":"This is a custom page showing some stuff",
  "drinks":[{"name":  "coke", "image": "coca-cola.jpg"}, {"name":  "beer", "image": "beer.png"}, {"name":  "coffee", "image":  "cappuccino.jpg"}],
  "additional_stuff": ["some", "more", "stuff"]
}

I actually created and endpoint called something like: /api/drinks/mycustom

Note, that I already have pages to list, create, edit drinks. Now I just wanted a custom page to show them in a different way (not in a CRUD table) and to display extra stuff.

If the endpoint name included in an existing one is a problem, I can place "mycustom" endpoint in a different route.

I'd like to have an entry in the default menu on the left, when clicking it, react-admin should query the resource and populate the page with the json data coming from the endpoint.

I just don't get how to make such a custom page, didn't find a proper example in the documentation and that's why I'm here.

Thanks for providing an example on how to achieve this.

回答1:

You can set a customRoute in this way passing your custom component.

To query the API you don't need a new endpoint if the provided data on the regular ones is sufficient for your needs. Just call the useGetOne or useGetList hook inside depends on what your custom page shows.

*EDIT:

In your case let's take the stats/foo.js component and assume you want to show another layout for the trades resource (swap with any other as you wish):

       const Foo = () => {
          const { data, ids, loading, error } = useGetList(
             'trades',
             { page: 1, perPage: 10 },
             { field: 'id', order: 'DESC' }
          );

          if (loading) { return <Loading />; }
          if (error) { return <p>ERROR</p>; }

          return (
            <Card>
              <Title title="Trades Stats" />
              <CardContent>
                <ul>
                 {ids.map(id =>
                    <li key={id}>{data[id].title}</li>
                  )}
                </ul>
              </CardContent>
            </Card>)
        };

Now you should be able to access the page on the /foo url as this is how it is registered in customRoutes.

*EDIT 2

If you don't want to use the react-admin hooks at all you can do just a regular fetch or even get use of react-admin's fetchUtils:

import { fetchUtils } from 'react-admin';

const fetchJson = (url, options = {}) => {
    if (!options.headers) {
        options.headers = new Headers({ Accept: 'application/json' });
    }
    // add your own headers here
    // options.headers.set('X-Custom-Header', 'foobar');
    return fetchUtils.fetchJson(url, options);
}

and make the following call:

const Foo = () => {
  const [data, setData] = React.useState({});

  React.useEffect(() => {
       fetchJson(baseUrl + '/trades')
          .then(response => {
             return response.json;
          })
          .then(data => {
             setData(data); 
          });
  }, []);
  
  return (
    <Card>
      <Title title={data.title} />
      <CardContent>
        <div>{data.teaser}</div>
      </CardContent>
    </Card>)
};

来源：https://stackoverflow.com/questions/65032633/how-to-display-a-custom-page-from-a-custom-non-crud-custom-data-json

标签

reactjs

react-admin