idanoo/autobrr
1
0
Fork 0
mirror of https://github.com/idanoo/autobrr synced 2025-07-23 16:59:12 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(web): error boundry and fixes (#270)

Browse source 
* web: Added error handling. Fixed table overflow issues. Improved release status titles. Fixed a few bugs where certain forms/modals didn't close properly.

feat(web): Added react-error-boundary and stacktracey for handling errors. In case of a recoverable/non-state updating error, a notification is thrown, otherwise the user is shown an error page with the appropriate stack trace and error type and cause with the possibility of resolving the error by reseting the page's state.
enhancement(web/data-table/cells): Improved cell display behavior in tables -- it's now scrollable on mobile. Improved release status string readability.
enhancement(web/settings/Irc): Made IRC refetch interval every 3 seconds for those who are not patient.
fix(web/modals/DeleteModal): Fixed modal bug where it didn't close on button click.
fix(web/forms/IndexerForms): Fixed bug where the form didn't close on button click.
enhancement(web/ReleaseTable): Made the table more compact by utilizing 3em padding between cells instead of 6.
enhancement(web/ActivityTable): Ditto as above.
enhancement(web): Changed width of every page section from max-w-7xl (1280px to where applicable)
chore(web/dashboard/ActivityTable): Reformatted the file to a saner syntax.
enhancement(web/dashboard/StatsItem): Enlarged font size, set font to extrabold instead of bold and made padding consistent.
fix(web/navbar): Fixed bold font not showing properly on Firefox due to an argument ordering issue.

* chore: update pkg and fix broken proxy
This commit is contained in:
stacksmash76 2022-05-12 16:26:41 +02:00 • committed by GitHub
parent bea30cb0bd
commit 2c46993264
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
26 changed files with 464 additions and 280 deletions
Download patch file Download diff file Expand all files Collapse all files

73
web/src/App.tsx
View file

@ -1,49 +1,64 @@
import { Fragment } from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import { QueryClient, QueryClientProvider } from "react-query";
import { QueryClient, QueryClientProvider, useQueryErrorResetBoundary } from "react-query";
import { ReactQueryDevtools } from "react-query/devtools";
import { Toaster } from "react-hot-toast";
import { ErrorBoundary } from "react-error-boundary";
import { toast, Toaster } from "react-hot-toast";
import Base from "./screens/Base";
import { Login } from "./screens/auth/login";
import { Logout } from "./screens/auth/logout";
import { Onboarding } from "./screens/auth/onboarding";
import { baseUrl } from "./utils";
import { AuthContext, SettingsContext } from "./utils/Context";
import { ErrorPage } from "./components/alerts";
import Toast from "./components/notifications/Toast";
function Protected() {
return (
<Fragment>
<Toaster position="top-right" />
<Base />
</Fragment>
)
}
export const queryClient = new QueryClient();
export const queryClient = new QueryClient({
defaultOptions: {
queries: { useErrorBoundary: true, },
mutations: {
onError: (error) => {
// Use a format string to convert the error object to a proper string without much hassle.
const message = (
typeof (error) === "object" && typeof ((error as Error).message) ?
(error as Error).message :
`${error}`
);
toast.custom((t) => <Toast type="error" body={message} t={t} />);
}
},
},
});
export function App() {
const { reset } = useQueryErrorResetBoundary();
const authContext = AuthContext.useValue();
const settings = SettingsContext.useValue();
return (
<QueryClientProvider client={queryClient}>
<Router basename={baseUrl()}>
<Route exact path="/logout" component={Logout} />
{authContext.isLoggedIn ? (
<Route component={Protected} />
) : (
<Switch>
<Route exact path="/onboard" component={Onboarding} />
<Route component={Login} />
</Switch>
)}
</Router>
{settings.debug ? (
<ReactQueryDevtools initialIsOpen={false} />
) : null}
<Toaster position="top-right" />
<ErrorBoundary
onReset={reset}
fallbackRender={ErrorPage}
>
<Router basename={baseUrl()}>
<Route exact path="/logout" component={Logout} />
{authContext.isLoggedIn ? (
<Route component={Base} />
) : (
<Switch>
<Route exact path="/onboard" component={Onboarding} />
<Route component={Login} />
</Switch>
)}
</Router>
{settings.debug ? (
<ReactQueryDevtools initialIsOpen={false} />
) : null}
</ErrorBoundary>
</QueryClientProvider>
);
}

