feat: deals filters indicator and refactoring

src/app/deals/hooks/useDealsFilters.ts

@@ -1,52 +1,48 @@
-import { Dispatch, SetStateAction, useState } from "react";
+import { isEqual } from "lodash";
+import { useForm, UseFormReturnType } from "@mantine/form";
 import { useDebouncedValue } from "@mantine/hooks";
 import { BoardSchema, SortDir, StatusSchema } from "@/lib/client";
 
-export type DealsFilters = {
+export type DealsFiltersForm = {
     id?: number;
-    debouncedId?: number;
-    setId: Dispatch<SetStateAction<number | undefined>>;
-    name?: string;
-    debouncedName?: string;
-    setName: Dispatch<SetStateAction<string | undefined>>;
+    name: string;
     board: BoardSchema | null;
-    setBoard: Dispatch<SetStateAction<BoardSchema | null>>;
     status: StatusSchema | null;
-    setStatus: Dispatch<SetStateAction<StatusSchema | null>>;
-    sortingField: string;
-    setSortingField: Dispatch<SetStateAction<string>>;
+    sortingField?: string;
     sortingDirection: SortDir;
-    setSortingDirection: Dispatch<SetStateAction<SortDir>>;
 };
 
-const useDealsFilters = (): DealsFilters => {
-    const [id, setId] = useState<number>();
-    const [debouncedId] = useDebouncedValue(id, 300);
+type ReturnType = {
+    debouncedId: number | undefined;
+    debouncedName: string;
+    form: UseFormReturnType<DealsFiltersForm>;
+    isChangedFilters: boolean;
+};
 
-    const [name, setName] = useState<string>();
-    const [debouncedName] = useDebouncedValue(name, 300);
+const useDealsFilters = (): ReturnType => {
+    const initialValues = {
+        id: undefined,
+        board: null,
+        status: null,
+        name: "",
+        sortingField: "createdAt",
+        sortingDirection: "asc" as SortDir,
+    };
 
-    const [board, setBoard] = useState<BoardSchema | null>(null);
-    const [status, setStatus] = useState<StatusSchema | null>(null);
+    const form = useForm<DealsFiltersForm>({
+        initialValues,
+    });
 
-    const [sortingField, setSortingField] = useState("createdAt");
-    const [sortingDirection, setSortingDirection] = useState<SortDir>("asc");
+    const isChangedFilters = !isEqual(form.values, initialValues);
+
+    const [debouncedId] = useDebouncedValue(form.values.id, 300);
+    const [debouncedName] = useDebouncedValue(form.values.name, 300);
 
     return {
-        id,
-        setId,
         debouncedId,
-        name,
-        setName,
         debouncedName,
-        board,
-        setBoard,
-        status,
-        setStatus,
-        sortingField,
-        setSortingField,
-        sortingDirection,
-        setSortingDirection,
+        form,
+        isChangedFilters,
     };
 };