idanoo/autobrr
1
0
Fork 0
mirror of https://github.com/idanoo/autobrr synced 2025-07-26 02:09:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

chore: add eslint and cleanup (#118)

Browse source 
* refactor: modified existing react imports to conform with the recommended approach of not using the default export directly, since it will be deprecated in one of the future releases. see https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html for more info. note: react types don't require importing of react.
refactor: cleaned up some of the imports

* feat: added eslint and fixed all the errors/warning. eslint can now be invoked by running "npm run lint".
chore: updated .gitignore not to include unnecessary artefacts.
refactor: re-organized some of the imports.

* refactor: converted remaining few typed functional components to proper prop argument structure.

* fix: fixed small react-query invalidation bug for the FilterDetails component.

Co-authored-by: anonymous <anonymous>
This commit is contained in:
stacksmash76 2022-02-08 18:10:47 +01:00 • committed by GitHub
parent d1f08903d1
commit fe06363530
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
29 changed files with 463 additions and 343 deletions
Download patch file Download diff file Expand all files Collapse all files

120
web/src/screens/Releases.tsx
View file

@ -1,13 +1,23 @@
import { BanIcon, ExclamationCircleIcon } from "@heroicons/react/outline"
import ClockIcon from "@heroicons/react/outline/ClockIcon"
import { ChevronDoubleLeftIcon, ChevronLeftIcon, ChevronRightIcon, ChevronDoubleRightIcon, CheckIcon } from "@heroicons/react/solid"
import { formatDistanceToNowStrict } from "date-fns"
import React from "react"
import { useQuery } from "react-query"
import { useTable, useSortBy, usePagination } from "react-table"
import APIClient from "../api/APIClient"
import { EmptyListState } from "../components/emptystates"
import { classNames, simplifyDate } from "../utils"
import * as React from "react";
import { useQuery } from "react-query";
import { formatDistanceToNowStrict } from "date-fns";
import { useTable, useSortBy, usePagination } from "react-table";
import {
ClockIcon,
BanIcon,
ExclamationCircleIcon
} from "@heroicons/react/outline";
import {
ChevronDoubleLeftIcon,
ChevronLeftIcon,
ChevronRightIcon,
ChevronDoubleRightIcon,
CheckIcon
} from "@heroicons/react/solid";
import APIClient from "../api/APIClient";
import { EmptyListState } from "../components/emptystates";
import { classNames, simplifyDate } from "../utils";
export function Releases() {
return (
@ -95,13 +105,11 @@ export function StatusPill({ value }: any) {
"MIXED": <span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-semibold uppercase bg-yellow-100 text-yellow-800">MIXED</span>,
}
return (
statusMap[value]
);
};
return statusMap[value];
}
export function AgeCell({ value, column, row }: any) {
export function AgeCell({ value }: any) {
const formatDate = formatDistanceToNowStrict(
new Date(value),
@ -113,7 +121,7 @@ export function AgeCell({ value, column, row }: any) {
)
}
export function ReleaseCell({ value, column, row }: any) {
export function ReleaseCell({ value }: any) {
return (
<div className="text-sm font-medium text-gray-900 dark:text-gray-300" title={value}>{value}</div>
)
@ -125,7 +133,7 @@ interface ReleaseStatusCellProps {
row: any;
}
export function ReleaseStatusCell({ value, column, row }: ReleaseStatusCellProps) {
export function ReleaseStatusCell({ value }: ReleaseStatusCellProps) {
const statusMap: any = {
"PUSH_ERROR": <span className="mr-1 inline-flex items-center rounded text-xs font-semibold uppercase bg-pink-100 text-pink-800 hover:bg-pink-300 cursor-pointer">
<ExclamationCircleIcon className="h-5 w-5" aria-hidden="true" />
@ -147,7 +155,7 @@ export function ReleaseStatusCell({ value, column, row }: ReleaseStatusCellProps
)
}
export function IndexerCell({ value, column, row }: any) {
export function IndexerCell({ value }: any) {
return (
<div className="text-sm font-medium text-gray-900 dark:text-gray-500" title={value}>{value}</div>
)
@ -317,58 +325,70 @@ function Table() {
<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: { getHeaderGroupProps: () => JSX.IntrinsicAttributes & React.ClassAttributes<HTMLTableRowElement> & React.HTMLAttributes<HTMLTableRowElement>; headers: any[] }) => (
<tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map(column => (
// Add the sorting props to control sorting. For this example
// we can add them into the header props
<th
scope="col"
className="px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-500 uppercase group"
{...column.getHeaderProps(column.getSortByToggleProps())}
>
<div className="flex items-center justify-between">
{column.render('Header')}
{/* Add a sort direction indicator */}
<span>
{column.isSorted
? column.isSortedDesc
? <SortDownIcon className="w-4 h-4 text-gray-400" />
: <SortUpIcon className="w-4 h-4 text-gray-400" />
: (
<SortIcon className="w-4 h-4 text-gray-400 opacity-0 group-hover:opacity-100" />
)}
</span>
</div>
</th>
))}
</tr>
))}
{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 ? (
<SortDownIcon className="w-4 h-4 text-gray-400" />
) : (
<SortUpIcon className="w-4 h-4 text-gray-400" />
)
) : (
<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, i: any) => { // new
{page.map((row: any) => { // new
prepareRow(row)
const { key: bodyRowKey, ...bodyRowRest } = row.getRowProps();
return (
<tr {...row.getRowProps()}>
<tr key={bodyRowKey} {...bodyRowRest}>
{row.cells.map((cell: any) => {
const { key: cellRowKey, ...cellRowRest } = cell.getCellProps();
return (
<td
{...cell.getCellProps()}
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>