87
web/src/components/alerts/ErrorPage.tsx Normal file
View file

@ -0,0 +1,87 @@
import StackTracey from "stacktracey";
import type { FallbackProps } from "react-error-boundary";
import { RefreshIcon } from "@heroicons/react/solid";
export const ErrorPage = ({ error, resetErrorBoundary }: FallbackProps) => {
const stack = new StackTracey(error).withSources();
const summary = stack.clean().asTable({
maxColumnWidths: {
callee: 48,
file: 48,
sourceLine: 256
}
});
const type = String(
(error && error.constructor && error.constructor.name)
|| typeof (error)
);
const msg = String(error && error.message);
return (
<div className="min-h-screen flex flex-col justify-center py-12 sm:px-6 lg:px-8">
<div className="sm:mx-auto sm:w-full sm:max-w-screen-md md:max-w-screen-lg lg:max-w-screen-xl">
<h1 className="text-3xl font-bold leading-6 text-gray-900 dark:text-gray-200 mt-4 mb-3">
We caught an unrecoverable error!
</h1>
<h3 className="text-xl leading-6 text-gray-700 dark:text-gray-400 mb-4">
Please consider reporting this error to our
{" "}
<a
rel="noopener noreferrer"
target="_blank"
href="https://github.com/autobrr/autobrr"
className="text-gray-700 dark:text-gray-200 underline font-semibold underline-offset-2 decoration-sky-500 hover:decoration-2 hover:text-black hover:dark:text-gray-100"
>
GitHub page
</a>
{" or to "}
<a
rel="noopener noreferrer"
target="_blank"
href="https://discord.gg/WQ2eUycxyT"
className="text-gray-700 dark:text-gray-200 underline font-semibold underline-offset-2 decoration-purple-500 hover:decoration-2 hover:text-black hover:dark:text-gray-100"
>
our official Discord channel
</a>
.
</h3>
<div
id="alert-additional-content-2"
className="px-4 pt-4 pb-3 m-auto bg-red-100 rounded-lg dark:bg-red-200 shadow-lg"
role="alert"
>
<div className="flex items-center">
<svg className="mr-2 w-5 h-5 text-red-700 dark:text-red-800" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path
fillRule="evenodd"
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
clipRule="evenodd"
/>
</svg>
<h3 className="text-lg font-medium text-red-700 dark:text-red-800">{type}: {msg}</h3>
</div>
{summary ? (
<pre className="mt-2 mb-4 text-sm text-red-700 dark:text-red-800 overflow-x-auto">
{summary}
</pre>
) : null}
<span className="block text-gray-800 mb-2 text-md">
You can try resetting the page page using the button provided below.
However, this is not guaranteed to fix the error.
</span>
<button
type="button"
className="text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 font-medium rounded-lg text-sm px-3 py-1.5 mr-2 text-center inline-flex items-center dark:bg-red-800 dark:hover:bg-red-900"
onClick={(event) => {
event.preventDefault();
resetErrorBoundary();
}}
>
<RefreshIcon className="-ml-0.5 mr-2 h-5 w-5" />
Reset page state
</button>
</div>
</div>
</div>
);
}

2
web/src/components/alerts/index.tsx
View file

@ -28,3 +28,5 @@ export function AlertWarning({ title, text }: props) {
</div>
);
}
export { ErrorPage } from "./ErrorPage";

28
web/src/components/data-table/Cells.tsx
View file

