feat: add select device and seperate types

src/layouts/Header/Header.tsx

@@ -2,11 +2,9 @@ import React, { useState, useRef, useEffect } from "react";
 import "./Header.css";
 import {
   IoNotificationsOutline,
-  IoPhonePortraitOutline,
   IoReload,
   IoSettingsOutline,
 } from "react-icons/io5";
-import CSelect from "../../components/CSelect";
 import { GrMenu } from "react-icons/gr";
 import { NavLink } from "react-router-dom";
 import { MdLogout } from "react-icons/md";
@@ -21,35 +19,24 @@ import {
 import { accountSession } from "../../stores/slices/accountSlice";
 import { FaUserAlt } from "react-icons/fa";
 import { formatToDDMMYYYY } from "../../utils/utils";
-
-const devices = [
-  {
-    label: "iPhone 15 Pro",
-    value: "iphone-15-pro",
-    image: <IoPhonePortraitOutline />,
-  },
-  {
-    label: "iPhone 14 Pro",
-    value: "iphone-14-pro",
-    image: <IoPhonePortraitOutline />,
-  },
-  {
-    label: "iPhone 13 Pro",
-    value: "iphone-13-pro",
-    image: <IoPhonePortraitOutline />,
-  },
-];
+import {
+  fetchDevices,
+  setSelectedDevice,
+} from "../../stores/slices/deviceSlice";
 
 const Header: React.FC = () => {
-  const [selectedDevice, setSelectedDevice] = useState(devices[0].value);
   const [isSidebarOpen, setIsSidebarOpen] = useState(false);
   const sidebarRef = useRef<HTMLDivElement>(null);
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
   const { session } = useAppSelector((state: RootState) => state.account);
+  const { devices, selectedDevice } = useAppSelector(
+    (state: RootState) => state.device
+  );
 
   useEffect(() => {
     dispatch(accountSession());
+    dispatch(fetchDevices());
   }, [dispatch]);
 
   const handleOutsideClick = (e: MouseEvent) => {
@@ -86,12 +73,16 @@ const Header: React.FC = () => {
         </div>
 
         <div className="header__devices">
-          <CSelect
-            options={devices}
-            value={selectedDevice}
-            onChange={setSelectedDevice}
-            style={{ width: "250px" }}
-          />
+          <select
+            onChange={(e) => dispatch(setSelectedDevice(e.target.value))}
+            defaultValue={selectedDevice?.id}
+          >
+            {devices.map((device) => (
+              <option key={device.id} value={device.id}>
+                {device.name}
+              </option>
+            ))}
+          </select>
         </div>
       </div>
 

src/stores/slices/deviceSlice.ts

 import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
 import { sendRpcRequest } from "../../services/apiClient";
-
-interface IDevice {
-  id: string;
-  name: string;
-  created: string;
-  lastOnline: string;
-  osOver: string;
-  deviceInfo: {
-    date_updated: string;
-    permissions: {
-      isGranted: boolean;
-      permission: string;
-    }[];
-  };
-}
+import type { IDevice } from "../../types/device.types";
 
 interface IDeviceState {
-  device: IDevice | null;
   devices: IDevice[];
-  loadingDevice: boolean;
+  selectedDevice: IDevice | null;
   loadingDevices: boolean;
-  errorDevice: string;
   errorDevices: string;
 }
 
 const initialState: IDeviceState = {
-  device: null,
   devices: [],
-  loadingDevice: false,
+  selectedDevice: null,
   loadingDevices: false,
-  errorDevice: "",
   errorDevices: "",
 };
 
-export const fetchDevice = createAsyncThunk(
-  "device/fetchDevice",
-  async (deviceId: string, { rejectWithValue }) => {
-    try {
-      const response = await sendRpcRequest<IDevice>("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");
-    }
-  }
-);
-
 export const fetchDevices = createAsyncThunk(
   "device/fetchDevices",
   async (_, { rejectWithValue }) => {
@@ -75,27 +38,21 @@ export const fetchDevices = createAsyncThunk(
 const deviceSlice = createSlice({
   name: "device",
   initialState,
-  reducers: {},
+  reducers: {
+    setSelectedDevice: (state, action) => {
+      const selected = state.devices.find((d) => d.id === action.payload);
+      state.selectedDevice = selected ?? null;
+    },
+  },
   extraReducers: (builder) => {
     builder
-      .addCase(fetchDevice.pending, (state) => {
-        state.loadingDevice = true;
-      })
-      .addCase(fetchDevice.fulfilled, (state, action) => {
-        state.loadingDevice = false;
-        state.device = action.payload;
-      })
-      .addCase(fetchDevice.rejected, (state, action) => {
-        state.loadingDevice = false;
-        state.errorDevice = action.payload as string;
-      })
-
       .addCase(fetchDevices.pending, (state) => {
         state.loadingDevices = true;
       })
       .addCase(fetchDevices.fulfilled, (state, action) => {
         state.loadingDevices = false;
         state.devices = action.payload;
+        state.selectedDevice = action.payload[0] ?? null;
       })
       .addCase(fetchDevices.rejected, (state, action) => {
         state.loadingDevices = false;
@@ -104,4 +61,5 @@ const deviceSlice = createSlice({
   },
 });
 
+export const { setSelectedDevice } = deviceSlice.actions;
 export default deviceSlice.reducer;

src/types/device.types.ts

+export interface IDevice {
+  id: string;
+  name: string;
+  created: string;
+  lastOnline: string;
+  osOver: string;
+  deviceInfo: {
+    date_updated: string;
+    permissions: {
+      isGranted: boolean;
+      permission: string;
+    }[];
+  };
+}