Admin-on-Rest How to create a custom Show component to add Filter

Question

I would like to create a custom Show component that can utilize the Filter component that the List component uses. I honestly don't know where to begin on this one. Can someone point me in the right direction?

This is how it is used in List:

export const LogList = (props) => (
    <List {...props} perPage={100} title="Logs and Reports" filters={< FileFilter/>}>

I would like to be able to use it in Show like so:

export const archivedShow = ({ ...props }) => (
        <Show title="Log" {...props} filters={<LogFilter/>} >

Answer 1

You can write a custom connected component. Then you can do as you wish.

You can provide actions to the show component just like any other comp. https://marmelab.com/admin-on-rest/Show.html#actions

You can use this action to populate a field in your State (probably using a custom reducer)

Your Component can then be connected to the redux state.

something like below

class connectedReferenceInput extends Component {
  render() {
    <ReferenceInput source={this.props.source} >
      <somecomp>
    </ReferenceInput>
  }
}

function mapStateToProps(state, props) {
  return {
    source: state.admin.somefield.source
  };
}

export default connect(mapStateToProps, {
  crudGetList: crudGetListAction
})(ClientInput)

There are also docs for writing a reducer in AOR docs.

MORE DETAILS: 1) somecomp is any component that you need as child of the referenceInput 2) somefield is any field that you set up to pass data between the connected filter component and the connectedReferenceInput.

Breakup of what you are doing essentially.

1) create a connected component that you will make a child of filter. This connected component shoots a redux 'Action' that changes some part of your state by a 'reducer'

Docs for both writing an action and a reducer are available in aor docs.

2) create a connectedReferenceInput (like above) this receives (through mapStateToProps) the state changes that your connectedFilterComp makes. Using this you can create a variable filter for referenceInput and display your variable data.

You are basically using redux to pass data between the filter and your component.