Add React-Query to improve network and cache performancev1.0.3-beta.15

2 files changed, 101 insertions, 0 deletions

diff --git a/frontend/src/pages/System/Tasks/index.tsx b/frontend/src/pages/System/Tasks/index.tsx
new file mode 100644
index 000000000..1bb3430f4
--- /dev/null
+++ b/frontend/src/pages/System/Tasks/index.tsx
@@ -0,0 +1,39 @@
+import { faSync } from "@fortawesome/free-solid-svg-icons";
+import { useSystemTasks } from "apis/hooks";
+import { ContentHeader, QueryOverlay } from "components";
+import React, { FunctionComponent } from "react";
+import { Container, Row } from "react-bootstrap";
+import { Helmet } from "react-helmet";
+import Table from "./table";
+
+interface Props {}
+
+const SystemTasksView: FunctionComponent<Props> = () => {
+  const tasks = useSystemTasks();
+
+  const { isFetching, data, refetch } = tasks;
+
+  return (
+    <QueryOverlay result={tasks}>
+      <Container fluid>
+        <Helmet>
+          <title>Tasks - Bazarr (System)</title>
+        </Helmet>
+        <ContentHeader>
+          <ContentHeader.Button
+            updating={isFetching}
+            icon={faSync}
+            onClick={() => refetch()}
+          >
+            Refresh
+          </ContentHeader.Button>
+        </ContentHeader>
+        <Row>
+          <Table tasks={data ?? []}></Table>
+        </Row>
+      </Container>
+    </QueryOverlay>
+  );
+};
+
+export default SystemTasksView;
diff --git a/frontend/src/pages/System/Tasks/table.tsx b/frontend/src/pages/System/Tasks/table.tsx
new file mode 100644
index 000000000..e7a9bc42e
--- /dev/null
+++ b/frontend/src/pages/System/Tasks/table.tsx
@@ -0,0 +1,62 @@
+import { faSync } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useRunTask } from "apis/hooks";
+import { AsyncButton, SimpleTable } from "components";
+import React, { FunctionComponent, useMemo } from "react";
+import { Column, useSortBy } from "react-table";
+
+interface Props {
+  tasks: readonly System.Task[];
+}
+
+const Table: FunctionComponent<Props> = ({ tasks }) => {
+  const columns: Column<System.Task>[] = useMemo<Column<System.Task>[]>(
+    () => [
+      {
+        Header: "Name",
+        accessor: "name",
+        className: "text-nowrap",
+      },
+      {
+        Header: "Interval",
+        accessor: "interval",
+        className: "text-nowrap",
+      },
+      {
+        Header: "Next Execution",
+        accessor: "next_run_in",
+        className: "text-nowrap",
+      },
+      {
+        accessor: "job_running",
+        Cell: (row) => {
+          const { job_id } = row.row.original;
+          const { mutateAsync } = useRunTask();
+          return (
+            <AsyncButton
+              promise={() => mutateAsync(job_id)}
+              variant="light"
+              size="sm"
+              disabled={row.value}
+              animation={false}
+            >
+              <FontAwesomeIcon icon={faSync} spin={row.value}></FontAwesomeIcon>
+            </AsyncButton>
+          );
+        },
+      },
+    ],
+    []
+  );
+
+  return (
+    <SimpleTable
+      initialState={{ sortBy: [{ id: "name", desc: false }] }}
+      columns={columns}
+      data={tasks}
+      plugins={[useSortBy]}
+    ></SimpleTable>
+  );
+};
+
+export default Table;