mirror of
https://github.com/idanoo/autobrr
synced 2025-07-22 08:19:12 +00:00
92646dacc8
* refactor: use ES module. To maintain compatibility with vite 6 and since that's where the web are heading too. Also moved some deps to devDeps, better optimized production builds. Changed some of the script command to match how others run or preview it, I think it was still using CRA. * chore: update-lock.yaml * refactor: since we are using ESM now, .cjs .ts required. Changed the file extensions and refactored the .eslintrc.cjs I think there was a lot of bloat from the previous version and removed most of them and keep it simple for now, we can always expand from here a clean slate. * refactor: added .node.json and refactored. * fix(build): APIClient.ts had few error. ESLint: Unexpected lexical declaration in case block.(no-case-declarations) and TS2554: Expected 0-1 arguments, but got 2 we passed the cause to the constructor which it only takes 1 argument so removed it instead, since it's already in the string "Offline". * fix(build): import never used. * fix(build): add the types for react-dom/client. * fix(build): use ESNext instead. * fix(build): hmm why are we missing the types for the import? Added @types/react-table. * chore(lint): fix lint warnings Don't use * for export. * chore(lint): missing deps. React Hook useEffect has a missing dependency: 'validateForm'. Either include it or remove the dependency array * chore(lint): fix import. * chore(lint): fix import. * chore(lint): fix react hook. error React Hook "useMutation" is called conditionally. React Hooks must be called in the exact same order in every component render react-hooks/rules-of-hooks * chore(lint): value never used. 52:10 error '_regexPattern' is assigned a value but never used * chore(lint): add missing dependency to useEffect * chore(lint): fix imports. * chore(lint): add deps to array. * chore(lint): error Unexpected lexical declaration in case block no-case-declarations * chore(lint): remove any and add types. I am not sure about type CompleteFilterType I know it's being used for JSON so might need to use any?? dunno just test it and see if works. * chore(lint): react-hooks/exhaustive-deps * chore(lint): react-hooks/exhaustive-deps * chore(lint): use type guard instead of any. * chore(lint): react-hooks/exhaustive-deps * Revert "chore(lint): remove any and add types." This reverts commit 7b9168fe7826d63cb00e44df8e15fbde49b59174. * chore(web): ignore sourcemap warnings * chore(web): update vite to 5.0.4 * chore: add the new script `pnpm dev` to start the dev env. * chore: add the curly braces. more info: https://eslint.org/docs/latest/rules/no-case-declarations * chore: remove the extra spaces * chore: remove the extra spaces * chore: add the curly braces. * chore: add curly braces * remove text-shadow property and comment * revert switch case braces for Actions.tsx --------- Co-authored-by: martylukyy <35452459+martylukyy@users.noreply.github.com>
572 lines
25 KiB
TypeScript
572 lines
25 KiB
TypeScript
/*
|
|
* Copyright (c) 2021 - 2023, Ludvig Lundgren and the autobrr contributors.
|
|
* SPDX-License-Identifier: GPL-2.0-or-later
|
|
*/
|
|
|
|
import React, { useState } from "react";
|
|
import { useQuery } from "@tanstack/react-query";
|
|
import { CellProps, Column, useFilters, usePagination, useSortBy, useTable } from "react-table";
|
|
import {
|
|
ChevronDoubleLeftIcon,
|
|
ChevronDoubleRightIcon,
|
|
ChevronLeftIcon,
|
|
ChevronRightIcon
|
|
} from "@heroicons/react/24/solid";
|
|
import { EyeIcon, EyeSlashIcon } from "@heroicons/react/24/solid";
|
|
|
|
import { RandomLinuxIsos } from "@utils/index";
|
|
import { APIClient } from "@api/APIClient";
|
|
import { EmptyListState } from "@components/emptystates";
|
|
|
|
import * as Icons from "@components/Icons";
|
|
import * as DataTable from "@components/data-table";
|
|
|
|
import { IndexerSelectColumnFilter, PushStatusSelectColumnFilter, SearchColumnFilter } from "./Filters";
|
|
import { classNames } from "@utils";
|
|
import { ArrowTopRightOnSquareIcon, ArrowDownTrayIcon } from "@heroicons/react/24/outline";
|
|
import { Tooltip } from "@components/tooltips/Tooltip";
|
|
import { ExternalLink } from "@components/ExternalLink";
|
|
|
|
export const releaseKeys = {
|
|
all: ["releases"] as const,
|
|
lists: () => [...releaseKeys.all, "list"] as const,
|
|
list: (pageIndex: number, pageSize: number, filters: ReleaseFilter[]) => [...releaseKeys.lists(), { pageIndex, pageSize, filters }] as const,
|
|
details: () => [...releaseKeys.all, "detail"] as const,
|
|
detail: (id: number) => [...releaseKeys.details(), id] as const
|
|
};
|
|
|
|
|
|
type TableState = {
|
|
queryPageIndex: number;
|
|
queryPageSize: number;
|
|
totalCount: number;
|
|
queryFilters: ReleaseFilter[];
|
|
};
|
|
|
|
const initialState: TableState = {
|
|
queryPageIndex: 0,
|
|
queryPageSize: 10,
|
|
totalCount: 0,
|
|
queryFilters: []
|
|
};
|
|
|
|
enum ActionType {
|
|
PAGE_CHANGED = "PAGE_CHANGED",
|
|
PAGE_SIZE_CHANGED = "PAGE_SIZE_CHANGED",
|
|
TOTAL_COUNT_CHANGED = "TOTAL_COUNT_CHANGED",
|
|
FILTER_CHANGED = "FILTER_CHANGED"
|
|
}
|
|
|
|
type Actions =
|
|
| { type: ActionType.FILTER_CHANGED; payload: ReleaseFilter[]; }
|
|
| { type: ActionType.PAGE_CHANGED; payload: number; }
|
|
| { type: ActionType.PAGE_SIZE_CHANGED; payload: number; }
|
|
| { type: ActionType.TOTAL_COUNT_CHANGED; payload: number; };
|
|
|
|
const TableReducer = (state: TableState, action: Actions): TableState => {
|
|
switch (action.type) {
|
|
case ActionType.PAGE_CHANGED: {
|
|
return { ...state, queryPageIndex: action.payload };
|
|
}
|
|
case ActionType.PAGE_SIZE_CHANGED: {
|
|
return { ...state, queryPageSize: action.payload };
|
|
}
|
|
case ActionType.FILTER_CHANGED: {
|
|
return { ...state, queryFilters: action.payload };
|
|
}
|
|
case ActionType.TOTAL_COUNT_CHANGED: {
|
|
return { ...state, totalCount: action.payload };
|
|
}
|
|
default: {
|
|
throw new Error(`Unhandled action type: ${action}`);
|
|
}
|
|
}
|
|
};
|
|
|
|
export const ReleaseTable = () => {
|
|
const columns = React.useMemo(() => [
|
|
{
|
|
Header: "Age",
|
|
accessor: "timestamp",
|
|
Cell: DataTable.AgeCell
|
|
},
|
|
{
|
|
Header: "Release",
|
|
accessor: "torrent_name",
|
|
Cell: (props: CellProps<Release>) => {
|
|
return (
|
|
<div
|
|
className={classNames(
|
|
"flex justify-between py-3 text-sm font-medium box-content text-gray-900 dark:text-gray-300",
|
|
"max-w-[96px] sm:max-w-[216px] md:max-w-[360px] lg:max-w-[640px] xl:max-w-[840px]"
|
|
)}
|
|
>
|
|
<Tooltip
|
|
requiresClick
|
|
label={props.cell.value}
|
|
maxWidth="max-w-[90vw]"
|
|
>
|
|
<span className="whitespace-pre-wrap break-words">
|
|
{String(props.cell.value)}
|
|
</span>
|
|
</Tooltip>
|
|
<div className="flex mr-0">
|
|
{props.row.original.download_url && (
|
|
<ExternalLink
|
|
href={props.row.original.download_url}
|
|
className="px-2"
|
|
>
|
|
<ArrowDownTrayIcon className="h-5 w-5 text-blue-400 hover:text-blue-500 dark:text-blue-500 dark:hover:text-blue-600" aria-hidden="true" />
|
|
</ExternalLink>
|
|
)}
|
|
{props.row.original.info_url && (
|
|
<ExternalLink href={props.row.original.info_url}>
|
|
<ArrowTopRightOnSquareIcon className="h-5 w-5 text-blue-400 hover:text-blue-500 dark:text-blue-500 dark:hover:text-blue-600" aria-hidden="true" />
|
|
</ExternalLink>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
},
|
|
Filter: SearchColumnFilter
|
|
},
|
|
{
|
|
Header: "Actions",
|
|
accessor: "action_status",
|
|
Cell: DataTable.ReleaseStatusCell,
|
|
Filter: PushStatusSelectColumnFilter
|
|
},
|
|
{
|
|
Header: "Indexer",
|
|
accessor: "indexer",
|
|
Cell: DataTable.IndexerCell,
|
|
Filter: IndexerSelectColumnFilter,
|
|
filter: "equal"
|
|
}
|
|
] as Column<Release>[], []);
|
|
|
|
const [{ queryPageIndex, queryPageSize, totalCount, queryFilters }, dispatch] =
|
|
React.useReducer(TableReducer, initialState);
|
|
|
|
const { isLoading, error, data, isSuccess } = useQuery({
|
|
queryKey: releaseKeys.list(queryPageIndex, queryPageSize, queryFilters),
|
|
queryFn: () => APIClient.release.findQuery(queryPageIndex * queryPageSize, queryPageSize, queryFilters),
|
|
keepPreviousData: true,
|
|
staleTime: 5000
|
|
});
|
|
|
|
const [modifiedData, setModifiedData] = useState<Release[]>([]);
|
|
const [showLinuxIsos, setShowLinuxIsos] = useState(false);
|
|
|
|
const toggleReleaseNames = () => {
|
|
setShowLinuxIsos(!showLinuxIsos);
|
|
if (!showLinuxIsos && data && data.data) {
|
|
const randomNames = RandomLinuxIsos(data.data.length);
|
|
const newData: Release[] = data.data.map((item, index) => ({
|
|
...item,
|
|
torrent_name: `${randomNames[index]}.iso`,
|
|
indexer: index % 2 === 0 ? "distrowatch" : "linuxtracker"
|
|
}));
|
|
setModifiedData(newData);
|
|
}
|
|
};
|
|
|
|
const displayData = showLinuxIsos ? modifiedData : (data?.data ?? []);
|
|
|
|
|
|
const {
|
|
getTableProps,
|
|
getTableBodyProps,
|
|
headerGroups,
|
|
prepareRow,
|
|
page, // Instead of using 'rows', we'll use page,
|
|
// which has only the rows for the active page
|
|
|
|
// The rest of these things are super handy, too ;)
|
|
canPreviousPage,
|
|
canNextPage,
|
|
pageOptions,
|
|
pageCount,
|
|
gotoPage,
|
|
nextPage,
|
|
previousPage,
|
|
setPageSize,
|
|
state: { pageIndex, pageSize, filters }
|
|
} = useTable(
|
|
{
|
|
columns,
|
|
data: displayData, // Use displayData here
|
|
initialState: {
|
|
pageIndex: queryPageIndex,
|
|
pageSize: queryPageSize,
|
|
filters: []
|
|
},
|
|
manualPagination: true,
|
|
manualFilters: true,
|
|
manualSortBy: true,
|
|
pageCount: isSuccess ? Math.ceil(totalCount / queryPageSize) : 0,
|
|
autoResetSortBy: false,
|
|
autoResetExpanded: false,
|
|
autoResetPage: false
|
|
},
|
|
useFilters,
|
|
useSortBy,
|
|
usePagination
|
|
);
|
|
|
|
React.useEffect(() => {
|
|
dispatch({ type: ActionType.PAGE_CHANGED, payload: pageIndex });
|
|
}, [pageIndex]);
|
|
|
|
React.useEffect(() => {
|
|
dispatch({ type: ActionType.PAGE_SIZE_CHANGED, payload: pageSize });
|
|
gotoPage(0);
|
|
}, [pageSize, gotoPage]);
|
|
|
|
React.useEffect(() => {
|
|
if (data?.count) {
|
|
dispatch({
|
|
type: ActionType.TOTAL_COUNT_CHANGED,
|
|
payload: data.count
|
|
});
|
|
}
|
|
}, [data?.count]);
|
|
|
|
React.useEffect(() => {
|
|
dispatch({ type: ActionType.FILTER_CHANGED, payload: filters });
|
|
}, [filters]);
|
|
|
|
if (error) {
|
|
return <p>Error</p>;
|
|
}
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<div className="flex flex-col animate-pulse">
|
|
<div className="flex mb-6 flex-col sm:flex-row">
|
|
{headerGroups.map((headerGroup) =>
|
|
headerGroup.headers.map((column) => (
|
|
column.Filter ? (
|
|
<React.Fragment key={column.id}>{column.render("Filter")}</React.Fragment>
|
|
) : null
|
|
))
|
|
)}
|
|
</div>
|
|
<div className="bg-white dark:bg-gray-800 border border-gray-250 dark:border-gray-775 shadow-lg rounded-md overflow-auto">
|
|
<table {...getTableProps()} className="min-w-full rounded-md divide-y divide-gray-200 dark:divide-gray-750">
|
|
<thead className="bg-gray-100 dark:bg-gray-800">
|
|
<tr>
|
|
<th
|
|
scope="col"
|
|
className="first:pl-5 pl-3 pr-3 py-3 first:rounded-tl-md last:rounded-tr-md text-xs font-medium tracking-wider text-left text-gray-500 uppercase group"
|
|
|
|
>
|
|
<div className="flex items-center justify-between">
|
|
{/* Add a sort direction indicator */}
|
|
<span className="h-4">
|
|
</span>
|
|
</div>
|
|
</th>
|
|
</tr>
|
|
|
|
</thead>
|
|
<tbody className="divide-y divide-gray-150 dark:divide-gray-700">
|
|
<tr
|
|
className="flex justify-between py-4 text-sm font-medium box-content text-gray-900 dark:text-gray-300 max-w-[96px] sm:max-w-[216px] md:max-w-[360px] lg:max-w-[640px] xl:max-w-[840px]">
|
|
<td className="first:pl-5 pl-3 pr-3 whitespace-nowrap "> </td>
|
|
<td className="first:pl-5 pl-3 pr-3 whitespace-nowrap "> </td>
|
|
<td className="first:pl-5 pl-3 pr-3 whitespace-nowrap "> </td>
|
|
</tr>
|
|
<tr
|
|
className="flex justify-between py-4 text-sm font-medium box-content text-gray-900 dark:text-gray-300 max-w-[96px] sm:max-w-[216px] md:max-w-[360px] lg:max-w-[640px] xl:max-w-[840px]">
|
|
<td className="first:pl-5 pl-3 pr-3 whitespace-nowrap "> </td>
|
|
<td className="first:pl-5 pl-3 pr-3 whitespace-nowrap "> </td>
|
|
<td className="first:pl-5 pl-3 pr-3 whitespace-nowrap "> </td>
|
|
</tr>
|
|
<tr
|
|
className="flex justify-between py-4 text-sm font-medium box-content text-gray-900 dark:text-gray-300 max-w-[96px] sm:max-w-[216px] md:max-w-[360px] lg:max-w-[640px] xl:max-w-[840px]">
|
|
<td className="first:pl-5 pl-3 pr-3 whitespace-nowrap "> </td>
|
|
<td className="first:pl-5 pl-3 pr-3 whitespace-nowrap "> </td>
|
|
<td className="first:pl-5 pl-3 pr-3 whitespace-nowrap"> </td>
|
|
</tr>
|
|
<tr
|
|
className="flex justify-between py-4 text-sm font-medium box-content text-gray-900 dark:text-gray-300 max-w-[96px] sm:max-w-[216px] md:max-w-[360px] lg:max-w-[640px] xl:max-w-[840px]">
|
|
<td className="first:pl-5 pl-3 pr-3 whitespace-nowrap "> </td>
|
|
<td className="first:pl-5 pl-3 pr-3 whitespace-nowrap "> </td>
|
|
<td className="first:pl-5 pl-3 pr-3 whitespace-nowrap "> </td>
|
|
</tr>
|
|
<tr className="justify-between py-3 text-sm font-medium box-content text-gray-900 dark:text-gray-300">
|
|
<td className="first:pl-5 pl-3 pr-3 whitespace-nowrap text-center">
|
|
<p className="text-black dark:text-white">Loading release table...</p>
|
|
</td>
|
|
</tr>
|
|
<tr
|
|
className="flex justify-between py-3 text-sm font-medium box-content text-gray-900 dark:text-gray-300 max-w-[96px] sm:max-w-[216px] md:max-w-[360px] lg:max-w-[640px] xl:max-w-[840px]">
|
|
<td className="first:pl-5 pl-3 pr-3 whitespace-nowrap"> </td>
|
|
<td className="first:pl-5 pl-3 pr-3 whitespace-nowrap "> </td>
|
|
<td className="first:pl-5 pl-3 pr-3 whitespace-nowrap "> </td>
|
|
</tr>
|
|
<tr
|
|
className="flex justify-between py-3 text-sm font-medium box-content text-gray-900 dark:text-gray-300 max-w-[96px] sm:max-w-[216px] md:max-w-[360px] lg:max-w-[640px] xl:max-w-[840px]">
|
|
<td className="first:pl-5 pl-3 pr-3 whitespace-nowrap "> </td>
|
|
<td className="first:pl-5 pl-3 pr-3 whitespace-nowrap "> </td>
|
|
<td className="first:pl-5 pl-3 pr-3 whitespace-nowrap "> </td>
|
|
</tr>
|
|
<tr
|
|
className="flex justify-between py-3 text-sm font-medium box-content text-gray-900 dark:text-gray-300 max-w-[96px] sm:max-w-[216px] md:max-w-[360px] lg:max-w-[640px] xl:max-w-[840px]">
|
|
<td className="first:pl-5 pl-3 pr-3 whitespace-nowrap "> </td>
|
|
<td className="first:pl-5 pl-3 pr-3 whitespace-nowrap "> </td>
|
|
<td className="first:pl-5 pl-3 pr-3 whitespace-nowrap "> </td>
|
|
</tr>
|
|
<tr
|
|
className="flex justify-between py-3 text-sm font-medium box-content text-gray-900 dark:text-gray-300 max-w-[96px] sm:max-w-[216px] md:max-w-[360px] lg:max-w-[640px] xl:max-w-[840px]">
|
|
<td className="first:pl-5 pl-3 pr-3 whitespace-nowrap "> </td>
|
|
<td className="first:pl-5 pl-3 pr-3 whitespace-nowrap "> </td>
|
|
<td className="first:pl-5 pl-3 pr-3 whitespace-nowrap "> </td>
|
|
</tr>
|
|
<tr
|
|
className="flex justify-between py-3 text-sm font-medium box-content text-gray-900 dark:text-gray-300 max-w-[96px] sm:max-w-[216px] md:max-w-[360px] lg:max-w-[640px] xl:max-w-[840px]">
|
|
<td className="first:pl-5 pl-3 pr-3 whitespace-nowrap "> </td>
|
|
<td className="first:pl-5 pl-3 pr-3 whitespace-nowrap "> </td>
|
|
<td className="first:pl-5 pl-3 pr-3 whitespace-nowrap "> </td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
{/* Pagination */}
|
|
<div className="flex items-center justify-between px-6 py-3 border-t border-gray-200 dark:border-gray-700">
|
|
<div className="flex justify-between flex-1 sm:hidden">
|
|
<DataTable.Button onClick={() => previousPage()} disabled={!canPreviousPage}>Previous</DataTable.Button>
|
|
<DataTable.Button onClick={() => nextPage()} disabled={!canNextPage}>Next</DataTable.Button>
|
|
</div>
|
|
<div className="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
|
|
<div className="flex items-baseline gap-x-2">
|
|
<span className="text-sm text-gray-700 dark:text-gray-500">
|
|
Page <span className="font-medium">{pageIndex + 1}</span> of <span className="font-medium">{pageOptions.length}</span>
|
|
</span>
|
|
<label>
|
|
<span className="sr-only bg-gray-700">Items Per Page</span>
|
|
<select
|
|
className="py-1 pl-2 pr-8 text-sm block w-full border-gray-300 rounded-md shadow-sm cursor-pointer dark:bg-gray-800 dark:border-gray-600 dark:text-gray-100 dark:hover:text-gray-500 focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50"
|
|
value={pageSize}
|
|
onChange={e => {
|
|
setPageSize(Number(e.target.value));
|
|
}}
|
|
>
|
|
{[5, 10, 20, 50].map(pageSize => (
|
|
<option key={pageSize} value={pageSize}>
|
|
Show {pageSize}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</label>
|
|
</div>
|
|
<div>
|
|
<nav className="inline-flex -space-x-px rounded-md shadow-sm" aria-label="Pagination">
|
|
<DataTable.PageButton
|
|
className="rounded-l-md"
|
|
onClick={() => gotoPage(0)}
|
|
disabled={!canPreviousPage}
|
|
>
|
|
<span className="sr-only text-gray-400 dark:text-gray-500 dark:bg-gray-700">First</span>
|
|
<ChevronDoubleLeftIcon className="w-4 h-4 text-gray-400 dark:text-gray-500" aria-hidden="true"/>
|
|
</DataTable.PageButton>
|
|
<DataTable.PageButton
|
|
onClick={() => previousPage()}
|
|
disabled={!canPreviousPage}
|
|
>
|
|
<span className="sr-only text-gray-400 dark:text-gray-500 dark:bg-gray-700">Previous</span>
|
|
<ChevronLeftIcon className="w-4 h-4 text-gray-400 dark:text-gray-500" aria-hidden="true"/>
|
|
</DataTable.PageButton>
|
|
<DataTable.PageButton
|
|
onClick={() => nextPage()}
|
|
disabled={!canNextPage}>
|
|
<span className="sr-only text-gray-400 dark:text-gray-500 dark:bg-gray-700">Next</span>
|
|
<ChevronRightIcon className="w-4 h-4 text-gray-400 dark:text-gray-500" aria-hidden="true"/>
|
|
</DataTable.PageButton>
|
|
<DataTable.PageButton
|
|
className="rounded-r-md"
|
|
onClick={() => gotoPage(pageCount - 1)}
|
|
disabled={!canNextPage}
|
|
>
|
|
<span className="sr-only text-gray-400 dark:text-gray-500 dark:bg-gray-700">Last</span>
|
|
<ChevronDoubleRightIcon className="w-4 h-4 text-gray-400 dark:text-gray-500" aria-hidden="true"/>
|
|
</DataTable.PageButton>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (!data) {
|
|
return <EmptyListState text="No recent activity" />;
|
|
}
|
|
|
|
// Render the UI for your table
|
|
return (
|
|
<div className="flex flex-col">
|
|
<div className="flex mb-6 flex-col sm:flex-row">
|
|
{headerGroups.map((headerGroup) =>
|
|
headerGroup.headers.map((column) => (
|
|
column.Filter ? (
|
|
<React.Fragment key={column.id}>{column.render("Filter")}</React.Fragment>
|
|
) : null
|
|
))
|
|
)}
|
|
</div>
|
|
<div className="relative">
|
|
<div className="bg-white dark:bg-gray-800 border border-gray-250 dark:border-gray-775 shadow-table rounded-md overflow-auto">
|
|
<table {...getTableProps()} className="min-w-full rounded-md divide-y divide-gray-200 dark:divide-gray-750">
|
|
<thead className="bg-gray-100 dark:bg-gray-850">
|
|
{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 first:rounded-tl-md last:rounded-tr-md pl-3 pr-3 py-3 text-xs font-medium tracking-wider text-left uppercase group text-gray-600 dark:text-gray-400 transition hover:bg-gray-200 dark:hover:bg-gray-775"
|
|
{...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-150 dark:divide-gray-750"
|
|
>
|
|
{page.map((row) => {
|
|
prepareRow(row);
|
|
|
|
const { key: bodyRowKey, ...bodyRowRest } = row.getRowProps();
|
|
return (
|
|
<tr key={bodyRowKey} {...bodyRowRest}>
|
|
{row.cells.map((cell) => {
|
|
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>
|
|
{/* Pagination */}
|
|
<div className="flex items-center justify-between px-6 py-3 border-t border-gray-200 dark:border-gray-700">
|
|
<div className="flex justify-between flex-1 sm:hidden">
|
|
<DataTable.Button onClick={() => previousPage()} disabled={!canPreviousPage}>Previous</DataTable.Button>
|
|
<DataTable.Button onClick={() => nextPage()} disabled={!canNextPage}>Next</DataTable.Button>
|
|
</div>
|
|
<div className="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
|
|
<div className="flex items-baseline gap-x-2">
|
|
<span className="text-sm text-gray-700 dark:text-gray-500">
|
|
Page <span className="font-medium">{pageIndex + 1}</span> of <span className="font-medium">{pageOptions.length}</span>
|
|
</span>
|
|
<label>
|
|
<span className="sr-only bg-gray-700">Items Per Page</span>
|
|
<select
|
|
className="py-1 pl-2 pr-8 text-sm block w-full border-gray-300 rounded-md shadow-sm cursor-pointer transition-colors dark:bg-gray-800 dark:border-gray-600 dark:text-gray-400 dark:hover:text-gray-200 focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50"
|
|
value={pageSize}
|
|
onChange={e => {
|
|
setPageSize(Number(e.target.value));
|
|
}}
|
|
>
|
|
{[5, 10, 20, 50].map(pageSize => (
|
|
<option key={pageSize} value={pageSize}>
|
|
{pageSize} entries
|
|
</option>
|
|
))}
|
|
</select>
|
|
</label>
|
|
</div>
|
|
<div>
|
|
<nav className="inline-flex -space-x-px rounded-md shadow-sm" aria-label="Pagination">
|
|
<DataTable.PageButton
|
|
className="rounded-l-md"
|
|
onClick={() => gotoPage(0)}
|
|
disabled={!canPreviousPage}
|
|
>
|
|
<span className="sr-only">First</span>
|
|
<ChevronDoubleLeftIcon className="w-4 h-4" aria-hidden="true" />
|
|
</DataTable.PageButton>
|
|
<DataTable.PageButton
|
|
className="pl-1 pr-2"
|
|
onClick={() => previousPage()}
|
|
disabled={!canPreviousPage}
|
|
>
|
|
<ChevronLeftIcon className="w-4 h-4 mr-1" aria-hidden="true" />
|
|
<span>Prev</span>
|
|
</DataTable.PageButton>
|
|
<DataTable.PageButton
|
|
className="pl-2 pr-1"
|
|
onClick={() => nextPage()}
|
|
disabled={!canNextPage}>
|
|
<span>Next</span>
|
|
<ChevronRightIcon className="w-4 h-4 ml-1" aria-hidden="true" />
|
|
</DataTable.PageButton>
|
|
<DataTable.PageButton
|
|
className="rounded-r-md"
|
|
onClick={() => gotoPage(pageCount - 1)}
|
|
disabled={!canNextPage}
|
|
>
|
|
<ChevronDoubleRightIcon className="w-4 h-4" aria-hidden="true" />
|
|
<span className="sr-only">Last</span>
|
|
</DataTable.PageButton>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="absolute -bottom-11 right-0 p-2">
|
|
<button
|
|
onClick={toggleReleaseNames}
|
|
className="p-2 absolute bottom-0 right-0 bg-gray-750 text-white rounded-full opacity-10 hover:opacity-100 transition-opacity duration-300"
|
|
aria-label="Toggle view"
|
|
title="Go incognito"
|
|
>
|
|
{showLinuxIsos ? (
|
|
<EyeIcon className="h-4 w-4" />
|
|
) : (
|
|
<EyeSlashIcon className="h-4 w-4" />
|
|
)}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|