Migrate from store-based fetch to React Query (useQuery) for data fetching

frontend/package.json

@@ -11,6 +11,7 @@
       "prettier": "npx prettier --write ."
    },
    "dependencies": {
+      "@tanstack/react-query": "^5.81.5",
       "axios": "^1.6.5",
       "chart.js": "^4.4.1",
       "clsx": "^2.1.0",

frontend/src/App.tsx

@@ -4,9 +4,19 @@ import React, { useEffect } from 'react';
 import Login from '@/views/Login';
 import { useUserStore } from "@/store/userStore";
 import { Bounce, ToastContainer } from 'react-toastify';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
 import 'react-toastify/dist/ReactToastify.css';
 
+const queryClient = new QueryClient({
+   defaultOptions: {
+      queries: {
+         staleTime: 5000,
+         refetchOnWindowFocus: false,
+      },
+   },
+});
+
 const AuthLayout: React.FC = () => {
 
    const userStore = useUserStore();
@@ -72,9 +82,11 @@ const router = createBrowserRouter([
 
 const App: React.FC = () => {
    return (
-      <div className="bg-gray-100 min-h-full pb-5">
-         <RouterProvider router={router} />
-      </div>
+      <QueryClientProvider client={queryClient}>
+         <div className="bg-gray-100 min-h-full pb-5">
+            <RouterProvider router={router} />
+         </div>
+      </QueryClientProvider>
    );
 };
 

frontend/src/components/RefreshTimer.tsx

@@ -1,7 +1,8 @@
 import Select, { components, ControlProps, Props as SelectProps } from 'react-select';
-import { useRefreshStore } from "@/store/refreshStore";
+import { useRefreshTimeStore } from "@/store/refreshTimeStore";
 import { FaRotate } from 'react-icons/fa6';
 import { useState } from 'react';
+import { useQueryClient } from '@tanstack/react-query';
 
 function Control({ children, ...props }: ControlProps) {
    const [rotate, setRotate] = useState(false);
@@ -26,12 +27,14 @@ function Control({ children, ...props }: ControlProps) {
 }
 
 export default function RefreshTime(props: SelectProps) {
-   const refreshStore = useRefreshStore();
+   const refreshTimeStore = useRefreshTimeStore();
+   const queryClient = useQueryClient();
 
    function onRefreshClick(e: React.MouseEvent<HTMLSpanElement, MouseEvent>) {
       e.preventDefault();
       e.stopPropagation();
-      refreshStore.triggerRefresh();
+      // Manually trigger refresh of bitcoin queries
+      queryClient.invalidateQueries({ queryKey: ['bitcoin'] });
    }
 
    const optionsMap = new Map([
@@ -48,10 +51,10 @@ export default function RefreshTime(props: SelectProps) {
          isSearchable={false}
          // @ts-expect-error onRefreshMouseDown
          onRefreshMouseDown={onRefreshClick}
-         onChange={(e) => refreshStore.setRefreshTime((e as { value: number }).value)}
+         onChange={(e) => refreshTimeStore.setRefreshTime((e as { value: number }).value)}
          components={{ Control: Control }}
          options={Array.from(optionsMap).map(([value, label]) => ({ value, label }))}
-         defaultValue={{ value: refreshStore.refreshTime, label: optionsMap.get(refreshStore.refreshTime)}}
+         defaultValue={{ value: refreshTimeStore.refreshTime, label: optionsMap.get(refreshTimeStore.refreshTime)}}
          styles={{
             control: (baseStyles) => ({
                ...baseStyles,

frontend/src/store/api/bitcoinApi.ts

@@ -0,0 +1,14 @@
+import api from './api';
+import { HomeApiResponse, PeersApiResponse } from '@/types';
+
+export const bitcoinApi = {
+   home: async (): Promise<HomeApiResponse> => {
+      const { data } = await api.get<HomeApiResponse>('/bitcoin/home');
+      return data;
+   },
+
+   peers: async (): Promise<PeersApiResponse> => {
+      const { data } = await api.get<PeersApiResponse>('/bitcoin/peers');
+      return data;
+   },
+};

frontend/src/store/refreshStore.ts → frontend/src/store/refreshTimeStore.ts

@@ -1,25 +1,20 @@
 import { create } from 'zustand';
 import { devtools, persist } from 'zustand/middleware';
 
-type RefreshStore = {
+type RefreshTimeStore = {
    refreshTime: number;
    setRefreshTime: (time: number) => void;
-   refresh: boolean;
-   triggerRefresh: () => void;
 }
 
-export const useRefreshStore = create<RefreshStore>()(
+export const useRefreshTimeStore = create<RefreshTimeStore>()(
    devtools(
       persist(
          (set) => ({
             refreshTime: 15000,
             setRefreshTime: (time: number) => set({ refreshTime: time }),
-            refresh: false,
-            triggerRefresh: () => set((state) => ({ refresh: !state.refresh }))
          }),
          {
             name: 'refreshTime',
-            partialize: (state) => ({ refreshTime: state.refreshTime }),
          }
       )
    )

frontend/src/store/types.ts → frontend/src/types/api.ts

@@ -1,8 +1,4 @@
-export interface IBaseApiStore {
-   loading: boolean;
-   fetch: () => void;
-}
-
+// API Response Types
 export interface IMainStore {
    totalConnections: number;
    totalUploadTraffic: number;
@@ -27,6 +23,11 @@ export interface IBlockchainStore {
    lastBlockTime: number;
 }
 
+export interface INetwork {
+   available: boolean;
+   address: string | undefined;
+}
+
 export interface INetworkInfo {
    uploadTarget: {
       target: number;
@@ -40,11 +41,6 @@ export interface INetworkInfo {
    };
 }
 
-export interface INetwork {
-   available: boolean;
-   address: string | undefined;
-}
-
 export interface IPeer {
    id: number;
    address: string;
@@ -57,4 +53,20 @@ export interface IPeer {
    subversion: string;
    connection_type: string;
    inbound: boolean;
+}
+
+// API Response types
+export interface HomeApiResponse {
+   main: IMainStore;
+   node: INodeStore;
+   blockchain: IBlockchainStore;
+   networkInfo: INetworkInfo;
+   peers: IPeer[];
+}
+
+export interface PeersApiResponse {
+   allTimeUploadTraffic: number;
+   allTimeDownloadTraffic: number;
+   banned: number;
+   peers: IPeer[];
 }

frontend/src/types/index.ts

@@ -0,0 +1 @@
+export * from './api';