Skip to content

Commit

Permalink
feat(tooling-explorer): Rebrand homepage pagination (#2008)
Browse files Browse the repository at this point in the history 
* feat(tooling-explorer): Rebrand Homepage feeds

* refactor(tooling-ui-kit): Clean up of `Table`

* refactor: The Holy refactor

* refactor: use segmented button

* chore: revert unnecessary changes

* chore: pass row indexes

* refactor: Apply suggestions

* feat(tooling-explorer): Rebrand navigation

* refactor(tooling-ui-kit): Clean up of `Table` - part 2

* chore: lint

* chore: fmt

* chore: use new table api

* chore: fmt

* chore: clean up

* refactor(tooling-ui-kit): Clean up `Select`

* fmt

* chore: clean up

* refactor: Better pagination API

* chore: Small clean up

* fix: Update owned coins

* fix: Update transaction blocks for addresses

* chore: fmt ui kit

* chore: fix...

---------

Co-authored-by: evavirseda <[email protected]>
  • Loading branch information
@marc2332 @evavirseda
marc2332 and evavirseda authored Sep 10, 2024
1 parent cdb9746 commit 21ac101
Show file tree
Hide file tree
Showing 9 changed files with 125 additions and 131 deletions.
56 changes: 19 additions & 37 deletions apps/explorer/src/components/activity/EpochsActivityTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,12 @@
// Modifications Copyright (c) 2024 IOTA Stiftung
// SPDX-License-Identifier: Apache-2.0

import { Select } from '@iota/apps-ui-kit';
import { useIotaClient, useIotaClientInfiniteQuery } from '@iota/dapp-kit';
import { ArrowRight12 } from '@iota/icons';
import { Text } from '@iota/ui';
import { useQuery } from '@tanstack/react-query';
import { useState } from 'react';

import {
Link,
Pagination,
PlaceholderTable,
TableCard,
useCursorPagination,
} from '~/components/ui';
import { PlaceholderTable, TableCard, useCursorPagination } from '~/components/ui';
import { generateTableDataFromEpochsData } from '~/lib/ui';
import { numberSuffix } from '~/lib/utils';

Expand Down Expand Up @@ -69,41 +62,30 @@ export function EpochsActivityTable({
]}
/>
) : (
<div>
<TableCard data={cardData.data} columns={cardData.columns} />
</div>
<TableCard
data={cardData.data}
columns={cardData.columns}
totalLabel={count ? `${numberSuffix(Number(count))} Total` : '-'}
viewAll={!disablePagination ? '/recent?tab=epochs' : undefined}
paginationOptions={!disablePagination ? pagination : undefined}
/>
)}

<div className="flex justify-between">
{!disablePagination ? (
<Pagination {...pagination} />
) : (
<Link
to="/recent?tab=epochs"
after={<ArrowRight12 className="h-3 w-3 -rotate-45" />}
>
View all
</Link>
)}

