feat: add feature delete device

src/locales/ru/ru.json

@@ -152,6 +152,10 @@
     "createTitle": "Создайте PIN-код",
     "confirmTitle": "Подтвердите PIN-код"
   },
+  "device": {
+    "deleteDevice": "Удалить устройство",
+    "deleteDeviceDesc": "Вы уверены, что хотите удалить это устройство?"
+  },
   "logout": {
     "title": "Выйти",
     "desc": "Вы уверены, что хотите продолжить?"
@@ -164,6 +168,7 @@
     "resetPassword": "Сбросить пароль",
     "logout": "Выйти",
     "cancel": "Отмена",
+    "delete": "Удалить",
     "search": "Поиск",
     "save": "Сохранить",
     "confirm": "Подтвердить"

src/pages/Home/Home.tsx

@@ -22,7 +22,7 @@ import {
   useAppSelector,
   type RootState,
 } from "../../stores/store";
-import { fetchDeviceData } from "../../stores/slices/deviceSlice";
+import { deleteDevice, fetchDeviceData } from "../../stores/slices/deviceSlice";
 import GoogleMapReact from "google-map-react";
 import CMarker from "../../components/CMarker/CMarker";
 import CModal from "../../components/CModal";
@@ -36,7 +36,7 @@ const Home: React.FC = () => {
   });
   const ref = useRef<SheetRef>(null);
   const { t } = useTranslation();
-  const { deviceData, selectedDevice } = useAppSelector(
+  const { deviceData, selectedDevice, isDeletingDevice } = useAppSelector(
     (state: RootState) => state.device
   );
   const dispatch = useAppDispatch();
@@ -61,6 +61,16 @@ const Home: React.FC = () => {
     setIsOpenRemoveDeviceModal((prev) => !prev);
   };
 
+  const handleDeleteDevice = async () => {
+    try {
+      await dispatch(deleteDevice(selectedDevice?.id || ""));
+    } catch (error) {
+      console.error("Failed to delete device:", error);
+    } finally {
+      setIsOpenRemoveDeviceModal(false);
+    }
+  };
+
   return (
     <>
       <div className="home">
@@ -181,7 +191,12 @@ const Home: React.FC = () => {
                 title={t("button.cancel")}
                 onClick={toggleRemoveDeviceModal}
               />
-              <CButton title={t("button.delete")} variant="danger" />
+              <CButton
+                title={t("button.delete")}
+                variant="danger"
+                isLoading={isDeletingDevice}
+                onClick={handleDeleteDevice}
+              />
             </div>
           </div>
         }

src/stores/slices/deviceSlice.ts

@@ -18,6 +18,7 @@ interface IDeviceState {
   loadingDevices: boolean;
   errorDevices: string;
   isFetched: boolean;
+  isDeletingDevice: boolean;
 }
 
 const initialState: IDeviceState = {
@@ -27,6 +28,7 @@ const initialState: IDeviceState = {
   loadingDevices: false,
   errorDevices: "",
   isFetched: false,
+  isDeletingDevice: false,
 };
 
 export const fetchDevices = createAsyncThunk(
@@ -70,6 +72,31 @@ export const fetchDeviceData = createAsyncThunk(
   }
 );
 
+export const deleteDevice = createAsyncThunk(
+  "device/deleteDevice",
+  async (deviceId: string, { rejectWithValue }) => {
+    try {
+      const response = await sendRpcRequest<{ success: boolean }>(
+        "devices.deleteDevice",
+        { deviceId }
+      );
+
+      console.log(response);
+
+      if (response.success) {
+        fetchDevices();
+      }
+
+      return response;
+    } catch (error: unknown) {
+      if (typeof error === "object" && error !== null && "message" in error) {
+        return rejectWithValue(error.message);
+      }
+      return rejectWithValue("Unknown error occurred");
+    }
+  }
+);
+
 const deviceSlice = createSlice({
   name: "device",
   initialState,
@@ -99,6 +126,20 @@ const deviceSlice = createSlice({
 
       .addCase(fetchDeviceData.fulfilled, (state, action) => {
         state.deviceData = action.payload;
+      })
+
+      .addCase(deleteDevice.pending, (state) => {
+        state.isDeletingDevice = true;
+      })
+      .addCase(deleteDevice.fulfilled, (state, action) => {
+        state.isDeletingDevice = false;
+        if (action.payload.success) {
+          state.isFetched = false;
+        }
+      })
+      .addCase(deleteDevice.rejected, (state, action) => {
+        state.isDeletingDevice = false;
+        console.error("Error deleting device:", action.payload);
       });
   },
 });