refactor: cache devices

src/App.tsx

-import React, { useEffect } from "react";
+import React from "react";
 import Router from "./routes/Router";
 import useTelegramExpand from "./hooks/useTelegramExpand";
-import { TG_USER_ID } from "./constants/constants";
-import { useAppDispatch } from "./stores/store";
-import { fetchDevices } from "./stores/slices/deviceSlice";
 
 const App: React.FC = () => {
-  const dispatch = useAppDispatch();
-
   useTelegramExpand();
 
-  useEffect(() => {
-    if (localStorage.getItem(`token-${TG_USER_ID}`)) {
-      dispatch(fetchDevices());
-    }
-  }, [dispatch]);
-
   return <Router />;
 };
 

src/stores/slices/deviceSlice.ts

 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 IAudioList {
-  path: string;
-  url: string;
-  file_exists: boolean;
-  file_ext: string;
-  file_size: string;
-  date: string;
-}
+import type {
+  IAudioList,
+  IDevice,
+  IDeviceData,
+} from "../../types/device.types";
 
 interface IDeviceState {
   devices: IDevice[];
@@ -28,7 +14,6 @@ interface IDeviceState {
   isAudioListLoading: boolean;
   loadingDevices: boolean;
   errorDevices: string;
-  isFetched: boolean;
   isDeletingDevice: boolean;
 }
 
@@ -40,7 +25,6 @@ const initialState: IDeviceState = {
   isAudioListLoading: false,
   loadingDevices: false,
   errorDevices: "",
-  isFetched: false,
   isDeletingDevice: false,
 };
 
@@ -60,6 +44,13 @@ export const fetchDevices = createAsyncThunk(
 
       return rejectWithValue("Unknown error occurred");
     }
+  },
+  {
+    condition: (_, { getState }) => {
+      const state = getState() as { device: IDeviceState };
+
+      return state.device.devices.length === 0;
+    },
   }
 );
 
@@ -161,18 +152,15 @@ const deviceSlice = createSlice({
     builder
       .addCase(fetchDevices.pending, (state) => {
         state.loadingDevices = true;
-        state.isFetched = false;
       })
       .addCase(fetchDevices.fulfilled, (state, action) => {
         state.loadingDevices = false;
         state.devices = action.payload;
         state.selectedDevice = action.payload[0] ?? null;
-        state.isFetched = true;
       })
       .addCase(fetchDevices.rejected, (state, action) => {
         state.loadingDevices = false;
         state.errorDevices = action.payload as string;
-        state.isFetched = false;
       })
 
       .addCase(fetchDeviceData.fulfilled, (state, action) => {
@@ -182,11 +170,8 @@ const deviceSlice = createSlice({
       .addCase(deleteDevice.pending, (state) => {
         state.isDeletingDevice = true;
       })
-      .addCase(deleteDevice.fulfilled, (state, action) => {
+      .addCase(deleteDevice.fulfilled, (state) => {
         state.isDeletingDevice = false;
-        if (action.payload.success) {
-          state.isFetched = false;
-        }
       })
       .addCase(deleteDevice.rejected, (state, action) => {
         state.isDeletingDevice = false;

src/types/device.types.ts

@@ -12,3 +12,21 @@ export interface IDevice {
     }[];
   };
 }
+
+export interface IDeviceData {
+  bat_level: string;
+  location: {
+    lat: string;
+    lon: string;
+    speed: string;
+  };
+}
+
+export interface IAudioList {
+  path: string;
+  url: string;
+  file_exists: boolean;
+  file_ext: string;
+  file_size: string;
+  date: string;
+}