@ -15,14 +15,11 @@ export const AgeCell = ({ value }: CellProps) => (
</div>
);
export const ReleaseCell = ({ value }: CellProps) => (
<div className="text-sm font-medium text-gray-900 dark:text-gray-300" title={value}>
{value}
</div>
);
export const IndexerCell = ({ value }: CellProps) => (
<div className="text-sm font-medium text-gray-900 dark:text-gray-500" title={value}>
export const TitleCell = ({ value }: CellProps) => (
<div
className="text-sm font-medium box-content text-gray-900 dark:text-gray-300 max-w-[128px] sm:max-w-none overflow-auto py-4"
title={value}
>
{value}
</div>
);
@ -46,7 +43,6 @@ const StatusCellMap: Record<string, StatusCellMapEntry> = {
"PUSH_REJECTED": {
colors: "bg-blue-200 dark:bg-blue-100 text-blue-400 dark:text-blue-800 hover:bg-blue-300 dark:hover:bg-blue-400",
icon: <BanIcon className="h-5 w-5" aria-hidden="true" />
},
"PUSH_APPROVED": {
colors: "bg-green-100 text-green-800 hover:bg-green-300",
@ -58,12 +54,24 @@ const StatusCellMap: Record<string, StatusCellMapEntry> = {
}
};
const GetReleaseStatusString = (releaseAction: ReleaseActionStatus) => {
const items: Array<string> = [
`action: ${releaseAction.action}`,
`type: ${releaseAction.type}`,
`status: ${releaseAction.status}`,
`time: ${simplifyDate(releaseAction.timestamp)}`
];
if (releaseAction.rejections.length)
items.push(`rejections: ${releaseAction.rejections}`);
return items.join(" | ");
};
export const ReleaseStatusCell = ({ value }: ReleaseStatusCellProps) => (
<div className="flex text-sm font-medium text-gray-900 dark:text-gray-300">
{value.map((v, idx) => (
<div
key={idx}
title={`action: ${v.action}, type: ${v.type}, status: ${v.status}, time: ${simplifyDate(v.timestamp)}, rejections: ${v?.rejections}`}
title={GetReleaseStatusString(v)}
className={classNames(
StatusCellMap[v.status].colors,
"mr-1 inline-flex items-center rounded text-xs font-semibold uppercase cursor-pointer"

46
web/src/components/emptystates/index.tsx
View file

@ -1,39 +1,33 @@
import { PlusIcon } from "@heroicons/react/solid";
interface EmptyBasicProps {
title: string;
subtitle?: string;
}
export const EmptyBasic = ({ title, subtitle }: EmptyBasicProps) => (
<div className="text-center py-16">
<h3 className="mt-2 text-sm font-medium text-gray-900 dark:text-white">{title}</h3>
{subtitle ?? <p className="mt-1 text-sm text-gray-500 dark:text-gray-200">{subtitle}</p>}
</div>
)
interface EmptySimpleProps {
title: string;
subtitle: string;
buttonText: string;
buttonAction: any;
buttonText?: string;
buttonAction?: () => void;
}
export const EmptySimple = ({ title, subtitle, buttonText, buttonAction }: EmptySimpleProps) => (
export const EmptySimple = ({
title,
subtitle,
buttonText,
buttonAction
}: EmptySimpleProps) => (
<div className="text-center py-8">
<h3 className="mt-2 text-sm font-medium text-gray-900 dark:text-white">{title}</h3>
<p className="mt-1 text-sm text-gray-500 dark:text-gray-200">{subtitle}</p>
<div className="mt-6">
<button
type="button"
onClick={buttonAction}
className="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 dark:bg-blue-600 hover:bg-indigo-700 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-blue-500"
>
<PlusIcon className="-ml-1 mr-2 h-5 w-5" aria-hidden="true" />
{buttonText}
</button>
</div>
{buttonText && buttonAction ? (
<div className="mt-6">
<button
type="button"
onClick={buttonAction}
className="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 dark:bg-blue-600 hover:bg-indigo-700 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-blue-500"
>
<PlusIcon className="-ml-1 mr-2 h-5 w-5" aria-hidden="true" />
{buttonText}
</button>
</div>
) : null}
</div>
)

6
web/src/components/inputs/input_wide.tsx
View file

@ -32,7 +32,11 @@ export const TextFieldWide = ({
</label>
</div>
<div className="sm:col-span-2">
<Field name={name} value={defaultValue}>
<Field
name={name}
value={defaultValue}
required={required}
>
{({ field, meta }: FieldProps) => (
<input
{...field}

7
web/src/components/modals/index.tsx
View file

@ -66,7 +66,12 @@ export const DeleteModal: FC<DeleteModalProps> = ({ isOpen, buttonRef, toggle, d
<button
type="button"
className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm"
onClick={deleteAction}
onClick={() => {
if (isOpen) {
deleteAction();
toggle();
}
}}
>
Remove
</button>

3
web/src/forms/settings/IndexerForms.tsx
View file

@ -443,6 +443,9 @@ export function IndexerUpdateForm({ isOpen, toggle, indexer }: UpdateProps) {
onSuccess: () => {
queryClient.invalidateQueries(['indexer']);
toast.custom((t) => <Toast type="success" body={`${indexer.name} was deleted.`} t={t} />)
sleep(1500);
toggle();
}
})

2
web/src/forms/settings/IrcForms.tsx
View file

@ -101,7 +101,7 @@ export function IrcNetworkAddForm({ isOpen, toggle }: any) {
{
onSuccess: () => {
queryClient.invalidateQueries(['networks']);
toast.custom((t) => <Toast type="success" body="IRC Network added" t={t} />)
toast.custom((t) => <Toast type="success" body="IRC Network added. Please allow up to 30 seconds for the network to come online." t={t} />)
toggle()
},
onError: () => {

9
web/src/index.css
View file

File diff suppressed because one or more lines are too long

4
web/src/screens/Base.tsx
View file

@ -59,7 +59,7 @@ export default function Base() {
>
{({ open }) => (
<>
<div className="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div className="max-w-screen-xl mx-auto sm:px-6 lg:px-8">
<div className="border-b border-gray-300 dark:border-gray-700">
<div className="flex items-center justify-between h-16 px-4 sm:px-0">
<div className="flex items-center">
@ -86,7 +86,7 @@ export default function Base() {
"text-gray-600 dark:text-gray-500 hover:bg-gray-200 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-2xl text-sm font-medium",
"transition-colors duration-200"
)}
activeClassName="text-black dark:text-gray-50 font-bold"
activeClassName="text-black dark:text-gray-50 !font-bold"
isActive={(match, location) => isActiveMatcher(match, location, item)}
>
{item.name}

6
web/src/screens/Logs.tsx
View file

@ -56,8 +56,8 @@ export const Logs = () => {
return (
<main>
<header className="py-10">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<h1 className="text-3xl font-bold text-black dark:text-white capitalize">Logs</h1>
<div className="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8">
<h1 className="text-3xl font-bold text-black dark:text-white">Logs</h1>
<div className="flex mt-4 justify-center">
<ExclamationIcon
className="h-5 w-5 text-yellow-400"
@ -67,7 +67,7 @@ export const Logs = () => {
</div>
</div>
</header>
<div className="max-w-7xl mx-auto pb-12 px-2 sm:px-4 lg:px-8">
<div className="max-w-screen-xl mx-auto pb-12 px-2 sm:px-4 lg:px-8">
<div
className="bg-white dark:bg-gray-800 rounded-lg shadow-lg px-2 sm:px-4 pb-3 sm:pb-4"
>

4
web/src/screens/Settings.tsx
View file

@ -68,8 +68,8 @@ export default function Settings() {
return (
<main>
<header className="py-10">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<h1 className="text-3xl font-bold text-black dark:text-white capitalize">Settings</h1>
<div className="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8">
<h1 className="text-3xl font-bold text-black dark:text-white">Settings</h1>
</div>
</header>

337
web/src/screens/dashboard/ActivityTable.tsx
View file

@ -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 (
<label className="flex items-baseline gap-x-2">
<span className="text-gray-700">{render("Header")}: </span>
<select
className="border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
name={id}
id={id}
value={filterValue}
onChange={e => {
setFilter(e.target.value || undefined)
}}
>
<option value="">All</option>
{options.map((option, i) => (
<option key={i} value={option}>
{option}
</option>
))}
</select>
</label>
)
// Render a multi-select box
return (
<label className="flex items-baseline gap-x-2">
<span className="text-gray-700">{render("Header")}: </span>
<select
className="border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
name={id}
id={id}
value={filterValue}
onChange={e => {
setFilter(e.target.value || undefined)
}}
>
<option value="">All</option>
{options.map((option, i) => (
<option key={i} value={option}>
{option}
</option>
))}
</select>
</label>
)
}
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 <EmptyListState text="No recent activity" />;
if (!page.length)
return <EmptyListState text="No recent activity" />;
// Render the UI for your table
return (
<div className="flex flex-col mt-4">
<div className="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
<div className="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
<div className="overflow-hidden bg-white shadow dark:bg-gray-800 sm:rounded-lg">
<table {...getTableProps()} className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
<thead className="bg-gray-50 dark:bg-gray-800">
{headerGroups.map((headerGroup) => {
const { key: rowKey, ...rowRest } = headerGroup.getHeaderGroupProps();
return (
<tr key={rowKey} {...rowRest}>
{headerGroup.headers.map((column) => {
const { key: columnKey, ...columnRest } = column.getHeaderProps(column.getSortByToggleProps());
return (
// Add the sorting props to control sorting. For this example
// we can add them into the header props
<th
key={`${rowKey}-${columnKey}`}
scope="col"
className="px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-500 uppercase group"
{...columnRest}
>
<div className="flex items-center justify-between">
{column.render('Header')}
{/* Add a sort direction indicator */}
<span>
{column.isSorted ? (
column.isSortedDesc ? (
<Icons.SortDownIcon className="w-4 h-4 text-gray-400" />
) : (
<Icons.SortUpIcon className="w-4 h-4 text-gray-400" />
)
) : (
<Icons.SortIcon className="w-4 h-4 text-gray-400 opacity-0 group-hover:opacity-100" />
)}
</span>
</div>
</th>
);
})}
</tr>
);
})}
</thead>
<tbody
{...getTableBodyProps()}
className="divide-y divide-gray-200 dark:divide-gray-700"
>
{page.map((row: any) => {
prepareRow(row);
const { key: bodyRowKey, ...bodyRowRest } = row.getRowProps();
return (
<tr key={bodyRowKey} {...bodyRowRest}>
{row.cells.map((cell: any) => {
const { key: cellRowKey, ...cellRowRest } = cell.getCellProps();
return (
<td
key={cellRowKey}
className="px-6 py-4 whitespace-nowrap"
role="cell"
{...cellRowRest}
>
{cell.column.Cell.name === "defaultRenderer"
? <div className="text-sm text-gray-500">{cell.render('Cell')}</div>
: cell.render('Cell')
}
</td>
)
})}
</tr>
)
})}
</tbody>
</table>
</div>
</div>
</div>
</div>
);
// Render the UI for your table
return (
<div className="inline-block min-w-full mt-4 mb-2 align-middle">
<div className="overflow-auto bg-white shadow dark:bg-gray-800 rounded-lg">
<table {...getTableProps()} className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
<thead className="bg-gray-50 dark:bg-gray-800">
{headerGroups.map((headerGroup) => {
const { key: rowKey, ...rowRest } = headerGroup.getHeaderGroupProps();
return (
<tr key={rowKey} {...rowRest}>
{headerGroup.headers.map((column) => {
const { key: columnKey, ...columnRest } = column.getHeaderProps(column.getSortByToggleProps());
return (
// Add the sorting props to control sorting. For this example
// we can add them into the header props
<th
key={`${rowKey}-${columnKey}`}
scope="col"
className="first:pl-5 pl-3 pr-3 py-3 text-xs font-medium tracking-wider text-left text-gray-500 uppercase group"
{...columnRest}
>
<div className="flex items-center justify-between">
{column.render('Header')}
{/* Add a sort direction indicator */}
<span>
{column.isSorted ? (
column.isSortedDesc ? (
<Icons.SortDownIcon className="w-4 h-4 text-gray-400" />
) : (
<Icons.SortUpIcon className="w-4 h-4 text-gray-400" />
)
) : (
<Icons.SortIcon className="w-4 h-4 text-gray-400 opacity-0 group-hover:opacity-100" />
)}
</span>
</div>
</th>
);
})}
</tr>
);
})}
</thead>
<tbody
{...getTableBodyProps()}
className="divide-y divide-gray-200 dark:divide-gray-700"
>
{page.map((row: any) => {
prepareRow(row);
const { key: bodyRowKey, ...bodyRowRest } = row.getRowProps();
return (
<tr key={bodyRowKey} {...bodyRowRest}>
{row.cells.map((cell: any) => {
const { key: cellRowKey, ...cellRowRest } = cell.getCellProps();
return (
<td
key={cellRowKey}
className="first:pl-5 pl-3 pr-3 whitespace-nowrap"
role="cell"
{...cellRowRest}
>
{cell.render('Cell')}
</td>
)
})}
</tr>
)
})}
</tbody>
</table>
</div>
</div>
);
}
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 (
<div className="flex flex-col mt-12">
<h3 className="text-2xl font-medium leading-6 text-gray-900 dark:text-gray-200">
Recent activity
</h3>
return (
<div className="flex flex-col mt-12">
<h3 className="text-2xl font-medium leading-6 text-gray-900 dark:text-gray-200">
Recent activity
</h3>
<Table columns={columns} data={data?.data} />
</div>
);
<Table columns={columns} data={data?.data} />
</div>
);
}

6
web/src/screens/dashboard/Stats.tsx
View file

@ -8,15 +8,15 @@ interface StatsItemProps {
const StatsItem = ({ name, value }: StatsItemProps) => (
<div
className="relative px-4 pt-5 pb-2 overflow-hidden bg-white rounded-lg shadow-lg dark:bg-gray-800 sm:pt-6 sm:px-6"
className="relative px-4 py-5 overflow-hidden bg-white rounded-lg shadow-lg dark:bg-gray-800"
title="All time"
>
<dt>
<p className="pb-1 text-sm font-medium text-gray-500 truncate">{name}</p>
</dt>
<dd className="flex items-baseline pb-6 sm:pb-7">
<p className="text-2xl font-semibold text-gray-900 dark:text-gray-200">{value}</p>
<dd className="flex items-baseline">
<p className="text-3xl font-extrabold text-gray-900 dark:text-gray-200">{value}</p>
</dd>
</div>
)

2
web/src/screens/dashboard/index.tsx
View file

@ -3,7 +3,7 @@ import { ActivityTable } from "./ActivityTable";
export const Dashboard = () => (
<main className="py-10">
<div className="px-4 pb-8 mx-auto max-w-7xl sm:px-6 lg:px-8">
<div className="max-w-screen-xl mx-auto pb-6 px-4 sm:px-6 lg:pb-16 lg:px-8">
<Stats />
<ActivityTable />
</div>

8
web/src/screens/filters/details.tsx
View file

@ -205,17 +205,17 @@ export default function FilterDetails() {
return (
<main>
<header className="py-10">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center">
<h1 className="text-3xl font-bold text-black dark:text-white capitalize">
<div className="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center">
<h1 className="text-3xl font-bold text-black dark:text-white">
<NavLink to="/filters" exact={true}>
Filters
</NavLink>
</h1>
<ChevronRightIcon className="h-6 w-6 text-gray-500" aria-hidden="true" />
<h1 className="text-3xl font-bold text-black dark:text-white capitalize">{filter.name}</h1>
<h1 className="text-3xl font-bold text-black dark:text-white">{filter.name}</h1>
</div>
</header>
<div className="max-w-7xl mx-auto pb-12 px-4 sm:px-6 lg:px-8">
<div className="max-w-screen-xl mx-auto pb-12 px-4 sm:px-6 lg:px-8">
<div className="bg-white dark:bg-gray-800 rounded-lg shadow">
<div className="relative mx-auto md:px-6 xl:px-4">
<div className="px-4 sm:px-6 md:px-0">

9
web/src/screens/filters/list.tsx
View file

@ -39,9 +39,10 @@ export default function Filters() {
<FilterAddForm isOpen={createFilterIsOpen} toggle={toggleCreateFilter} />
<header className="py-10">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex justify-between">
<h1 className="text-3xl font-bold text-black dark:text-white capitalize">Filters</h1>
<div className="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8 flex justify-between">
<h1 className="text-3xl font-bold text-black dark:text-white">
Filters
</h1>
<div className="flex-shrink-0">
<button
type="button"
@ -54,7 +55,7 @@ export default function Filters() {
</div>
</header>
<div className="max-w-7xl mx-auto pb-12 px-4 sm:px-6 lg:px-8 relative">
<div className="max-w-screen-xl mx-auto pb-12 px-4 sm:px-6 lg:px-8 relative">
{data && data.length > 0 ? (
<FilterList filters={data} />
) : (

16
web/src/screens/releases/ReleaseTable.tsx
View file

@ -62,7 +62,7 @@ export const ReleaseTable = () => {
{
Header: "Release",
accessor: 'torrent_name',
Cell: DataTable.ReleaseCell,
Cell: DataTable.TitleCell,
},
{
Header: "Actions",
@ -73,7 +73,7 @@ export const ReleaseTable = () => {
{
Header: "Indexer",
accessor: 'indexer',
Cell: DataTable.IndexerCell,
Cell: DataTable.TitleCell,
Filter: IndexerSelectColumnFilter,
filter: 'equal',
},
@ -177,8 +177,7 @@ export const ReleaseTable = () => {
))
)}
</div>
<div className="overflow-hidden bg-white shadow-lg dark:bg-gray-800 sm:rounded-lg">
<div className="overflow-auto bg-white shadow-lg dark:bg-gray-800 rounded-lg">
<table {...getTableProps()} className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
<thead className="bg-gray-50 dark:bg-gray-800">
{headerGroups.map((headerGroup) => {
@ -193,7 +192,7 @@ export const ReleaseTable = () => {
<th
key={`${rowKey}-${columnKey}`}
scope="col"
className="px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-500 uppercase group"
className="first:pl-5 pl-3 pr-3 py-3 text-xs font-medium tracking-wider text-left text-gray-500 uppercase group"
{...columnRest}
>
<div className="flex items-center justify-between">
@ -233,14 +232,11 @@ export const ReleaseTable = () => {
return (
<td
key={cellRowKey}
className="px-6 py-4 whitespace-nowrap"
className="first:pl-5 pl-3 pr-3 whitespace-nowrap"
role="cell"
{...cellRowRest}
>
{cell.column.Cell.name === "defaultRenderer"
? <div className="text-sm text-gray-500">{cell.render('Cell')}</div>
: cell.render('Cell')
}
{cell.render('Cell')}
</td>
);
})}

6
web/src/screens/releases/index.tsx
View file

@ -3,11 +3,11 @@ import { ReleaseTable } from "./ReleaseTable";
export const Releases = () => (
<main>
<header className="py-10">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex justify-between">
<h1 className="text-3xl font-bold text-black dark:text-white capitalize">Releases</h1>
<div className="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8 flex justify-between">
<h1 className="text-3xl font-bold text-black dark:text-white">Releases</h1>
</div>
</header>
<div className="px-4 pb-8 mx-auto max-w-7xl sm:px-6 lg:px-8">
<div className="max-w-screen-xl mx-auto pb-6 px-4 sm:px-6 lg:pb-16 lg:px-8">
<ReleaseTable />
</div>
</main>

7
web/src/screens/settings/Feed.tsx
View file

@ -3,7 +3,6 @@ import { useMutation, useQuery, useQueryClient } from "react-query";
import { APIClient } from "../../api/APIClient";
import { Menu, Switch, Transition } from "@headlessui/react";
import type {FieldProps} from "formik";
import {classNames} from "../../utils";
import {Fragment, useRef, useState} from "react";
import {toast} from "react-hot-toast";
@ -17,7 +16,7 @@ import {
TrashIcon
} from "@heroicons/react/outline";
import {FeedUpdateForm} from "../../forms/settings/FeedForms";
import {EmptyBasic} from "../../components/emptystates";
import { EmptySimple } from "../../components/emptystates";
function FeedSettings() {
const {data} = useQuery<Feed[], Error>('feeds', APIClient.feeds.find,
@ -33,7 +32,7 @@ function FeedSettings() {
<div className="ml-4 mt-4">
<h3 className="text-lg leading-6 font-medium text-gray-900 dark:text-white">Feeds</h3>
<p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
Manage torznab feeds.
Manage Torznab feeds.
</p>
</div>
</div>
@ -59,7 +58,7 @@ function FeedSettings() {
))}
</ol>
</section>
: <EmptyBasic title="No feeds" subtitle="Setup via indexers" />}
: <EmptySimple title="No feeds" subtitle="Setup via indexers" />}
</div>
</div>
)

6
web/src/screens/settings/Irc.tsx
View file

@ -18,7 +18,11 @@ export const IrcSettings = () => {
const { data } = useQuery(
"networks",
APIClient.irc.getNetworks,
{ refetchOnWindowFocus: false }
{
refetchOnWindowFocus: false,
// Refetch every 3 seconds
refetchInterval: 3000
}
);
return (

11
web/src/setupProxy.js Normal file
View file

@ -0,0 +1,11 @@
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
app.use(
'/api',
createProxyMiddleware({
target: 'http://127.0.0.1:7474',
changeOrigin: true,
})
);
};