Use react-query for Log Files

This commit is contained in:
Mark McDowall 2025-10-06 06:41:42 +09:00
parent 7ade5b1259
commit 46c9b98fad
No known key found for this signature in database
4 changed files with 30 additions and 52 deletions

View file

@ -62,20 +62,6 @@ export const defaultState = {
isPopulated: false,
error: null,
items: []
},
logFiles: {
isFetching: false,
isPopulated: false,
error: null,
items: []
},
updateLogFiles: {
isFetching: false,
isPopulated: false,
error: null,
items: []
}
};
@ -96,9 +82,6 @@ export const DELETE_BACKUP = 'system/backups/deleteBackup';
export const FETCH_UPDATES = 'system/updates/fetchUpdates';
export const FETCH_LOG_FILES = 'system/logFiles/fetchLogFiles';
export const FETCH_UPDATE_LOG_FILES = 'system/updateLogFiles/fetchUpdateLogFiles';
export const RESTART = 'system/restart';
export const SHUTDOWN = 'system/shutdown';
@ -119,9 +102,6 @@ export const deleteBackup = createThunk(DELETE_BACKUP);
export const fetchUpdates = createThunk(FETCH_UPDATES);
export const fetchLogFiles = createThunk(FETCH_LOG_FILES);
export const fetchUpdateLogFiles = createThunk(FETCH_UPDATE_LOG_FILES);
export const restart = createThunk(RESTART);
export const shutdown = createThunk(SHUTDOWN);
@ -201,8 +181,6 @@ export const actionHandlers = handleThunks({
[DELETE_BACKUP]: createRemoveItemHandler(backupsSection, '/system/backup'),
[FETCH_UPDATES]: createFetchHandler('system.updates', '/update'),
[FETCH_LOG_FILES]: createFetchHandler('system.logFiles', '/log/file'),
[FETCH_UPDATE_LOG_FILES]: createFetchHandler('system.updateLogFiles', '/log/file/update'),
[RESTART]: function(getState, payload, dispatch) {
const promise = createAjaxRequest({

View file

@ -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}

View file

@ -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}

View file

@ -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',
});
}