feat: fetch device data

src/pages/Home/Home.tsx

-import React from "react";
+import React, { useEffect } from "react";
 import "./Home.css";
 import { Sheet, type SheetRef } from "react-modal-sheet";
 import { useRef } from "react";
@@ -17,10 +17,24 @@ import { IoMdInformationCircleOutline } from "react-icons/io";
 import { RiDeleteBinLine } from "react-icons/ri";
 import { BsPersonStanding } from "react-icons/bs";
 import { useTranslation } from "react-i18next";
+import {
+  useAppDispatch,
+  useAppSelector,
+  type RootState,
+} from "../../stores/store";
+import { fetchDeviceData } from "../../stores/slices/deviceSlice";
 
 const Home: React.FC = () => {
   const ref = useRef<SheetRef>(null);
   const { t } = useTranslation();
+  const { deviceData, selectedDevice } = useAppSelector(
+    (state: RootState) => state.device
+  );
+  const dispatch = useAppDispatch();
+
+  useEffect(() => {
+    dispatch(fetchDeviceData(selectedDevice?.id || ""));
+  }, [selectedDevice, dispatch]);
 
   return (
     <>
@@ -42,17 +56,19 @@ const Home: React.FC = () => {
               <div className="home__sheet__status">
                 <div>
                   <IoBatteryHalfOutline className="home__sheet__status__icon" />
-                  <p>100%</p>
+                  <p>{deviceData?.bat_level}%</p>
                 </div>
                 <div>
                   <BsPersonStanding className="home__sheet__status__icon" />
-                  <p>0 {t("home.kmh")}</p>
+                  <p>
+                    {deviceData?.location.speed} {t("home.kmh")}
+                  </p>
                 </div>
               </div>
 
               <div className="home__sheet__device">
                 <IoPhonePortraitOutline className="home__sheet__device__icon" />
-                <p>Tecno</p>
+                <p>{selectedDevice?.name}</p>
               </div>
             </div>
 

src/stores/slices/deviceSlice.ts

@@ -2,8 +2,18 @@ import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
 import { sendRpcRequest } from "../../services/apiClient";
 import type { IDevice } from "../../types/device.types";
 
+interface IDeviceData {
+  bat_level: string;
+  location: {
+    lat: string;
+    lon: string;
+    speed: string;
+  };
+}
+
 interface IDeviceState {
   devices: IDevice[];
+  deviceData: IDeviceData | null;
   selectedDevice: IDevice | null;
   loadingDevices: boolean;
   errorDevices: string;
@@ -11,6 +21,7 @@ interface IDeviceState {
 
 const initialState: IDeviceState = {
   devices: [],
+  deviceData: null,
   selectedDevice: null,
   loadingDevices: false,
   errorDevices: "",
@@ -35,6 +46,28 @@ export const fetchDevices = createAsyncThunk(
   }
 );
 
+export const fetchDeviceData = createAsyncThunk(
+  "device/fetchDeviceData",
+  async (deviceId: string, { rejectWithValue }) => {
+    try {
+      const response = await sendRpcRequest<IDeviceData>(
+        "devices.getdevicedata",
+        {
+          deviceId,
+        }
+      );
+
+      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,
@@ -57,6 +90,10 @@ const deviceSlice = createSlice({
       .addCase(fetchDevices.rejected, (state, action) => {
         state.loadingDevices = false;
         state.errorDevices = action.payload as string;
+      })
+
+      .addCase(fetchDeviceData.fulfilled, (state, action) => {
+        state.deviceData = action.payload;
       });
   },
 });