Is it possible to get the data by 'griddleKey'?

Griddle version

^1.10.0

Problem

So I’m using my own RowEnhancer, so I can implement my own onClick, like this:

const components: GriddleComponents = {
  RowEnhancer: (OriginalRow: GriddleComponent<GriddleRowProps>) => (props: GriddleRowProps) => (
    <OriginalRow
      {...props}
      onClick={() => {
        console.log(`Clicked Row ${props.griddleKey}`);
        console.log('props', props);
      }}
    />
  ),
};

When I click on the row, I get the following log:

Click Row 32

props {griddleKey: 32, columnIds: Array(3), className: "griddle-row", Cell: ƒ}

The griddleKey here would be useful to get al the row-data back I guess, but I can’t seem to find out how this should be done. 😕

Can somebody help me please?

[dahlbyk]

@MichaelDeBoey take a look at https://codesandbox.io/s/r50q23027o.

You’re using rowDataSelector in a context that has access to your app store rather than Griddle’s internal store; you need to use the selector inside a <Griddle /> and with utils.connect (or simply { connect } from 'griddle-react', as of #751).

I did mess up my example slightly; EnhanceWithRowData needs to be composed. It also occurs to me that withHandlers is a better way to create onClick:

const EnhanceWithRowData = utils.connect((state, props) => ({
  rowData: selectors.rowDataSelector(state, props)
}));

const components = {
  RowEnhancer: compose(
    EnhanceWithRowData,
    withHandlers({
      onClick: props => () => {
        console.log(`Clicked Row ${props.griddleKey}`);
        console.log('props', props);
      },
    })
  ),
};

[dahlbyk]

You’ll get better performance using the rowDataSelector that’s exported from Griddle (via our Storybook). You can also simplify your enhancer using recompose/mapProps:

import { selectors, GriddleComponents } from 'griddle-react';
import { connect } from 'react-redux';
import mapProps from 'recompose/mapProps';

const EnhanceWithRowData = connect((state, props) => ({
  rowData: selectors.rowDataSelector(state, props)
}));
const components: GriddleComponents = {
  RowEnhancer: EnhanceWithRowData(
    mapProps(props => ({
      ...props,
      onClick: () => {
        console.log(`Clicked Row ${props.griddleKey}`);
        console.log('props', props);
      },
    }))
  ),
};