Add Sorting and Filtering to the Frontend

[HelinaBerhane]

Necessary Steps

• Create the type for a generic filter that has everything you need

  // This is an interface to describe what your data looks like
  interface Job {
      name: string;
      salary: number;
  }
  
  // These are generic is a generic interface to describe a filter
  // You can make more of these for other types.
  interface NumericFilter {
      equals?: number;
      greaterThan?: number;
      lessThan?: number;
  }
  interface TextFilter {
      equals?: string;
      contains?: string;
      startsWith?: string;
  }
  
  // Utility type to map base types to their corresponding filter types
  type FilterType<T> = 
      T extends number ? NumericFilter[] :
      T extends string ? TextFilter[] :
      never;
  
  // Generic Filter interface
  interface Filter<T> {
      [K in keyof T]?: FilterType<T[K]>;
  }
  
  // Creating the Person filter using the generic above
  type PersonFilter = Filter<Person>;
  
  // PersonFilter is equivelent to the following if you hard coded it
  interface PersonFilter {
      name: TextFilter[];
      age: NumericFilter[];
  }
  
  // A valid person could be:
  const people: Person[] = [
     { name: "John", age: 20 },
     { name: "Jane", age: 30 }
  ]
  
  // A valid person filter by this description is:
  const personFilter: PersonFilter = {
      name: [{ startsWith: "John" }],
      age: [{ greaterThan: 30 }, { lessThan: 60 }]
  }

• Create react state for a filter, and UI to change the filter state
• Implement the filter function

  // for a person specific filter function
  function filterPeople(people: Person[], filter: PersonFilter): Person[] {
  ...
  }
  
  // for a generic filter function
  function filter<T>(elements: T[], filter: Filter<T>): T[] {
  ...
  }
  
  // to us the filter function
  const filteredPeople = filter(people, personFilter)

• Display the table with the sorted / filtered data
  • Display the table with sorted data
  • Display the table with filtered data
  • Cache the state of the filter using useMemo
• Handle edge cases:
  • Creating / updating / deleting jobs while in a sorted / filtered view
    • creating jobs while in a sorted view
    • creating jobs while in a filtered view
    • updating jobs while in a sorted view
    • updating jobs while in a filtered view
    • deleting jobs while in a sorted view
    • deleting jobs while in a filtered view

Optional Steps

• handle boolean conditions in filters
  • handle OR conditions in filters
  • handle AND conditions in filters
  • handle combinations of OR and AND conditions in filters
• handle recursive types

  // There are a few limitations with this as it was quite rushed, you can't handle nested types, only flat types. i.e. 
  // You could not filter on data with the following interface easily:
  interface Nested {
     name: string;
     occupation: {
         company: string;
         yearsTenure: number;
     }
  }

• generate these generic filter types based on the back end models