From 38f1a1eacc47565a95b6c4b07e9b2cb507c76f13 Mon Sep 17 00:00:00 2001 From: AmbossKeegan Date: Wed, 14 Jun 2023 17:38:38 -0300 Subject: [PATCH 1/7] feat: migration ClosedChannels and ChannelTable to tanstack react-table --- src/client/src/components/table-v2/index.tsx | 180 +++++++++++---- .../views/channels/channels/ChannelTable.tsx | 207 ++++++++++-------- .../closedChannels/ClosedChannels.tsx | 47 ++-- 3 files changed, 278 insertions(+), 156 deletions(-) diff --git a/src/client/src/components/table-v2/index.tsx b/src/client/src/components/table-v2/index.tsx index e5eb3e34..8210db07 100644 --- a/src/client/src/components/table-v2/index.tsx +++ b/src/client/src/components/table-v2/index.tsx @@ -1,4 +1,4 @@ -import { useEffect, useState } from 'react'; +import { useEffect, useMemo, useState } from 'react'; import styled, { css } from 'styled-components'; import { useReactTable, @@ -9,9 +9,15 @@ import { flexRender, ColumnDef, SortingState, + VisibilityState, } from '@tanstack/react-table'; +import { Settings, X } from 'react-feather'; import { Input } from '../input'; import { separationColor } from '../../../src/styles/Themes'; +import { ColorButton } from '../buttons/colorButton/ColorButton'; +import { mediaWidths } from '../../../src/styles/Themes'; +import { groupBy } from 'lodash'; +import { DarkSubTitle, SubCard } from '../generic/Styled'; interface TableV2Props { columns: ColumnDef[]; @@ -20,56 +26,87 @@ interface TableV2Props { withBorder?: boolean; alignCenter?: boolean; fontSize?: string; + defaultHiddenColumns?: VisibilityState; + onHideToggle?: (hide: boolean, id: string) => void; } -const FilterLine = styled.div` - margin-bottom: 24px; -`; - type StyledTableProps = { withBorder?: boolean; alignCenter?: boolean; fontSize?: string; }; -const Styles = styled.div` - overflow-x: auto; - table { - border-spacing: 0; - tr { - :last-child { - td { - border-bottom: 0; - } - } +const S = { + row: styled.div` + display: flex; + flex-direction: row; + justify-content: space-between; + margin-bottom: 24px; + `, + optionRow: styled.div` + display: flex; + justify-content: flex-start; + align-items: stretch; + flex-wrap: wrap; + + @media (${mediaWidths.mobile}) { + display: block; } - .cursor { - cursor: pointer; + `, + option: styled.label` + margin: 4px 8px; + `, + options: styled.div` + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + flex-wrap: wrap; + + @media (${mediaWidths.mobile}) { + flex-direction: row; } - , - th, - td { - font-size: ${({ fontSize }: StyledTableProps) => fontSize || '14px'}; - text-align: left; - margin: 0; - padding: 8px; - ${({ withBorder }: StyledTableProps) => - withBorder && - css` - border-bottom: 1px solid ${separationColor}; - `} - ${({ alignCenter }: StyledTableProps) => - alignCenter && - css` - text-align: center; - padding: 8px; - `} - :last-child { - border-right: 0; + `, + wrapper: styled.div` + overflow-x: auto; + table { + width: 100%; + border-spacing: 0; + tr { + :last-child { + td { + border-bottom: 0; + } + } + } + .cursor { + cursor: pointer; + } + , + th, + td { + font-size: ${({ fontSize }: StyledTableProps) => fontSize || '14px'}; + text-align: left; + margin: 0; + padding: 8px; + ${({ withBorder }: StyledTableProps) => + withBorder && + css` + border-bottom: 1px solid ${separationColor}; + `} + ${({ alignCenter }: StyledTableProps) => + alignCenter && + css` + text-align: center; + padding: 8px; + `} + :last-child { + border-right: 0; + } } } - } -`; + `, +}; export default function TableV2({ columns, @@ -78,38 +115,95 @@ export default function TableV2({ withBorder, alignCenter, fontSize, + defaultHiddenColumns, + onHideToggle, }: TableV2Props) { const [globalFilter, setGlobalFilter] = useState(''); const [sorting, setSorting] = useState([]); + const [isOpen, setIsOpen] = useState(false); + + const [columnVisibility, setColumnVisibility] = useState( + defaultHiddenColumns || {} + ); const table = useReactTable({ data, columns, state: { + columnVisibility, globalFilter, sorting, }, enableSorting: true, onGlobalFilterChange: setGlobalFilter, onSortingChange: setSorting, + onColumnVisibilityChange: setColumnVisibility, getCoreRowModel: getCoreRowModel(), getSortedRowModel: getSortedRowModel(), getFilteredRowModel: getFilteredRowModel(), getPaginationRowModel: getPaginationRowModel(), }); + // The columns that are hideable in configurations need to be grouped by their parents id in order for display purposes + const groupedHideableColumns = useMemo(() => { + const allLeafColumns = table + .getAllLeafColumns() + .filter(c => c.getCanHide()); + const grouped = groupBy(allLeafColumns, (c: any) => c?.parent?.id); + return grouped; + }, [table]); + return ( <> - + setGlobalFilter(String(value))} placeholder={filterPlaceholder} count={table.getFilteredRowModel().rows.length} /> - + {onHideToggle ? ( + setIsOpen(p => !p)}> + {isOpen ? : } + + ) : null} + + + {isOpen ? ( + + {Object.keys(groupedHideableColumns).map( + (group: string, index: number) => { + return ( + + + {group === 'undefined' ? 'General' : group} + + + {groupedHideableColumns[group].map((column: any) => { + return ( + + + + ); + })} + + + ); + } + )} + + ) : null} - - + ); } diff --git a/src/client/src/views/channels/channels/ChannelTable.tsx b/src/client/src/views/channels/channels/ChannelTable.tsx index 7b8defaf..aa172f90 100644 --- a/src/client/src/views/channels/channels/ChannelTable.tsx +++ b/src/client/src/views/channels/channels/ChannelTable.tsx @@ -21,7 +21,7 @@ import { LoadingCard } from '../../../components/loading/LoadingCard'; import { CloseChannel } from '../../../components/modal/closeChannel/CloseChannel'; import Modal from '../../../components/modal/ReactModal'; import { Price } from '../../../components/price/Price'; -import { Table } from '../../../components/table'; +import TableV2 from '../../../components/table-v2'; import { useGetChannelsQuery } from '../../../graphql/queries/__generated__/getChannels.generated'; import { useLocalStorage } from '../../../hooks/UseLocalStorage'; import { chartColors } from '../../../styles/Themes'; @@ -29,6 +29,7 @@ import { getErrorContent } from '../../../utils/error'; import { blockToTime, formatSeconds, getPercent } from '../../../utils/helpers'; import { ChannelDetails } from './ChannelDetails'; import { defaultHiddenColumns } from './helpers'; +import { VisibilityState } from '@tanstack/react-table'; const S = { link: styled.span` @@ -276,47 +277,52 @@ export const ChannelTable = () => { const columns = useMemo( () => [ { - Header: 'Status', + header: 'Status', columns: [ { - Header: 'Active', - accessor: 'channelActiveLogo', + header: 'Active', + accessorKey: 'channelActiveLogo', sortType: numberStringSorting('channelActive'), + cell: ({ cell }: any) => cell.renderValue(), }, { - Header: 'Private', - accessor: 'channelPrivateLogo', + header: 'Private', + accessorKey: 'channelPrivateLogo', sortType: numberStringSorting('channelPrivate'), + cell: ({ cell }: any) => cell.renderValue(), }, { - Header: 'Initiated', - accessor: 'channelOpenerLogo', + header: 'Initiated', + accessorKey: 'channelOpenerLogo', sortType: numberStringSorting('channelOpener'), + cell: ({ cell }: any) => cell.renderValue(), }, ], }, { - Header: 'Actions', + header: 'Actions', columns: [ { - Header: , - accessor: 'editAction', + header: , + accessorKey: 'editAction', disableSortBy: true, + cell: ({ cell }: any) => cell.renderValue(), }, { - Header: , - accessor: 'closeAction', + header: , + accessorKey: 'closeAction', disableSortBy: true, + cell: ({ cell }: any) => cell.renderValue(), }, ], }, { - Header: 'Info', + header: 'Info', columns: [ { - Header: 'Peer', - accessor: 'undercaseAlias', - Cell: ({ row }: any) => ( + header: 'Peer', + accessorKey: 'undercaseAlias', + cell: ({ row }: any) => (
{getNodeLink( row.original.partner_public_key, @@ -326,86 +332,88 @@ export const ChannelTable = () => { ), }, { - Header: 'Channel Id', - accessor: 'id', - forceVisible: true, - Cell: ({ row }: any) => ( + header: 'Channel Id', + accessorKey: 'id', + enableHiding: false, + cell: ({ row }: any) => (
{getChannelLink(row.original.id)}
), }, { - Header: 'Capacity', - accessor: 'capacity', - Cell: ({ row }: any) => ( + header: 'Capacity', + accessorKey: 'capacity', + cell: ({ row }: any) => (
), }, - { Header: 'Block Age', accessor: 'channel_age' }, + { header: 'Block Age', accessorKey: 'channel_age' }, { - Header: 'Channel Age', - accessor: 'channel_age_duplicate', - Cell: ({ row }: any) => ( + header: 'Channel Age', + accessorKey: 'channel_age_duplicate', + cell: ({ row }: any) => (
{blockToTime(row.original.channel_age)}
), }, { - Header: 'Past States', - accessor: 'past_states', + header: 'Past States', + accessorKey: 'past_states', }, ], }, { - Header: 'Balance', + header: 'Balance', columns: [ { - Header: 'Local', - accessor: 'local_balance', - Cell: ({ row }: any) => ( -
- -
- ), + header: 'Local', + accessorKey: 'local_balance', + cell: ({ row }: any) => { + return ( +
+ +
+ ); + }, }, { - Header: 'Remote', - accessor: 'remote_balance', - Cell: ({ row }: any) => ( + header: 'Remote', + accessorKey: 'remote_balance', + cell: ({ row }: any) => (
), }, { - Header: 'Percent', - accessor: 'balancePercentText', + header: 'Percent', + accessorKey: 'balancePercentText', sortType: numberStringSorting('balancePercent'), }, ], }, { - Header: 'Pending HTLC', + header: 'Pending HTLC', columns: [ - { Header: 'Total HTLC', accessor: 'pending_total_amount' }, - { Header: 'Total Sats', accessor: 'pending_total_tokens' }, - { Header: 'Incoming HTLC', accessor: 'pending_incoming_amount' }, - { Header: 'Incoming Sats', accessor: 'pending_incoming_tokens' }, - { Header: 'Outgoing HTLC', accessor: 'pending_outgoing_amount' }, - { Header: 'Outgoing Sats', accessor: 'pending_outgoing_tokens' }, + { header: 'Total HTLC', accessorKey: 'pending_total_amount' }, + { header: 'Total Sats', accessorKey: 'pending_total_tokens' }, + { header: 'Incoming HTLC', accessorKey: 'pending_incoming_amount' }, + { header: 'Incoming Sats', accessorKey: 'pending_incoming_tokens' }, + { header: 'Outgoing HTLC', accessorKey: 'pending_outgoing_amount' }, + { header: 'Outgoing Sats', accessorKey: 'pending_outgoing_tokens' }, ], }, { - Header: 'Monitoring', + header: 'Monitoring', columns: [ { - Header: 'Online', - accessor: 'time_online', - Cell: ({ row }: any) => ( + header: 'Online', + accessorKey: 'time_online', + cell: ({ row }: any) => (
{formatSeconds( Math.round((row.original.time_online || 0) / 1000) @@ -414,9 +422,9 @@ export const ChannelTable = () => { ), }, { - Header: 'Offline', - accessor: 'time_offline', - Cell: ({ row }: any) => ( + header: 'Offline', + accessorKey: 'time_offline', + cell: ({ row }: any) => (
{formatSeconds( Math.round((row.original.time_offline || 0) / 1000) @@ -425,89 +433,96 @@ export const ChannelTable = () => { ), }, { - Header: 'Percent', - accessor: 'percentOnlineText', + header: 'Percent', + accessorKey: 'percentOnlineText', sortType: numberStringSorting('percentOnline'), }, ], }, { - Header: 'Activity', + header: 'Activity', columns: [ { - Header: 'Sent', - accessor: 'sent', - Cell: ({ row }: any) => ( + header: 'Sent', + accessorKey: 'sent', + cell: ({ row }: any) => (
), }, { - Header: 'Received', - accessor: 'received', - Cell: ({ row }: any) => ( + header: 'Received', + accessorKey: 'received', + cell: ({ row }: any) => (
), }, { - Header: 'Percent', - accessor: 'activityPercentText', + header: 'Percent', + accessorKey: 'activityPercentText', sortType: numberStringSorting('activityPercent'), }, ], }, { - Header: 'My Fees', + header: 'My Fees', columns: [ - { Header: 'Rate', accessor: 'myRate' }, - { Header: 'Base', accessor: 'myBase' }, + { header: 'Rate', accessorKey: 'myRate' }, + { header: 'Base', accessorKey: 'myBase' }, ], }, { - Header: 'Partner Fees', + header: 'Partner Fees', columns: [ - { Header: 'Rate', accessor: 'partnerRate' }, - { Header: 'Base', accessor: 'partnerBase' }, + { header: 'Rate', accessorKey: 'partnerRate' }, + { header: 'Base', accessorKey: 'partnerBase' }, ], }, { - Header: 'My HTLC', + header: 'My HTLC', columns: [ - { Header: 'Max', accessor: 'myMaxHtlc' }, - { Header: 'Min', accessor: 'myMinHtlc' }, + { header: 'Max', accessorKey: 'myMaxHtlc' }, + { header: 'Min', accessorKey: 'myMinHtlc' }, ], }, { - Header: 'Partner HTLC', + header: 'Partner HTLC', columns: [ - { Header: 'Max', accessor: 'partnerMaxHtlc' }, - { Header: 'Min', accessor: 'partnerMinHtlc' }, + { header: 'Max', accessorKey: 'partnerMaxHtlc' }, + { header: 'Min', accessorKey: 'partnerMinHtlc' }, ], }, { - Header: 'Bars', + header: 'Bars', columns: [ { - Header: 'Balance', - accessor: 'balanceBars', + header: 'Balance', + accessorKey: 'balanceBars', sortType: numberStringSorting('balancePercent'), + cell: ({ cell }: any) => cell.renderValue(), }, { - Header: 'Proportional', - accessor: 'proportionalBars', + header: 'Proportional', + accessorKey: 'proportionalBars', sortType: numberStringSorting('balancePercent'), + cell: ({ cell }: any) => cell.renderValue(), }, { - Header: 'Activity', - accessor: 'activityBars', + header: 'Activity', + accessorKey: 'activityBars', sortType: numberStringSorting('activityPercent'), + cell: ({ cell }: any) => cell.renderValue(), }, ], }, - { Header: 'Details', accessor: 'viewAction' }, + { + header: 'Details', + accessorKey: 'viewAction', + cell: ({ cell }: any) => cell.renderValue(), + }, ], [numberStringSorting] ); @@ -521,6 +536,14 @@ export const ChannelTable = () => { } }; + const hiddenColumnState: VisibilityState = useMemo(() => { + const defaultColumns: VisibilityState = {}; + hiddenColumns.forEach(c => { + defaultColumns[c] = false; + }); + return defaultColumns; + }, [hiddenColumns]); + if (loading) { return ; } @@ -550,12 +573,12 @@ export const ChannelTable = () => { return ( <> - setChannel(null)}> diff --git a/src/client/src/views/channels/closedChannels/ClosedChannels.tsx b/src/client/src/views/channels/closedChannels/ClosedChannels.tsx index c635f358..97fd6560 100644 --- a/src/client/src/views/channels/closedChannels/ClosedChannels.tsx +++ b/src/client/src/views/channels/closedChannels/ClosedChannels.tsx @@ -4,7 +4,7 @@ import { useGetClosedChannelsQuery } from '../../../graphql/queries/__generated_ import { DarkSubTitle } from '../../../components/generic/Styled'; import { getErrorContent } from '../../../utils/error'; import { LoadingCard } from '../../../components/loading/LoadingCard'; -import { Table } from '../../../components/table'; +import TableV2 from '../../../components/table-v2'; import { Price } from '../../../components/price/Price'; import { blockToTime } from '../../../utils/helpers'; import { orderBy } from 'lodash'; @@ -56,49 +56,54 @@ export const ClosedChannels = () => { const columns = useMemo( () => [ { - Header: 'Peer', - accessor: 'alias', - Cell: ({ row }: any) => ( + header: 'Peer', + accessorKey: 'alias', + enableSorting: true, + cell: ({ row }: any) => (
{getNodeLink(row.original.partner_public_key, row.original.alias)}
), }, { - Header: 'Closed Since', - accessor: 'closed_for_blocks', - Cell: ({ row }: any) => ( + header: 'Closed Since', + accessorKey: 'closed_for_blocks', + enableSorting: true, + cell: ({ row }: any) => (
{blockToTime(row.original.closed_for_blocks)}
), }, { - Header: 'Channel Age', - accessor: 'channel_age', - Cell: ({ row }: any) => ( + header: 'Channel Age', + accessorKey: 'channel_age', + enableSorting: true, + cell: ({ row }: any) => (
{blockToTime(row.original.channel_age)}
), }, { - Header: 'Capacity', - accessor: 'capacity', - Cell: ({ row }: any) => ( + header: 'Capacity', + accessorKey: 'capacity', + enableSorting: true, + cell: ({ row }: any) => (
), }, { - Header: 'Close Type', - accessor: 'closeType', + header: 'Close Type', + accessorKey: 'closeType', }, { - Header: 'Transaction Id', - accessor: 'transaction_id', - Cell: ({ row }: any) => getTransactionLink(row.original.transaction_id), + header: 'Transaction Id', + accessorKey: 'transaction_id', + enableSorting: true, + cell: ({ row }: any) => getTransactionLink(row.original.transaction_id), }, ], [] @@ -113,10 +118,10 @@ export const ClosedChannels = () => { } return ( -
); From 69ea8f29920f0092d6097205a475cf0ae4a4d0a2 Mon Sep 17 00:00:00 2001 From: AmbossKeegan Date: Wed, 14 Jun 2023 17:47:39 -0300 Subject: [PATCH 2/7] feat: create ColumnConfigurations to encapsulate functionality --- .../table-v2/ColumnConfigurations.tsx | 94 +++++++++++++++++++ src/client/src/components/table-v2/index.tsx | 79 ++-------------- .../views/channels/channels/ChannelTable.tsx | 2 +- 3 files changed, 101 insertions(+), 74 deletions(-) create mode 100644 src/client/src/components/table-v2/ColumnConfigurations.tsx diff --git a/src/client/src/components/table-v2/ColumnConfigurations.tsx b/src/client/src/components/table-v2/ColumnConfigurations.tsx new file mode 100644 index 00000000..5a9474ee --- /dev/null +++ b/src/client/src/components/table-v2/ColumnConfigurations.tsx @@ -0,0 +1,94 @@ +import { Table } from '@tanstack/react-table'; +import { FC, useMemo } from 'react'; +import styled from 'styled-components'; +import { mediaWidths } from '../../styles/Themes'; +import { groupBy } from 'lodash'; +import { DarkSubTitle, SubCard } from '../generic/Styled'; + +interface ColumnConfigurationsProps { + isOpen: boolean; + table: Table; +} + +const S = { + row: styled.div` + display: flex; + flex-direction: row; + justify-content: space-between; + margin-bottom: 24px; + `, + optionRow: styled.div` + display: flex; + justify-content: flex-start; + align-items: stretch; + flex-wrap: wrap; + + @media (${mediaWidths.mobile}) { + display: block; + } + `, + option: styled.label` + margin: 4px 8px; + `, + options: styled.div` + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + flex-wrap: wrap; + + @media (${mediaWidths.mobile}) { + flex-direction: row; + } + `, +}; + +export const ColumnConfigurations: FC = ({ + isOpen, + table, +}: ColumnConfigurationsProps) => { + // The columns that are hideable in configurations need to be grouped by their parents id in order for display purposes, see enableHiding to toggle viewability of each column + const groupedHideableColumns = useMemo(() => { + const allLeafColumns = table + .getAllLeafColumns() + .filter(c => c.getCanHide()); + const grouped = groupBy(allLeafColumns, (c: any) => c?.parent?.id); + return grouped; + }, [table]); + + if (!isOpen) return null; + + return ( + + {Object.keys(groupedHideableColumns).map( + (group: string, index: number) => { + return ( + + + {group === 'undefined' ? 'General' : group} + + + {groupedHideableColumns[group].map((column: any) => { + return ( + + + + ); + })} + + + ); + } + )} + + ); +}; diff --git a/src/client/src/components/table-v2/index.tsx b/src/client/src/components/table-v2/index.tsx index 8210db07..18b7b22e 100644 --- a/src/client/src/components/table-v2/index.tsx +++ b/src/client/src/components/table-v2/index.tsx @@ -1,4 +1,4 @@ -import { useEffect, useMemo, useState } from 'react'; +import { useEffect, useState } from 'react'; import styled, { css } from 'styled-components'; import { useReactTable, @@ -15,9 +15,7 @@ import { Settings, X } from 'react-feather'; import { Input } from '../input'; import { separationColor } from '../../../src/styles/Themes'; import { ColorButton } from '../buttons/colorButton/ColorButton'; -import { mediaWidths } from '../../../src/styles/Themes'; -import { groupBy } from 'lodash'; -import { DarkSubTitle, SubCard } from '../generic/Styled'; +import { ColumnConfigurations } from './ColumnConfigurations'; interface TableV2Props { columns: ColumnDef[]; @@ -27,7 +25,7 @@ interface TableV2Props { alignCenter?: boolean; fontSize?: string; defaultHiddenColumns?: VisibilityState; - onHideToggle?: (hide: boolean, id: string) => void; + showConfigurations?: (hide: boolean, id: string) => void; } type StyledTableProps = { @@ -43,30 +41,6 @@ const S = { justify-content: space-between; margin-bottom: 24px; `, - optionRow: styled.div` - display: flex; - justify-content: flex-start; - align-items: stretch; - flex-wrap: wrap; - - @media (${mediaWidths.mobile}) { - display: block; - } - `, - option: styled.label` - margin: 4px 8px; - `, - options: styled.div` - display: flex; - flex-direction: column; - justify-content: flex-start; - align-items: flex-start; - flex-wrap: wrap; - - @media (${mediaWidths.mobile}) { - flex-direction: row; - } - `, wrapper: styled.div` overflow-x: auto; table { @@ -116,7 +90,7 @@ export default function TableV2({ alignCenter, fontSize, defaultHiddenColumns, - onHideToggle, + showConfigurations, }: TableV2Props) { const [globalFilter, setGlobalFilter] = useState(''); const [sorting, setSorting] = useState([]); @@ -144,15 +118,6 @@ export default function TableV2({ getPaginationRowModel: getPaginationRowModel(), }); - // The columns that are hideable in configurations need to be grouped by their parents id in order for display purposes - const groupedHideableColumns = useMemo(() => { - const allLeafColumns = table - .getAllLeafColumns() - .filter(c => c.getCanHide()); - const grouped = groupBy(allLeafColumns, (c: any) => c?.parent?.id); - return grouped; - }, [table]); - return ( <> @@ -162,46 +127,14 @@ export default function TableV2({ placeholder={filterPlaceholder} count={table.getFilteredRowModel().rows.length} /> - {onHideToggle ? ( + {showConfigurations ? ( setIsOpen(p => !p)}> {isOpen ? : } ) : null} - {isOpen ? ( - - {Object.keys(groupedHideableColumns).map( - (group: string, index: number) => { - return ( - - - {group === 'undefined' ? 'General' : group} - - - {groupedHideableColumns[group].map((column: any) => { - return ( - - - - ); - })} - - - ); - } - )} - - ) : null} + { withBorder={true} columns={columns} data={tableData} - onHideToggle={handleToggle} + showConfigurations={handleToggle} defaultHiddenColumns={hiddenColumnState} filterPlaceholder="channels" /> From 5b38fcbfce4cf28e5fc6bcf37149f9f67ab74dd6 Mon Sep 17 00:00:00 2001 From: AmbossKeegan Date: Wed, 14 Jun 2023 18:12:40 -0300 Subject: [PATCH 3/7] feat: hook up local storage to channel configurations --- .../table-v2/ColumnConfigurations.tsx | 5 +++++ src/client/src/components/table-v2/index.tsx | 21 ++++++++++++------- .../views/channels/channels/ChannelTable.tsx | 2 +- 3 files changed, 19 insertions(+), 9 deletions(-) diff --git a/src/client/src/components/table-v2/ColumnConfigurations.tsx b/src/client/src/components/table-v2/ColumnConfigurations.tsx index 5a9474ee..2c175b22 100644 --- a/src/client/src/components/table-v2/ColumnConfigurations.tsx +++ b/src/client/src/components/table-v2/ColumnConfigurations.tsx @@ -8,6 +8,7 @@ import { DarkSubTitle, SubCard } from '../generic/Styled'; interface ColumnConfigurationsProps { isOpen: boolean; table: Table; + toggleConfiguration: (hide: boolean, id: string) => void; } const S = { @@ -46,6 +47,7 @@ const S = { export const ColumnConfigurations: FC = ({ isOpen, table, + toggleConfiguration, }: ColumnConfigurationsProps) => { // The columns that are hideable in configurations need to be grouped by their parents id in order for display purposes, see enableHiding to toggle viewability of each column const groupedHideableColumns = useMemo(() => { @@ -78,6 +80,9 @@ export const ColumnConfigurations: FC = ({ checked: column.getIsVisible(), onChange: column.getToggleVisibilityHandler(), }} + onClick={(e: any) => + toggleConfiguration(!e.target.checked, column.id) + } />{' '} {column.columnDef.header} diff --git a/src/client/src/components/table-v2/index.tsx b/src/client/src/components/table-v2/index.tsx index 18b7b22e..79296f5c 100644 --- a/src/client/src/components/table-v2/index.tsx +++ b/src/client/src/components/table-v2/index.tsx @@ -25,7 +25,7 @@ interface TableV2Props { alignCenter?: boolean; fontSize?: string; defaultHiddenColumns?: VisibilityState; - showConfigurations?: (hide: boolean, id: string) => void; + toggleConfiguration?: (hide: boolean, id: string) => void; } type StyledTableProps = { @@ -90,7 +90,7 @@ export default function TableV2({ alignCenter, fontSize, defaultHiddenColumns, - showConfigurations, + toggleConfiguration, }: TableV2Props) { const [globalFilter, setGlobalFilter] = useState(''); const [sorting, setSorting] = useState([]); @@ -127,15 +127,20 @@ export default function TableV2({ placeholder={filterPlaceholder} count={table.getFilteredRowModel().rows.length} /> - {showConfigurations ? ( - setIsOpen(p => !p)}> - {isOpen ? : } - + {toggleConfiguration ? ( + <> + setIsOpen(p => !p)}> + {isOpen ? : } + + + ) : null} - - { withBorder={true} columns={columns} data={tableData} - showConfigurations={handleToggle} + toggleConfiguration={handleToggle} defaultHiddenColumns={hiddenColumnState} filterPlaceholder="channels" /> From c21877289902d89283963e69f157461878cad67c Mon Sep 17 00:00:00 2001 From: AmbossKeegan Date: Wed, 14 Jun 2023 20:51:25 -0300 Subject: [PATCH 4/7] feat: finish migrating all tables in codebase to tanstack --- .../table-v2/ColumnConfigurations.tsx | 4 - .../components/table-v2/DebouncedInput.tsx | 40 ++++++++ src/client/src/components/table-v2/index.tsx | 95 ++++++++----------- .../chain/transactions/ChainTransactions.tsx | 51 +++++----- .../src/views/chain/utxos/ChainUtxos.tsx | 42 ++++---- .../views/channels/channels/ChannelTable.tsx | 7 +- .../closedChannels/ClosedChannels.tsx | 2 + .../pendingChannels/PendingChannels.tsx | 2 + .../dashboard/widgets/external/mempool.tsx | 12 +-- .../dashboard/widgets/lightning/forwards.tsx | 34 +++++-- .../src/views/forwards/ForwardTable.tsx | 40 ++++++-- src/client/src/views/forwards/index.tsx | 53 ++++++----- .../forwardReport/ForwardReportTables.tsx | 42 ++++++-- .../src/views/home/reports/mempool/index.tsx | 28 ++++-- 14 files changed, 293 insertions(+), 159 deletions(-) create mode 100644 src/client/src/components/table-v2/DebouncedInput.tsx diff --git a/src/client/src/components/table-v2/ColumnConfigurations.tsx b/src/client/src/components/table-v2/ColumnConfigurations.tsx index 2c175b22..6706b926 100644 --- a/src/client/src/components/table-v2/ColumnConfigurations.tsx +++ b/src/client/src/components/table-v2/ColumnConfigurations.tsx @@ -6,7 +6,6 @@ import { groupBy } from 'lodash'; import { DarkSubTitle, SubCard } from '../generic/Styled'; interface ColumnConfigurationsProps { - isOpen: boolean; table: Table; toggleConfiguration: (hide: boolean, id: string) => void; } @@ -45,7 +44,6 @@ const S = { }; export const ColumnConfigurations: FC = ({ - isOpen, table, toggleConfiguration, }: ColumnConfigurationsProps) => { @@ -58,8 +56,6 @@ export const ColumnConfigurations: FC = ({ return grouped; }, [table]); - if (!isOpen) return null; - return ( {Object.keys(groupedHideableColumns).map( diff --git a/src/client/src/components/table-v2/DebouncedInput.tsx b/src/client/src/components/table-v2/DebouncedInput.tsx new file mode 100644 index 00000000..d3c268e8 --- /dev/null +++ b/src/client/src/components/table-v2/DebouncedInput.tsx @@ -0,0 +1,40 @@ +import { useState, useEffect } from 'react'; +import { Input } from '../input'; + +// A debounced input react component +export function DebouncedInput({ + value: initialValue, + onChange, + debounce = 500, + placeholder, + count, +}: { + value: string | number; + onChange: (value: string | number) => void; + count: number; + debounce?: number; + placeholder?: string; +} & Omit, 'onChange'>) { + const [value, setValue] = useState(initialValue); + + useEffect(() => { + setValue(initialValue); + }, [initialValue]); + + useEffect(() => { + const timeout = setTimeout(() => { + onChange(value); + }, debounce); + + return () => clearTimeout(timeout); + }, [value]); + + return ( + setValue(e.target.value)} + placeholder={`Search ${count} ${placeholder || ''}`} + /> + ); +} diff --git a/src/client/src/components/table-v2/index.tsx b/src/client/src/components/table-v2/index.tsx index 79296f5c..6f50a05f 100644 --- a/src/client/src/components/table-v2/index.tsx +++ b/src/client/src/components/table-v2/index.tsx @@ -1,4 +1,4 @@ -import { useEffect, useState } from 'react'; +import { useState } from 'react'; import styled, { css } from 'styled-components'; import { useReactTable, @@ -12,15 +12,17 @@ import { VisibilityState, } from '@tanstack/react-table'; import { Settings, X } from 'react-feather'; -import { Input } from '../input'; import { separationColor } from '../../../src/styles/Themes'; import { ColorButton } from '../buttons/colorButton/ColorButton'; import { ColumnConfigurations } from './ColumnConfigurations'; +import { DebouncedInput } from './DebouncedInput'; interface TableV2Props { columns: ColumnDef[]; data: any; - filterPlaceholder: string; + filterPlaceholder?: string; + withGlobalSort?: boolean; // enables the global search box + withSorting?: boolean; // enables columns to be sorted withBorder?: boolean; alignCenter?: boolean; fontSize?: string; @@ -91,6 +93,8 @@ export default function TableV2({ fontSize, defaultHiddenColumns, toggleConfiguration, + withGlobalSort = false, + withSorting = false, }: TableV2Props) { const [globalFilter, setGlobalFilter] = useState(''); const [sorting, setSorting] = useState([]); @@ -100,7 +104,7 @@ export default function TableV2({ defaultHiddenColumns || {} ); - const table = useReactTable({ + const tableConfigs = { data, columns, state: { @@ -108,39 +112,56 @@ export default function TableV2({ globalFilter, sorting, }, - enableSorting: true, - onGlobalFilterChange: setGlobalFilter, + enableSorting: withSorting, onSortingChange: setSorting, + onGlobalFilterChange: setGlobalFilter, onColumnVisibilityChange: setColumnVisibility, getCoreRowModel: getCoreRowModel(), getSortedRowModel: getSortedRowModel(), getFilteredRowModel: getFilteredRowModel(), getPaginationRowModel: getPaginationRowModel(), - }); + }; + + if (withGlobalSort) { + tableConfigs.enableSorting = true; + tableConfigs.state.globalFilter = globalFilter; + tableConfigs.onGlobalFilterChange = setGlobalFilter; + } + + if (withSorting) { + tableConfigs.state.sorting = sorting; + tableConfigs.onSortingChange = setSorting; + } + + const table = useReactTable(tableConfigs); return ( <> - setGlobalFilter(String(value))} - placeholder={filterPlaceholder} - count={table.getFilteredRowModel().rows.length} - /> + {withGlobalSort ? ( + setGlobalFilter(String(value))} + placeholder={filterPlaceholder || ''} + count={table.getFilteredRowModel().rows.length} + /> + ) : null} {toggleConfiguration ? ( <> setIsOpen(p => !p)}> {isOpen ? : } - ) : null} + {isOpen && toggleConfiguration ? ( + + ) : null} + ); } - -// A debounced input react component -function DebouncedInput({ - value: initialValue, - onChange, - debounce = 500, - placeholder, - count, -}: { - value: string | number; - onChange: (value: string | number) => void; - count: number; - debounce?: number; - placeholder?: string; -} & Omit, 'onChange'>) { - const [value, setValue] = useState(initialValue); - - useEffect(() => { - setValue(initialValue); - }, [initialValue]); - - useEffect(() => { - const timeout = setTimeout(() => { - onChange(value); - }, debounce); - - return () => clearTimeout(timeout); - }, [value]); - - return ( - setValue(e.target.value)} - placeholder={`Search ${count} ${placeholder || ''}`} - /> - ); -} diff --git a/src/client/src/views/chain/transactions/ChainTransactions.tsx b/src/client/src/views/chain/transactions/ChainTransactions.tsx index ce191d59..a7c2ae9d 100644 --- a/src/client/src/views/chain/transactions/ChainTransactions.tsx +++ b/src/client/src/views/chain/transactions/ChainTransactions.tsx @@ -4,7 +4,7 @@ import { useGetChainTransactionsQuery } from '../../../graphql/queries/__generat import { DarkSubTitle } from '../../../components/generic/Styled'; import { getErrorContent } from '../../../utils/error'; import { LoadingCard } from '../../../components/loading/LoadingCard'; -import { Table } from '../../../components/table'; +import TableV2 from '../../../components/table-v2'; import { getAddressLink, getDateDif, @@ -33,9 +33,9 @@ export const ChainTransactions = () => { const columns = useMemo( () => [ { - Header: 'Type', - accessor: 'transaction_type', - Cell: ({ row }: any) => ( + header: 'Type', + accessorKey: 'transaction_type', + cell: ({ row }: any) => (
{row.original.transaction_type === 'Sent' ? ( @@ -46,38 +46,39 @@ export const ChainTransactions = () => { ), }, { - Header: 'Date', - accessor: 'created_at', - Cell: ({ row }: any) => ( + header: 'Date', + accessorKey: 'created_at', + cell: ({ row }: any) => (
{`${getDateDif(row.original.created_at)} ago`}
), }, { - Header: 'Sats', - accessor: 'tokens', - Cell: ({ row }: any) => ( + header: 'Sats', + accessorKey: 'tokens', + cell: ({ row }: any) => (
), }, { - Header: 'Fee', - accessor: 'fee', - Cell: ({ row }: any) => ( + header: 'Fee', + accessorKey: 'fee', + cell: ({ row }: any) => (
), }, - { Header: 'Confirmations', accessor: 'confirmation_count' }, - { Header: 'Confirmation Block', accessor: 'confirmation_height' }, + { header: 'Confirmations', accessorKey: 'confirmation_count' }, + { header: 'Confirmation Block', accessorKey: 'confirmation_height' }, { - Header: 'Output Addresses', - accessor: 'output_addresses', - Cell: ({ row }: any) => + header: 'Output Addresses', + accessorKey: 'output_addresses', + enableSorting: false, + cell: ({ row }: any) => row.original.output_addresses.map((a: string) => (
{getAddressLink(a)} @@ -85,9 +86,10 @@ export const ChainTransactions = () => { )), }, { - Header: 'Transaction', - accessor: 'id', - Cell: ({ row }: any) => ( + header: 'Transaction', + accessorKey: 'id', + enableSorting: false, + cell: ({ row }: any) => (
{getTransactionLink(row.original.id)}
@@ -106,6 +108,11 @@ export const ChainTransactions = () => { } return ( -
+ ); }; diff --git a/src/client/src/views/chain/utxos/ChainUtxos.tsx b/src/client/src/views/chain/utxos/ChainUtxos.tsx index 9d29fa13..d1681d79 100644 --- a/src/client/src/views/chain/utxos/ChainUtxos.tsx +++ b/src/client/src/views/chain/utxos/ChainUtxos.tsx @@ -4,7 +4,7 @@ import { useGetUtxosQuery } from '../../../graphql/queries/__generated__/getUtxo import { DarkSubTitle } from '../../../components/generic/Styled'; import { getErrorContent } from '../../../utils/error'; import { LoadingCard } from '../../../components/loading/LoadingCard'; -import { Table } from '../../../components/table'; +import TableV2 from '../../../components/table-v2'; import { getAddressLink } from '../../../components/generic/helpers'; import { Price } from '../../../components/price/Price'; import { blockToTime } from '../../../utils/helpers'; @@ -29,43 +29,46 @@ export const ChainUtxos = () => { const columns = useMemo( () => [ { - Header: '', - accessor: 'index', + header: '', + accessorKey: 'index', }, { - Header: 'Sats', - accessor: 'tokens', - Cell: ({ row }: any) => ( + header: 'Sats', + accessorKey: 'tokens', + cell: ({ row }: any) => (
), }, { - Header: 'Confirmations', + header: 'Confirmations', columns: [ - { Header: 'Blocks', accessor: 'confirmation_count' }, + { header: 'Blocks', accessorKey: 'confirmation_count' }, { - Header: 'Since', - accessor: 'time', + header: 'Since', + accessorKey: 'time', }, ], }, { - Header: 'Address', + header: 'Address', + enableSorting: false, columns: [ { - Header: 'Link', - accessor: 'output_addresses', - Cell: ({ row }: any) => ( + header: 'Link', + enableSorting: false, + accessorKey: 'output_addresses', + cell: ({ row }: any) => (
{getAddressLink(row.original.address)}
), }, { - Header: 'Format', - accessor: 'address_format', + header: 'Format', + enableSorting: false, + accessorKey: 'address_format', }, ], }, @@ -82,6 +85,11 @@ export const ChainUtxos = () => { } return ( -
+ ); }; diff --git a/src/client/src/views/channels/channels/ChannelTable.tsx b/src/client/src/views/channels/channels/ChannelTable.tsx index dbeaad79..ef89d3c1 100644 --- a/src/client/src/views/channels/channels/ChannelTable.tsx +++ b/src/client/src/views/channels/channels/ChannelTable.tsx @@ -305,13 +305,13 @@ export const ChannelTable = () => { { header: , accessorKey: 'editAction', - disableSortBy: true, + enableSorting: false, cell: ({ cell }: any) => cell.renderValue(), }, { header: , accessorKey: 'closeAction', - disableSortBy: true, + enableSorting: false, cell: ({ cell }: any) => cell.renderValue(), }, ], @@ -521,6 +521,7 @@ export const ChannelTable = () => { { header: 'Details', accessorKey: 'viewAction', + enableSorting: false, cell: ({ cell }: any) => cell.renderValue(), }, ], @@ -577,6 +578,8 @@ export const ChannelTable = () => { withBorder={true} columns={columns} data={tableData} + withGlobalSort={true} + withSorting={true} toggleConfiguration={handleToggle} defaultHiddenColumns={hiddenColumnState} filterPlaceholder="channels" diff --git a/src/client/src/views/channels/closedChannels/ClosedChannels.tsx b/src/client/src/views/channels/closedChannels/ClosedChannels.tsx index 97fd6560..09df4213 100644 --- a/src/client/src/views/channels/closedChannels/ClosedChannels.tsx +++ b/src/client/src/views/channels/closedChannels/ClosedChannels.tsx @@ -122,6 +122,8 @@ export const ClosedChannels = () => { columns={columns} data={tableData} withBorder={true} + withGlobalSort={true} + withSorting={true} filterPlaceholder="channels" /> ); diff --git a/src/client/src/views/channels/pendingChannels/PendingChannels.tsx b/src/client/src/views/channels/pendingChannels/PendingChannels.tsx index 71aa065a..0afd4878 100644 --- a/src/client/src/views/channels/pendingChannels/PendingChannels.tsx +++ b/src/client/src/views/channels/pendingChannels/PendingChannels.tsx @@ -184,6 +184,8 @@ export const PendingChannels = () => { columns={columns} data={tableData} withBorder={true} + withGlobalSort={true} + withSorting={true} filterPlaceholder="channels" /> ); diff --git a/src/client/src/views/dashboard/widgets/external/mempool.tsx b/src/client/src/views/dashboard/widgets/external/mempool.tsx index 7532b388..120f5f90 100644 --- a/src/client/src/views/dashboard/widgets/external/mempool.tsx +++ b/src/client/src/views/dashboard/widgets/external/mempool.tsx @@ -1,4 +1,4 @@ -import { Table } from '../../../../components/table'; +import TableV2 from '../../../../components/table-v2'; import { useBitcoinFees } from '../../../../hooks/UseBitcoinFees'; import styled from 'styled-components'; @@ -17,10 +17,10 @@ export const MempoolWidget = () => { } const columns = [ - { Header: 'Fastest', accessor: 'fast' }, - { Header: 'Half Hour', accessor: 'halfHour' }, - { Header: 'Hour', accessor: 'hour' }, - { Header: 'Minimum', accessor: 'minimum' }, + { header: 'Fastest', accessorKey: 'fast' }, + { header: 'Half Hour', accessorKey: 'halfHour' }, + { header: 'Hour', accessorKey: 'hour' }, + { header: 'Minimum', accessorKey: 'minimum' }, ]; const data = [ @@ -34,7 +34,7 @@ export const MempoolWidget = () => { return ( -
+ ); }; diff --git a/src/client/src/views/dashboard/widgets/lightning/forwards.tsx b/src/client/src/views/dashboard/widgets/lightning/forwards.tsx index e14b801c..90ca4373 100644 --- a/src/client/src/views/dashboard/widgets/lightning/forwards.tsx +++ b/src/client/src/views/dashboard/widgets/lightning/forwards.tsx @@ -1,6 +1,6 @@ import { getDateDif } from '../../../../components/generic/helpers'; import { Price } from '../../../../components/price/Price'; -import { Table } from '../../../../components/table'; +import TableV2 from '../../../../components/table-v2'; import { useGetForwardsQuery } from '../../../../graphql/queries/__generated__/getForwards.generated'; import { ChannelAlias } from '../../../../views/home/reports/forwardReport/ChannelAlias'; import styled from 'styled-components'; @@ -32,11 +32,31 @@ export const ForwardListWidget = () => { const forwards = data?.getForwards || []; const columns = [ - { Header: 'Date', accessor: 'date' }, - { Header: 'Amount', accessor: 'amount' }, - { Header: 'Fee', accessor: 'fee' }, - { Header: 'Incoming', accessor: 'incoming' }, - { Header: 'Outgoing', accessor: 'outgoing' }, + { + header: 'Date', + accessorKey: 'date', + cell: ({ cell }: any) => cell.renderValue(), + }, + { + header: 'Amount', + accessorKey: 'amount', + cell: ({ cell }: any) => cell.renderValue(), + }, + { + header: 'Fee', + accessorKey: 'fee', + cell: ({ cell }: any) => cell.renderValue(), + }, + { + header: 'Incoming', + accessorKey: 'incoming', + cell: ({ cell }: any) => cell.renderValue(), + }, + { + header: 'Outgoing', + accessorKey: 'outgoing', + cell: ({ cell }: any) => cell.renderValue(), + }, ]; const tableData = forwards.reduce((p, f) => { @@ -65,7 +85,7 @@ export const ForwardListWidget = () => { Forwards -
+ ); diff --git a/src/client/src/views/forwards/ForwardTable.tsx b/src/client/src/views/forwards/ForwardTable.tsx index cca0e0ad..042f2f0b 100644 --- a/src/client/src/views/forwards/ForwardTable.tsx +++ b/src/client/src/views/forwards/ForwardTable.tsx @@ -3,7 +3,6 @@ import { toast } from 'react-toastify'; import { ProgressBar } from '../../components/generic/CardGeneric'; import { SingleLine } from '../../components/generic/Styled'; import { getPrice } from '../../components/price/Price'; -import { Table } from '../../components/table'; import { useConfigState } from '../../context/ConfigContext'; import { usePriceState } from '../../context/PriceContext'; import { useGetForwardsQuery } from '../../graphql/queries/__generated__/getForwards.generated'; @@ -11,6 +10,7 @@ import { Forward } from '../../graphql/types'; import { getErrorContent } from '../../utils/error'; import { ChannelAlias } from '../home/reports/forwardReport/ChannelAlias'; import { sortByNode } from './helpers'; +import TableV2 from '../../components/table-v2'; const getBar = (top: number, bottom: number) => { const percent = (top / bottom) * 100; @@ -52,12 +52,36 @@ export const ForwardTable: FC<{ days: number; order: string }> = ({ ); const columns = [ - { Header: 'Alias', accessor: 'alias' }, - { Header: 'Channel', accessor: 'channel' }, - { Header: 'Incoming', accessor: 'incoming' }, - { Header: 'Outgoing', accessor: 'outgoing' }, - { Header: 'Incoming', accessor: 'incomingBar' }, - { Header: 'Outgoing', accessor: 'outgoingBar' }, + { + header: 'Alias', + accessorKey: 'alias', + cell: ({ cell }: any) => cell.renderValue(), + }, + { + header: 'Channel', + accessorKey: 'channel', + cell: ({ cell }: any) => cell.renderValue(), + }, + { + header: 'Incoming', + accessorKey: 'incoming', + cell: ({ cell }: any) => cell.renderValue(), + }, + { + header: 'Outgoing', + accessorKey: 'outgoing', + cell: ({ cell }: any) => cell.renderValue(), + }, + { + header: 'Incoming', + accessorKey: 'incomingBar', + cell: ({ cell }: any) => cell.renderValue(), + }, + { + header: 'Outgoing', + accessorKey: 'outgoingBar', + cell: ({ cell }: any) => cell.renderValue(), + }, ]; const tableData = final.map(f => ({ @@ -69,5 +93,5 @@ export const ForwardTable: FC<{ days: number; order: string }> = ({ outgoingBar: , })); - return
; + return ; }; diff --git a/src/client/src/views/forwards/index.tsx b/src/client/src/views/forwards/index.tsx index c4010444..af571c14 100644 --- a/src/client/src/views/forwards/index.tsx +++ b/src/client/src/views/forwards/index.tsx @@ -4,10 +4,10 @@ import { getDateDif } from '../../components/generic/helpers'; import { DarkSubTitle } from '../../components/generic/Styled'; import { LoadingCard } from '../../components/loading/LoadingCard'; import { Price } from '../../components/price/Price'; -import { Table } from '../../components/table'; import { useGetForwardsQuery } from '../../graphql/queries/__generated__/getForwards.generated'; import { getErrorContent } from '../../utils/error'; import { ChannelAlias } from '../home/reports/forwardReport/ChannelAlias'; +import TableV2 from '../../components/table-v2'; type ForwardProps = { days: number; @@ -34,30 +34,30 @@ export const ForwardsList: FC = ({ days }) => { const columns = useMemo( () => [ { - Header: 'Date', - accessor: 'created_at', - Cell: ({ row }: any) => ( + header: 'Date', + accessorKey: 'created_at', + cell: ({ row }: any) => (
{`${getDateDif(row.original.created_at)} ago`}
), }, { - Header: 'Sats', + header: 'Sats', columns: [ { - Header: 'Forwarded', - accessor: 'tokens', - Cell: ({ row }: any) => ( + header: 'Forwarded', + accessorKey: 'tokens', + cell: ({ row }: any) => (
), }, { - Header: 'Earned', - accessor: 'fee', - Cell: ({ row }: any) => ( + header: 'Earned', + accessorKey: 'fee', + cell: ({ row }: any) => (
@@ -66,28 +66,32 @@ export const ForwardsList: FC = ({ days }) => { ], }, { - Header: 'Peer', + header: 'Peer', columns: [ { - Header: 'Incoming', - accessor: 'incoming_name', + header: 'Incoming', + accessorKey: 'incoming_name', + cell: ({ cell }: any) => cell.renderValue(), }, { - Header: 'Outgoing', - accessor: 'outgoing_name', + header: 'Outgoing', + accessorKey: 'outgoing_name', + cell: ({ cell }: any) => cell.renderValue(), }, ], }, { - Header: 'Channel', + header: 'Channel', columns: [ { - Header: 'Incoming', - accessor: 'incoming_channel', + header: 'Incoming', + accessorKey: 'incoming_channel', + cell: ({ cell }: any) => cell.renderValue(), }, { - Header: 'Outgoing', - accessor: 'outgoing_channel', + header: 'Outgoing', + accessorKeyKey: 'outgoing_channel', + cell: ({ cell }: any) => cell.renderValue(), }, ], }, @@ -104,6 +108,11 @@ export const ForwardsList: FC = ({ days }) => { } return ( -
+ ); }; diff --git a/src/client/src/views/home/reports/forwardReport/ForwardReportTables.tsx b/src/client/src/views/home/reports/forwardReport/ForwardReportTables.tsx index ce736f89..7098e19c 100644 --- a/src/client/src/views/home/reports/forwardReport/ForwardReportTables.tsx +++ b/src/client/src/views/home/reports/forwardReport/ForwardReportTables.tsx @@ -1,6 +1,6 @@ import { FC } from 'react'; -import { Table } from '../../../../components/table'; import { ChannelAlias } from './ChannelAlias'; +import TableV2 from '../../../../components/table-v2'; export type RouteType = { route: string; @@ -53,9 +53,21 @@ export const RouteTable: FC = ({ order, forwardArray }) => { }; const columns = [ - { Header: 'In', accessor: 'aliasIn' }, - { Header: 'Out', accessor: 'aliasOut' }, - { Header: getTitle(), accessor: getAccesor() }, + { + header: 'In', + accessorKey: 'aliasIn', + cell: ({ cell }: any) => cell.renderValue(), + }, + { + header: 'Out', + accessorKey: 'aliasOut', + cell: ({ cell }: any) => cell.renderValue(), + }, + { + header: getTitle(), + accessorKey: getAccesor(), + cell: ({ cell }: any) => cell.renderValue(), + }, ]; const tableData = forwardArray.map(f => ({ @@ -64,7 +76,7 @@ export const RouteTable: FC = ({ order, forwardArray }) => { aliasOut: , })); - return
; + return ; }; export const ChannelTable: FC = ({ @@ -94,9 +106,21 @@ export const ChannelTable: FC = ({ }; const columns = [ - { Header: 'Alias', accessor: 'alias' }, - { Header: 'Id', accessor: 'name' }, - { Header: getTitle(), accessor: getAccesor() }, + { + header: 'Alias', + accessorKey: 'alias', + cell: ({ cell }: any) => cell.renderValue(), + }, + { + header: 'Id', + accessorKey: 'name', + cell: ({ cell }: any) => cell.renderValue(), + }, + { + header: getTitle(), + accessorKey: getAccesor(), + cell: ({ cell }: any) => cell.renderValue(), + }, ]; const tableData = forwardArray.map(f => ({ @@ -104,5 +128,5 @@ export const ChannelTable: FC = ({ alias: , })); - return
; + return ; }; diff --git a/src/client/src/views/home/reports/mempool/index.tsx b/src/client/src/views/home/reports/mempool/index.tsx index 88a5694f..64bda6f3 100644 --- a/src/client/src/views/home/reports/mempool/index.tsx +++ b/src/client/src/views/home/reports/mempool/index.tsx @@ -3,7 +3,7 @@ import { CardWithTitle, SubTitle, } from '../../../../components/generic/Styled'; -import { Table } from '../../../../components/table'; +import TableV2 from '../../../../components/table-v2'; import { useBitcoinFees } from '../../../../hooks/UseBitcoinFees'; export const MempoolReport = () => { @@ -14,10 +14,26 @@ export const MempoolReport = () => { } const columns = [ - { Header: 'Fastest', accessor: 'fast' }, - { Header: 'Half Hour', accessor: 'halfHour' }, - { Header: 'Hour', accessor: 'hour' }, - { Header: 'Minimum', accessor: 'minimum' }, + { + header: 'Fastest', + accessorKey: 'fast', + cell: ({ cell }: any) => cell.renderValue(), + }, + { + header: 'Half Hour', + accessorKey: 'halfHour', + cell: ({ cell }: any) => cell.renderValue(), + }, + { + header: 'Hour', + accessorKey: 'hour', + cell: ({ cell }: any) => cell.renderValue(), + }, + { + header: 'Minimum', + accessorKey: 'minimum', + cell: ({ cell }: any) => cell.renderValue(), + }, ]; const data = [ @@ -33,7 +49,7 @@ export const MempoolReport = () => { Mempool Fees -
+ ); From 160ef23e44b344e050911fa1090ad78ff381faa8 Mon Sep 17 00:00:00 2001 From: AmbossKeegan Date: Wed, 14 Jun 2023 20:55:46 -0300 Subject: [PATCH 5/7] feat: update package.json, remove dependency, and delete react-table --- package-lock.json | 38 -- package.json | 2 - src/client/src/components/table-v2/index.tsx | 230 ---------- .../ColumnConfigurations.tsx | 0 .../{table-v2 => table}/DebouncedInput.tsx | 0 src/client/src/components/table/index.tsx | 433 +++++++----------- .../chain/transactions/ChainTransactions.tsx | 4 +- .../src/views/chain/utxos/ChainUtxos.tsx | 4 +- .../views/channels/channels/ChannelTable.tsx | 4 +- .../closedChannels/ClosedChannels.tsx | 4 +- .../pendingChannels/PendingChannels.tsx | 4 +- .../dashboard/widgets/external/mempool.tsx | 4 +- .../dashboard/widgets/lightning/forwards.tsx | 4 +- .../src/views/forwards/ForwardTable.tsx | 4 +- src/client/src/views/forwards/index.tsx | 4 +- .../forwardReport/ForwardReportTables.tsx | 6 +- .../src/views/home/reports/mempool/index.tsx | 4 +- 17 files changed, 194 insertions(+), 555 deletions(-) delete mode 100644 src/client/src/components/table-v2/index.tsx rename src/client/src/components/{table-v2 => table}/ColumnConfigurations.tsx (100%) rename src/client/src/components/{table-v2 => table}/DebouncedInput.tsx (100%) diff --git a/package-lock.json b/package-lock.json index cd5f8ec7..f3536684 100644 --- a/package-lock.json +++ b/package-lock.json @@ -74,7 +74,6 @@ "react-select": "^5.7.3", "react-slider": "^2.0.4", "react-spinners": "^0.13.8", - "react-table": "^7.8.0", "react-toastify": "^9.1.3", "react-tooltip": "^5.13.1", "reflect-metadata": "^0.1.13", @@ -122,7 +121,6 @@ "@types/react-grid-layout": "^1.3.2", "@types/react-qr-reader": "^2.1.4", "@types/react-slider": "^1.3.1", - "@types/react-table": "^7.7.14", "@types/secp256k1": "^4.0.3", "@types/styled-components": "^5.1.26", "@types/styled-react-modal": "^1.2.2", @@ -6911,15 +6909,6 @@ "@types/react": "*" } }, - "node_modules/@types/react-table": { - "version": "7.7.14", - "resolved": "https://registry.npmjs.org/@types/react-table/-/react-table-7.7.14.tgz", - "integrity": "sha512-TYrv7onCiakaG1uAu/UpQ9FojNEt/4/ht87EgJQaEGFoWV606ZLWUZAcUHzMxgc3v1mywP1cDyz3qB4ho3hWOw==", - "dev": true, - "dependencies": { - "@types/react": "*" - } - }, "node_modules/@types/react-transition-group": { "version": "4.4.4", "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.4.tgz", @@ -19186,18 +19175,6 @@ "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0" } }, - "node_modules/react-table": { - "version": "7.8.0", - "resolved": "https://registry.npmjs.org/react-table/-/react-table-7.8.0.tgz", - "integrity": "sha512-hNaz4ygkZO4bESeFfnfOft73iBUj8K5oKi1EcSHPAibEydfsX2MyU6Z8KCr3mv3C9Kqqh71U+DhZkFvibbnPbA==", - "funding": { - "type": "github", - "url": "https://github.com/sponsors/tannerlinsley" - }, - "peerDependencies": { - "react": "^16.8.3 || ^17.0.0-0 || ^18.0.0" - } - }, "node_modules/react-toastify": { "version": "9.1.3", "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-9.1.3.tgz", @@ -27798,15 +27775,6 @@ "@types/react": "*" } }, - "@types/react-table": { - "version": "7.7.14", - "resolved": "https://registry.npmjs.org/@types/react-table/-/react-table-7.7.14.tgz", - "integrity": "sha512-TYrv7onCiakaG1uAu/UpQ9FojNEt/4/ht87EgJQaEGFoWV606ZLWUZAcUHzMxgc3v1mywP1cDyz3qB4ho3hWOw==", - "dev": true, - "requires": { - "@types/react": "*" - } - }, "@types/react-transition-group": { "version": "4.4.4", "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.4.tgz", @@ -37264,12 +37232,6 @@ "integrity": "sha512-3e+k56lUkPj0vb5NDXPVFAOkPC//XyhKPJjvcGjyMNPWsBKpplfeyialP74G7H7+It7KzhtET+MvGqbKgAqpZA==", "requires": {} }, - "react-table": { - "version": "7.8.0", - "resolved": "https://registry.npmjs.org/react-table/-/react-table-7.8.0.tgz", - "integrity": "sha512-hNaz4ygkZO4bESeFfnfOft73iBUj8K5oKi1EcSHPAibEydfsX2MyU6Z8KCr3mv3C9Kqqh71U+DhZkFvibbnPbA==", - "requires": {} - }, "react-toastify": { "version": "9.1.3", "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-9.1.3.tgz", diff --git a/package.json b/package.json index 3ae5d7de..89d4361e 100644 --- a/package.json +++ b/package.json @@ -99,7 +99,6 @@ "react-select": "^5.7.3", "react-slider": "^2.0.4", "react-spinners": "^0.13.8", - "react-table": "^7.8.0", "react-toastify": "^9.1.3", "react-tooltip": "^5.13.1", "reflect-metadata": "^0.1.13", @@ -147,7 +146,6 @@ "@types/react-grid-layout": "^1.3.2", "@types/react-qr-reader": "^2.1.4", "@types/react-slider": "^1.3.1", - "@types/react-table": "^7.7.14", "@types/secp256k1": "^4.0.3", "@types/styled-components": "^5.1.26", "@types/styled-react-modal": "^1.2.2", diff --git a/src/client/src/components/table-v2/index.tsx b/src/client/src/components/table-v2/index.tsx deleted file mode 100644 index 6f50a05f..00000000 --- a/src/client/src/components/table-v2/index.tsx +++ /dev/null @@ -1,230 +0,0 @@ -import { useState } from 'react'; -import styled, { css } from 'styled-components'; -import { - useReactTable, - getCoreRowModel, - getFilteredRowModel, - getPaginationRowModel, - getSortedRowModel, - flexRender, - ColumnDef, - SortingState, - VisibilityState, -} from '@tanstack/react-table'; -import { Settings, X } from 'react-feather'; -import { separationColor } from '../../../src/styles/Themes'; -import { ColorButton } from '../buttons/colorButton/ColorButton'; -import { ColumnConfigurations } from './ColumnConfigurations'; -import { DebouncedInput } from './DebouncedInput'; - -interface TableV2Props { - columns: ColumnDef[]; - data: any; - filterPlaceholder?: string; - withGlobalSort?: boolean; // enables the global search box - withSorting?: boolean; // enables columns to be sorted - withBorder?: boolean; - alignCenter?: boolean; - fontSize?: string; - defaultHiddenColumns?: VisibilityState; - toggleConfiguration?: (hide: boolean, id: string) => void; -} - -type StyledTableProps = { - withBorder?: boolean; - alignCenter?: boolean; - fontSize?: string; -}; - -const S = { - row: styled.div` - display: flex; - flex-direction: row; - justify-content: space-between; - margin-bottom: 24px; - `, - wrapper: styled.div` - overflow-x: auto; - table { - width: 100%; - border-spacing: 0; - tr { - :last-child { - td { - border-bottom: 0; - } - } - } - .cursor { - cursor: pointer; - } - , - th, - td { - font-size: ${({ fontSize }: StyledTableProps) => fontSize || '14px'}; - text-align: left; - margin: 0; - padding: 8px; - ${({ withBorder }: StyledTableProps) => - withBorder && - css` - border-bottom: 1px solid ${separationColor}; - `} - ${({ alignCenter }: StyledTableProps) => - alignCenter && - css` - text-align: center; - padding: 8px; - `} - :last-child { - border-right: 0; - } - } - } - `, -}; - -export default function TableV2({ - columns, - data, - filterPlaceholder, - withBorder, - alignCenter, - fontSize, - defaultHiddenColumns, - toggleConfiguration, - withGlobalSort = false, - withSorting = false, -}: TableV2Props) { - const [globalFilter, setGlobalFilter] = useState(''); - const [sorting, setSorting] = useState([]); - const [isOpen, setIsOpen] = useState(false); - - const [columnVisibility, setColumnVisibility] = useState( - defaultHiddenColumns || {} - ); - - const tableConfigs = { - data, - columns, - state: { - columnVisibility, - globalFilter, - sorting, - }, - enableSorting: withSorting, - onSortingChange: setSorting, - onGlobalFilterChange: setGlobalFilter, - onColumnVisibilityChange: setColumnVisibility, - getCoreRowModel: getCoreRowModel(), - getSortedRowModel: getSortedRowModel(), - getFilteredRowModel: getFilteredRowModel(), - getPaginationRowModel: getPaginationRowModel(), - }; - - if (withGlobalSort) { - tableConfigs.enableSorting = true; - tableConfigs.state.globalFilter = globalFilter; - tableConfigs.onGlobalFilterChange = setGlobalFilter; - } - - if (withSorting) { - tableConfigs.state.sorting = sorting; - tableConfigs.onSortingChange = setSorting; - } - - const table = useReactTable(tableConfigs); - - return ( - <> - - {withGlobalSort ? ( - setGlobalFilter(String(value))} - placeholder={filterPlaceholder || ''} - count={table.getFilteredRowModel().rows.length} - /> - ) : null} - {toggleConfiguration ? ( - <> - setIsOpen(p => !p)}> - {isOpen ? : } - - - ) : null} - - - {isOpen && toggleConfiguration ? ( - - ) : null} - - -
- - {table.getHeaderGroups().map(headerGroup => ( - - {headerGroup.headers.map(header => { - return ( - - ); - })} - - ))} - - - {table.getRowModel().rows.map(row => { - return ( - - {row.getVisibleCells().map(cell => { - return ( - - ); - })} - - ); - })} - -
- {header.isPlaceholder ? null : ( - <> -
- {flexRender( - header.column.columnDef.header, - header.getContext() - )} - {{ - asc: ' ⬆', - desc: ' ⬇', - }[header.column.getIsSorted() as string] ?? null} -
- - )} -
- {flexRender( - cell.column.columnDef.cell, - cell.getContext() - )} -
- - - ); -} diff --git a/src/client/src/components/table-v2/ColumnConfigurations.tsx b/src/client/src/components/table/ColumnConfigurations.tsx similarity index 100% rename from src/client/src/components/table-v2/ColumnConfigurations.tsx rename to src/client/src/components/table/ColumnConfigurations.tsx diff --git a/src/client/src/components/table-v2/DebouncedInput.tsx b/src/client/src/components/table/DebouncedInput.tsx similarity index 100% rename from src/client/src/components/table-v2/DebouncedInput.tsx rename to src/client/src/components/table/DebouncedInput.tsx diff --git a/src/client/src/components/table/index.tsx b/src/client/src/components/table/index.tsx index 5e971939..31fd235c 100644 --- a/src/client/src/components/table/index.tsx +++ b/src/client/src/components/table/index.tsx @@ -1,21 +1,34 @@ -import { useMemo, useState } from 'react'; +import { useState } from 'react'; import styled, { css } from 'styled-components'; import { - useTable, - useSortBy, - useAsyncDebounce, - useGlobalFilter, - TableInstance, - useFilters, - ColumnInstance, -} from 'react-table'; -import { mediaWidths, separationColor } from '../../../src/styles/Themes'; -import { Input } from '../input'; + useReactTable, + getCoreRowModel, + getFilteredRowModel, + getPaginationRowModel, + getSortedRowModel, + flexRender, + ColumnDef, + SortingState, + VisibilityState, +} from '@tanstack/react-table'; import { Settings, X } from 'react-feather'; +import { separationColor } from '../../styles/Themes'; import { ColorButton } from '../buttons/colorButton/ColorButton'; -import { DarkSubTitle, SubCard } from '../generic/Styled'; -import { groupBy } from 'lodash'; -import 'regenerator-runtime/runtime'; +import { ColumnConfigurations } from './ColumnConfigurations'; +import { DebouncedInput } from './DebouncedInput'; + +interface TableProps { + columns: ColumnDef[]; + data: any; + filterPlaceholder?: string; + withGlobalSort?: boolean; // enables the global search box + withSorting?: boolean; // enables columns to be sorted + withBorder?: boolean; + alignCenter?: boolean; + fontSize?: string; + defaultHiddenColumns?: VisibilityState; + toggleConfiguration?: (hide: boolean, id: string) => void; +} type StyledTableProps = { withBorder?: boolean; @@ -23,290 +36,186 @@ type StyledTableProps = { fontSize?: string; }; -const Styles = styled.div` - overflow-x: auto; - table { - border-spacing: 0; - tr { - :last-child { - td { - border-bottom: 0; - } - } - } - th, - td { - font-size: ${({ fontSize }: StyledTableProps) => fontSize || '14px'}; - text-align: left; - margin: 0; - padding: 8px; - ${({ withBorder }: StyledTableProps) => - withBorder && - css` - border-bottom: 1px solid ${separationColor}; - `} - ${({ alignCenter }: StyledTableProps) => - alignCenter && - css` - text-align: center; - padding: 8px; - `} - :last-child { - border-right: 0; - } - } - } -`; - const S = { - options: styled.div` - display: flex; - flex-direction: column; - justify-content: flex-start; - align-items: flex-start; - flex-wrap: wrap; - - @media (${mediaWidths.mobile}) { - flex-direction: row; - } - `, - option: styled.label` - margin: 4px 8px; - `, row: styled.div` display: flex; + flex-direction: row; justify-content: space-between; - align-items: flex-start; + margin-bottom: 24px; `, - optionRow: styled.div` - display: flex; - justify-content: flex-start; - align-items: stretch; - flex-wrap: wrap; - - @media (${mediaWidths.mobile}) { - display: block; + wrapper: styled.div` + overflow-x: auto; + table { + width: 100%; + border-spacing: 0; + tr { + :last-child { + td { + border-bottom: 0; + } + } + } + .cursor { + cursor: pointer; + } + , + th, + td { + font-size: ${({ fontSize }: StyledTableProps) => fontSize || '14px'}; + text-align: left; + margin: 0; + padding: 8px; + ${({ withBorder }: StyledTableProps) => + withBorder && + css` + border-bottom: 1px solid ${separationColor}; + `} + ${({ alignCenter }: StyledTableProps) => + alignCenter && + css` + text-align: center; + padding: 8px; + `} + :last-child { + border-right: 0; + } + } } `, }; -const FilterLine = styled.div` - margin-bottom: 24px; -`; - -const GlobalFilter = ({ - preGlobalFilteredRows, - globalFilter, - setGlobalFilter, +export default function Table({ + columns, + data, filterPlaceholder, -}: any) => { - const count = preGlobalFilteredRows.length; - const [value, setValue] = useState(globalFilter); - const onChange = useAsyncDebounce(value => { - setGlobalFilter(value || undefined); - }, 200); - - return ( - - { - setValue(e.target.value); - onChange(e.target.value); - }} - placeholder={`Search ${count} ${filterPlaceholder || ''}`} - /> - - ); -}; - -type TableColumn = { - Header: string | JSX.Element; - accessor: string; -}; - -type TableProps = { - tableData: any[]; - tableColumns: ( - | TableColumn - | { - Header: string | JSX.Element; - columns: TableColumn[]; - } - )[]; - withBorder?: boolean; - fontSize?: string; - filterPlaceholder?: string; - notSortable?: boolean; - alignCenter?: boolean; - defaultHiddenColumns?: string[]; - onHideToggle?: (hide: boolean, id: string) => void; -}; - -export const Table: React.FC = ({ - onHideToggle, - defaultHiddenColumns = [], - tableData, - tableColumns, withBorder, - fontSize, - filterPlaceholder, - notSortable, alignCenter, -}) => { + fontSize, + defaultHiddenColumns, + toggleConfiguration, + withGlobalSort = false, + withSorting = false, +}: TableProps) { + const [globalFilter, setGlobalFilter] = useState(''); + const [sorting, setSorting] = useState([]); const [isOpen, setIsOpen] = useState(false); - const data = useMemo(() => tableData, [tableData]); - const columns = useMemo(() => tableColumns, [tableColumns]); - const hiddenColumns = useMemo( - () => defaultHiddenColumns, - [defaultHiddenColumns] - ); - - const instance = useTable( - { - autoResetSortBy: false, - columns, - data, - initialState: { - hiddenColumns, - }, - } as any, - useFilters, - useGlobalFilter, - useSortBy + const [columnVisibility, setColumnVisibility] = useState( + defaultHiddenColumns || {} ); - const { - allColumns, - getTableProps, - getTableBodyProps, - headerGroups, - rows, - prepareRow, - state, - preGlobalFilteredRows, - setGlobalFilter, - } = instance as TableInstance & { - preGlobalFilteredRows: any; - setGlobalFilter: any; + const tableConfigs = { + data, + columns, + state: { + columnVisibility, + globalFilter, + sorting, + }, + enableSorting: withSorting, + onSortingChange: setSorting, + onGlobalFilterChange: setGlobalFilter, + onColumnVisibilityChange: setColumnVisibility, + getCoreRowModel: getCoreRowModel(), + getSortedRowModel: getSortedRowModel(), + getFilteredRowModel: getFilteredRowModel(), + getPaginationRowModel: getPaginationRowModel(), }; - const orderedColumns = useMemo(() => { - const hidableColumns = allColumns.reduce((p, c) => { - if (c.isVisible && (c as any).forceVisible) { - return p; - } - - return [...p, c]; - }, [] as ColumnInstance[]); - - const grouped = groupBy( - hidableColumns, - (c: any) => c?.parent?.Header || '' - ); - - const final = []; + if (withGlobalSort) { + tableConfigs.enableSorting = true; + tableConfigs.state.globalFilter = globalFilter; + tableConfigs.onGlobalFilterChange = setGlobalFilter; + } - for (const key in grouped) { - if (Object.prototype.hasOwnProperty.call(grouped, key)) { - const group = grouped[key]; - final.push({ name: key, items: group }); - } - } + if (withSorting) { + tableConfigs.state.sorting = sorting; + tableConfigs.onSortingChange = setSorting; + } - return final; - }, [allColumns]); + const table = useReactTable(tableConfigs); return ( <> - {filterPlaceholder || onHideToggle ? ( - - {filterPlaceholder ? ( - - ) : null} - {onHideToggle ? ( + + {withGlobalSort ? ( + setGlobalFilter(String(value))} + placeholder={filterPlaceholder || ''} + count={table.getFilteredRowModel().rows.length} + /> + ) : null} + {toggleConfiguration ? ( + <> setIsOpen(p => !p)}> {isOpen ? : } - ) : null} - + + ) : null} + + + {isOpen && toggleConfiguration ? ( + ) : null} - {isOpen && ( - - {orderedColumns.map((column, index) => { - const { name, items } = column; - return ( - - {name || 'General'} - - {items.map(item => { - const { checked } = item.getToggleHiddenProps(); - - return ( - - - - ); - })} - - - ); - })} - - )} - - +
- {headerGroups.map((headerGroup, index) => ( - - {headerGroup.headers.map((column: any, index) => ( - - ))} + {table.getHeaderGroups().map(headerGroup => ( + + {headerGroup.headers.map(header => { + return ( + + ); + })} ))} - - {rows.map((row, index) => { - prepareRow(row); + + {table.getRowModel().rows.map(row => { return ( - - {row.cells.map((cell, index) => { + + {row.getVisibleCells().map(cell => { return ( - ); })} @@ -315,7 +224,7 @@ export const Table: React.FC = ({ })}
- - {column.render('Header')} - - - {column.isSorted ? (column.isSortedDesc ? '⬇' : '⬆') : ''} - -
+ {header.isPlaceholder ? null : ( + <> +
+ {flexRender( + header.column.columnDef.header, + header.getContext() + )} + {{ + asc: ' ⬆', + desc: ' ⬇', + }[header.column.getIsSorted() as string] ?? null} +
+ + )} +
- {cell.render('Cell')} + + {flexRender( + cell.column.columnDef.cell, + cell.getContext() + )}
- + ); -}; +} diff --git a/src/client/src/views/chain/transactions/ChainTransactions.tsx b/src/client/src/views/chain/transactions/ChainTransactions.tsx index a7c2ae9d..193441c0 100644 --- a/src/client/src/views/chain/transactions/ChainTransactions.tsx +++ b/src/client/src/views/chain/transactions/ChainTransactions.tsx @@ -4,7 +4,7 @@ import { useGetChainTransactionsQuery } from '../../../graphql/queries/__generat import { DarkSubTitle } from '../../../components/generic/Styled'; import { getErrorContent } from '../../../utils/error'; import { LoadingCard } from '../../../components/loading/LoadingCard'; -import TableV2 from '../../../components/table-v2'; +import Table from '../../../components/table'; import { getAddressLink, getDateDif, @@ -108,7 +108,7 @@ export const ChainTransactions = () => { } return ( - { } return ( - { return ( <> - { } return ( - { } return ( - { return ( - + ); }; diff --git a/src/client/src/views/dashboard/widgets/lightning/forwards.tsx b/src/client/src/views/dashboard/widgets/lightning/forwards.tsx index 90ca4373..c610160a 100644 --- a/src/client/src/views/dashboard/widgets/lightning/forwards.tsx +++ b/src/client/src/views/dashboard/widgets/lightning/forwards.tsx @@ -1,6 +1,6 @@ import { getDateDif } from '../../../../components/generic/helpers'; import { Price } from '../../../../components/price/Price'; -import TableV2 from '../../../../components/table-v2'; +import Table from '../../../../components/table'; import { useGetForwardsQuery } from '../../../../graphql/queries/__generated__/getForwards.generated'; import { ChannelAlias } from '../../../../views/home/reports/forwardReport/ChannelAlias'; import styled from 'styled-components'; @@ -85,7 +85,7 @@ export const ForwardListWidget = () => { Forwards - +
); diff --git a/src/client/src/views/forwards/ForwardTable.tsx b/src/client/src/views/forwards/ForwardTable.tsx index 042f2f0b..b2aa0c62 100644 --- a/src/client/src/views/forwards/ForwardTable.tsx +++ b/src/client/src/views/forwards/ForwardTable.tsx @@ -10,7 +10,7 @@ import { Forward } from '../../graphql/types'; import { getErrorContent } from '../../utils/error'; import { ChannelAlias } from '../home/reports/forwardReport/ChannelAlias'; import { sortByNode } from './helpers'; -import TableV2 from '../../components/table-v2'; +import Table from '../../components/table'; const getBar = (top: number, bottom: number) => { const percent = (top / bottom) * 100; @@ -93,5 +93,5 @@ export const ForwardTable: FC<{ days: number; order: string }> = ({ outgoingBar: , })); - return ; + return
; }; diff --git a/src/client/src/views/forwards/index.tsx b/src/client/src/views/forwards/index.tsx index af571c14..dd136f78 100644 --- a/src/client/src/views/forwards/index.tsx +++ b/src/client/src/views/forwards/index.tsx @@ -7,7 +7,7 @@ import { Price } from '../../components/price/Price'; import { useGetForwardsQuery } from '../../graphql/queries/__generated__/getForwards.generated'; import { getErrorContent } from '../../utils/error'; import { ChannelAlias } from '../home/reports/forwardReport/ChannelAlias'; -import TableV2 from '../../components/table-v2'; +import Table from '../../components/table'; type ForwardProps = { days: number; @@ -108,7 +108,7 @@ export const ForwardsList: FC = ({ days }) => { } return ( - = ({ order, forwardArray }) => { aliasOut: , })); - return ; + return
; }; export const ChannelTable: FC = ({ @@ -128,5 +128,5 @@ export const ChannelTable: FC = ({ alias: , })); - return ; + return
; }; diff --git a/src/client/src/views/home/reports/mempool/index.tsx b/src/client/src/views/home/reports/mempool/index.tsx index 64bda6f3..7fbd1f30 100644 --- a/src/client/src/views/home/reports/mempool/index.tsx +++ b/src/client/src/views/home/reports/mempool/index.tsx @@ -3,7 +3,7 @@ import { CardWithTitle, SubTitle, } from '../../../../components/generic/Styled'; -import TableV2 from '../../../../components/table-v2'; +import Table from '../../../../components/table'; import { useBitcoinFees } from '../../../../hooks/UseBitcoinFees'; export const MempoolReport = () => { @@ -49,7 +49,7 @@ export const MempoolReport = () => { Mempool Fees - +
); From 4ea313afc977120c499969247a9ff64cbdd8f1c3 Mon Sep 17 00:00:00 2001 From: AmbossKeegan Date: Wed, 14 Jun 2023 21:28:25 -0300 Subject: [PATCH 6/7] fix: migrate missing table --- src/client/pages/peers.tsx | 56 ++++++++++++++++++++------------------ 1 file changed, 29 insertions(+), 27 deletions(-) diff --git a/src/client/pages/peers.tsx b/src/client/pages/peers.tsx index e11c35a6..e89511e8 100644 --- a/src/client/pages/peers.tsx +++ b/src/client/pages/peers.tsx @@ -12,8 +12,8 @@ import { import { LoadingCard } from '../src/components/loading/LoadingCard'; import { AddPeer } from '../src/views/peers/AddPeer'; import { copyLink, getNodeLink } from '../src/components/generic/helpers'; -import { Table } from '../src/components/table'; import { Price } from '../src/components/price/Price'; +import Table from '../src/components/table'; const PeersView = () => { const { loading, data } = useGetPeersQuery(); @@ -32,27 +32,27 @@ const PeersView = () => { const columns = useMemo( () => [ { - Header: 'Peer', - accessor: 'alias', - Cell: ({ row }: any) => ( + header: 'Peer', + accessorKey: 'alias', + cell: ({ row }: any) => (
{getNodeLink(row.original.public_key, row.original.alias)}
), }, { - Header: 'Sync Peer', - accessor: 'is_sync_peer', - Cell: ({ row }: any) => ( + header: 'Sync Peer', + accessorKey: 'is_sync_peer', + cell: ({ row }: any) => (
{row.original.is_sync_peer ? 'Yes' : '-'}
), }, { - Header: 'Socket', - accessor: 'socket', - Cell: ({ row }: any) => ( + header: 'Socket', + accessorKey: 'socket', + cell: ({ row }: any) => (
{row.original.socket.includes('.onion') ? 'Tor' : 'Clearnet'} {copyLink(row.original.socket)} @@ -60,45 +60,45 @@ const PeersView = () => { ), }, { - Header: 'Ping', - accessor: 'ping_time', - Cell: ({ row }: any) => ( + header: 'Ping', + accessorKey: 'ping_time', + cell: ({ row }: any) => (
{`${row.original.ping_time} ms`}
), }, { - Header: 'Sats Received', - accessor: 'tokens_received', - Cell: ({ row }: any) => ( + header: 'Sats Received', + accessorKey: 'tokens_received', + cell: ({ row }: any) => (
), }, { - Header: 'Sats Sent', - accessor: 'tokens_sent', - Cell: ({ row }: any) => ( + header: 'Sats Sent', + accessorKey: 'tokens_sent', + cell: ({ row }: any) => (
), }, { - Header: 'Bytes Received', - accessor: 'bytes_received', - Cell: ({ row }: any) => ( + header: 'Bytes Received', + accessorKey: 'bytes_received', + cell: ({ row }: any) => (
{`${Math.round(row.original.bytes_received * 0.0001) / 100} MB`}
), }, { - Header: 'Bytes Sent', - accessor: 'bytes_sent', - Cell: ({ row }: any) => ( + header: 'Bytes Sent', + accessorKey: 'bytes_sent', + cell: ({ row }: any) => (
{`${Math.round(row.original.bytes_sent * 0.0001) / 100} MB`}
@@ -130,8 +130,10 @@ const PeersView = () => {
From 12438f002de41cbb1d8ef47a542e62a7b254414b Mon Sep 17 00:00:00 2001 From: AmbossKeegan Date: Thu, 15 Jun 2023 11:55:20 -0300 Subject: [PATCH 7/7] fix: remove default pagination --- src/client/src/components/table/index.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/client/src/components/table/index.tsx b/src/client/src/components/table/index.tsx index 31fd235c..cbcb5948 100644 --- a/src/client/src/components/table/index.tsx +++ b/src/client/src/components/table/index.tsx @@ -4,7 +4,6 @@ import { useReactTable, getCoreRowModel, getFilteredRowModel, - getPaginationRowModel, getSortedRowModel, flexRender, ColumnDef, @@ -119,7 +118,6 @@ export default function Table({ getCoreRowModel: getCoreRowModel(), getSortedRowModel: getSortedRowModel(), getFilteredRowModel: getFilteredRowModel(), - getPaginationRowModel: getPaginationRowModel(), }; if (withGlobalSort) {