feat: add useStateFilters hook

Author: eshankvaish

src/Common/Hooks/index.ts

@@ -3,3 +3,4 @@ export { useClickOutside } from './UseClickOutside/UseClickOutside'
 export { useWindowSize } from './UseWindowSize/UseWindowSize'
 export * from './useUrlFilters'
 export * from './UseRegisterShortcut'
+export * from './useStateFilters'

src/Common/Hooks/useStateFilters/index.ts

@@ -0,0 +1,2 @@
+export { default as useStateFilters } from './useStateFilters'
+export type { UseStateFiltersProps, UseStateFiltersReturnType } from './types'

src/Common/Hooks/useStateFilters/types.ts

@@ -0,0 +1,6 @@
+import { UseUrlFiltersProps, UseUrlFiltersReturnType } from '../useUrlFilters'
+
+export interface UseStateFiltersProps<T> extends Pick<UseUrlFiltersProps<T, never>, 'initialSortKey'> {}
+
+export interface UseStateFiltersReturnType<T>
+    extends Pick<UseUrlFiltersReturnType<T>, 'sortBy' | 'sortOrder' | 'handleSorting' | 'clearFilters'> {}

src/Common/Hooks/useStateFilters/useStateFilters.tsx

@@ -0,0 +1,58 @@
+import { useState } from 'react'
+import { SortingOrder } from '../../Constants'
+import { UseStateFiltersProps, UseStateFiltersReturnType } from './types'
+
+/**
+ * Generic hook for implementing state based pagination, search, sorting.
+ * Sister method of [useUrlFilters](https://github.com/devtron-labs/devtron-fe-common-lib/blob/main/src/Common/Hooks/useUrlFilters/useUrlFilters.ts)
+ *
+ * The exposed handlers can be consumed directly without the need for explicit state management
+ *
+ * @example Usage with custom type for sort keys and initial sort key:
+ * ```tsx
+ * const  { sortBy, sortOrder } = useUrlFilters<'email' | 'name'>({ initialSortKey: 'email' })
+ * ```
+ *
+ * To be extended to be used with pagination and search as and when required
+ */
+const useStateFilters = <T = string,>({
+    initialSortKey,
+}: UseStateFiltersProps<T> = {}): UseStateFiltersReturnType<T> => {
+    const [sortingConfig, setSortingConfig] = useState({
+        sortOrder: SortingOrder.ASC,
+        sortBy: initialSortKey,
+    })
+
+    const { sortBy, sortOrder } = sortingConfig
+
+    const handleSorting = (_sortBy: T) => {
+        let order: SortingOrder
+
+        if (_sortBy === sortBy && sortOrder === SortingOrder.ASC) {
+            order = SortingOrder.DESC
+        } else {
+            order = SortingOrder.ASC
+        }
+
+        setSortingConfig(() => ({
+            ...sortingConfig,
+            sortBy: _sortBy,
+            sortOrder: order,
+        }))
+    }
+
+    const clearFilters = () => {
+        setSortingConfig({
+            sortOrder: SortingOrder.ASC,
+            sortBy: initialSortKey,
+        })
+    }
+
+    return {
+        ...sortingConfig,
+        handleSorting,
+        clearFilters,
+    }
+}
+
+export default useStateFilters