Sort by category doesn't work in React Component

Question

I assume my problem is in drilling down to get correct method from sortTypes?

My helper functions (Up, Down, Sort required to pull corresponding fontawesome icons):

const sortTypes = {
  Up: {
    fn: {
      age: (a, b) => (a.age - b.age ? 1 : -1),
      cores: (a, b) => (a.cpuUsage - b.cpuUsage ? 1 : -1),
      memory: (a, b) => (a.memoryUsage - b.memoryUsage ? 1 : -1)
    }
  },
  Down: {
    fn: {
      age: (a, b) => (b.age - a.age ? 1 : -1),
      cores: (a, b) => (b.cpuUsage - a.cpuUsage ? 1 : -1),
      memory: (a, b) => (b.memoryUsage - a.memoryUsage ? 1 : -1)
    }
  },
  Sort: {
    fn: {
      age: (a, b) => (b.age - a.age ? 1 : -1),
      cores: (a, b) => (b.cpuUsage - a.cpuUsage ? 1 : -1),
      memory: (a, b) => (b.memoryUsage - a.memoryUsage ? 1 : -1)
    }
  }
};

export default sortTypes;

And component that uses it:

class BottomPanel extends Component {
  state = {
    currentSort: 'Sort',
    category: ''
  };

  onSortChange = e => {
    console.log(e.currentTarget.id);

    const { currentSort } = this.state;

    let nextSort, category;

    if (currentSort === 'Down') nextSort = 'Up';
    else if (currentSort === 'Up') nextSort = 'Sort';
    else if (currentSort === 'Sort') nextSort = 'Down';

    if (e.currentTarget.id === 'btn-age') category = 'age';
    else if (e.currentTarget.id === 'btn-cores') category = 'cores';
    else if (e.currentTarget.id === 'btn-memory') category = 'memory';

    this.setState({
      currentSort: nextSort,
      category: category
    });
  };

  render() {
    console.log(this.state.category);
    const { runningTasks } = this.props;
    const { currentSort, category } = this.state;

    return (
      runningTasks.length >= 0 && (
        <div className="bottom-panel">
          <div className="table-header row">
            <div className="column name">
              <span>Name</span>
            </div>
            <div className="column task-status">
              <span>Status</span>
            </div>
            <div className="column label">
              <span>Label</span>
            </div>
            <div className="column age">
              <span>
                Age
                <button id="btn-age" onClick={this.onSortChange}>
                  &nbsp;
                  <FontAwesomeIcon icon={faSort} />
                </button>
              </span>
            </div>
            <div className="column cluster-ip">
              <span>Cluster IP</span>
            </div>
            <div className="column cpu-usage">
              <span>CPU (cores)</span>
              <button id="btn-cores" onClick={this.onSortChange}>
                &nbsp;
                <FontAwesomeIcon icon={faSort} />
              </button>
            </div>
            <div className="column memory-usage">
              <span>Memory (bytes) </span>
              <button id="btn-memory" onClick={this.onSortChange}>
                &nbsp;
                <FontAwesomeIcon icon={faSort} />
              </button>
            </div>
          </div>
          <div className="table-body">
            {[...runningTasks]
              .sort(sortTypes[currentSort].fn.category)
              .map((task, index) => (
                <div className="table-item row" key={index}>
                  <div className="column age">
                    <span>{task.age} minutes</span>
                  </div>
                  <div className="column cpu-usage">
                    <span className="cpu-usage-chart">
                      <BottomBarChart data={task.cpuUsage} />
                    </span>
                    &nbsp;
                    <p style={{ fontSize: '8px' }}>{task.cpuUsage[0].high}</p>
                  </div>
                  <div className="column memory-usage">
                    <span className="memory-usage-chart">
                      <BottomBarChart data={task.memoryUsage} />
                    </span>
                    <p style={{ fontSize: '8px' }}>
                      &nbsp;
                      {task.memoryUsage[0].high} MiB
                    </p>
                  </div>
                </div>
              ))}
          </div>
        </div>
      )
    );
  }
}

CodeSandbox

Answer 1

change this:

.sort(sortTypes[currentSort].fn.category)

to this:

.sort(sortTypes[currentSort].fn[category])

I didn't try it cause your code requires some additional external modules, but this is clearly a mistake.

