Using external sort is broken in 0.6.1

In 0.6.1, when using external data and sorting capabilities, the sort ascending / descending component never renders as the checks rely on comparing that.state.sortSettings.sortDirection to ‘asc’ or ‘desc’. Problem is, the sortDirection key is internal value, normally set by griddle when NOT using external sorting. There’s no way to set it from the outside, hence sorting component never renders (it thinks there’s no sorting applied at all).

[fechy]

+1

I did some digging:

Because of the return in here:

if (this.props.useExternal) {
    this.props.externalChangeSort(column, this.props.externalSortColumn === column ? !this.props.externalSortAscending : true);
    return;
}

This other part is never reached:

var sortDirectionCycle = columnMeta.sortDirectionCycle ? columnMeta.sortDirectionCycle : [null, 'asc', 'desc'];
 var sortDirection = null;
 // Find the current position in the cycle (or -1).
var i = sortDirectionCycle.indexOf(this.state.sortDirection && column === this.state.sortColumn ? this.state.sortDirection : null);

// Proceed to the next position in the cycle (or start at the beginning).
i = (i + 1) % sortDirectionCycle.length;

 if (sortDirectionCycle[i]) {
            sortDirection = sortDirectionCycle[i];
 } else {
            sortDirection = null;
}
 var state = {
            page: 0,
            sortColumn: column,
            sortDirection: sortDirection
};

 this.setState(state);

Therefore, sortDirection is always undefined, so this part in gridTitle.jdx fails:

if (that.props.sortSettings.sortColumn == col && that.props.sortSettings.sortDirection === 'asc') {
      columnSort = that.props.sortSettings.sortAscendingClassName;
      sortComponent = that.props.useGriddleIcons && that.props.sortSettings.sortAscendingComponent;
 } else if (that.props.sortSettings.sortColumn == col && that.props.sortSettings.sortDirection === 'desc') {
      columnSort += that.props.sortSettings.sortDescendingClassName;
      sortComponent = that.props.useGriddleIcons && that.props.sortSettings.sortDescendingComponent;
}

Hope this helps

[aclowes]

I worked around this with a subclass and patch hack. I’m sure there are better ways but might be useful for someone.

import Griddle from 'griddle-react';

export default class Grid extends Griddle {
  oldGetSortObject = this.getSortObject;
  getSortObject = () => {
    const sortObject = this.oldGetSortObject();
    sortObject.sortDirection = sortObject.sortAscending ? 'asc' : 'desc';
    return sortObject;
  };
}