Using AOR's List component to render multiple resources on the dashboard

Question

How can I list multiple resources on the dashboard using AOR's "List" component.

My requirement is to have a Tabbed Component on the dashboard where: 1. Tab1 should display a data-grid for Resource 1 2. Tab2 should display a data-grid for Resource 2 and so on...

All the data-grids should have filtering and sorting.

While attempting to use the "List" component to achieve this, I ran into issues with filtering and sorting. Based on the order in which the resource data is loaded into app-state, filtering on Resource1 on Tab1 is redirecting the location to https://[domain.com]/#/resource2?filter=[filter_params_applied_on_resource1]

Is there a way for me to render multiple resource 's within the dashboard or any other router-location with properly working filtering on all the listed resources ?

Answer 1

The following structure works well in a dashboard:

import React, { Component } from 'react';
import withWidth from 'material-ui/utils/withWidth';
import { AppBarMobile, GET_LIST, GET_MANY } from 'admin-on-rest';
import Welcome from './Welcome';
import Moment from 'react-moment';

class Dashspawn extends Component {
    state = {};

    componentDidMount() {
       restClient(GET_LIST, 'spawns', {
           filter: { state: 'jar'},
            sort: { field: 'inoculationjar', order: 'ASC' },
            pagination: { page: 1, perPage: 100 },
        })
        .then(response => response.data)
        .then(newSpawn => {
            this.setState({ newSpawn });
            this.setState({ nbCurrentSpawn: newSpawn.reduce(nb => ++nb, 0) });

        })
        restClient(GET_LIST,....

}

  render() {
        const {
            nbCurrentSpawn_month_one,
            newSpawn,
            newSpawn_month_one,
         etc...

        } = this.state;
        const { width } = this.props;
        return (
           <div>
             {width === 1 && <AppBarMobile title="Bali Mojo" />}
             <Welcome style={styles.welcome} />
             <div style={styles.flex}>
                <div style={styles.leftCol}>
                    <div style={styles.flex}>
Some of your field components..
                    </div>
                <div style={styles.rightCol}>
                    <div style={styles.flex}>
Some more of your field components..
                    </div>
                </div>
             </div>
           );
   }
}

export default withWidth()(Dashspawn);

Hope this helps.

ps a component example that could go with this GET_LIST. Add other restClient(GETLIST,.. and components to make a dashboard:

import React from 'react';
import { Card, CardTitle } from 'material-ui/Card';
import { List, ListItem } from 'material-ui/List';
import BlockIcon from 'material-ui/svg-icons/content/block';
import { translate } from 'admin-on-rest';

const styles = {
    card: { borderLeft: 'solid 4px #4caf50', flex: 1, marginLeft: '2em' },
    icon: { float: 'right', width: 64, height: 64, padding: 16, color: '#4caf50' },
};

export default translate(({ spawns = [], nb, unitsok, translate }) => (
    <Card style={styles.card}>
        <BlockIcon style={styles.icon} />
        <CardTitle title={nb} subtitle={unitsok} />
        <List>
            {spawns.map(record =>
                <ListItem
                    href={`#/spawns/${record.id}`}
                    key={record.id}
                    primaryText={record.spawncode}
                    secondaryText={new Date(record.inoculationbag).toString('dd-MMM-yyyy').slice(0, 15)}
                />
            )}
        </List>
    </Card>
));