Better Documentation for Actions

[mickey159]

when creating my own pager, i incidentally pass dataSource = true to pagerActions.setPageIndexAsync. i received the following error from core.js (redux-logger), "uncaught typeError: cannot read property 'type' of undefined". i looked into your source code, and in this function you check if the dataSource is a function. could you add an else clause and throw a proper error?

[bencripps]

Hmm, the documentation shows that dataSource is either a function or a string. I feel like that should be enough?

[mickey159]

when i check your source code, this function only check if dataSource is a function, otherwise, do nothing. the other function setPageAsync, uses the string option.

[bencripps]

Hmm yeah -- I think what we really need here is better documentation for all of the exposed ACTIONS. I will mark this issue as a feature request for better docs on actions,

[headwinds]

I'm going to try help with this... this morning I was trying to look into how to call the selectAll/deselectAll actions which the selection reducer supports... I'll start to document them in that new sample I started.

We need a USING_ACTIONS.md in the main library which should list and briefly define what the actions for the grid, selection, pager, etc can do...

[bencripps]

@headwinds that would be a huge help!

[headwinds]

For instance...

this is a bit of mess I have in my project because I sorta know react-redux-grid but not as much as I'd like to..

1. add the actions

import { Actions } from 'react-redux-grid';

2. map them

const mapDispatchToProps = (dispatch) => {
  return {
    allRowsUnchecked: () => {
      dispatch(actionsTag.allRowsUnchecked());
    },  
    deselectAll: stateKey => {
      dispatch(Actions.SelectionActions.deselectAll(stateKey))
    },
  }
}

3. use them

uncheckAllSelectedRows(event){
    const rows = document.getElementsByClassName("react-grid-row");
    const gridMap = this.props.selection.get("workbench");

    const getAllIds = () => {
      let allIds = [];  
      _.times( this.props.datasetOpen.limit, rowIndex => { allIds.push(rowIndex) })
      return allIds;
    }  

    const selectedIds = (this.props.datasetOpen.allRowsSelected) ? getAllIds() : gridMap.get("indexes");
    
    // only click the checkbox of selected rows 
    if ( undefined !== selectedIds && !this.state.uncheckingRows ) {
      this.state.uncheckingRows = true; 
       _.each(selectedIds, selectedId => {
          let selectedRow = rows[selectedId];
          if (typeof selectedRow !== "undefined"){
            const checkboxColumn = selectedRow.getElementsByTagName("TD")[0];
            if (typeof checkboxColumn !== "undefined"){
              const input = checkboxColumn.getElementsByTagName("INPUT");
              input[0].checked = false;
            }
          }
        });

         // give it 2 seconds to ensure all the rows are unchecked 
        setTimeout( ()=>{
         this.state.uncheckingRows = false;
         this.props.allRowsUnchecked();
         const stateKey = "workbench";
         this.props.deselectAll(stateKey); 
        }, 2000); 
    }
  }

I bet I don't need to do half of this stuff to get deselectAll to happen along with all the checboxes to uncheck....but this works for now

[bencripps]

Do you have this in a public repo?

Rather than using a querySelector to get the actual divs, you should be connecting the component to this slice of the grid state, so you will know what is selected/unselected at all times.

[headwinds]

not yet - I have the day off today - which means I get to work on open source! I'll put it together this morning within a new branch for to review.

But this feedback is exactly what I'm looking for - I knew some of what I was decent; the other was crap; especially that timeout I used! bad code smell.

By using selection, I can see the selected indexes within the map if I selected them individually but when I check the select all check box, that indexes array isn't available anymore and its replaced by a list of keys which I wasn't sure how to use.

If I dispatch an action to deselectAll, I want the react-redux-grid to both clear any selected indexes and uncheck the selected checkboxes without me having to touch the query selectors. So I'll setup this scenario in my example and share it with you as a new branch.

[bencripps]

Sounds good. Upon selectAll, if the indices array is empty or missing, that's a bug that should be logged/fixed.