Merge pull request #148 from devtron-labs/feat/rollout-status

feat: add useStateFilters hook, number and string comparators

Author: eshankvaish

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.0.82-beta-2",
+    "version": "0.0.82-beta-3",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

package.json

@@ -67,12 +67,8 @@ const GenericEmptyState = ({
                 } ${contentClassName}`}
             >
                 <div className="flex column dc__gap-8">
-                    <h4 className="title fw-6 cn-9 mt-0 mb-0 lh-24">{title}</h4>
-                    {subTitle && (
-                        <p className={`subtitle ${isRowLayout ? 'subtitle--text-start' : ''}`}>
-                            {subTitle}
-                        </p>
-                    )}
+                    <h4 className="title fw-6 cn-9 mt-0 mb-0 lh-24 dc__align-center">{title}</h4>
+                    {subTitle && <p className={`subtitle ${isRowLayout ? 'subtitle--text-start' : ''}`}>{subTitle}</p>}
                 </div>
                 {isButtonAvailable && renderButton()}
                 {children}

src/Common/EmptyState/GenericEmptyState.tsx

@@ -784,3 +784,5 @@ export function deepEqual(configA: any, configB: any): boolean {
         return true
     }
 }
+
+export const prefixZeroIfSingleDigit = (value: number = 0) => (value > 0 && value < 10 ? `0${value}` : value)

src/Common/Helper.tsx

@@ -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/index.ts

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

src/Common/Hooks/useStateFilters/index.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/types.ts

@@ -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

src/Common/Hooks/useStateFilters/useStateFilters.tsx

@@ -1,4 +1,4 @@
-import { MaterialInfo } from '../Common'
+import { MaterialInfo, SortingOrder } from '../Common'
 import { GitTriggers, WebhookEventNameType } from './types'
 import { ReactComponent as ICPullRequest } from '../Assets/Icon/ic-pull-request.svg'
 import { ReactComponent as ICTag } from '../Assets/Icon/ic-tag.svg'
@@ -70,8 +70,26 @@ export const getGitCommitInfo = (materialInfo: MaterialInfo): GitTriggers => ({
     CiConfigureSourceValue: '',
 })
 
-export const caseInsensitiveStringComparator = (a: string, b: string): number =>
-    a.toLowerCase().localeCompare(b.toLowerCase())
+export const stringComparatorBySortOrder = (
+    a: string,
+    b: string,
+    sortOrder: SortingOrder = SortingOrder.ASC,
+    isCaseSensitive: boolean = true,
+): number => {
+    if (isCaseSensitive) {
+        return sortOrder === SortingOrder.ASC ? a.localeCompare(b) : b.localeCompare(a)
+    }
+
+    return sortOrder === SortingOrder.ASC
+        ? a.toLowerCase().localeCompare(b.toLowerCase())
+        : b.toLowerCase().localeCompare(a.toLowerCase())
+}
+
+export const numberComparatorBySortOrder = (
+    a: number,
+    b: number,
+    sortOrder: SortingOrder = SortingOrder.ASC,
+): number => (sortOrder === SortingOrder.ASC ? a - b : b - a)
 
 export const getWebhookEventIcon = (eventName: WebhookEventNameType) => {
     switch (eventName) {