Edit: Being that you use sort() in your JSX, it was impossible to make it work with strings like "task-one"(sort() would sort it alphabetically), so i had to change to "task-1". Remember that you don't really sort by name, but group by name. Maybe it's possible to do it with sort(), but i don't know how.

I suggest not to use such logic within the render method, but rather to supply the already sorted/grouped data "from above".

Sort types:

const sortTypes = {
  Up: {
    fn: {
      age: (a, b) => (a.age > b.age ? -1 : a.age > b.age ? 1 : 0),
      status: ((a, b) => (a.status > b.status) ? 1 : -1),
      name: (a, b) =>{     

        return (a.name < b.name) ? 1 : -1;
      }
    }
  },
  Down: {
    fn: {
      age: (a, b) => (a.age < b.age ? -1 : a.age > b.age ? 1 : 0),
      status: ((a, b) => (a.status < b.status) ? 1 : -1),
      name: (a, b) =>{       

        return (a.name > b.name) ? 1 : -1

      }
    }
  },

};

export default sortTypes;

Component:

import React, { Component } from "react";
import "./styles.css";
import sortTypes from "./sortTypes";
import data from "./data";

class BottomPanel extends Component {

  state = {
    currentSort: "Up",
    category: "",

  }; 
  onSortChange = category => {
    debugger;
    const { currentSort } = this.state;
    let direction;
    if(category !== this.state.category){
      direction ='Up'
    }else{
       direction = currentSort === 'Down' ? 'Up': 'Down';    
    }  

    this.setState({
      currentSort: direction,
      category: category
    });
  };

  render() {
    console.log(this.state.category, this.state.currentSort);
    const { currentSort, category } = this.state;

    return (
      data.length >= 0 && (
        <div className="bottom-panel">
          <div className="table-header row">
            <div className="column name">
              <span>Name</span>
              <button id="btn-cores" onClick={()=>{this.onSortChange('name')}}>
                Sort by name
              </button>
            </div>
            <div className="column task-status">
              <span>Status</span>
              <button id="btn-cores" onClick={()=>{this.onSortChange('status')}}>
                Sort by status
              </button>
            </div>
            <div className="column label">
              <span>Label</span>
            </div>
            <div className="column age">
              <span>
                Age
                <button id="btn-age" onClick={()=>{this.onSortChange('age')}}>
                  Sort by age
                </button>
              </span>
            </div>
            <div className="column cluster-ip">
              <span>Cluster IP</span>
            </div>
            <div className="column cpu-usage">
              <span>CPU (cores)</span>
              {/* <button id="btn-cores" onClick={()=>{this.onSortChange('cores')}}>
                Sort by CPU
              </button> */}
            </div>
            <div className="column memory-usage">
              <span>Memory (bytes) </span>
              {/* <button id="btn-memory" onClick={()=>{this.onSortChange('memory')}}>
                Sort by memory
              </button> */}
            </div>
          </div>
          <div className="table-body">
            {[...data]
              .sort(sortTypes[currentSort].fn[category])
              .map((task, index) => (
                <div className="table-item row" key={index}>
                  <div className="column name">
                    <span>{task.name}</span>
                  </div>
                  <div className="column task-status">
                    <span>{task.status}</span>
                  </div>
                  <div className="column label">
                    <span>{task.label}</span>
                  </div>
                  <div className="column age">
                    <span>{task.age} minutes</span>
                  </div>
                  <div className="column cluster-ip">
                    <span>{task.clusterIP}</span>
                  </div>
                  <div className="column cpu-usage">
                    <span className="cpu-usage-chart">
                      {task.cpuUsage[0].high}
                    </span>
                    &nbsp;
                  </div>
                  <div className="column memory-usage">
                    <span className="memory-usage-chart">
                      {task.memoryUsage[0].high}
                    </span>
                  </div>
                </div>
              ))}
          </div>
        </div>
      )
    );
  }
}

export default BottomPanel;

Data:

