Реализация запроса на получение тарифов, отображение в таблице

src/pages/dashboard/Content/Tariffs/tariffsDG.tsx

@@ -1,20 +1,64 @@
+import { useEffect, useState } from "react";
 import { GridColDef, GridSelectionModel, GridToolbar } from "@mui/x-data-grid";
+import { IconButton } from "@mui/material";
+import BackspaceIcon from "@mui/icons-material/Backspace";
+import { enqueueSnackbar } from "notistack";
 
 import DataGrid from "@kitUI/datagrid";
 
 import { deleteTariffs, useTariffStore } from "@root/stores/tariffs";
 import { SERVICE_LIST } from "@root/model/tariff";
 import { findPrivilegeById } from "@root/stores/privileges";
-import { IconButton } from "@mui/material";
 
-import BackspaceIcon from "@mui/icons-material/Backspace";
+import axios from "axios";
+import { authStore } from "@root/stores/auth";
 
 interface Props {
   handleSelectionChange: (selectionModel: GridSelectionModel) => void;
 }
 
 export default function TariffsDG({ handleSelectionChange }: Props) {
-  const tariffs = useTariffStore((state) => state.tariffs);
+  const exampleTariffs = useTariffStore((state) => state.tariffs);
+  const [tariffs, setTariffs] = useState<any>();
+  const [deletedRows, setDeletedRows] = useState<string[]>([]);
+  const { token } = authStore();
+
+  const mergeTariffs = [...exampleTariffs, ...(tariffs?.tariffs ?? [])];
+
+  console.log(mergeTariffs);
+
+  const tariffsDelete = async (tarifIid: string) => {
+    try {
+      await axios({
+        method: "delete",
+        url: "https://admin.pena.digital/strator/tariff",
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+        data: { id: tarifIid },
+      });
+      setDeletedRows((prevDeletedRows) => [...prevDeletedRows, tarifIid]);
+    } catch (error) {
+      enqueueSnackbar("Ошибка удаления тарифов");
+    }
+  };
+
+  useEffect(() => {
+    const axiosTariffs = async () => {
+      try {
+        const { data } = await axios({
+          method: "get",
+          url: "https://admin.pena.digital/strator/tariff",
+        });
+        setTariffs(data);
+        console.log(data);
+      } catch (error) {
+        enqueueSnackbar("Ошибка получения тарифов");
+      }
+    };
+
+    axiosTariffs();
+  }, [deletedRows]);
 
   const columns: GridColDef[] = [
     { field: "id", headerName: "ID", width: 100 },
@@ -26,6 +70,7 @@ export default function TariffsDG({ handleSelectionChange }: Props) {
     { field: "pricePerUnit", headerName: "Цена за ед.", width: 100 },
     { field: "isCustomPrice", headerName: "Кастомная цена", width: 130 },
     { field: "total", headerName: "Сумма", width: 60 },
+    { field: "isDeleted", headerName: "isDeleted", width: 60 },
     {
       field: "delete",
       headerName: "Удаление",
@@ -34,7 +79,7 @@ export default function TariffsDG({ handleSelectionChange }: Props) {
         return (
           <IconButton
             onClick={() => {
-              deleteTariffs(row.id);
+              tariffsDelete(row.id);
             }}
           >
             <BackspaceIcon />
@@ -44,22 +89,37 @@ export default function TariffsDG({ handleSelectionChange }: Props) {
     },
   ];
 
-  const gridData = tariffs.map((tariff) => ({
-    id: tariff.id,
-    name: tariff.name,
-    serviceName: SERVICE_LIST.find(
-      (service) => service.serviceKey === findPrivilegeById(tariff.privilegeId)?.serviceKey
-    )?.displayName,
-    privilege: `(${tariff.privilegeId}) ${
-      findPrivilegeById(tariff.privilegeId)?.description ?? "Привилегия не найдена"
-    }`,
-    amount: tariff.amount,
-    type: findPrivilegeById(tariff.privilegeId)?.type === "count" ? "день" : "шт.",
-    pricePerUnit: tariff.customPricePerUnit ?? findPrivilegeById(tariff.privilegeId)?.price,
-    isCustomPrice: tariff.customPricePerUnit === undefined ? "Нет" : "Да",
-    total: tariff.amount * (tariff.customPricePerUnit ?? findPrivilegeById(tariff.privilegeId)?.price ?? 0),
-  }));
-
+  const gridData = mergeTariffs.map(
+    (tariff: {
+      _id: string;
+      id: string;
+      name: string;
+      privilegeId: string;
+      amount: number;
+      price: number;
+      isDeleted: boolean;
+      customPricePerUnit: number;
+    }) => ({
+      id: tariff._id ? tariff._id : tariff.id,
+      name: tariff.name,
+      serviceName: SERVICE_LIST.find(
+        (service) => service.serviceKey === findPrivilegeById(tariff.privilegeId)?.serviceKey
+      )?.displayName,
+      privilege: `(${tariff.privilegeId}) ${
+        findPrivilegeById(tariff.privilegeId)?.description ?? "Привилегия не найдена"
+      }`,
+      amount: tariff.amount,
+      type: findPrivilegeById(tariff.privilegeId)?.type === "count" ? "день" : "шт.",
+      pricePerUnit: tariff.customPricePerUnit
+        ? tariff.customPricePerUnit ?? findPrivilegeById(tariff.privilegeId)?.price
+        : tariff.price,
+      isCustomPrice: tariff.customPricePerUnit === undefined ? "Нет" : "Да",
+      isDeleted: tariff.isDeleted,
+      total: tariff.amount
+        ? tariff.amount * (tariff.customPricePerUnit ?? findPrivilegeById(tariff.privilegeId)?.price ?? 0)
+        : 0,
+    })
+  );
   return (
     <DataGrid
       checkboxSelection={true}