Doit Data Handling

So, all the data handling is done using the useState hook in an array of objects.

The SortSelector component selects how the entrys in the array should be sorted, which are then pased to the sortArray function with two params: the entryArray itself, and a string denoting how to sort, grabbed from the drop-down element.

Data Sorting

function sortArray(entryArray, sortType) {
  switch (sortType) {
    case "alpha": {
      entryArray.sort((a, b) => {
        if (a.text.toUpperCase() > b.text.toUpperCase()) {
          return 1;
        } else if (b.text.toUpperCase() > a.text.toUpperCase()) {
          return -1;
        } else {
          return 0;
        }
      });
      break;
    }
    case "priority": {
      entryArray.sort((a, b) => a.priority - b.priority);
      break;
    }
    case "datetime": {
      entryArray.sort((a, b) => a.timestamp - b.timestamp);
      break;
    }
    case "compfirst": {
      entryArray.sort((a, b) => b.isDone - a.isDone);
      break;
    }
    case "complast": {
      entryArray.sort((a, b) => a.isDone - b.isDone);
      break;
    }
    default:
      entryArray.sort((a, b) => a.priority - b.priority);
      break;
  }
}

But, there's more!

These sorting algorithms are called whenever the sort selecter resorts the array.

function SortSelector({ entryArray, setEntryArray, sortType, setSortType }) {
  function handleSubmit(event) {
    event.preventDefault();
    sortArray(entryArray, sortType);
    setEntryArray(entryArray.slice());
  }
  return (
    <div className="sortSelector">
      <form onSubmit={handleSubmit}>
        <select
          className="sortDropDown"
          value={sortType}
          onChange={function (e) {
            setSortType(e.target.value);
          }}
        >
          <option value="priority">Priority</option>
          <option value="datetime">Date/Time Added</option>
          <option value="alpha">Alphabetical</option>
          <option value="compfirst">Completed First</option>
          <option value="complast">Completed Last</option>
        </select>
        <button type="submit" className="sortButton">
          Sort
        </button>
      </form>
    </div>
  );
}

Gottem.