Init

Author: fhlavac

packages/module/patternfly-docs/generated/index.js

@@ -25,8 +25,8 @@ module.exports = {
   '/extensions/data-view/functionality/react': {
     id: "Functionality",
     title: "Functionality",
-    toc: [[{"text":"Toolbar usage"},{"text":"Pagination state"},{"text":"Pagination example"},{"text":"Toolbar usage","id":"toolbar-usage-0"},{"text":"Selection state"},{"text":"Selection example"}]],
-    examples: ["Pagination example","Selection example"],
+    toc: [[{"text":"Toolbar usage"},{"text":"Pagination state"},{"text":"Pagination example"},{"text":"Toolbar usage","id":"toolbar-usage-0"},{"text":"Selection state"},{"text":"Selection example"},{"text":"Toolbar usage","id":"toolbar-usage-1"},{"text":"Filters state"},{"text":"Filtering example"}]],
+    examples: ["Pagination example","Selection example","Filtering example"],
     section: "extensions",
     subsection: "Data view",
     source: "react",

packages/module/src/Hooks/sort.test.tsx

@@ -0,0 +1,62 @@
+import '@testing-library/jest-dom';
+import { renderHook, act } from '@testing-library/react';
+import { useDataViewFilters, UseDataViewFiltersProps } from './filters';
+
+describe('useDataViewSort', () => {
+  const initialFilters = { search: 'test', tags: [ 'tag1', 'tag2' ] };
+
+  it('should initialize with provided initial filters', () => {
+    const { result } = renderHook(() => useDataViewFilters({ initialFilters }));
+    expect(result.current.filters).toEqual(initialFilters);
+  });
+
+  it('should initialize with empty filters if no initialFilters provided', () => {
+    const { result } = renderHook(() => useDataViewFilters({}));
+    expect(result.current.filters).toEqual({});
+  });
+
+  it('should set filters correctly', () => {
+    const { result } = renderHook(() => useDataViewFilters({ initialFilters }));
+    const newFilters = { search: 'new search' };
+    act(() => result.current.onSetFilters(newFilters));
+
+    expect(result.current.filters).toEqual({ ...initialFilters, ...newFilters });
+  });
+
+  it('should delete specific filters without removing keys', () => {
+    const { result } = renderHook(() => useDataViewFilters({ initialFilters }));
+    const filtersToDelete = { search: 'test' };
+    act(() => result.current.onDeleteFilters(filtersToDelete));
+
+    expect(result.current.filters).toEqual({ search: '', tags: [ 'tag1', 'tag2' ] });
+  });
+
+  it('should clear all filters', () => {
+    const { result } = renderHook(() => useDataViewFilters({ initialFilters }));
+    act(() => result.current.clearAllFilters());
+
+    expect(result.current.filters).toEqual({ search: '', tags: [] });
+  });
+
+  it('should sync with URL search params if isUrlSyncEnabled', () => {
+    const searchParams = new URLSearchParams();
+    const setSearchParams = jest.fn();
+    const props: UseDataViewFiltersProps<typeof initialFilters> = {
+      initialFilters,
+      searchParams,
+      setSearchParams,
+    };
+
+    const { result } = renderHook(() => useDataViewFilters(props));
+    act(() => result.current.onSetFilters({ search: 'new search' }));
+
+    expect(setSearchParams).toHaveBeenCalled();
+  });
+
+  it('should reset filters to default values when clearAllFilters is called', () => {
+    const { result } = renderHook(() => useDataViewFilters({ initialFilters }));
+    act(() => result.current.clearAllFilters());
+
+    expect(result.current.filters).toEqual({ search: '', tags: [] });
+  });
+});

packages/module/src/Hooks/sort.ts

@@ -0,0 +1,94 @@
+import { useState, useCallback, useEffect, useMemo } from "react";
+
+export interface UseDataViewSortProps<T extends object> {
+  /** Initial sorting object */
+  initialSort?: T;
+  /** Current search parameters as a string */
+  searchParams?: URLSearchParams;
+  /** Function to set search parameters */
+  setSearchParams?: (params: URLSearchParams) => void;
+};
+
+export const useDataViewSort = <T extends object>({
+  initialSort = {} as T,
+  searchParams,
+  setSearchParams,
+}: UseDataViewSortProps<T>) => {
+  const isUrlSyncEnabled = useMemo(() => searchParams && !!setSearchParams, [ searchParams, setSearchParams ]);
+
+  const getInitialSort = useCallback((): T => isUrlSyncEnabled ? Object.keys(initialSort).reduce((loadedSort, key) => {
+    const urlValue = searchParams?.get(key);
+    loadedSort[key as keyof T] = urlValue
+      ? (urlValue as T[keyof T] | T[keyof T])
+      : loadedSort[key as keyof T];
+    return loadedSort;
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, { ...loadedSort }) : loadedSort, [ isUrlSyncEnabled, JSON.stringify(loadedSort), searchParams?.toString() ]);
+
+  const [ sortConfig, setSortConfig ] = useState<T>(getInitialSort());
+
+  const updateSearchParams = useCallback(
+    (newFilters: T) => {
+      if (isUrlSyncEnabled) {
+        const params = new URLSearchParams(searchParams);
+        Object.entries(newFilters).forEach(([ key, value ]) => {
+          if (value) {
+            params.set(key, Array.isArray(value) ? value.join(',') : value);
+          } else {
+            params.delete(key);
+          }
+        });
+        setSearchParams?.(params);
+      }
+    },
+    [ isUrlSyncEnabled, searchParams, setSearchParams ]
+  );
+
+  useEffect(() => {
+    isUrlSyncEnabled && setSortConfig(getInitialSort())
+  }, []);  // eslint-disable-line react-hooks/exhaustive-deps
+
+  const onSetSort = useCallback(
+    (newFilters: Partial<T>) => {
+      setSortConfig(prevFilters => {
+        const updatedFilters = { ...prevFilters, ...newFilters };
+        isUrlSyncEnabled && updateSearchParams(updatedFilters);
+        return updatedFilters;
+      });
+    },
+    [ isUrlSyncEnabled, updateSearchParams ]
+  );
+
+  // helper function to reset filters
+  const resetSortValues = useCallback((filters: Partial<T>): Partial<T> => Object.entries(filters).reduce((acc, [ key, value ]) => {
+    if (Array.isArray(value)) {
+      acc[key as keyof T] = [] as T[keyof T];
+    } else {
+      acc[key as keyof T] = '' as T[keyof T];
+    }
+    return acc;
+  }, {} as Partial<T>), []);
+  
+  // const onDeleteFilters = useCallback(
+  //   (filtersToDelete: Partial<T>) => {
+  //     setSortConfig(prevFilters => {
+  //       const updatedFilters = { ...prevFilters,...resetFilterValues(filtersToDelete) };
+  //       isUrlSyncEnabled && updateSearchParams(updatedFilters);
+  //       return updatedFilters;
+  //     });
+  //   },
+  //   [ isUrlSyncEnabled, updateSearchParams, resetFilterValues ]
+  // );
+
+  // const clearAllFilters = useCallback(() => {
+  //   const clearedFilters = resetFilterValues(filters) as T;
+  
+  //   setFilters(clearedFilters);
+  //   isUrlSyncEnabled && updateSearchParams(clearedFilters);
+  // }, [ filters, isUrlSyncEnabled, updateSearchParams, resetFilterValues ]);
+
+  return {
+    sortConfig,
+    onSetSort
+  };
+};