refactor scheduler commands page

src/App.tsx

@@ -26,7 +26,7 @@ import dataProvider from "./synapse/dataProvider";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import ServerStatusPage from "./components/etke.cc/ServerStatusPage";
 import ServerNotificationsPage from "./components/etke.cc/ServerNotificationsPage";
-import SchedulerCommandsPage from "./components/etke.cc/SchedulerCommandsPage";
+import SchedulerCommandsPage from "./components/etke.cc/scheduler/components/SchedulerCommandsPage";
 // TODO: Can we use lazy loading together with browser locale?
 const messages = {
   de: germanMessages,

src/components/etke.cc/scheduler/components/RecurringCommandsList.tsx

@@ -0,0 +1,41 @@
+import { Loading } from "react-admin";
+
+import { DateField } from "react-admin";
+
+import { Datagrid } from "react-admin";
+
+import { Paper } from "@mui/material";
+import { ListContextProvider, TextField } from "react-admin";
+
+import { ResourceContextProvider, useList } from "react-admin";
+import { DATE_FORMAT } from "../../../../utils/date";
+import { useRecurringCommands } from "../hooks/useRecurringCommands";
+
+const RecurringCommandsList = () => {
+  const { data, isLoading, error } = useRecurringCommands();
+  const listContext = useList({
+    resource: "scheduled_commands",
+    sort: { field: "scheduled_at", order: "DESC" },
+    perPage: 10,
+    data: data || [], // Provide the data from your custom hook
+    isLoading: isLoading,
+  });
+  if (isLoading) return <Loading />;
+
+  return (<ResourceContextProvider value="scheduled_commands">
+    <ListContextProvider value={listContext}>
+      <Paper>
+        <Datagrid bulkActionButtons={false} rowClick="edit">
+          <TextField source="command" />
+          <TextField source="id" />
+          <TextField source="args" />
+          <TextField source="time" label="Time (UTC)" />
+          <DateField options={DATE_FORMAT} showTime source="scheduled_at" label="Scheduled at (local time)" />
+        </Datagrid>
+      </Paper>
+    </ListContextProvider>
+  </ResourceContextProvider>
+  );
+};
+
+export default RecurringCommandsList;

src/components/etke.cc/scheduler/components/ScheduledCommandsList.tsx

@@ -0,0 +1,37 @@
+import { useScheduledCommands } from "../hooks/useScheduledCommands";
+import { Loading } from "react-admin";
+import { ResourceContextProvider, useList } from "react-admin";
+import { Paper } from "@mui/material";
+import { ListContextProvider, TextField } from "react-admin";
+import { Datagrid } from "react-admin";
+import { DATE_FORMAT } from "../../../../utils/date";
+import { BooleanField, DateField } from "react-admin";
+
+const ScheduledCommandsList = () => {
+  const { data, isLoading, error } = useScheduledCommands();
+  const listContext = useList({
+    resource: "scheduled_commands",
+    sort: { field: "scheduled_at", order: "DESC" },
+    perPage: 10,
+    data: data || [], // Provide the data from your custom hook
+    isLoading: isLoading,
+  });
+  if (isLoading) return <Loading />;
+
+  return (<ResourceContextProvider value="scheduled_commands">
+    <ListContextProvider value={listContext}>
+      <Paper>
+        <Datagrid bulkActionButtons={false} rowClick="edit">
+          <TextField source="command" />
+          <TextField source="id" />
+          <TextField source="args" />
+          <BooleanField source="is_recurring" />
+          <DateField options={DATE_FORMAT} showTime source="scheduled_at" label="Scheduled at (local time)" />
+        </Datagrid>
+      </Paper>
+    </ListContextProvider>
+  </ResourceContextProvider>
+  );
+};
+
+export default ScheduledCommandsList;

src/components/etke.cc/scheduler/components/SchedulerCommandsPage.tsx

@@ -0,0 +1,32 @@
+import { Box, Typography } from "@mui/material";
+import { Stack } from "@mui/material"
+import ScheduleIcon from '@mui/icons-material/Schedule';
+import RestoreIcon from '@mui/icons-material/Restore';
+import ScheduledCommandsList from "./ScheduledCommandsList";
+import RecurringCommandsList from "./RecurringCommandsList";
+
+const SchedulerCommandsPage = () => {
+  return (
+    <Stack spacing={3} mt={3}>
+      <Stack spacing={1} direction="row" alignItems="center">
+        <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
+          <Typography variant="h4">Scheduler Commands</Typography>
+        </Box>
+      </Stack>
+      <Stack spacing={1} direction="column" alignItems="center">
+        <Box sx={{ width: "100%" }}>
+          <Typography sx={{ mb: 2 }} variant="h5"><ScheduleIcon sx={{ verticalAlign: "middle" }} /> Scheduled:</Typography>
+          <ScheduledCommandsList />
+        </Box>
+      </Stack>
+      <Stack spacing={1} direction="column" alignItems="center">
+        <Box sx={{ width: "100%" }}>
+          <Typography sx={{ mb: 2 }} variant="h5"><RestoreIcon sx={{ verticalAlign: "middle" }} /> Recurring:</Typography>
+          <RecurringCommandsList />
+        </Box>
+      </Stack>
+    </Stack>
+  );
+};
+
+export default SchedulerCommandsPage;

src/components/etke.cc/scheduler/hooks/useRecurringCommands.tsx

@@ -0,0 +1,15 @@
+import { useDataProvider } from "react-admin";
+
+import { useQuery } from "@tanstack/react-query";
+import { useAppContext } from "../../../../Context";
+
+export const useRecurringCommands = () => {
+  const { etkeccAdmin } = useAppContext();
+  const dataProvider = useDataProvider();
+  const { data, isLoading, error } = useQuery({
+    queryKey: ["recurringCommands"],
+    queryFn: () => dataProvider.getRecurringCommands(etkeccAdmin),
+  });
+
+  return { data, isLoading, error };
+};

src/components/etke.cc/scheduler/hooks/useScheduledCommands.tsx

@@ -0,0 +1,15 @@
+import { useQuery } from "@tanstack/react-query";
+
+import { useDataProvider } from "react-admin";
+import { useAppContext } from "../../../../Context";
+
+export const useScheduledCommands = () => {
+  const { etkeccAdmin } = useAppContext();
+  const dataProvider = useDataProvider();
+  const { data, isLoading, error } = useQuery({
+    queryKey: ["scheduledCommands"],
+    queryFn: () => dataProvider.getScheduledCommands(etkeccAdmin),
+  });
+
+  return { data, isLoading, error };
+};