Use react-query for Log Files

frontend/src/System/Logs/App/AppLogFiles.tsx

@@ -1,46 +1,39 @@
-import React, { useCallback, useEffect } from 'react';
+import React, { useCallback } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import AppState from 'App/State/AppState';
 import * as commandNames from 'Commands/commandNames';
 import { executeCommand } from 'Store/Actions/commandActions';
-import { fetchLogFiles } from 'Store/Actions/systemActions';
 import createCommandExecutingSelector from 'Store/Selectors/createCommandExecutingSelector';
 import LogFiles from '../LogFiles';
+import useLogFiles from '../useLogFiles';
 
 function AppLogFiles() {
   const dispatch = useDispatch();
-  const { isFetching, items } = useSelector(
-    (state: AppState) => state.system.logFiles
-  );
+  const { data = [], isFetching, refetch } = useLogFiles();
 
   const isDeleteFilesExecuting = useSelector(
     createCommandExecutingSelector(commandNames.DELETE_LOG_FILES)
   );
 
   const handleRefreshPress = useCallback(() => {
-    dispatch(fetchLogFiles());
-  }, [dispatch]);
+    refetch();
+  }, [refetch]);
 
   const handleDeleteFilesPress = useCallback(() => {
     dispatch(
       executeCommand({
         name: commandNames.DELETE_LOG_FILES,
         commandFinished: () => {
-          dispatch(fetchLogFiles());
+          refetch();
         },
       })
     );
-  }, [dispatch]);
-
-  useEffect(() => {
-    dispatch(fetchLogFiles());
-  }, [dispatch]);
+  }, [dispatch, refetch]);
 
   return (
     <LogFiles
       isDeleteFilesExecuting={isDeleteFilesExecuting}
       isFetching={isFetching}
-      items={items}
+      items={data}
       type="app"
       onRefreshPress={handleRefreshPress}
       onDeleteFilesPress={handleDeleteFilesPress}

frontend/src/System/Logs/Update/UpdateLogFiles.tsx

@@ -1,46 +1,39 @@
-import React, { useCallback, useEffect } from 'react';
+import React, { useCallback } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import AppState from 'App/State/AppState';
 import * as commandNames from 'Commands/commandNames';
 import { executeCommand } from 'Store/Actions/commandActions';
-import { fetchUpdateLogFiles } from 'Store/Actions/systemActions';
 import createCommandExecutingSelector from 'Store/Selectors/createCommandExecutingSelector';
 import LogFiles from '../LogFiles';
+import { useUpdateLogFiles } from '../useLogFiles';
 
 function UpdateLogFiles() {
   const dispatch = useDispatch();
-  const { isFetching, items } = useSelector(
-    (state: AppState) => state.system.updateLogFiles
-  );
+  const { data = [], isFetching, refetch } = useUpdateLogFiles();
 
   const isDeleteFilesExecuting = useSelector(
     createCommandExecutingSelector(commandNames.DELETE_UPDATE_LOG_FILES)
   );
 
   const handleRefreshPress = useCallback(() => {
-    dispatch(fetchUpdateLogFiles());
-  }, [dispatch]);
+    refetch();
+  }, [refetch]);
 
   const handleDeleteFilesPress = useCallback(() => {
     dispatch(
       executeCommand({
         name: commandNames.DELETE_UPDATE_LOG_FILES,
         commandFinished: () => {
-          dispatch(fetchUpdateLogFiles());
+          refetch();
         },
       })
     );
-  }, [dispatch]);
-
-  useEffect(() => {
-    dispatch(fetchUpdateLogFiles());
-  }, [dispatch]);
+  }, [dispatch, refetch]);
 
   return (
     <LogFiles
       isDeleteFilesExecuting={isDeleteFilesExecuting}
       isFetching={isFetching}
-      items={items}
+      items={data}
       type="update"
       onRefreshPress={handleRefreshPress}
       onDeleteFilesPress={handleDeleteFilesPress}

frontend/src/System/Logs/useLogFiles.ts

@@ -0,0 +1,14 @@
+import useApiQuery from 'Helpers/Hooks/useApiQuery';
+import LogFile from 'typings/LogFile';
+
+export default function useLogFiles() {
+  return useApiQuery<LogFile[]>({
+    path: '/log/file',
+  });
+}
+
+export function useUpdateLogFiles() {
+  return useApiQuery<LogFile[]>({
+    path: '/log/file/update',
+  });
+}