const data = [
  {
    status: "Not available",
    label: "task-label",
    age: 23,
    name: "task-1",
    clusterIP: "10.148.0.3",
    cpuUsage: [
      {
        date: "2015-10-1 1:00 PM GMT+1:00",
        high: 0.12,
        low: 20
      },
      {
        date: "2015-10-1 2:00 PM GMT+1:00",
        high: 0.105,
        low: 20
      },
      {
        date: "2015-10-1 3:00 PM GMT+1:00",
        high: 0.1,
        low: 20
      }
    ],
    memoryUsage: [
      {
        date: "2015-10-1 1:00 PM GMT+1:00",
        high: 100,
        low: 20
      },
      {
        date: "2015-10-1 2:00 PM GMT+1:00",
        high: 10,
        low: 20
      },
      {
        date: "2015-10-1 3:00 PM GMT+1:00",
        high: 50,
        low: 20
      }
    ]
  },
  {
    status: "Running",
    label: "task-label",
    age: 27,
    name: "task-2",
    clusterIP: "10.148.0.3",
    cpuUsage: [
      {
        date: "2015-10-1 1:00 PM GMT+1:00",
        high: 0.06,
        low: 20
      },
      {
        date: "2015-10-1 2:00 PM GMT+1:00",
        high: 0.105,
        low: 20
      },
      {
        date: "2015-10-1 3:00 PM GMT+1:00",
        high: 0.1,
        low: 20
      }
    ],
    memoryUsage: [
      {
        date: "2015-10-1 1:00 PM GMT+1:00",
        high: 570,
        low: 20
      },
      {
        date: "2015-10-1 2:00 PM GMT+1:00",
        high: 550,
        low: 20
      },
      {
        date: "2015-10-1 3:00 PM GMT+1:00",
        high: 540,
        low: 20
      }
    ]
  },
  {
    status: "Running",
    label: "task-label",
    age: 21,
    name: "task-3",
    clusterIP: "10.148.0.3",
    cpuUsage: [
      {
        date: "2015-10-1 1:00 PM GMT+1:00",
        high: 0.04,
        low: 20
      },
      {
        date: "2015-10-1 2:00 PM GMT+1:00",
        high: 0.09,
        low: 20
      },
      {
        date: "2015-10-1 3:00 PM GMT+1:00",
        high: 0.13,
        low: 20
      }
    ],
    memoryUsage: [
      {
        date: "2015-10-1 1:00 PM GMT+1:00",
        high: 570,
        low: 20
      },
      {
        date: "2015-10-1 2:00 PM GMT+1:00",
        high: 400,
        low: 20
      },
      {
        date: "2015-10-1 3:00 PM GMT+1:00",
        high: 0,
        low: 20
      }
    ]
  },
  {
    status: "Running",
    label: "task-label",
    age: 10,
    name: "task-4",
    clusterIP: "10.148.0.3",
    cpuUsage: [
      {
        date: "2015-10-1 1:00 PM GMT+1:00",
        high: 0.12,
        low: 20
      },
      {
        date: "2015-10-1 2:00 PM GMT+1:00",
        high: 0.105,
        low: 20
      },
      {
        date: "2015-10-1 3:00 PM GMT+1:00",
        high: 0.1,
        low: 20
      }
    ],
    memoryUsage: [
      {
        date: "2015-10-1 1:00 PM GMT+1:00",
        high: 0,
        low: 20
      },
      {
        date: "2015-10-1 2:00 PM GMT+1:00",
        high: 570,
        low: 20
      },
      {
        date: "2015-10-1 3:00 PM GMT+1:00",
        high: 0,
        low: 20
      }
    ]
  },
  {
    status: "Not available",
    label: "task-label",
    age: 1440,
    name: "task-5",
    clusterIP: "10.148.0.3",
    cpuUsage: [
      {
        date: "2015-10-1 1:00 PM GMT+1:00",
        high: 0.12,
        low: 20
      },
      {
        date: "2015-10-1 2:00 PM GMT+1:00",
        high: 0.105,
        low: 20
      },
      {
        date: "2015-10-1 3:00 PM GMT+1:00",
        high: 0.1,
        low: 20
      }
    ],
    memoryUsage: [
      {
        date: "2015-10-1 1:00 PM GMT+1:00",
        high: 570,
        low: 20
      },
      {
        date: "2015-10-1 2:00 PM GMT+1:00",
        high: 100,
        low: 20
      },
      {
        date: "2015-10-1 3:00 PM GMT+1:00",
        high: 400,
        low: 20
      }
    ]
  }
];

export default data;

One more note: if you don't want to use react-table because of its perceived complexity, i suggest you at least use Lodash for various sorting/grouping procedures. Doing vanilla JS is great if you want to learn, but if it's urgent and practical, Lodash can save you a lot of time and effort.