feat: add block and unblock device

src/pages/ManageApps/ManageApps.tsx

@@ -11,11 +11,16 @@ import { Link } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import CModal from "../../components/CModal";
 import CButton from "../../components/CButton";
+import { useAppDispatch, useAppSelector, type RootState } from "../../stores/store";
+import { blockDevice, unBlockDevice } from "../../stores/slices/commandSlice";
 
 const ManageApps: React.FC = () => {
   const [isOpenLockDeviceModal, setIsOpenLockDeviceModal] = useState(false);
   const [isOpenUnLockDeviceModal, setIsOpenUnLockDeviceModal] = useState(false);
   const { t } = useTranslation();
+  const { selectedDevice } = useAppSelector((state: RootState) => state.device)
+  const { isLoadingBlockDevice, isLoadingUnBlockDevice } = useAppSelector((state: RootState) => state.command)
+  const dispatch = useAppDispatch();
 
   const handleModalLockDevice = () => {
     setIsOpenLockDeviceModal((prev) => !prev);
@@ -25,6 +30,26 @@ const ManageApps: React.FC = () => {
     setIsOpenUnLockDeviceModal((prev) => !prev);
   };
 
+  const handleBlockDevice = async () => {
+    try {
+      await dispatch(blockDevice(selectedDevice?.id || ""));
+    } catch (error) {
+      console.error("Error blocking device:", error);
+    } finally {
+      handleModalLockDevice();
+    }
+  }
+
+  const handleUnBlockDevice = async () => {
+    try {
+      await dispatch(unBlockDevice(selectedDevice?.id || ""));
+    } catch (error) {
+      console.error("Error blocking device:", error);
+    } finally {
+      handleModalUnlockDevice();
+    }
+  };
+
   return (
     <div className="manageapps wrapper">
       <SectionHeader to="/home" />
@@ -83,7 +108,11 @@ const ManageApps: React.FC = () => {
                 variant="danger"
                 onClick={handleModalLockDevice}
               />
-              <CButton title={t("common.yes")} />
+              <CButton 
+                title={t("common.yes")} 
+                onClick={handleBlockDevice} 
+                isLoading={isLoadingBlockDevice}
+              />
             </div>
           </div>
         }
@@ -107,7 +136,11 @@ const ManageApps: React.FC = () => {
                 variant="danger"
                 onClick={handleModalUnlockDevice}
               />
-              <CButton title={t("common.yes")} />
+              <CButton 
+                title={t("common.yes")}
+                onClick={handleUnBlockDevice}
+                isLoading={isLoadingUnBlockDevice}
+              />
             </div>
           </div>
         }

src/stores/slices/commandSlice.ts

+import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
+import { sendRpcRequest } from "../../services/apiClient";
+
+interface ICommandState {
+  isLoadingBlockDevice: boolean;
+  isLoadingUnBlockDevice: boolean;
+}
+
+const initialState: ICommandState = {
+  isLoadingBlockDevice: false,
+  isLoadingUnBlockDevice: false,
+};
+
+export const blockDevice = createAsyncThunk(
+  "command/blockDevice",
+  async (deviceId: string, { rejectWithValue }) => {
+    try {
+      const response = await sendRpcRequest("command.block", {
+        deviceId,
+        password: "0000",
+      });
+
+      return response;
+    } catch (error) {
+      if (typeof error === "object" && error !== null && "message" in error) {
+        return rejectWithValue(error.message);
+      }
+
+      return rejectWithValue("Unknown error occurred");
+    }
+  }
+);
+
+export const unBlockDevice = createAsyncThunk(
+  "command/unBlockDevice",
+  async (deviceId: string, { rejectWithValue }) => {
+    try {
+      const response = await sendRpcRequest("command.block", {
+        deviceId,
+      });
+
+      return response;
+    } catch (error) {
+      if (typeof error === "object" && error !== null && "message" in error) {
+        return rejectWithValue(error.message);
+      }
+
+      return rejectWithValue("Unknown error occurred");
+    }
+  }
+);
+
+const commandSlice = createSlice({
+  name: "command",
+  initialState,
+  reducers: {},
+  extraReducers: (builder) => {
+    builder
+      .addCase(blockDevice.pending, (state) => {
+        state.isLoadingBlockDevice = true;
+      })
+      .addCase(blockDevice.fulfilled, (state) => {
+        state.isLoadingBlockDevice = false;
+      })
+
+      .addCase(unBlockDevice.pending, (state) => {
+        state.isLoadingUnBlockDevice = true;
+      })
+      .addCase(unBlockDevice.fulfilled, (state) => {
+        state.isLoadingUnBlockDevice = false;
+      });
+  },
+});
+
+export default commandSlice.reducer;

src/stores/store.ts

@@ -3,6 +3,7 @@ import authSlice from "./slices/authSlice";
 import accountSlice from "./slices/accountSlice";
 import notificationSlice from "./slices/notificationSlice";
 import deviceSlice from "./slices/deviceSlice";
+import commandSlice from "./slices/commandSlice";
 import {
   useDispatch,
   useSelector,
@@ -15,6 +16,7 @@ export const store = configureStore({
     account: accountSlice,
     notification: notificationSlice,
     device: deviceSlice,
+    command: commandSlice,
   },
 });