@websolutespa/bom-mixer-hooks 0.2.0 → 0.2.2

package/src/useEventListener/useEventListener.ts

@@ -0,0 +1,43 @@
+import { RefObject, useEffect, useRef } from 'react';
+import { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect';
+
+// Window Event based useEventListener interface
+function useEventListener_<K extends keyof WindowEventMap>(eventName: K, handler: (event: WindowEventMap[K]) => void, element?: undefined, options?: boolean | AddEventListenerOptions): void;
+// Element Event based useEventListener interface
+function useEventListener_<K extends keyof HTMLElementEventMap, T extends HTMLElement = HTMLDivElement>(eventName: K, handler: (event: HTMLElementEventMap[K]) => void, element: RefObject<T>, options?: boolean | AddEventListenerOptions): void;
+// Document Event based useEventListener interface
+function useEventListener_<K extends keyof DocumentEventMap>(eventName: K, handler: (event: DocumentEventMap[K]) => void, element: RefObject<Document>, options?: boolean | AddEventListenerOptions): void;
+function useEventListener_<KW extends keyof WindowEventMap, KH extends keyof HTMLElementEventMap, T extends HTMLElement | void = void>(
+  eventName: KW | KH,
+  handler: (event: WindowEventMap[KW] | HTMLElementEventMap[KH] | Event) => void,
+  element?: RefObject<T>,
+  options?: boolean | AddEventListenerOptions
+) {
+  // Create a ref that stores handler
+  const savedHandler = useRef(handler);
+
+  useIsomorphicLayoutEffect(() => {
+    savedHandler.current = handler;
+  }, [handler]);
+
+  useEffect(() => {
+    // Define the listening target
+    const targetElement: T | Window = element?.current || window;
+
+    if (!(targetElement && targetElement.addEventListener)) {
+      return;
+    }
+
+    // Create event listener that calls handler function stored in ref
+    const eventListener: typeof handler = event => savedHandler.current(event);
+
+    targetElement.addEventListener(eventName, eventListener, options);
+
+    // Remove event listener on cleanup
+    return () => {
+      targetElement.removeEventListener(eventName, eventListener);
+    };
+  }, [eventName, element, options]);
+}
+
+export const useEventListener = useEventListener_;

package/src/useFilters/filter.service.ts

@@ -0,0 +1,86 @@
+import { IEquatable } from '@websolutespa/bom-core';
+import { IFeatureType } from '@websolutespa/bom-mixer-models';
+import { Filter, FilterMode, FilterParams } from './filter';
+
+export function getFilters<T>(items: T[], featureTypes: IFeatureType[], filterMap: (key: string, item: T, value: IEquatable) => boolean, params?: FilterParams | null): Filter<T>[] {
+  return featureTypes.map(featureType => {
+    const filter = Filter.fromFeatureType<T>(featureType, (featureType.mode as FilterMode) || FilterMode.OR);
+    filter.filter = (item, value) => {
+      if (typeof filterMap === 'function') {
+        return filterMap(featureType.id, item, value);
+      }
+      return false;
+    };
+    filter.removeInvalidOptions(items);
+    if (params && params[filter.id] != null) {
+      filter.values = params[filter.id] as IEquatable[];
+    }
+    return filter;
+  });
+}
+
+export function getFilteredItems<T>(items: T[], selectedFilters: Filter<T>[]): T[] {
+  const filteredItems = items.filter(item => {
+    let has = true;
+    selectedFilters.forEach(filter => {
+      has = has && filter.match(item);
+    });
+    return has;
+  });
+  return filteredItems;
+}
+
+export function setFilters<T>(items: T[], filters: Filter<T>[], filter?: Filter<T>, values?: IEquatable[]): T[] {
+
+  // if passed featureType and values with set filter values
+  if (filter) {
+    // console.log('setFilter', filter.id, values);
+    filter.values = values || [];
+  }
+
+  // selecting all filters with values
+  const selectedFilters = filters.filter(x => x.values.length > 0);
+
+  // filtering items
+  const filteredItems = getFilteredItems<T>(items, selectedFilters);
+
+  // updating filter options
+  filters.forEach(filter => {
+    const otherFilters = selectedFilters.filter(x => x !== filter);
+    const filteredItems = getFilteredItems<T>(items, otherFilters);
+    if (filter.options) {
+      filter.options.forEach(option => {
+        let count = 0;
+        if (option.id) {
+          let i = 0;
+          while (i < filteredItems.length) {
+            const item = filteredItems[i];
+            if (filter.filter(item, option.id)) {
+              count++;
+            }
+            i++;
+          }
+        } else {
+          count = filteredItems.length;
+        }
+        option.count = count;
+        option.disabled = count === 0;
+      });
+    }
+  });
+
+  return filteredItems;
+}
+
+export function filtersToParams<T>(filters: Filter<T>[]): FilterParams | null {
+  const params: FilterParams = {};
+  let any = false;
+  filters.filter(x => x.hasAny()).forEach(filter => {
+    params[filter.id] = filter.values;
+    any = true;
+  });
+  if (!any) {
+    return null;
+  }
+  return params;
+}

package/src/useFilters/filter.ts

@@ -0,0 +1,152 @@
+import { IEquatable } from '@websolutespa/bom-core';
+import { IFeatureType } from '@websolutespa/bom-mixer-models';
+
+export type FilterParams = { [key: string]: IEquatable[] | null };
+export type FilterValues = IEquatable[][];
+
+export enum FilterMode {
+  SELECT = 'select',
+  AND = 'and',
+  OR = 'or',
+  QUERY = 'query',
+}
+
+export type IFilterOption = {
+  id: IEquatable;
+  title: string;
+  count?: number;
+  disabled?: boolean;
+};
+
+export type IFilter = {
+  id?: string;
+  title?: string;
+  mode?: FilterMode;
+  options?: IFilterOption[];
+  values?: IEquatable[];
+};
+
+export class Filter<T> implements IFilter {
+  id: string = 'filter';
+  title: string = 'Filter';
+  mode: FilterMode = FilterMode.OR;
+  options: IFilterOption[] = [];
+  values: IEquatable[] = [];
+
+  constructor(options?: IFilter) {
+    if (options) {
+      // console.log(options.values);
+      Object.assign(this, options);
+    }
+    if (this.mode === FilterMode.SELECT) {
+      this.options.unshift({
+        id: -1, // !!! should be undefined
+        title: 'select',
+      });
+    }
+  }
+
+  static fromFeatureType<T>(featureType: IFeatureType, mode: FilterMode = FilterMode.AND): Filter<T> {
+    return new Filter<T>({
+      id: featureType.id,
+      title: featureType.title,
+      mode,
+      options: featureType.features,
+    });
+  }
+
+  filter(item: T, value: IEquatable): boolean {
+    console.warn('filter not defined for', item, value);
+    return true;
+  }
+
+  match(item: T): boolean {
+    let match: boolean;
+    if (this.mode === FilterMode.OR) {
+      // OR: if item has any of the selected values
+      match = this.values.length ? false : true;
+      this.values.forEach(value => {
+        match = match || this.filter(item, value);
+      });
+    } else {
+      // AND: item must have all selected values
+      match = true;
+      this.values.forEach(value => {
+        match = match && this.filter(item, value);
+      });
+    }
+    return match;
+  }
+
+  removeInvalidOptions(items: T[]): void {
+    if (this.options) {
+      this.options = this.options.filter(option => {
+        const hasItemWithOption = items.reduce((p, item) => {
+          return p || this.filter(item, option.id);
+        }, false);
+        return hasItemWithOption;
+      });
+    }
+  }
+
+  getLabel(): string | null {
+    if (this.hasAny()) {
+      return this.options.filter(x => x.id && this.values.indexOf(x.id) !== -1).map(x => x.title).join(', ');
+    } else {
+      return null;
+    }
+  }
+
+  hasAny(): boolean {
+    return this.values.length > 0;
+  }
+
+  getCount(): number {
+    return this.options.reduce((p, option) => {
+      return p + (option.count || 0);
+    }, 0);
+  }
+
+  hasResults(): boolean {
+    return this.getCount() > 0;
+  }
+
+  has(option: IFilterOption): boolean {
+    return this.values.indexOf(option.id) !== -1;
+  }
+
+  set(option: IFilterOption): void {
+    // console.log(this.mode, FilterMode.SELECT);
+    if (this.mode === FilterMode.QUERY) {
+      this.values = option ? [option.toString()] : [];
+    } else if (this.mode === FilterMode.SELECT) {
+      this.values = option.id != null ? [option.id] : [];
+    } else {
+      const index = this.values.indexOf(option.id);
+      if (index === -1) {
+        if (option.id != null) {
+          this.values.push(option.id);
+        }
+      }
+    }
+  }
+
+  remove(option: IFilterOption): void {
+    const index = this.values.indexOf(option.id);
+    if (index !== -1) {
+      this.values.splice(index, 1);
+    }
+  }
+
+  toggle(option: IFilterOption): void {
+    if (this.has(option)) {
+      this.remove(option);
+    } else {
+      this.set(option);
+    }
+  }
+
+  clear(): void {
+    this.values = [];
+  }
+}

package/src/useFilters/useFilters.test.ts

@@ -0,0 +1,48 @@
+// readme https://testing-library.com/
+import { renderHook } from '@testing-library/react';
+import { IEquatable } from '@websolutespa/bom-core';
+import { act } from 'react-dom/test-utils';
+import { useFilters } from './useFilters';
+
+type Item = {
+  category: number;
+};
+
+describe('useFilters', () => {
+
+  const items = [{ category: 1 }, { category: 2 }];
+
+  const featureTypes = [{
+    id: 'category',
+    title: 'category',
+    mode: 'or',
+    features: [{
+      id: 1,
+      title: 'feature',
+    }]
+  }];
+
+  const filterItem = jest.fn((key: string, item: Item, value: IEquatable) => {
+    switch (key) {
+      case 'category':
+        return item.category === value;
+    }
+    return true;
+  });
+
+  it('should work correctly', async () => {
+    const params = {};
+    const { result } = renderHook(() => useFilters<Item>(items, featureTypes, filterItem, params));
+    expect(result.current.filteredItems).toEqual(items);
+    act(() => result.current.setFilter(result.current.filters[0], [1]));
+    expect(result.current.filteredItems).toEqual(items.filter(x => filterItem('category', x, 1)));
+    const omittedItems = result.current.itemsWithOmittedKeys('category');
+    expect(omittedItems).toEqual(items);
+  });
+
+  it('should work with params', async () => {
+    const params = { category: [1] };
+    const { result } = renderHook(() => useFilters<Item>(items, featureTypes, filterItem, params));
+    expect(result.current.filteredItems).toEqual(items.filter(x => filterItem('category', x, 1)));
+  });
+});

package/src/useFilters/useFilters.ts

@@ -0,0 +1,44 @@
+import { IEquatable } from '@websolutespa/bom-core';
+import { IFeatureType } from '@websolutespa/bom-mixer-models';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { Filter, FilterParams } from './filter';
+import { getFilters, setFilters } from './filter.service';
+
+export function useFilters<T>(items: T[], featureTypes: IFeatureType[], filterItem: (key: string, item: T, value: IEquatable) => boolean, initialValues?: FilterParams | null): UseFiltersResultType<T> {
+  // console.log('useFilters', params);
+
+  // creating filters with useMemo because is an heavy operation
+  const filters = useMemo(() => {
+    return getFilters<T>(items, featureTypes, filterItem, initialValues);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [items, featureTypes, filterItem]);
+
+  const [filteredItems, setFilteredItems] = useState<T[]>(() => setFilters(items, filters));
+
+  const itemsWithOmittedKeys = useCallback((...keys: string[]) => {
+    const filtersWithOmittedKeys = filters.filter(x => !keys.includes(x.id));
+    const filteredItems = setFilters(items, filtersWithOmittedKeys);
+    return filteredItems;
+  }, [items, filters]);
+
+  // setFilter is called when user select a filter value
+  const setFilter = useCallback((filter?: Filter<T>, values?: IEquatable[]) => {
+    const filteredItems = setFilters(items, filters, filter, values);
+    setFilteredItems(filteredItems);
+  }, [items, filters]);
+
+  // initial call to setFilter
+  useEffect(() => {
+    setFilter();
+    return () => { };
+  }, [setFilter]);
+
+  return { filteredItems, filters, setFilter, itemsWithOmittedKeys };
+}
+
+export type UseFiltersResultType<T> = {
+  filteredItems: T[];
+  filters: Filter<T>[];
+  setFilter: (filter?: Filter<T>, values?: IEquatable[]) => void;
+  itemsWithOmittedKeys: (...keys: string[]) => T[];
+};

package/src/useGenericContext/useGenericContext.test.tsx

@@ -0,0 +1,19 @@
+import { renderHook } from '@testing-library/react';
+import { createGenericContext } from './useGenericContext';
+
+describe('useGenericContext', () => {
+  beforeEach(() => {
+    jest.spyOn(console, 'error').mockImplementation(() => { });
+  });
+
+  test('should create context', async () => {
+    const value = { message: 'test' };
+    const [useContext, ContextProvider] = createGenericContext<typeof value>();
+    const wrapper = (props: { children: React.ReactNode }) => (
+      <ContextProvider value={value}>{props.children}</ContextProvider>
+    );
+    const { result } = renderHook(() => useContext(), { wrapper });
+    expect(result.current).toEqual(value);
+  });
+
+});

package/src/useGenericContext/useGenericContext.ts

@@ -0,0 +1,18 @@
+import { createContext, useContext } from 'react';
+
+export const createGenericContext = <T>(defaultContext: T | null = null) => {
+  // Create a context with a generic parameter or undefined
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  const genericContext = createContext<T | undefined>(defaultContext!);
+
+  // Check if the value provided to the context is defined or throw an error
+  const useGenericContext = () => {
+    const context = useContext(genericContext);
+    if (!context) {
+      throw new Error('useGenericContext must be used within a Provider');
+    }
+    return context;
+  };
+
+  return [useGenericContext, genericContext.Provider] as const;
+};

package/src/useGeolocation/geolocation.service.ts

@@ -0,0 +1,66 @@
+
+/**
+ * @desc Made compatible with {GeolocationPositionError} and {PositionError} cause
+ * PositionError been renamed to GeolocationPositionError in typescript 4.1.x and making
+ * own compatible interface is most easiest way to avoid errors.
+ */
+export type IGeolocationPositionError = {
+  readonly code: number;
+  readonly message: string;
+  readonly PERMISSION_DENIED: number;
+  readonly POSITION_UNAVAILABLE: number;
+  readonly TIMEOUT: number;
+};
+
+export type GeoLocationSensorState = {
+  loading: boolean;
+  accuracy: number | null;
+  altitude: number | null;
+  altitudeAccuracy: number | null;
+  heading: number | null;
+  latitude: number | null;
+  longitude: number | null;
+  speed: number | null;
+  timestamp: number | null;
+  error?: Error | IGeolocationPositionError;
+};
+
+export function getCurrentPosition(options?: PositionOptions): Promise<GeoLocationSensorState> {
+  return new Promise<GeoLocationSensorState>((resolve, reject) => {
+    if (!hasGeolocation()) {
+      reject('geolocation not available');
+    }
+    navigator.geolocation.getCurrentPosition((event: GeolocationPosition) => {
+      const result: GeoLocationSensorState = {
+        loading: false,
+        accuracy: event.coords.accuracy,
+        altitude: event.coords.altitude,
+        altitudeAccuracy: event.coords.altitudeAccuracy,
+        heading: event.coords.heading,
+        latitude: event.coords.latitude,
+        longitude: event.coords.longitude,
+        speed: event.coords.speed,
+        timestamp: event.timestamp,
+      };
+      resolve(result);
+    }, (error: IGeolocationPositionError) => {
+      const sensorError: GeoLocationSensorState = {
+        loading: false,
+        error,
+        accuracy: null,
+        altitude: null,
+        altitudeAccuracy: null,
+        heading: null,
+        latitude: null,
+        longitude: null,
+        speed: null,
+        timestamp: Date.now(),
+      };
+      reject(sensorError);
+    }, options);
+  });
+}
+
+export function hasGeolocation(): boolean {
+  return Boolean(navigator && navigator.geolocation);
+}

package/src/useGeolocation/useGeolocation.test.ts

@@ -0,0 +1,29 @@
+// readme https://testing-library.com/
+import { renderHook } from '@testing-library/react';
+import { useGeolocation } from './useGeolocation';
+
+const getCurrentPosition = jest.fn();
+const watchPosition = jest.fn();
+const clearWatch = jest.fn();
+
+(global.navigator as any).geolocation = {
+  getCurrentPosition,
+  watchPosition,
+  clearWatch,
+};
+
+describe('useGeolocation', () => {
+
+  it('should work correctly', () => {
+    getCurrentPosition.mockImplementationOnce((success: (result: any) => Promise<any>) => Promise.resolve(success({
+      coords: {
+        latitude: 50.0,
+        longitude: 40.0
+      }
+    })));
+    const { result } = renderHook(() => useGeolocation());
+    expect(result.current.latitude).toBe(50.0);
+    expect(result.current.longitude).toBe(40.0);
+  });
+
+});

package/src/useGeolocation/useGeolocation.ts

@@ -0,0 +1,56 @@
+import { useEffect, useState } from 'react';
+import { GeoLocationSensorState, hasGeolocation, IGeolocationPositionError } from './geolocation.service';
+
+export function useGeolocation(options?: PositionOptions): GeoLocationSensorState {
+
+  const [state, setState] = useState<GeoLocationSensorState>({
+    loading: true,
+    accuracy: null,
+    altitude: null,
+    altitudeAccuracy: null,
+    heading: null,
+    latitude: null,
+    longitude: null,
+    speed: null,
+    timestamp: Date.now(),
+  });
+
+  let mounted = true;
+  let watchId: number;
+
+  const onEvent: PositionCallback = (event: GeolocationPosition) => {
+    if (mounted) {
+      setState({
+        loading: false,
+        accuracy: event.coords.accuracy,
+        altitude: event.coords.altitude,
+        altitudeAccuracy: event.coords.altitudeAccuracy,
+        heading: event.coords.heading,
+        latitude: event.coords.latitude,
+        longitude: event.coords.longitude,
+        speed: event.coords.speed,
+        timestamp: event.timestamp,
+      });
+    }
+  };
+
+  const onEventError = (error: IGeolocationPositionError) =>
+    mounted && setState((oldState) => ({ ...oldState, loading: false, error }));
+
+  useEffect(() => {
+    if (!hasGeolocation()) {
+      return;
+    }
+    navigator.geolocation.getCurrentPosition(onEvent, onEventError, options);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    watchId = navigator.geolocation.watchPosition(onEvent, onEventError, options);
+
+    return () => {
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      mounted = false;
+      navigator.geolocation.clearWatch(watchId);
+    };
+  }, []);
+
+  return state;
+}