Convert Log FIles to TypeScript

(cherry picked from commit 95929dd9c2b4460ec58b63136d64bd584e7dd263)

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

@@ -0,0 +1,51 @@
+import React, { useCallback, useEffect } 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';
+
+function UpdateLogFiles() {
+  const dispatch = useDispatch();
+  const { isFetching, items } = useSelector(
+    (state: AppState) => state.system.updateLogFiles
+  );
+
+  const isDeleteFilesExecuting = useSelector(
+    createCommandExecutingSelector(commandNames.DELETE_UPDATE_LOG_FILES)
+  );
+
+  const handleRefreshPress = useCallback(() => {
+    dispatch(fetchUpdateLogFiles());
+  }, [dispatch]);
+
+  const handleDeleteFilesPress = useCallback(() => {
+    dispatch(
+      executeCommand({
+        name: commandNames.DELETE_UPDATE_LOG_FILES,
+        commandFinished: () => {
+          dispatch(fetchUpdateLogFiles());
+        },
+      })
+    );
+  }, [dispatch]);
+
+  useEffect(() => {
+    dispatch(fetchUpdateLogFiles());
+  }, [dispatch]);
+
+  return (
+    <LogFiles
+      isDeleteFilesExecuting={isDeleteFilesExecuting}
+      isFetching={isFetching}
+      items={items}
+      type="update"
+      onRefreshPress={handleRefreshPress}
+      onDeleteFilesPress={handleDeleteFilesPress}
+    />
+  );
+}
+
+export default UpdateLogFiles;