Skip to content

Commit 83573bd

Browse files
dgcadgca
authored
Add infinite scroll to notes list (#155)
* Add infinite scroll to notes list * Trying to fix PR noise * Revert unchanged files
1 parent 3e5c814 commit 83573bd

File tree

3 files changed

+54
-58
lines changed

3 files changed

+54
-58
lines changed

‎renderer/components/NotesList/NotesList.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ type Props = {
3333
isError?: boolean;
3434
isLoading?: boolean;
3535
combineTypeAndStatus?: boolean;
36+
onEndReached?: (index: number) => void;
3637
};
3738

3839
export function NotesList({
@@ -41,6 +42,7 @@ export function NotesList({
4142
asTransactions = false,
4243
isError,
4344
isLoading,
45+
onEndReached,
4446
}: Props) {
4547
const { formatMessage } = useIntl();
4648
const customScrollElement = useScrollElementContext();
@@ -94,6 +96,7 @@ export function NotesList({
9496
/>
9597
);
9698
}}
99+
endReached={onEndReached}
97100
/>
98101
)}
99102
</Box>

‎renderer/pages/accounts/[account-name]/index.tsx

Lines changed: 26 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,10 @@ import {
88
TabPanel,
99
HStack,
1010
VStack,
11+
Spinner,
1112
} from "@chakra-ui/react";
1213
import { useRouter } from "next/router";
13-
import { useState } from "react";
14+
import { useMemo } from "react";
1415
import { defineMessages, useIntl } from "react-intl";
1516

1617
import { AccountAssets } from "@/components/AccountAssets/AccountAssets";
@@ -25,7 +26,6 @@ import lionfishLock from "@/images/lionfish-lock.svg";
2526
import MainLayout from "@/layouts/MainLayout";
2627
import { WithExplanatorySidebar } from "@/layouts/WithExplanatorySidebar";
2728
import { trpcReact } from "@/providers/TRPCProvider";
28-
import { PillButton } from "@/ui/PillButton/PillButton";
2929
import { asQueryString } from "@/utils/parseRouteQuery";
3030

3131
const messages = defineMessages({
@@ -74,8 +74,6 @@ function AccountOverviewContent({ accountName }: { accountName: string }) {
7474
const initialTabIndex = useInitialTabIndex();
7575
const { formatMessage } = useIntl();
7676

77-
const [cursor, setCursor] = useState(0);
78-
7977
const { data: accountData } = trpcReact.getAccount.useQuery({
8078
name: accountName,
8179
});
@@ -84,13 +82,23 @@ function AccountOverviewContent({ accountName }: { accountName: string }) {
8482
data: transactionsData,
8583
isLoading,
8684
isError,
87-
} = trpcReact.getTransactions.useQuery({
88-
accountName,
89-
cursor,
90-
limit: 10,
91-
});
85+
fetchNextPage,
86+
hasNextPage,
87+
isFetchingNextPage,
88+
} = trpcReact.getTransactions.useInfiniteQuery(
89+
{
90+
accountName,
91+
limit: 10,
92+
},
93+
{
94+
getNextPageParam: (lastPage) => lastPage.nextCursor,
95+
initialCursor: 0,
96+
},
97+
);
9298

93-
const shouldShowPagination = cursor !== 0 || transactionsData?.hasNextPage;
99+
const notes = useMemo(() => {
100+
return transactionsData?.pages.flatMap((page) => page.transactions) ?? [];
101+
}, [transactionsData?.pages]);
94102

95103
if (!accountData) {
96104
// @todo: Error handling
@@ -132,29 +140,16 @@ function AccountOverviewContent({ accountName }: { accountName: string }) {
132140
asTransactions
133141
isLoading={isLoading}
134142
isError={isError}
135-
notes={transactionsData?.transactions ?? []}
143+
notes={notes}
136144
heading={formatMessage(messages.accountOverview)}
145+
onEndReached={() => {
146+
if (!hasNextPage || isFetchingNextPage) return;
147+
fetchNextPage();
148+
}}
137149
/>
138-
{shouldShowPagination && (
139-
<HStack flex={1} justifyContent="center">
140-
<PillButton
141-
isDisabled={!transactionsData || cursor <= 0}
142-
onClick={() => {
143-
setCursor((c) => Math.max(c - 10, 0));
144-
}}
145-
>
146-
{formatMessage(messages.previousButton)}
147-
</PillButton>
148-
<PillButton
149-
isDisabled={!transactionsData?.hasNextPage}
150-
onClick={() => {
151-
setCursor((c) => c + 10);
152-
}}
153-
>
154-
{formatMessage(messages.nextButton)}
155-
</PillButton>
156-
</HStack>
157-
)}
150+
<HStack alignItems="center" justifyContent="center" h="50px">
151+
{isFetchingNextPage && <Spinner opacity="0.5" />}
152+
</HStack>
158153
</TabPanel>
159154
<TabPanel p={0}>
160155
<WithExplanatorySidebar

‎renderer/pages/accounts/index.tsx

Lines changed: 25 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -124,33 +124,31 @@ export default function Accounts() {
124124
const { formatMessage } = useIntl();
125125

126126
return (
127-
<>
128-
<MainLayout>
129-
<HStack alignItems="start" justifyContent="space-between" mb={10}>
130-
<VStack gap={0} alignItems="stretch">
131-
<Heading fontSize={28} flexGrow={1} lineHeight="160%">
132-
{formatMessage(messages.accountsHeader)}
133-
</Heading>
134-
<Box>
135-
<Text
136-
fontSize="md"
137-
as="span"
138-
color={COLORS.GRAY_MEDIUM}
139-
_dark={{ color: COLORS.GRAY_MEDIUM }}
140-
mr={1}
141-
>
142-
{formatMessage(messages.totalAccountsBalance)}:{" "}
143-
</Text>
144-
<Text fontSize="md" as="span" fontWeight="bold">
145-
{totalBalance !== null ? formatOre(totalBalance) : "—"} $IRON
146-
</Text>
147-
</Box>
148-
</VStack>
149-
<CreateImportActions />
150-
</HStack>
127+
<MainLayout>
128+
<HStack alignItems="start" justifyContent="space-between" mb={10}>
129+
<VStack gap={0} alignItems="stretch">
130+
<Heading fontSize={28} flexGrow={1} lineHeight="160%">
131+
{formatMessage(messages.accountsHeader)}
132+
</Heading>
133+
<Box>
134+
<Text
135+
fontSize="md"
136+
as="span"
137+
color={COLORS.GRAY_MEDIUM}
138+
_dark={{ color: COLORS.GRAY_MEDIUM }}
139+
mr={1}
140+
>
141+
{formatMessage(messages.totalAccountsBalance)}:{" "}
142+
</Text>
143+
<Text fontSize="md" as="span" fontWeight="bold">
144+
{totalBalance !== null ? formatOre(totalBalance) : "—"} $IRON
145+
</Text>
146+
</Box>
147+
</VStack>
148+
<CreateImportActions />
149+
</HStack>
151150

152-
<UserAccountsList />
153-
</MainLayout>
154-
</>
151+
<UserAccountsList />
152+
</MainLayout>
155153
);
156154
}

0 commit comments

Comments
 (0)