Convert app state to zustand stores

frontend/src/System/Backup/RestoreBackupModalContent.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+import { useDispatch } from 'react-redux';
+import { useAppValue } from 'App/appStore';
 import { Error } from 'App/State/AppSectionState';
-import AppState from 'App/State/AppState';
 import TextInput from 'Components/Form/TextInput';
 import Icon, { IconName, IconProps } from 'Components/Icon';
 import Button from 'Components/Link/Button';
@@ -79,7 +79,7 @@ function RestoreBackupModalContent({
   name,
   onModalClose,
 }: RestoreBackupModalContentProps) {
-  const { isRestarting } = useSelector((state: AppState) => state.app);
+  const isRestarting = useAppValue('isRestarting');
   const dispatch = useDispatch();
 
   const { restoreBackupById, isRestoringBackup, restoreBackupError } =

frontend/src/System/Status/Health/HealthStatus.tsx

@@ -1,13 +1,13 @@
 import React, { useEffect, useMemo } from 'react';
-import { useSelector } from 'react-redux';
-import AppState from 'App/State/AppState';
+import { useAppValues } from 'App/appStore';
 import PageSidebarStatus from 'Components/Page/Sidebar/PageSidebarStatus';
 import usePrevious from 'Helpers/Hooks/usePrevious';
 import useHealth from './useHealth';
 
 function HealthStatus() {
-  const { isConnected, isReconnecting } = useSelector(
-    (state: AppState) => state.app
+  const { isConnected, isReconnecting } = useAppValues(
+    'isConnected',
+    'isReconnecting'
   );
   const { data, refetch } = useHealth();
 

frontend/src/System/Updates/Updates.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import AppState from 'App/State/AppState';
+import { useAppValue } from 'App/appStore';
 import * as commandNames from 'Commands/commandNames';
 import Alert from 'Components/Alert';
 import Icon from 'Components/Icon';
@@ -29,7 +29,7 @@ import styles from './Updates.css';
 const VERSION_REGEX = /\d+\.\d+\.\d+\.\d+/i;
 
 function Updates() {
-  const currentVersion = useSelector((state: AppState) => state.app.version);
+  const currentVersion = useAppValue('version');
   const { packageUpdateMechanismMessage } = useSystemStatusData();
 
   const { shortDateFormat, longDateFormat, timeFormat } = useSelector(

frontend/src/System/useSystem.ts

@@ -1,40 +1,30 @@
-import { useMutation } from '@tanstack/react-query';
-import { useDispatch } from 'react-redux';
-import { pingServer, setAppValue } from 'Store/Actions/appActions';
+import { pingServer, setAppValue } from 'App/appStore';
+import useApiMutation from 'Helpers/Hooks/useApiMutation';
 
-const createSystemMutationFn = (endpoint: string) => {
-  return async () => {
-    const response = await fetch(
-      `${window.Sonarr.urlBase}/system/${endpoint}`,
-      {
-        method: 'POST',
-        headers: {
-          'X-Api-Key': window.Sonarr.apiKey,
-          'X-Sonarr-Client': 'Sonarr',
-        },
-      }
-    );
+export const useRestart = () => {
+  const mutation = useApiMutation<void, void>({
+    method: 'POST',
+    path: '/system/restart',
+  });
 
-    if (!response.ok) {
-      throw new Error(`Failed to ${endpoint}: ${response.statusText}`);
-    }
+  const restart = () => {
+    mutation.mutate(undefined, {
+      onSuccess: () => {
+        setAppValue({ isRestarting: true });
+        pingServer();
+      },
+    });
+  };
+
+  return {
+    ...mutation,
+    mutate: restart,
   };
 };
 
-export const useRestart = () => {
-  const dispatch = useDispatch();
-
-  return useMutation<void, Error, void>({
-    mutationFn: createSystemMutationFn('restart'),
-    onSuccess: () => {
-      dispatch(setAppValue({ isRestarting: true }));
-      dispatch(pingServer());
-    },
-  });
-};
-
 export const useShutdown = () => {
-  return useMutation<void, Error, void>({
-    mutationFn: createSystemMutationFn('shutdown'),
+  return useApiMutation<void, void>({
+    method: 'POST',
+    path: '/system/shutdown',
   });
 };