import formatDistanceToNowStrict from 'date-fns/formatDistanceToNowStrict' import React from 'react' import App from '../App' import { useTable, useFilters, useGlobalFilter, useSortBy, usePagination } from 'react-table' import APIClient from '../api/APIClient' import { useQuery } from 'react-query' import { ReleaseFindResponse, ReleaseStats } from '../domain/interfaces' import { EmptyListState } from '../components/EmptyListState' export function Dashboard() { return (
) } const StatsItem = ({ name, stat }: any) => (

{name}

{stat}

) function Stats() { const { isLoading, data } = useQuery('dash_release_staats', () => APIClient.release.stats(), { refetchOnWindowFocus: false } ) if (isLoading) { return null } return (

Stats

{/* */}
) } /* function RecentActivity() { let data: any[] = [ { id: 1, status: "FILTERED", created_at: "2021-10-16 20:25:26", indexer: "tl", title: "That movie 2019 1080p x264-GROUP", }, { id: 2, status: "PUSH_APPROVED", created_at: "2021-10-15 16:16:23", indexer: "tl", title: "That great movie 2009 1080p x264-1GROUP", }, { id: 3, status: "FILTER_REJECTED", created_at: "2021-10-15 10:16:23", indexer: "tl", title: "Movie 1 2002 720p x264-1GROUP", }, { id: 4, status: "PUSH_APPROVED", created_at: "2021-10-14 16:16:23", indexer: "tl", title: "That bad movie 2019 2160p x265-1GROUP", }, { id: 5, status: "PUSH_REJECTED", created_at: "2021-10-13 16:16:23", indexer: "tl", title: "That really bad movie 20010 1080p x264-GROUP2", }, ] return (

Recent activity

{data && data.length > 0 ? data.map((release: any, idx) => ( )) : No recent activity}
Age Release Status Indexer
) } */ /* const ListItem = ({ idx, release }: any) => { const formatDate = formatDistanceToNowStrict( new Date(release.created_at), { addSuffix: true } ) return ( {formatDate} {release.title} {statusMap[release.status]} {release.indexer} ) } */ /* const getData = () => { const data: any[] = [ { id: 1, status: "FILTERED", created_at: "2021-10-16 20:25:26", indexer: "tl", title: "That movie 2019 1080p x264-GROUP", }, { id: 2, status: "PUSH_APPROVED", created_at: "2021-10-15 16:16:23", indexer: "tl", title: "That great movie 2009 1080p x264-1GROUP", }, { id: 3, status: "FILTER_REJECTED", created_at: "2021-10-15 10:16:23", indexer: "tl", title: "Movie 1 2002 720p x264-1GROUP", }, { id: 4, status: "PUSH_APPROVED", created_at: "2021-10-14 16:16:23", indexer: "tl", title: "That bad movie 2019 2160p x265-1GROUP", }, { id: 5, status: "PUSH_REJECTED", created_at: "2021-10-13 16:16:23", indexer: "tl", title: "That really bad movie 20010 1080p x264-GROUP2", }, ] return [...data, ...data, ...data] } */ // Define a default UI for filtering /* function GlobalFilter({ preGlobalFilteredRows, globalFilter, setGlobalFilter, }: any) { const count = preGlobalFilteredRows.length const [value, setValue] = React.useState(globalFilter) const onChange = useAsyncDebounce((value: any) => { setGlobalFilter(value || undefined) }, 200) return ( ) } */ // This is a custom filter UI for selecting // a unique option from a list export function SelectColumnFilter({ 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]) // Render a multi-select box return ( ) } // export function StatusPill({ value }: any) { // const status = value ? value.toLowerCase() : "unknown"; // return ( // // {status} // // ); // }; export function StatusPill({ value }: any) { const statusMap: any = { "FILTER_APPROVED": Approved, "FILTER_REJECTED": Rejected, "PUSH_REJECTED": Rejected, "PUSH_APPROVED": Approved, "PENDING": PENDING, "MIXED": MIXED, } return ( statusMap[value] ); }; export function AgeCell({ value, column, row }: any) { const formatDate = formatDistanceToNowStrict( new Date(value), { addSuffix: true } ) return (
{formatDate}
) } export function ReleaseCell({ value, column, row }: any) { return (
{value}
) } 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, // 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, // preGlobalFilteredRows, // setGlobalFilter, } = useTable({ columns, data, }, useFilters, // useFilters! useGlobalFilter, useSortBy, usePagination, // new ) // Render the UI for your table return ( <>
{/* */} {/* {headerGroups.map((headerGroup: { headers: any[] }) => headerGroup.headers.map((column) => column.Filter ? (
{column.render("Filter")}
) : null ) )} */}
{page.length > 0 ?
{headerGroups.map((headerGroup: { getHeaderGroupProps: () => JSX.IntrinsicAttributes & React.ClassAttributes & React.HTMLAttributes; headers: any[] }) => ( {headerGroup.headers.map(column => ( // Add the sorting props to control sorting. For this example // we can add them into the header props ))} ))} {page.map((row: any, i: any) => { // new prepareRow(row) return ( {row.cells.map((cell: any) => { return ( ) })} ) })}
{column.render('Header')} {/* Add a sort direction indicator */} {column.isSorted ? column.isSortedDesc ? : : ( )}
{cell.column.Cell.name === "defaultRenderer" ?
{cell.render('Cell')}
: cell.render('Cell') }
{/* Pagination */} {/*
Page {state.pageIndex + 1} of {pageOptions.length}
*/}
: } ) } function SortIcon({ className }: any) { return ( ) } function SortUpIcon({ className }: any) { return ( ) } function SortDownIcon({ className }: any) { return ( ) } /* function Button({ children, className, ...rest }: any) { return ( ) } function PageButton({ children, className, ...rest }: any) { return ( ) } */ function DataTablee() { const columns = React.useMemo(() => [ { Header: "Age", accessor: 'timestamp', Cell: AgeCell, }, { Header: "Release", accessor: 'torrent_name', Cell: ReleaseCell, }, // { // Header: "Filter Status", // accessor: 'filter_status', // Cell: StatusPill, // }, { Header: "Push Status", accessor: 'push_status', Cell: StatusPill, }, { Header: "Indexer", accessor: 'indexer', Filter: SelectColumnFilter, // new filter: 'includes', }, ], []) // const data = React.useMemo(() => getData(), []) const { isLoading, data } = useQuery('dash_release', () => APIClient.release.find("?limit=10"), { refetchOnWindowFocus: false } ) if (isLoading) { return null } return (

Recent activity

) } export default App;