feat: deals filters indicator and refactoring

src/app/deals/components/desktop/DealsTable/DealsTable.tsx

@@ -6,7 +6,7 @@ import { useDealsContext } from "@/app/deals/contexts/DealsContext";
 import BaseTable from "@/components/ui/BaseTable/BaseTable";
 
 const DealsTable: FC = () => {
-    const { deals, paginationInfo, page, setPage, dealsFilters } =
+    const { deals, paginationInfo, page, setPage, dealsFiltersForm } =
         useDealsContext();
     const columns = useDealsTableColumns();
 
@@ -18,12 +18,18 @@ const DealsTable: FC = () => {
                 records={[...deals]}
                 columns={columns}
                 sortStatus={{
-                    columnAccessor: dealsFilters.sortingField,
+                    columnAccessor: dealsFiltersForm.values.sortingField ?? "",
-                    direction: dealsFilters.sortingDirection,
+                    direction: dealsFiltersForm.values.sortingDirection,
                 }}
                 onSortStatusChange={sorting => {
-                    dealsFilters.setSortingField(sorting.columnAccessor);
+                    dealsFiltersForm.setFieldValue(
-                    dealsFilters.setSortingDirection(sorting.direction);
+                        "sortingField",
+                        sorting.columnAccessor
+                    );
+                    dealsFiltersForm.setFieldValue(
+                        "sortingDirection",
+                        sorting.direction
+                    );
                 }}
                 emptyState={
                     <Group

src/app/deals/components/desktop/TopToolPanel/TopToolPanel.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { IconEdit, IconFilter, IconPlus } from "@tabler/icons-react";
-import { Flex, Group } from "@mantine/core";
+import { Flex, Group, Indicator } from "@mantine/core";
 import { modals } from "@mantine/modals";
 import ToolPanelAction from "@/app/deals/components/desktop/ToolPanelAction/ToolPanelAction";
 import ViewSelector from "@/app/deals/components/desktop/ViewSelector/ViewSelector";
@@ -14,7 +14,7 @@ import { useDrawersContext } from "@/drawers/DrawersContext";
 import useIsMobile from "@/hooks/utils/useIsMobile";
 
 const TopToolPanel = () => {
-    const { dealsFilters } = useDealsContext();
+    const { dealsFiltersForm, isChangedFilters } = useDealsContext();
     const { view } = useViewContext();
     const { projects, setSelectedProjectId, selectedProject, projectsCrud } =
         useProjectsContext();
@@ -52,11 +52,16 @@ const TopToolPanel = () => {
                 gap={"sm"}>
                 <DealsTableFiltersModal
                     getOpener={onFiltersClick => (
+                        <Indicator
+                            disabled={!isChangedFilters}
+                            offset={3}
+                            size={8}>
                             <ToolPanelAction onClick={onFiltersClick}>
                                 <IconFilter />
                             </ToolPanelAction>
+                        </Indicator>
                     )}
-                    filters={dealsFilters}
+                    filtersForm={dealsFiltersForm}
                     selectedProject={selectedProject}
                     boardAndStatusEnabled={view === "table"}
                 />

src/app/deals/contexts/DealsContext.tsx

@@ -1,8 +1,9 @@
 "use client";
 
 import React from "react";
+import { UseFormReturnType } from "@mantine/form";
 import { useStatusesContext } from "@/app/deals/contexts/StatusesContext";
-import { DealsFilters } from "@/app/deals/hooks/useDealsFilters";
+import { DealsFiltersForm } from "@/app/deals/hooks/useDealsFilters";
 import { DealsCrud, useDealsCrud } from "@/hooks/cruds/useDealsCrud";
 import useDealsList from "@/hooks/lists/useDealsList";
 import { DealSchema, PaginationInfoSchema } from "@/lib/client";
@@ -16,7 +17,8 @@ type DealsContextState = {
     paginationInfo?: PaginationInfoSchema;
     page: number;
     setPage: React.Dispatch<React.SetStateAction<number>>;
-    dealsFilters: DealsFilters;
+    dealsFiltersForm: UseFormReturnType<DealsFiltersForm>;
+    isChangedFilters: boolean;
 };
 
 type Props = {

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;
+    name: string;
-    setId: Dispatch<SetStateAction<number | undefined>>;
-    name?: string;
-    debouncedName?: string;
-    setName: Dispatch<SetStateAction<string | undefined>>;
     board: BoardSchema | null;
-    setBoard: Dispatch<SetStateAction<BoardSchema | null>>;
     status: StatusSchema | null;
-    setStatus: Dispatch<SetStateAction<StatusSchema | null>>;
+    sortingField?: string;
-    sortingField: string;
-    setSortingField: Dispatch<SetStateAction<string>>;
     sortingDirection: SortDir;
-    setSortingDirection: Dispatch<SetStateAction<SortDir>>;
 };
 
-const useDealsFilters = (): DealsFilters => {
+type ReturnType = {
-    const [id, setId] = useState<number>();
+    debouncedId: number | undefined;
-    const [debouncedId] = useDebouncedValue(id, 300);
+    debouncedName: string;
+    form: UseFormReturnType<DealsFiltersForm>;
+    isChangedFilters: boolean;
+};
 
-    const [name, setName] = useState<string>();
+const useDealsFilters = (): ReturnType => {
-    const [debouncedName] = useDebouncedValue(name, 300);
+    const initialValues = {
+        id: undefined,
+        board: null,
+        status: null,
+        name: "",
+        sortingField: "createdAt",
+        sortingDirection: "asc" as SortDir,
+    };
 
-    const [board, setBoard] = useState<BoardSchema | null>(null);
+    const form = useForm<DealsFiltersForm>({
-    const [status, setStatus] = useState<StatusSchema | null>(null);
+        initialValues,
+    });
 
-    const [sortingField, setSortingField] = useState("createdAt");
+    const isChangedFilters = !isEqual(form.values, initialValues);
-    const [sortingDirection, setSortingDirection] = useState<SortDir>("asc");
+
+    const [debouncedId] = useDebouncedValue(form.values.id, 300);
+    const [debouncedName] = useDebouncedValue(form.values.name, 300);
 
     return {
-        id,
-        setId,
         debouncedId,
-        name,
-        setName,
         debouncedName,
-        board,
+        form,
-        setBoard,
+        isChangedFilters,
-        status,
-        setStatus,
-        sortingField,
-        setSortingField,
-        sortingDirection,
-        setSortingDirection,
     };
 };
 

src/app/deals/modals/DealsTableFiltersModal/DealsTableFiltersModal.tsx

@@ -2,21 +2,22 @@
 
 import { ReactNode } from "react";
 import { Flex, Modal, NumberInput, rem, TextInput } from "@mantine/core";
+import { UseFormReturnType } from "@mantine/form";
 import { useDisclosure } from "@mantine/hooks";
-import { DealsFilters } from "@/app/deals/hooks/useDealsFilters";
+import { DealsFiltersForm } from "@/app/deals/hooks/useDealsFilters";
 import BoardSelect from "@/components/selects/BoardSelect/BoardSelect";
 import StatusSelect from "@/components/selects/StatusSelect/StatusSelect";
 import { ProjectSchema } from "@/lib/client";
 
 type Props = {
-    filters: DealsFilters;
+    filtersForm: UseFormReturnType<DealsFiltersForm>;
     selectedProject: ProjectSchema | null;
     boardAndStatusEnabled: boolean;
     getOpener: (open: () => void) => ReactNode;
 };
 
 const DealsTableFiltersModal = ({
-    filters,
+    filtersForm,
     selectedProject,
     boardAndStatusEnabled,
     getOpener,
@@ -36,34 +37,32 @@ const DealsTableFiltersModal = ({
                     <NumberInput
                         label={"ID"}
                         placeholder={"Введите ID"}
-                        value={filters.id}
+                        {...filtersForm.getInputProps("id")}
+                        value={filtersForm.values.id}
                         onChange={value =>
                             typeof value === "number"
-                                ? filters.setId(Number(value))
+                                ? filtersForm.setFieldValue("id", Number(value))
-                                : filters.setId(undefined)
+                                : filtersForm.setFieldValue("id", undefined)
                         }
                         min={1}
                     />
                     <TextInput
                         label={"Название"}
                         placeholder={"Введите название"}
-                        defaultValue={filters.name}
+                        {...filtersForm.getInputProps("name")}
-                        onChange={event => filters.setName(event.target.value)}
                     />
                     {boardAndStatusEnabled && (
                         <>
                             <BoardSelect
                                 label={"Доска"}
-                                value={filters.board}
+                                {...filtersForm.getInputProps("board")}
-                                onChange={filters.setBoard}
                                 projectId={selectedProject?.id}
                                 clearable
                             />
                             <StatusSelect
                                 label={"Статус"}
-                                value={filters.status}
+                                {...filtersForm.getInputProps("status")}
-                                onChange={filters.setStatus}
+                                boardId={filtersForm.values.board?.id}
-                                boardId={filters.board?.id}
                                 clearable
                             />
                         </>

src/hooks/lists/useDealsList.ts

@@ -1,7 +1,8 @@
 import { Dispatch, SetStateAction, useState } from "react";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { UseFormReturnType } from "@mantine/form";
 import useDealsFilters, {
-    DealsFilters,
+    DealsFiltersForm,
 } from "@/app/deals/hooks/useDealsFilters";
 import { DealSchema, GetDealsData, PaginationInfoSchema } from "@/lib/client";
 import {
@@ -18,7 +19,8 @@ type Props = {
 type ReturnType = {
     deals: DealSchema[];
     setDeals: (deals: DealSchema[]) => void;
-    dealsFilters: DealsFilters;
+    dealsFiltersForm: UseFormReturnType<DealsFiltersForm>;
+    isChangedFilters: boolean;
     refetchDeals: () => void;
     page: number;
     setPage: Dispatch<SetStateAction<number>>;
@@ -34,21 +36,22 @@ const useDealsList = ({
     const queryClient = useQueryClient();
     const [page, setPage] = useState(1);
     const itemsPerPage = 10;
-    const dealsFilters = useDealsFilters();
+    const { form, debouncedName, debouncedId, isChangedFilters } =
+        useDealsFilters();
 
     const options: Omit<GetDealsData, "url"> = {
         query: {
             page: withPagination ? page : null,
             itemsPerPage: withPagination ? itemsPerPage : null,
-            sortingField: withPagination ? dealsFilters.sortingField : null,
+            sortingField: withPagination ? form.values.sortingField : null,
             sortingDirection: withPagination
-                ? dealsFilters.sortingDirection
+                ? form.values.sortingDirection
                 : null,
             projectId: withPagination ? projectId : null,
-            boardId: withPagination ? dealsFilters.board?.id : boardId,
+            boardId: withPagination ? form.values.board?.id : boardId,
-            statusId: withPagination ? dealsFilters.status?.id : null,
+            statusId: withPagination ? form.values.status?.id : null,
-            name: dealsFilters.debouncedName,
+            name: debouncedName,
-            id: dealsFilters.debouncedId,
+            id: debouncedId,
         },
     };
 
@@ -68,7 +71,8 @@ const useDealsList = ({
     return {
         deals: data?.items ?? [],
         setDeals,
-        dealsFilters,
+        dealsFiltersForm: form,
+        isChangedFilters,
         refetchDeals: refetch,
         page,
         setPage,