Composes Sorting and Filtering on user input.

filtering_and_sorting.js

// Generate Test Data
const randomDate = (start, end) => {
  return new Date(
    start.getTime() + Math.random() * (end.getTime() - start.getTime()),
  );
};

const randomString = (length) => {
  let result = '';
  const characters =
    'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
  const charactersLength = characters.length;
  for (let i = 0; i < length; i++) {
    result += characters.charAt(Math.floor(Math.random() * charactersLength));
  }
  return result;
};


const dateTest = new Date(2020, 0, 1);
const dateTest2 = new Date(2020, 0, 2);
// Test Data
const testArr = [
  {
    status: 'completed',
    title: 'yesterday',
    date: randomDate(new Date(2020, 0, 1), new Date(2022, 0, 2)),
  },
  { status: 'completed', title: 'eGkDUs3fSd', date: dateTest },
  { status: 'completed', title: 'fGkDUs3fSd', date: dateTest2 },
  ...Array(10)
    .fill(0)
    .map((el, index) => {
      return {
        status: index % 2 == 0 ? 'not-started' : 'completed',
        title: randomString(10),
        date: randomDate(new Date(2020, 0, 1), new Date(2022, 0, 2)),
      };
    }),
  ...Array(10)
    .fill(0)
    .map((el, index) => {
      return {
        status: index % 2 == 0 ? 'not-started' : 'in-progress',
        title: randomString(10),
        date: randomDate(new Date(2020, 0, 1), new Date(2022, 0, 2)),
      };
    }),
];


// Filters

const completed = (arr) => {
  return arr.filter((item) => item.status === 'completed');
};

const inProgress = (arr) => {
  return arr.filter((item) => item.status === 'in-progress');
};

const notStarted = (arr) => {
  return arr.filter((item) => item.status === 'not-started');
};


// Sorters

const aToZ = (a, b) => a.title.localeCompare(b.title);

const zToA = (a, b) => b.title.localeCompare(a.title);

const dateAsc = (a, b) => a.date - b.date;

const dateDesc = (a, b) => b.date - a.date;


// When a user selects a filter or sorter it is added to the designated array

const filters = [completed];
const sorters = [zToA, dateDesc];

/**
 * @param {Array} arr
 * @returns {Array}
 * @description
 * * Availible Filters: completed, in-progress, not-started
 * * Availible Sorters: a-z, z-a, date-asc, date-desc
 * * Apply the filters that you want to use on the array to the filters array
 * * Apply the sorters you want to use on the array to the sorters array
 * * Run the array through the middlewareFilterAndSort function
 *
*/

const middlewareFilterAndSort = (arr) => {
  let newArr = [...arr];

  filters.forEach((filter) => {
    newArr = filter(newArr);
  });

  newArr.sort((a, b) => {
    return sorters.reduce((acc, sorter) => {
      return acc || sorter(a, b);
    });
  });

  return newArr;
};

console.log(middlewareFilterAndSort(testArr));