<div className="flex items-center space-x-3">
<Text variant="body/medium" color="steel-dark">
{count ? numberSuffix(Number(count)) : '-'}
{` Total`}
</Text>
{!disablePagination && (
<select
className="form-select rounded-md border border-gray-45 px-3 py-2 pr-8 text-bodySmall font-medium leading-[1.2] text-steel-dark shadow-button"
value={limit}
onChange={(e) => {
setLimit(Number(e.target.value));
<Select
value={limit.toString()}
options={[
{ id: '20', label: '20 Per Page' },
{ id: '40', label: '40 Per Page' },
{ id: '60', label: '60 Per Page' },
]}
onValueChange={(e) => {
setLimit(Number(e));
pagination.onFirst();
}}
>
<option value={20}>20 Per Page</option>
<option value={40}>40 Per Page</option>
<option value={60}>60 Per Page</option>
</select>
/>
)}
</div>
</div>
Expand Down
53 changes: 19 additions & 34 deletions apps/explorer/src/components/activity/TransactionsActivityTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,24 +3,17 @@
// SPDX-License-Identifier: Apache-2.0

import { useIotaClient } from '@iota/dapp-kit';
import { ArrowRight12 } from '@iota/icons';
import { Text } from '@iota/ui';
import { useQuery } from '@tanstack/react-query';
import { useEffect, useRef, useState } from 'react';

import {
Link,
Pagination,
PlaceholderTable,
TableCard,
useCursorPagination,
} from '~/components/ui';
import { PlaceholderTable, TableCard, useCursorPagination } from '~/components/ui';
import {
DEFAULT_TRANSACTIONS_LIMIT,
useGetTransactionBlocks,
} from '~/hooks/useGetTransactionBlocks';
import { numberSuffix } from '~/lib/utils';
import { genTableDataFromTxData } from '../transactions/TxCardUtils';
import { Select } from '@iota/apps-ui-kit';

interface TransactionsActivityTableProps {
disablePagination?: boolean;
Expand Down Expand Up @@ -72,38 +65,30 @@ export function TransactionsActivityTable({
colHeadings={['Digest', 'Sender', 'Txns', 'Gas', 'Time']}
/>
) : (
<div>
<TableCard data={cardData.data} columns={cardData.columns} />
</div>
<TableCard
data={cardData.data}
columns={cardData.columns}
totalLabel={count ? `${numberSuffix(Number(count))} Total` : '-'}
viewAll="/recent"
paginationOptions={!disablePagination ? pagination : undefined}
/>
)}

<div className="flex justify-between">
{!disablePagination ? (
<Pagination {...pagination} />
) : (
<Link to="/recent" after={<ArrowRight12 className="h-3 w-3 -rotate-45" />}>
View all
</Link>
)}

<div className="flex items-center space-x-3">
<Text variant="body/medium" color="steel-dark">
{count ? numberSuffix(Number(count)) : '-'}
{` Total`}
</Text>
{!disablePagination && (
<select
className="form-select rounded-md border border-gray-45 px-3 py-2 pr-8 text-bodySmall font-medium leading-[1.2] text-steel-dark shadow-button"
value={limit}
onChange={(e) => {
setLimit(Number(e.target.value));
<Select
value={limit.toString()}
options={[
{ id: '20', label: '20 Per Page' },
{ id: '40', label: '40 Per Page' },
{ id: '60', label: '60 Per Page' },
]}
onValueChange={(e) => {
setLimit(Number(e));
pagination.onFirst();
}}
>
<option value={20}>20 Per Page</option>
<option value={40}>40 Per Page</option>
<option value={60}>60 Per Page</option>
</select>
/>
)}
</div>
</div>
Expand Down
73 changes: 28 additions & 45 deletions apps/explorer/src/components/checkpoints/CheckpointsTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,11 @@
// Modifications Copyright (c) 2024 IOTA Stiftung
// SPDX-License-Identifier: Apache-2.0

import { Select } from '@iota/apps-ui-kit';
import { useIotaClientQuery } from '@iota/dapp-kit';
import { ArrowRight12 } from '@iota/icons';
import { Text } from '@iota/ui';
import { useMemo, useState } from 'react';

import {
Link,
Pagination,
PlaceholderTable,
TableCard,
useCursorPagination,
} from '~/components/ui';
import { PlaceholderTable, TableCard, useCursorPagination } from '~/components/ui';
import { DEFAULT_CHECKPOINTS_LIMIT, useGetCheckpoints } from '~/hooks/useGetCheckpoints';
import { generateTableDataFromCheckpointsData } from '~/lib/ui';
import { numberSuffix } from '~/lib/utils';
Expand Down Expand Up @@ -69,48 +62,38 @@ export function CheckpointsTable({
colHeadings={['Digest', 'Sequence Number', 'Time', 'Transaction Count']}
/>
) : (
<div>
<TableCard data={cardData.data} columns={cardData.columns} />
</div>
<TableCard
data={cardData.data}
columns={cardData.columns}
totalLabel={count ? `${numberSuffix(Number(count))} Total` : '-'}
viewAll={!disablePagination ? '/recent?tab=checkpoints' : undefined}
paginationOptions={
!disablePagination
? {
...pagination,
hasNext: maxCursor
? Number(data && data.nextCursor) > Number(maxCursor)
: pagination.hasNext,
}
: undefined
}
/>
)}

<div className="flex justify-between">
{!disablePagination ? (
<Pagination
{...pagination}
hasNext={
maxCursor
? Number(data && data.nextCursor) > Number(maxCursor)
: pagination.hasNext
}
/>
) : (
<Link
to="/recent?tab=checkpoints"
after={<ArrowRight12 className="h-3 w-3 -rotate-45" />}
>
View all
</Link>
)}

<div className="flex items-center space-x-3">
<Text variant="body/medium" color="steel-dark">
{count ? numberSuffix(Number(count)) : '-'}
{` Total`}
</Text>
{!disablePagination && (
<select
className="form-select rounded-md border border-gray-45 px-3 py-2 pr-8 text-bodySmall font-medium leading-[1.2] text-steel-dark shadow-button"
value={limit}
onChange={(e) => {
setLimit(Number(e.target.value));
<Select
value={limit.toString()}
options={[
{ id: '20', label: '20 Per Page' },
{ id: '40', label: '40 Per Page' },
{ id: '60', label: '60 Per Page' },
]}
onValueChange={(e) => {
setLimit(Number(e));
pagination.onFirst();
}}
>
<option value={20}>20 Per Page</option>
<option value={40}>40 Per Page</option>
<option value={60}>60 Per Page</option>
</select>
/>
)}
</div>
</div>
Expand Down
1 change: 1 addition & 0 deletions apps/explorer/src/components/owned-coins/OwnedCoins.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -185,6 +185,7 @@ export function OwnedCoins({ id }: OwnerCoinsProps): JSX.Element {
{displayedBalances.length > limit && (
<div className="flex flex-col justify-between gap-2 md:flex-row">
<Pagination
hasFirst={currentSlice !== 1}
onNext={() => setCurrentSlice(currentSlice + 1)}
hasNext={
currentSlice !==
Expand Down
1 change: 1 addition & 0 deletions apps/explorer/src/components/transaction-blocks-for-address/TransactionBlocksForAddress.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -135,6 +135,7 @@ export function TransactionBlocksForAddress({

{(hasNextPage || (data && data?.pages.length > 1)) && (
<Pagination
hasFirst={currentPageState[filterValue] !== 0}
onNext={() => {
if (isPending || isFetching) {
return;
Expand Down
3 changes: 3 additions & 0 deletions apps/explorer/src/components/ui/Pagination.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { type InfiniteData, type UseInfiniteQueryResult } from '@tanstack/react-
import { useState } from 'react';

interface PaginationProps {
hasFirst: boolean;
hasPrev: boolean;
hasNext: boolean;
onFirst(): void;
Expand Down Expand Up @@ -46,6 +47,7 @@ export function useCursorPagination<T>(query: UseInfiniteQueryResult<InfiniteDat
onPrev: () => {
setCurrentPage(Math.max(currentPage - 1, 0));
},
hasFirst: currentPage !== 0,
hasNext:
!query.isFetchingNextPage &&
(currentPage < (query.data?.pages.length ?? 0) - 1 || !!query.hasNextPage),
Expand All @@ -66,6 +68,7 @@ export function usePaginationStack<Cursor = string>() {
nextCursor = null,
}: Partial<PaginationResponse<Cursor>> = {}): PaginationProps {
return {
hasFirst: stack.length > 0,
hasPrev: stack.length > 0,
hasNext: hasNextPage,
onFirst() {
Expand Down
23 changes: 22 additions & 1 deletion apps/explorer/src/components/ui/TableCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {
TableHeader,
TableHeaderCell,
TableHeaderRow,
type TablePaginationOptions,
} from '@iota/apps-ui-kit';
import {
type ColumnDef,
Expand All @@ -21,13 +22,17 @@ import {
} from '@tanstack/react-table';
import clsx from 'clsx';
import { useMemo, useState } from 'react';
import { useNavigateWithQuery } from './LinkWithQuery';

export interface TableCardProps<DataType extends object> {
refetching?: boolean;
data: DataType[];
columns: ColumnDef<DataType>[];
sortTable?: boolean;
defaultSorting?: SortingState;
paginationOptions?: TablePaginationOptions;
totalLabel?: string;
viewAll?: string;
}

export function TableCard<DataType extends object>({
Expand All @@ -36,7 +41,11 @@ export function TableCard<DataType extends object>({
columns,
sortTable,
defaultSorting,
paginationOptions,
totalLabel,
viewAll,
}: TableCardProps<DataType>): JSX.Element {
const navigate = useNavigateWithQuery();
const [sorting, setSorting] = useState<SortingState>(defaultSorting || []);

// Use Columns to create a table
Expand Down Expand Up @@ -75,7 +84,19 @@ export function TableCard<DataType extends object>({
refetching && 'opacity-50',
)}
>
<Table rowIndexes={table.getRowModel().rows.map((row) => row.index)}>
<Table
rowIndexes={table.getRowModel().rows.map((row) => row.index)}
paginationOptions={paginationOptions}
actionLabel={viewAll ? 'View All' : undefined}
supportingLabel={totalLabel}
onActionClick={
viewAll
? () => {
navigate(viewAll, {});
}
: undefined
}
>
<TableHeader>
{table.getHeaderGroups().map((headerGroup) => (
<TableHeaderRow key={headerGroup.id}>
Expand Down
Loading

0 comments on commit 21ac101

Please sign in to comment.