Example solution for Advanced Filtering Challenge

src/advanced-filtering/src/App.tsx

@@ -9,14 +9,14 @@ import {
   LogSourceMap,
 } from './constants';
 import {
+  advancedFilter,
   advancedSort,
   NO_FILTER,
-  simpleLogFilter,
 } from './services/logProcessing';
 import {
+  FilterCriteria,
   LogEntry,
   LogLevel,
-  SimpleLogFilterCriteria,
   SortCriteria,
   UpdateLogFilterFunction,
 } from './types';
@@ -29,9 +29,9 @@ function LogDashboard({ logs }: LogDashboardProps) {
   const [sortCriteria, setSortCriteria] = useState<SortCriteria<LogEntry>>({
     timestamp: { direction: 'desc' },
   });
-  const [filterCriteria, setFilterCriteria] = useState<SimpleLogFilterCriteria>(
-    {},
-  );
+  const [filterCriteria, setFilterCriteria] = useState<
+    FilterCriteria<LogEntry>
+  >({});
 
   const compareLogLevels = (a: LogLevel, b: LogLevel) =>
     LogLevelOrder[a] - LogLevelOrder[b];
@@ -58,7 +58,7 @@ function LogDashboard({ logs }: LogDashboardProps) {
   };
 
   const filteredAndSortedLogs = useMemo(() => {
-    const filteredLogs = simpleLogFilter(logs, filterCriteria);
+    const filteredLogs = advancedFilter(logs, filterCriteria);
     return advancedSort(filteredLogs, sortCriteria);
   }, [logs, filterCriteria, sortCriteria]);
 

src/advanced-filtering/src/components/LogFilter.tsx

@@ -1,6 +1,6 @@
 import {
-  SimpleFilterableLogValue,
-  SimpleLogFilterKey,
+  FilterableLogValue,
+  LogFilterKey,
   UpdateLogFilterFunction,
 } from '../types';
 
@@ -18,8 +18,8 @@ const SelectArrow = () => (
 
 interface LogFilterProps {
   updateFilter: UpdateLogFilterFunction;
-  filterKey: SimpleLogFilterKey;
-  options: readonly SimpleFilterableLogValue[];
+  filterKey: LogFilterKey;
+  options: readonly FilterableLogValue[];
   allLabel: string;
 }
 
@@ -32,7 +32,7 @@ export const LogFilter = ({
   <div className="relative inline-block w-full">
     <select
       onChange={(e) =>
-        updateFilter(filterKey, e.target.value as SimpleFilterableLogValue | '')
+        updateFilter(filterKey, e.target.value as FilterableLogValue | '')
       }
       className="w-full px-4 py-2 pr-10 text-gray-700 bg-white border rounded-lg appearance-none focus:outline-none focus:ring-2 focus:ring-blue-500"
     >

src/advanced-filtering/src/services/logProcessing.ts

@@ -1,8 +1,8 @@
-import { LogEntry, SimpleLogFilterCriteria, SortCriteria } from '../types';
+import { FilterCriteria, SortCriteria } from '../types';
 
 export function advancedSort<ItemType extends object>(
   arr: ItemType[],
-  criteria: SortCriteria<ItemType>,
+  criteria: SortCriteria<ItemType>
 ): ItemType[] {
   return [...arr].sort((a, b) => {
     for (const key in criteria) {
@@ -23,20 +23,23 @@ export function advancedSort<ItemType extends object>(
 
 export const NO_FILTER = null;
 
-export function simpleLogFilter(
-  logs: any[],
-  criteria: SimpleLogFilterCriteria,
-): any[] {
-  return logs.filter((log) => {
+export function advancedFilter<ItemType extends object>(
+  arr: ItemType[],
+  criteria: FilterCriteria<ItemType>
+): ItemType[] {
+  return arr.filter((el) => {
     return (
-      Object.entries(criteria) as [keyof LogEntry, SimpleLogFilterCriteria][]
+      Object.entries(criteria) as [
+        keyof ItemType,
+        FilterCriteria<ItemType>[keyof ItemType]
+      ][]
     ).every(([key, condition]) => {
       if (condition === NO_FILTER) {
         return true;
       }
-      const value = log[key];
+      const value = el[key];
       if (typeof condition === 'function') {
-        return (condition as (value: any) => boolean)(value);
+        return condition(value);
       }
       return value === condition;
     });

src/advanced-filtering/src/types/index.ts

@@ -16,7 +16,7 @@ export interface LogEntry {
 
 export type CompareFunction<ItemTypeValue> = (
   a: ItemTypeValue,
-  b: ItemTypeValue,
+  b: ItemTypeValue
 ) => number;
 
 export type SortCriteria<ItemType extends object> = {
@@ -26,16 +26,15 @@ export type SortCriteria<ItemType extends object> = {
   };
 };
 
-export type SimpleLogFilterCriteria = {
-  level?: LogLevel | ((value: LogLevel) => boolean);
-  source?: LogSource | ((value: LogSource) => boolean);
+export type FilterCriteria<ItemType> = {
+  [Key in keyof ItemType]?: ItemType[Key] | ((value: ItemType[Key]) => boolean);
 };
 
-export type SimpleLogFilterKey = 'level' | 'source';
+export type LogFilterKey = Extract<keyof LogEntry, 'level' | 'source'>;
 
-export type SimpleFilterableLogValue = LogLevel | LogSource;
+export type FilterableLogValue = LogEntry[LogFilterKey];
 
 export type UpdateLogFilterFunction = (
-  key: SimpleLogFilterKey,
-  value: SimpleFilterableLogValue | '',
+  key: LogFilterKey,
+  value: FilterableLogValue | ''
 ) => void;