fix: fixes tsdx lint issues, adds 98%+ coverage, copy useList src code into repository and remove react-use

Author: armand1m

.eslintrc.js

@@ -0,0 +1,15 @@
+module.exports = {
+  "extends": [
+    "react-app",
+    "prettier/@typescript-eslint",
+    "plugin:prettier/recommended"
+  ],
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  },
+  "rules": {
+    "no-redeclare": "off",
+  }
+}

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "jsxBracketSameLine": true,
+  "printWidth": 70,
+  "singleQuote": true,
+  "trailingComma": "es5"
+}

package.json

@@ -40,6 +40,10 @@
     "singleQuote": true,
     "trailingComma": "es5"
   },
+  "resolutions": {
+    "**/@typescript-eslint/eslint-plugin": "^4.1.1",
+    "**/@typescript-eslint/parser": "^4.1.1"
+  },
   "name": "react-query-filter",
   "author": "Armando Magalhães",
   "module": "dist/react-query-filter.esm.js",
@@ -81,10 +85,9 @@
     "size-limit": "^4.9.1",
     "tsdx": "^0.14.1",
     "tslib": "^2.0.3",
-    "typescript": "^4.1.3"
+    "typescript": "^4.3.2"
   },
   "dependencies": {
-    "react-use": "^15.3.4",
     "uuid": "^8.3.2"
   },
   "repository": {

src/hooks/misc/hookState.ts

@@ -0,0 +1,32 @@
+export type IHookStateInitialSetter<S> = () => S;
+export type IHookStateInitAction<S> = S | IHookStateInitialSetter<S>;
+
+export type IHookStateSetter<S> = ((prevState: S) => S) | (() => S);
+export type IHookStateSetAction<S> = S | IHookStateSetter<S>;
+
+export type IHookStateResolvable<S> =
+  | S
+  | IHookStateInitialSetter<S>
+  | IHookStateSetter<S>;
+
+export function resolveHookState<S>(nextState: IHookStateInitAction<S>): S;
+export function resolveHookState<S, C extends S>(
+  nextState: IHookStateSetAction<S>,
+  currentState?: C
+): S;
+export function resolveHookState<S, C extends S>(
+  nextState: IHookStateResolvable<S>,
+  currentState?: C
+): S;
+export function resolveHookState<S, C extends S>(
+  nextState: IHookStateResolvable<S>,
+  currentState?: C
+): S {
+  if (typeof nextState === 'function') {
+    return nextState.length
+      ? (nextState as Function)(currentState)
+      : (nextState as Function)();
+  }
+
+  return nextState;
+}

src/hooks/useList.ts

@@ -0,0 +1,162 @@
+import { useMemo, useRef } from 'react';
+import useUpdate from './useUpdate';
+import {
+  IHookStateInitAction,
+  IHookStateSetAction,
+  resolveHookState,
+} from './misc/hookState';
+
+export interface ListActions<T> {
+  /**
+   * @description Set new list instead old one
+   */
+  set: (newList: IHookStateSetAction<T[]>) => void;
+  /**
+   * @description Add item(s) at the end of list
+   */
+  push: (...items: T[]) => void;
+
+  /**
+   * @description Replace item at given position. If item at given position not exists it will be set.
+   */
+  updateAt: (index: number, item: T) => void;
+  /**
+   * @description Insert item at given position, all items to the right will be shifted.
+   */
+  insertAt: (index: number, item: T) => void;
+
+  /**
+   * @description Replace all items that matches predicate with given one.
+   */
+  update: (predicate: (a: T, b: T) => boolean, newItem: T) => void;
+  /**
+   * @description Replace first item matching predicate with given one.
+   */
+  updateFirst: (predicate: (a: T, b: T) => boolean, newItem: T) => void;
+  /**
+   * @description Like `updateFirst` bit in case of predicate miss - pushes item to the list
+   */
+  upsert: (predicate: (a: T, b: T) => boolean, newItem: T) => void;
+
+  /**
+   * @description Sort list with given sorting function
+   */
+  sort: (compareFn?: (a: T, b: T) => number) => void;
+  /**
+   * @description Same as native Array's method
+   */
+  filter: (
+    callbackFn: (value: T, index?: number, array?: T[]) => boolean,
+    thisArg?: any
+  ) => void;
+
+  /**
+   * @description Removes item at given position. All items to the right from removed will be shifted.
+   */
+  removeAt: (index: number) => void;
+  /**
+   * @deprecated Use removeAt method instead
+   */
+  remove: (index: number) => void;
+
+  /**
+   * @description Make the list empty
+   */
+  clear: () => void;
+  /**
+   * @description Reset list to initial value
+   */
+  reset: () => void;
+}
+
+export function useList<T>(
+  initialList: IHookStateInitAction<T[]> = []
+): [T[], ListActions<T>] {
+  const list = useRef(resolveHookState(initialList));
+  const update = useUpdate();
+
+  const actions = useMemo<ListActions<T>>(() => {
+    const a = {
+      set: (newList: IHookStateSetAction<T[]>) => {
+        list.current = resolveHookState(newList, list.current);
+        update();
+      },
+
+      push: (...items: T[]) => {
+        items.length && actions.set((curr: T[]) => curr.concat(items));
+      },
+
+      updateAt: (index: number, item: T) => {
+        actions.set((curr: T[]) => {
+          const arr = curr.slice();
+
+          arr[index] = item;
+
+          return arr;
+        });
+      },
+
+      insertAt: (index: number, item: T) => {
+        actions.set((curr: T[]) => {
+          const arr = curr.slice();
+
+          index > arr.length ? (arr[index] = item) : arr.splice(index, 0, item);
+
+          return arr;
+        });
+      },
+
+      update: (predicate: (a: T, b: T) => boolean, newItem: T) => {
+        actions.set((curr: T[]) =>
+          curr.map(item => (predicate(item, newItem) ? newItem : item))
+        );
+      },
+
+      updateFirst: (predicate: (a: T, b: T) => boolean, newItem: T) => {
+        const index = list.current.findIndex(item => predicate(item, newItem));
+
+        index >= 0 && actions.updateAt(index, newItem);
+      },
+
+      upsert: (predicate: (a: T, b: T) => boolean, newItem: T) => {
+        const index = list.current.findIndex(item => predicate(item, newItem));
+
+        index >= 0 ? actions.updateAt(index, newItem) : actions.push(newItem);
+      },
+
+      sort: (compareFn?: (a: T, b: T) => number) => {
+        actions.set((curr: T[]) => curr.slice().sort(compareFn));
+      },
+
+      filter: <S extends T>(
+        callbackFn: (value: T, index: number, array: T[]) => value is S,
+        thisArg?: any
+      ) => {
+        actions.set((curr: T[]) => curr.slice().filter(callbackFn, thisArg));
+      },
+
+      removeAt: (index: number) => {
+        actions.set((curr: T[]) => {
+          const arr = curr.slice();
+
+          arr.splice(index, 1);
+
+          return arr;
+        });
+      },
+
+      clear: () => {
+        actions.set([]);
+      },
+
+      reset: () => {
+        actions.set(resolveHookState(initialList).slice());
+      },
+    };
+
+    return a as ListActions<T>;
+    /* eslint-disable react-hooks/exhaustive-deps */
+  }, []);
+
+  return [list.current, actions];
+}

src/hooks/useQueryFilters.test.tsx

@@ -4,6 +4,7 @@ import {
   defaultTypeOperationsMap,
   defaultOperationLabels,
   mapOperationToSelectOption,
+  OperationType,
 } from '../operations';
 import { useQueryFilters, HookProps } from './useQueryFilters';
 
@@ -106,6 +107,7 @@ describe('useQueryFilters', () => {
       const updatedRowProps = result.current.createFilterRowProps(0);
 
       expect(updatedRowProps.filter.binding).toBe(undefined);
+      expect(updatedRowProps.shouldRenderBindingSelect).toBeFalsy();
     });
 
     it('should set the binding if the filter being is not the first one', () => {
@@ -129,8 +131,6 @@ describe('useQueryFilters', () => {
       expect(updatedRowProps.filter.binding).toBe(orBinding.value);
     });
 
-    it.skip('should return the proper operation options based on the type of the field selected in the filter', () => {});
-
     it('should remove an existing row', () => {
       const result = createTestFilter();
       const rowProps = result.current.createFilterRowProps(0);
@@ -157,6 +157,7 @@ describe('useQueryFilters', () => {
       });
 
       const updatedRowProps = result.current.createFilterRowProps(0);
+
       expect(updatedRowProps.filter.value).toBe(changeEvent.target.value);
     });
 
@@ -167,7 +168,7 @@ describe('useQueryFilters', () => {
       const nextField = fields.find(field => field.value === 'has_owner');
 
       if (!nextField) {
-        throw new Error("Failed to find owner field");
+        throw new Error('Failed to find owner field');
       }
 
       act(() => {
@@ -192,5 +193,23 @@ describe('useQueryFilters', () => {
 
       expect(updatedRowProps.filter.value).toBe(changeEvent.target.checked);
     });
+
+    it('should clear the filter value when the operation does not require a value to be set', () => {
+      const result = createTestFilter();
+      const initialRowProps = result.current.createFilterRowProps(0);
+      const emptyOperation = mapOperationToSelectOption(
+        OperationType.IS_EMPTY,
+        defaultOperationLabels
+      );
+
+      act(() => {
+        initialRowProps.selectStates.onChangeOperation(emptyOperation);
+      });
+
+      const updatedRowProps = result.current.createFilterRowProps(0);
+
+      expect(updatedRowProps.filter.value).toBeUndefined();
+      expect(updatedRowProps.shouldRenderValueInput).toBeFalsy();
+    });
   });
 });

src/hooks/useQueryFilters.tsx

@@ -1,8 +1,6 @@
 import { useEffect } from 'react';
-
-/** TODO: Extract useList from react-use so we can eliminate it from the dependency tree **/
-import { useList } from 'react-use';
 import { v4 as uuidv4 } from 'uuid';
+import { useList } from './useList';
 import { Binding, defaultBindingOptions } from '../bindings';
 import {
   OperationType,
@@ -97,9 +95,10 @@ export const useQueryFilters = ({
     value: property.key,
   }));
 
+  // TODO: make this a component property
   const bindings = defaultBindingOptions;
 
-  const getFieldType = (fieldKey?: string) => {
+  const getFieldType = (fieldKey: string) => {
     return properties.find(prop => prop.key === fieldKey)?.type;
   };
 
@@ -167,9 +166,7 @@ export const useQueryFilters = ({
           });
         },
         onChangeOperation: operation => {
-          const shouldClearValue = operation
-            ? noValueOperations.includes(operation.value)
-            : false;
+          const shouldClearValue = noValueOperations.includes(operation.value);
 
           selectStateActions.updateAt(index, {
             ...selectState,

src/hooks/useUpdate.ts

@@ -0,0 +1,9 @@
+import { useReducer } from 'react';
+
+const updateReducer = (num: number): number => (num + 1) % 1_000_000;
+
+export default function useUpdate(): () => void {
+  const [, update] = useReducer(updateReducer, 0);
+
+  return update;
+}

src/types.ts

@@ -20,7 +20,7 @@ interface BooleanPropertyDescription {
   label: string;
   key: string;
   type: 'boolean';
-  suggestions?: [true, false],
+  suggestions?: [true, false];
 }
 
 export type PropertyDescription =
@@ -38,9 +38,9 @@ export interface Filter {
 }
 
 export interface FilterSelectState {
-  field?: SelectOption<string>; 
-  operation?: SelectOption<OperationType>; 
-  binding?: SelectOption<Binding>; 
+  field?: SelectOption<string>;
+  operation?: SelectOption<OperationType>;
+  binding?: SelectOption<Binding>;
   fieldIndex?: number;
   operationIndex?: number;
   bindingIndex?: number;
@@ -57,7 +57,7 @@ export interface FilterRowProps {
     onChangeBinding: (selectedBinding: SelectOption<Binding>) => void;
     /** onChange handler for the `operation` property of the current row filter. */
     onChangeOperation: (selectedOperation: SelectOption<OperationType>) => void;
-  }
+  };
   /** List of Select Options for available fields. */
   fields: SelectOption<string>[];
   /** List of Select Options for available bindings. */