-
Logs
+
+
{
- Logs
+
diff --git a/web/src/screens/Settings.tsx b/web/src/screens/Settings.tsx
index 1a89708..ea3349e 100644
--- a/web/src/screens/Settings.tsx
+++ b/web/src/screens/Settings.tsx
@@ -68,8 +68,8 @@ export default function Settings() {
return (
-
-
-
-
+
)
diff --git a/web/src/screens/dashboard/index.tsx b/web/src/screens/dashboard/index.tsx
index 46b78bc..a706418 100644
--- a/web/src/screens/dashboard/index.tsx
+++ b/web/src/screens/dashboard/index.tsx
@@ -3,7 +3,7 @@ import { ActivityTable } from "./ActivityTable";
export const Dashboard = () => (
-
Settings
+
+
diff --git a/web/src/screens/dashboard/ActivityTable.tsx b/web/src/screens/dashboard/ActivityTable.tsx
index f73cc2e..76783e9 100644
--- a/web/src/screens/dashboard/ActivityTable.tsx
+++ b/web/src/screens/dashboard/ActivityTable.tsx
@@ -1,11 +1,11 @@
import * as React from "react";
import { useQuery } from "react-query";
import {
- useTable,
- useFilters,
- useGlobalFilter,
- useSortBy,
- usePagination
+ useTable,
+ useFilters,
+ useGlobalFilter,
+ useSortBy,
+ usePagination
} from "react-table";
import { APIClient } from "../../api/APIClient";
@@ -17,185 +17,178 @@ import * as DataTable from "../../components/data-table";
// This is a custom filter UI for selecting
// a unique option from a list
function SelectColumnFilter({
- column: { filterValue, setFilter, preFilteredRows, id, render },
+ column: { filterValue, setFilter, preFilteredRows, id, render },
}: any) {
- // Calculate the options for filtering
- // using the preFilteredRows
- const options = React.useMemo(() => {
- const options: any = new Set()
- preFilteredRows.forEach((row: { values: { [x: string]: unknown } }) => {
- options.add(row.values[id])
- })
- return [...options.values()]
- }, [id, preFilteredRows])
+ // Calculate the options for filtering
+ // using the preFilteredRows
+ const options = React.useMemo(() => {
+ const options: any = new Set()
+ preFilteredRows.forEach((row: { values: { [x: string]: unknown } }) => {
+ options.add(row.values[id])
+ })
+ return [...options.values()]
+ }, [id, preFilteredRows])
- // Render a multi-select box
- return (
-
- )
+ // Render a multi-select box
+ return (
+
+ )
}
function Table({ columns, data }: any) {
- // Use the state and functions returned from useTable to build your UI
- const {
- getTableProps,
- getTableBodyProps,
- headerGroups,
- prepareRow,
- page, // Instead of using 'rows', we'll use page,
- } = useTable(
- { columns, data },
- useFilters,
- useGlobalFilter,
- useSortBy,
- usePagination
- );
+ // Use the state and functions returned from useTable to build your UI
+ const {
+ getTableProps,
+ getTableBodyProps,
+ headerGroups,
+ prepareRow,
+ page, // Instead of using 'rows', we'll use page,
+ } = useTable(
+ { columns, data },
+ useFilters,
+ useGlobalFilter,
+ useSortBy,
+ usePagination
+ );
- if (!page.length)
- return Settings
-
- );
+ // Render the UI for your table
+ return (
+
-
-
-
-
-
-
- {headerGroups.map((headerGroup) => {
- const { key: rowKey, ...rowRest } = headerGroup.getHeaderGroupProps();
- return (
-
-
- |
-
- {column.render('Header')}
- {/* Add a sort direction indicator */}
-
- {column.isSorted ? (
- column.isSortedDesc ? (
-
- |
- );
- })}
-
|---|
|
- {cell.column.Cell.name === "defaultRenderer"
- ? {cell.render('Cell')}
- : cell.render('Cell')
- }
- |
- )
- })}
-
+
+ );
}
export const ActivityTable = () => {
- const columns = React.useMemo(() => [
- {
- Header: "Age",
- accessor: 'timestamp',
- Cell: DataTable.AgeCell,
- },
- {
- Header: "Release",
- accessor: 'torrent_name',
- Cell: DataTable.ReleaseCell,
- },
- {
- Header: "Actions",
- accessor: 'action_status',
- Cell: DataTable.ReleaseStatusCell,
- },
- {
- Header: "Indexer",
- accessor: 'indexer',
- Cell: DataTable.IndexerCell,
- Filter: SelectColumnFilter,
- filter: 'includes',
- },
- ], [])
+ const columns = React.useMemo(() => [
+ {
+ Header: "Age",
+ accessor: 'timestamp',
+ Cell: DataTable.AgeCell,
+ },
+ {
+ Header: "Release",
+ accessor: 'torrent_name',
+ Cell: DataTable.TitleCell,
+ },
+ {
+ Header: "Actions",
+ accessor: 'action_status',
+ Cell: DataTable.ReleaseStatusCell,
+ },
+ {
+ Header: "Indexer",
+ accessor: 'indexer',
+ Cell: DataTable.TitleCell,
+ Filter: SelectColumnFilter,
+ filter: 'includes',
+ },
+ ], [])
- const { isLoading, data } = useQuery(
- 'dash_release',
- () => APIClient.release.find("?limit=10"),
- { refetchOnWindowFocus: false }
- );
+ const { isLoading, data } = useQuery(
+ 'dash_release',
+ () => APIClient.release.find("?limit=10"),
+ { refetchOnWindowFocus: false }
+ );
- if (isLoading)
- return null;
+ if (isLoading)
+ return null;
- return (
-
+
+
+ {headerGroups.map((headerGroup) => {
+ const { key: rowKey, ...rowRest } = headerGroup.getHeaderGroupProps();
+ return (
+
+
+ |
+
+ {column.render('Header')}
+ {/* Add a sort direction indicator */}
+
+ {column.isSorted ? (
+ column.isSortedDesc ? (
+
+ |
+ );
+ })}
+
|---|
| + {cell.render('Cell')} + | + ) + })} +
-
+
+ );
}
diff --git a/web/src/screens/dashboard/Stats.tsx b/web/src/screens/dashboard/Stats.tsx
index 80ea9c1..10689ed 100644
--- a/web/src/screens/dashboard/Stats.tsx
+++ b/web/src/screens/dashboard/Stats.tsx
@@ -8,15 +8,15 @@ interface StatsItemProps {
const StatsItem = ({ name, value }: StatsItemProps) => (
- Recent activity -
+ return ( +
+
-
- );
+ + Recent activity +
-{name}
{value}
+{value}
+
-
-
+
+
+
Filters
- {filter.name}
+ {filter.name}
-
+
diff --git a/web/src/screens/filters/list.tsx b/web/src/screens/filters/list.tsx
index 3c9f260..ca6100a 100644
--- a/web/src/screens/filters/list.tsx
+++ b/web/src/screens/filters/list.tsx
@@ -39,9 +39,10 @@ export default function Filters() {
-
- Filters
-
+
+
+ Filters
+
Filters
- {filter.name}
+{filter.name}
diff --git a/web/src/screens/filters/list.tsx b/web/src/screens/filters/list.tsx
index 3c9f260..ca6100a 100644
--- a/web/src/screens/filters/list.tsx
+++ b/web/src/screens/filters/list.tsx
@@ -39,9 +39,10 @@ export default function Filters() {
-
-
Filters
- +
+