[Solved]-How to refresh a List View in admin on rest-Reactjs

Pim Schaaf's solution worked like a charm for me, Mine looks a bit different

yield put(push('/comments/-1')); // This refreshes the data
yield put(showNotification('')); // Hide error 

I've solve this task with small hack via Actions panel. I'm sure it is not correct solution, but in some situations it can help:

class RefreshButton extends FlatButton {
  componentDidMount() {
    if (this.props.refreshInterval) {
      this.interval = setInterval(() => {
        this.props.refresh(new Event('refresh'))
      }, this.props.refreshInterval)
    }
  }

  componentWillUnmount() {
    clearInterval(this.interval)
  }
}

const StreamActions = ({ resource, filters, displayedFilters, filterValues, basePath, showFilter, refresh }) => (
  <CardActions>
    {filters && React.cloneElement(filters, { resource, showFilter, displayedFilters, filterValues, context: 'button' }) }
    <RefreshButton primary label="Refresh streams" onClick={refresh} refreshInterval={15000} refresh={refresh} icon={<NavigationRefresh />} />
  </CardActions>
);

export default class StreamsListPage extends Component {
  render() {
    return (
      <List
        {...this.props}
        perPage={20}
        actions={<StreamActions />}
        filter={{ active: true }}
        title='Active Streams'>
        <StreamsList />
      </List>
    )
  }
}

The push is just a redirect for AOR which did not seem to work for me either. What guleryuz posted was on the right track for me.. Here's what I did building on his example:

// Import Statement
import { refreshView as refreshViewAction } from 'admin-on-rest';

class RemoveButton extends Component {
handleClick = () => {
    const { refreshView, record, showNotification } = this.props;
    fetch(`http://localhost:33333/api/v1/batch/stage/${record.id}`, { method: 'DELETE' })
        .then(() => {
            showNotification('Removed domain from current stage');
            refreshView();
        })
        .catch((e) => {
            console.error(e);
            showNotification('Error: could not find domain');
        });
}

 render() {
    return <FlatButton secondary label="Delete" icon={<DeleteIcon />}onClick={this.handleClick} />;
 }
}

These bits are important as well:

RemoveButton.propTypes = {
record: PropTypes.object,
showNotification: PropTypes.func,
refreshView: PropTypes.func,
};

export default connect(null, {
showNotification: showNotificationAction,
refreshView: refreshViewAction,
})(RemoveButton);

So the way this works is it uses AOR's refreshViewAction as a prop function. This uses the underlying call to populate the data grid for me which is GET_LIST. This may not apply to your specific use case. Let me know if you have any questions.

using refreshView action via redux works well.

see example....

import { refreshView as refreshViewAction } from 'admin-on-rest';
import { connect } from 'react-redux'; 

class MyReactComponent extends Component {
  //... etc etc standard react stuff...

 doSomething() {
    // etc etc do smt then trigger refreshView like below  
    this.props.refreshView();
 }
 render() {
   return <div>etc etc your stuff</div>
 }
}

export default connect(undefined, { refreshView: refreshViewAction })(
  MyReactComponent
);

Definitely hacky, but a work-around could be:

push('/comments/1') //any path to change the current route
push('/comments') //the path to refresh, which is now a new route

@Danila Smirnov's answer above shows this message when I use it now:

Deprecation warning: The preferred way to refresh the List view is to connect your custom button with redux and dispatch the refreshView action.

Clicking the refresh button itself wasn't working either nowadays.

Here's the tweaked version that I got working in mine.

Edit: Modified it a bit more to make it reusable.

RefreshListActions.js

import React, { Component } from 'react'
import FlatButton from 'material-ui/FlatButton'
import { CardActions } from 'material-ui/Card'
import NavigationRefresh from 'material-ui/svg-icons/navigation/refresh'
import { connect } from 'react-redux'
import { REFRESH_VIEW } from 'admin-on-rest/src/actions/uiActions'
import { refreshView as refreshViewAction } from 'admin-on-rest/src/actions/uiActions'

class MyRefresh extends Component {
    componentDidMount() {
        const { refreshInterval, refreshView } = this.props
        if (refreshInterval) {
            this.interval = setInterval(() => {
                refreshView()
            }, refreshInterval)
        }
    }

    componentWillUnmount() {
        clearInterval(this.interval)
    }

    render() {
        const { label, refreshView, icon } = this.props;
        return (
            <FlatButton
                primary
                label={label}
                onClick={refreshView}
                icon={icon}
            />
        );
    }
}

const RefreshButton = connect(null, { refreshView: refreshViewAction })(MyRefresh)

const RefreshListActions = ({ resource, filters, displayedFilters, filterValues, basePath, showFilter, refreshInterval }) => (
    <CardActions>
        {filters && React.cloneElement(filters, { resource, showFilter, displayedFilters, filterValues, context: 'button' }) }
        <RefreshButton primary label="Refresh" refreshInterval={refreshInterval} icon={<NavigationRefresh />} />
    </CardActions>
);

export default RefreshListActions

In my list that I want to refresh so often:

import RefreshListActions from './RefreshListActions'

export default (props) => (
    <List {...props}
        actions={<RefreshListActions refreshInterval="10000" />}
        >
        <Datagrid>
            ...
        </Datagrid>
    </List>
)