mirror of
https://github.com/luminous-devs/lume.git
synced 2024-09-19 19:46:34 +00:00
fully migrate to swr, remove react-query
This commit is contained in:
parent
d0b1353bdf
commit
1b56684cf5
@ -15,13 +15,11 @@
|
|||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@floating-ui/react": "^0.23.1",
|
"@floating-ui/react": "^0.23.1",
|
||||||
"@headlessui/react": "^1.7.15",
|
"@headlessui/react": "^1.7.15",
|
||||||
"@tanstack/react-query": "^4.29.12",
|
|
||||||
"@tanstack/react-virtual": "3.0.0-beta.54",
|
"@tanstack/react-virtual": "3.0.0-beta.54",
|
||||||
"@tauri-apps/api": "^1.3.0",
|
"@tauri-apps/api": "^1.3.0",
|
||||||
"@vidstack/react": "^0.4.5",
|
"@vidstack/react": "^0.4.5",
|
||||||
"dayjs": "^1.11.8",
|
"dayjs": "^1.11.8",
|
||||||
"destr": "^1.2.2",
|
"destr": "^1.2.2",
|
||||||
"embla-carousel-react": "8.0.0-rc06",
|
|
||||||
"immer": "^10.0.2",
|
"immer": "^10.0.2",
|
||||||
"light-bolt11-decoder": "^3.0.0",
|
"light-bolt11-decoder": "^3.0.0",
|
||||||
"nostr-relaypool": "^0.6.28",
|
"nostr-relaypool": "^0.6.28",
|
||||||
@ -49,7 +47,7 @@
|
|||||||
"@types/react": "^18.2.8",
|
"@types/react": "^18.2.8",
|
||||||
"@types/react-dom": "^18.2.4",
|
"@types/react-dom": "^18.2.4",
|
||||||
"@types/youtube-player": "^5.5.7",
|
"@types/youtube-player": "^5.5.7",
|
||||||
"@vitejs/plugin-react-swc": "^3.3.1",
|
"@vitejs/plugin-react-swc": "^3.3.2",
|
||||||
"autoprefixer": "^10.4.14",
|
"autoprefixer": "^10.4.14",
|
||||||
"cross-env": "^7.0.3",
|
"cross-env": "^7.0.3",
|
||||||
"csstype": "^3.1.2",
|
"csstype": "^3.1.2",
|
||||||
|
@ -7,9 +7,6 @@ dependencies:
|
|||||||
'@headlessui/react':
|
'@headlessui/react':
|
||||||
specifier: ^1.7.15
|
specifier: ^1.7.15
|
||||||
version: 1.7.15(react-dom@18.2.0)(react@18.2.0)
|
version: 1.7.15(react-dom@18.2.0)(react@18.2.0)
|
||||||
'@tanstack/react-query':
|
|
||||||
specifier: ^4.29.12
|
|
||||||
version: 4.29.12(react-dom@18.2.0)(react@18.2.0)
|
|
||||||
'@tanstack/react-virtual':
|
'@tanstack/react-virtual':
|
||||||
specifier: 3.0.0-beta.54
|
specifier: 3.0.0-beta.54
|
||||||
version: 3.0.0-beta.54(react@18.2.0)
|
version: 3.0.0-beta.54(react@18.2.0)
|
||||||
@ -25,9 +22,6 @@ dependencies:
|
|||||||
destr:
|
destr:
|
||||||
specifier: ^1.2.2
|
specifier: ^1.2.2
|
||||||
version: 1.2.2
|
version: 1.2.2
|
||||||
embla-carousel-react:
|
|
||||||
specifier: 8.0.0-rc06
|
|
||||||
version: 8.0.0-rc06(react@18.2.0)
|
|
||||||
immer:
|
immer:
|
||||||
specifier: ^10.0.2
|
specifier: ^10.0.2
|
||||||
version: 10.0.2
|
version: 10.0.2
|
||||||
@ -106,8 +100,8 @@ devDependencies:
|
|||||||
specifier: ^5.5.7
|
specifier: ^5.5.7
|
||||||
version: 5.5.7
|
version: 5.5.7
|
||||||
'@vitejs/plugin-react-swc':
|
'@vitejs/plugin-react-swc':
|
||||||
specifier: ^3.3.1
|
specifier: ^3.3.2
|
||||||
version: 3.3.1(vite@4.3.9)
|
version: 3.3.2(vite@4.3.9)
|
||||||
autoprefixer:
|
autoprefixer:
|
||||||
specifier: ^10.4.14
|
specifier: ^10.4.14
|
||||||
version: 10.4.14(postcss@8.4.24)
|
version: 10.4.14(postcss@8.4.24)
|
||||||
@ -710,28 +704,6 @@ packages:
|
|||||||
tailwindcss: 3.3.2
|
tailwindcss: 3.3.2
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
/@tanstack/query-core@4.29.11:
|
|
||||||
resolution: {integrity: sha512-8C+hF6SFAb/TlFZyS9FItgNwrw4PMa7YeX+KQYe2ZAiEz6uzg6yIr+QBzPkUwZ/L0bXvGd1sufTm3wotoz+GwQ==}
|
|
||||||
dev: false
|
|
||||||
|
|
||||||
/@tanstack/react-query@4.29.12(react-dom@18.2.0)(react@18.2.0):
|
|
||||||
resolution: {integrity: sha512-zhcN6+zF6cxprxhTHQajHGlvxgK8npnp9uLe9yaWhGc6sYcPWXzyO4raL4HomUzQOPzu3jLvkriJQ7BOrDM8vA==}
|
|
||||||
peerDependencies:
|
|
||||||
react: ^16.8.0 || ^17.0.0 || ^18.0.0
|
|
||||||
react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
|
|
||||||
react-native: '*'
|
|
||||||
peerDependenciesMeta:
|
|
||||||
react-dom:
|
|
||||||
optional: true
|
|
||||||
react-native:
|
|
||||||
optional: true
|
|
||||||
dependencies:
|
|
||||||
'@tanstack/query-core': 4.29.11
|
|
||||||
react: 18.2.0
|
|
||||||
react-dom: 18.2.0(react@18.2.0)
|
|
||||||
use-sync-external-store: 1.2.0(react@18.2.0)
|
|
||||||
dev: false
|
|
||||||
|
|
||||||
/@tanstack/react-virtual@3.0.0-beta.54(react@18.2.0):
|
/@tanstack/react-virtual@3.0.0-beta.54(react@18.2.0):
|
||||||
resolution: {integrity: sha512-D1mDMf4UPbrtHRZZriCly5bXTBMhylslm4dhcHqTtDJ6brQcgGmk8YD9JdWBGWfGSWPKoh2x1H3e7eh+hgPXtQ==}
|
resolution: {integrity: sha512-D1mDMf4UPbrtHRZZriCly5bXTBMhylslm4dhcHqTtDJ6brQcgGmk8YD9JdWBGWfGSWPKoh2x1H3e7eh+hgPXtQ==}
|
||||||
peerDependencies:
|
peerDependencies:
|
||||||
@ -925,8 +897,8 @@ packages:
|
|||||||
vidstack: 0.4.5
|
vidstack: 0.4.5
|
||||||
dev: false
|
dev: false
|
||||||
|
|
||||||
/@vitejs/plugin-react-swc@3.3.1(vite@4.3.9):
|
/@vitejs/plugin-react-swc@3.3.2(vite@4.3.9):
|
||||||
resolution: {integrity: sha512-ZoYjGxMniXP7X+5ry/W1tpY7w0OeLUEsBF5RHFPmAhpgwwNWie8OF4056MRXRi9QgvYYoZPDzdOXGK3wlCoTfQ==}
|
resolution: {integrity: sha512-VJFWY5sfoZerQRvJrh518h3AcQt6f/yTuWn4/TRB+dqmYU0NX1qz7qM5Wfd+gOQqUzQW4gxKqKN3KpE/P3+zrA==}
|
||||||
peerDependencies:
|
peerDependencies:
|
||||||
vite: ^4
|
vite: ^4
|
||||||
dependencies:
|
dependencies:
|
||||||
@ -1015,7 +987,7 @@ packages:
|
|||||||
postcss: ^8.1.0
|
postcss: ^8.1.0
|
||||||
dependencies:
|
dependencies:
|
||||||
browserslist: 4.21.7
|
browserslist: 4.21.7
|
||||||
caniuse-lite: 1.0.30001492
|
caniuse-lite: 1.0.30001495
|
||||||
fraction.js: 4.2.0
|
fraction.js: 4.2.0
|
||||||
normalize-range: 0.1.2
|
normalize-range: 0.1.2
|
||||||
picocolors: 1.0.0
|
picocolors: 1.0.0
|
||||||
@ -1055,8 +1027,8 @@ packages:
|
|||||||
engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
|
engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
|
||||||
hasBin: true
|
hasBin: true
|
||||||
dependencies:
|
dependencies:
|
||||||
caniuse-lite: 1.0.30001492
|
caniuse-lite: 1.0.30001495
|
||||||
electron-to-chromium: 1.4.419
|
electron-to-chromium: 1.4.421
|
||||||
node-releases: 2.0.12
|
node-releases: 2.0.12
|
||||||
update-browserslist-db: 1.0.11(browserslist@4.21.7)
|
update-browserslist-db: 1.0.11(browserslist@4.21.7)
|
||||||
dev: true
|
dev: true
|
||||||
@ -1076,8 +1048,8 @@ packages:
|
|||||||
engines: {node: '>= 6'}
|
engines: {node: '>= 6'}
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
/caniuse-lite@1.0.30001492:
|
/caniuse-lite@1.0.30001495:
|
||||||
resolution: {integrity: sha512-2efF8SAZwgAX1FJr87KWhvuJxnGJKOnctQa8xLOskAXNXq8oiuqgl6u1kk3fFpsp3GgvzlRjiK1sl63hNtFADw==}
|
resolution: {integrity: sha512-F6x5IEuigtUfU5ZMQK2jsy5JqUUlEFRVZq8bO2a+ysq5K7jD6PPc9YXZj78xDNS3uNchesp1Jw47YXEqr+Viyg==}
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
/ccount@2.0.1:
|
/ccount@2.0.1:
|
||||||
@ -1255,32 +1227,10 @@ packages:
|
|||||||
resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
|
resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
/electron-to-chromium@1.4.419:
|
/electron-to-chromium@1.4.421:
|
||||||
resolution: {integrity: sha512-jdie3RiEgygvDTyS2sgjq71B36q2cDSBfPlwzUyuOrfYTNoYWyBxxjGJV/HAu3A2hB0Y+HesvCVkVAFoCKwCSw==}
|
resolution: {integrity: sha512-wZOyn3s/aQOtLGAwXMZfteQPN68kgls2wDAnYOA8kCjBvKVrW5RwmWVspxJYTqrcN7Y263XJVsC66VCIGzDO3g==}
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
/embla-carousel-react@8.0.0-rc06(react@18.2.0):
|
|
||||||
resolution: {integrity: sha512-aZfVqTptCA6uq3VLPFXLKGSkxVdoiNjQa1sjVOJc+9FL6pbwImaVR0oL7jA0kfW9l67XoQOEOq1gRiImbYr/Ew==}
|
|
||||||
peerDependencies:
|
|
||||||
react: ^16.8.0 || ^17.0.1 || ^18.0.0
|
|
||||||
dependencies:
|
|
||||||
embla-carousel: 8.0.0-rc06
|
|
||||||
embla-carousel-reactive-utils: 8.0.0-rc06(embla-carousel@8.0.0-rc06)
|
|
||||||
react: 18.2.0
|
|
||||||
dev: false
|
|
||||||
|
|
||||||
/embla-carousel-reactive-utils@8.0.0-rc06(embla-carousel@8.0.0-rc06):
|
|
||||||
resolution: {integrity: sha512-AlTrD9eh8aNlDsSjnEOM15Z9f4vQVgG+ULLMSl3BfWdqYvxsbinRcVQd2Buj3KlNq3pH7pm20G63CEz1h8p/Ig==}
|
|
||||||
peerDependencies:
|
|
||||||
embla-carousel: 8.0.0-rc06
|
|
||||||
dependencies:
|
|
||||||
embla-carousel: 8.0.0-rc06
|
|
||||||
dev: false
|
|
||||||
|
|
||||||
/embla-carousel@8.0.0-rc06:
|
|
||||||
resolution: {integrity: sha512-Dq27CG9OgZjKxK+JJS3uyEW4dwQ3oVkvlTHEP17idVnP8vmuhi4WtGe4UVGj8m0O2WASR4kNu4efFXkF7u6A+g==}
|
|
||||||
dev: false
|
|
||||||
|
|
||||||
/emoji-regex@8.0.0:
|
/emoji-regex@8.0.0:
|
||||||
resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
|
resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
|
||||||
dev: true
|
dev: true
|
||||||
@ -2508,8 +2458,8 @@ packages:
|
|||||||
resolution: {integrity: sha512-V2hovdzFbOi77/WajaSMXk2OLm+xNIeQdMMuB7icj7bk6zi2F8GGAxigcnDFpJHbNyNcgyJDiP+8nOrY5cZGrA==}
|
resolution: {integrity: sha512-V2hovdzFbOi77/WajaSMXk2OLm+xNIeQdMMuB7icj7bk6zi2F8GGAxigcnDFpJHbNyNcgyJDiP+8nOrY5cZGrA==}
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
/rollup@3.23.0:
|
/rollup@3.23.1:
|
||||||
resolution: {integrity: sha512-h31UlwEi7FHihLe1zbk+3Q7z1k/84rb9BSwmBSr/XjOCEaBJ2YyedQDuM0t/kfOS0IxM+vk1/zI9XxYj9V+NJQ==}
|
resolution: {integrity: sha512-ybRdFVHOoljGEFILHLd2g/qateqUdjE6YS41WXq4p3C/WwD3xtWxV4FYWETA1u9TeXQc5K8L8zHE5d/scOvrOQ==}
|
||||||
engines: {node: '>=14.18.0', npm: '>=8.0.0'}
|
engines: {node: '>=14.18.0', npm: '>=8.0.0'}
|
||||||
hasBin: true
|
hasBin: true
|
||||||
optionalDependencies:
|
optionalDependencies:
|
||||||
@ -3062,7 +3012,7 @@ packages:
|
|||||||
'@types/node': 18.16.16
|
'@types/node': 18.16.16
|
||||||
esbuild: 0.17.19
|
esbuild: 0.17.19
|
||||||
postcss: 8.4.24
|
postcss: 8.4.24
|
||||||
rollup: 3.23.0
|
rollup: 3.23.1
|
||||||
optionalDependencies:
|
optionalDependencies:
|
||||||
fsevents: 2.3.2
|
fsevents: 2.3.2
|
||||||
dev: true
|
dev: true
|
||||||
|
@ -1,18 +1,17 @@
|
|||||||
export function NoteSkeleton() {
|
export function NoteSkeleton() {
|
||||||
return (
|
return (
|
||||||
<div className="flex h-min flex-col pb-3">
|
<div className="flex h-min flex-col pb-3">
|
||||||
<div className="flex items-center gap-3">
|
<div className="flex items-start gap-3">
|
||||||
<div className="relative h-11 w-11 shrink overflow-hidden rounded-md bg-zinc-700" />
|
<div className="relative h-11 w-11 shrink overflow-hidden rounded-md bg-zinc-700" />
|
||||||
<div className="flex flex-col gap-0.5">
|
<div className="flex flex-col gap-0.5">
|
||||||
<div className="h-3 w-20 rounded-sm bg-zinc-700" />
|
<div className="h-4 w-20 rounded bg-zinc-700" />
|
||||||
<div className="h-2 w-12 rounded-sm bg-zinc-700" />
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="mt-3 animate-pulse pl-[49px]">
|
<div className="-mt-5 animate-pulse pl-[49px]">
|
||||||
<div className="flex flex-col gap-1">
|
<div className="flex flex-col gap-1">
|
||||||
<div className="h-4 w-full rounded-sm bg-zinc-700" />
|
<div className="h-4 w-full rounded-sm bg-zinc-700" />
|
||||||
<div className="h-4 w-2/3 rounded-sm bg-zinc-700" />
|
<div className="h-3 w-2/3 rounded-sm bg-zinc-700" />
|
||||||
<div className="h-4 w-1/2 rounded-sm bg-zinc-700" />
|
<div className="h-3 w-1/2 rounded-sm bg-zinc-700" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -3,47 +3,44 @@ import { NoteQuoteRepost } from "@app/note/components/quoteRepost";
|
|||||||
import { NoteSkeleton } from "@app/note/components/skeleton";
|
import { NoteSkeleton } from "@app/note/components/skeleton";
|
||||||
import { CancelIcon } from "@shared/icons";
|
import { CancelIcon } from "@shared/icons";
|
||||||
import { useActiveAccount } from "@stores/accounts";
|
import { useActiveAccount } from "@stores/accounts";
|
||||||
import { useInfiniteQuery } from "@tanstack/react-query";
|
|
||||||
import { useVirtualizer } from "@tanstack/react-virtual";
|
import { useVirtualizer } from "@tanstack/react-virtual";
|
||||||
import { getNotesByAuthor } from "@utils/storage";
|
import { getNotesByAuthor } from "@utils/storage";
|
||||||
import { useEffect, useRef } from "react";
|
import { useEffect, useMemo, useRef } from "react";
|
||||||
|
import useSWRInfinite from "swr/infinite";
|
||||||
|
|
||||||
const ITEM_PER_PAGE = 10;
|
const ITEM_PER_PAGE = 10;
|
||||||
const TIME = Math.floor(Date.now() / 1000);
|
const TIME = Math.floor(Date.now() / 1000);
|
||||||
|
|
||||||
|
const fetcher = async ([pubkey, offset]) =>
|
||||||
|
getNotesByAuthor(pubkey, TIME, ITEM_PER_PAGE, offset);
|
||||||
|
|
||||||
export function FeedBlock({ params }: { params: any }) {
|
export function FeedBlock({ params }: { params: any }) {
|
||||||
const removeBlock = useActiveAccount((state: any) => state.removeBlock);
|
const removeBlock = useActiveAccount((state: any) => state.removeBlock);
|
||||||
|
|
||||||
const {
|
const close = () => {
|
||||||
status,
|
removeBlock(params.id);
|
||||||
data,
|
};
|
||||||
fetchNextPage,
|
|
||||||
hasNextPage,
|
const getKey = (pageIndex, previousPageData) => {
|
||||||
isFetching,
|
if (previousPageData && !previousPageData.data) return null;
|
||||||
isFetchingNextPage,
|
if (pageIndex === 0) return [params.content, 0];
|
||||||
}: any = useInfiniteQuery({
|
return [params.content, previousPageData.nextCursor];
|
||||||
queryKey: [params.title],
|
};
|
||||||
queryFn: async ({ pageParam = 0 }) => {
|
|
||||||
return await getNotesByAuthor(
|
const { data, isLoading, size, setSize } = useSWRInfinite(getKey, fetcher);
|
||||||
params.content,
|
|
||||||
TIME,
|
const notes = useMemo(
|
||||||
ITEM_PER_PAGE,
|
() => (data ? data.flatMap((d) => d.data) : []),
|
||||||
pageParam,
|
[data],
|
||||||
);
|
);
|
||||||
},
|
|
||||||
getNextPageParam: (lastPage) => lastPage.nextCursor,
|
|
||||||
});
|
|
||||||
|
|
||||||
const allRows = data ? data.pages.flatMap((d: { data: any }) => d.data) : [];
|
|
||||||
const parentRef = useRef();
|
const parentRef = useRef();
|
||||||
|
|
||||||
const rowVirtualizer = useVirtualizer({
|
const rowVirtualizer = useVirtualizer({
|
||||||
count: hasNextPage ? allRows.length + 1 : allRows.length,
|
count: notes.length,
|
||||||
getScrollElement: () => parentRef.current,
|
getScrollElement: () => parentRef.current,
|
||||||
estimateSize: () => 400,
|
estimateSize: () => 400,
|
||||||
overscan: 2,
|
overscan: 2,
|
||||||
});
|
});
|
||||||
|
|
||||||
const itemsVirtualizer = rowVirtualizer.getVirtualItems();
|
const itemsVirtualizer = rowVirtualizer.getVirtualItems();
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@ -53,18 +50,10 @@ export function FeedBlock({ params }: { params: any }) {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (
|
if (lastItem.index >= notes.length - 1) {
|
||||||
lastItem.index >= allRows.length - 1 &&
|
setSize(size + 1);
|
||||||
hasNextPage &&
|
|
||||||
!isFetchingNextPage
|
|
||||||
) {
|
|
||||||
fetchNextPage();
|
|
||||||
}
|
}
|
||||||
}, [fetchNextPage, allRows.length, rowVirtualizer.getVirtualItems()]);
|
}, [notes.length, rowVirtualizer.getVirtualItems()]);
|
||||||
|
|
||||||
const close = () => {
|
|
||||||
removeBlock(params.id);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="shrink-0 w-[420px] border-r border-zinc-900">
|
<div className="shrink-0 w-[420px] border-r border-zinc-900">
|
||||||
@ -87,7 +76,7 @@ export function FeedBlock({ params }: { params: any }) {
|
|||||||
className="scrollbar-hide flex w-full h-full flex-col justify-between gap-1.5 pt-1.5 overflow-y-auto"
|
className="scrollbar-hide flex w-full h-full flex-col justify-between gap-1.5 pt-1.5 overflow-y-auto"
|
||||||
style={{ contain: "strict" }}
|
style={{ contain: "strict" }}
|
||||||
>
|
>
|
||||||
{status === "loading" ? (
|
{!data || isLoading ? (
|
||||||
<div className="px-3 py-1.5">
|
<div className="px-3 py-1.5">
|
||||||
<div className="rounded-md border border-zinc-800 bg-zinc-900 px-3 py-3 shadow-input shadow-black/20">
|
<div className="rounded-md border border-zinc-800 bg-zinc-900 px-3 py-3 shadow-input shadow-black/20">
|
||||||
<NoteSkeleton />
|
<NoteSkeleton />
|
||||||
@ -110,7 +99,7 @@ export function FeedBlock({ params }: { params: any }) {
|
|||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{rowVirtualizer.getVirtualItems().map((virtualRow) => {
|
{rowVirtualizer.getVirtualItems().map((virtualRow) => {
|
||||||
const note = allRows[virtualRow.index];
|
const note = notes[virtualRow.index];
|
||||||
if (note) {
|
if (note) {
|
||||||
if (note.kind === 1) {
|
if (note.kind === 1) {
|
||||||
return (
|
return (
|
||||||
@ -138,15 +127,6 @@ export function FeedBlock({ params }: { params: any }) {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
<div>
|
|
||||||
{isFetching && !isFetchingNextPage && (
|
|
||||||
<div className="px-3 py-1.5">
|
|
||||||
<div className="rounded-md border border-zinc-800 bg-zinc-900 px-3 py-3 shadow-input shadow-black/20">
|
|
||||||
<NoteSkeleton />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
@ -1,42 +1,37 @@
|
|||||||
import { NoteBase } from "@app/note/components/base";
|
import { NoteBase } from "@app/note/components/base";
|
||||||
import { NoteQuoteRepost } from "@app/note/components/quoteRepost";
|
import { NoteQuoteRepost } from "@app/note/components/quoteRepost";
|
||||||
import { NoteSkeleton } from "@app/note/components/skeleton";
|
import { NoteSkeleton } from "@app/note/components/skeleton";
|
||||||
|
|
||||||
import { getNotes } from "@utils/storage";
|
|
||||||
|
|
||||||
import { useInfiniteQuery } from "@tanstack/react-query";
|
|
||||||
import { useVirtualizer } from "@tanstack/react-virtual";
|
import { useVirtualizer } from "@tanstack/react-virtual";
|
||||||
import { useEffect, useRef } from "react";
|
import { getNotes } from "@utils/storage";
|
||||||
|
import { useEffect, useMemo, useRef } from "react";
|
||||||
|
import useSWRInfinite from "swr/infinite";
|
||||||
|
|
||||||
const ITEM_PER_PAGE = 10;
|
const ITEM_PER_PAGE = 10;
|
||||||
const TIME = Math.floor(Date.now() / 1000);
|
const TIME = Math.floor(Date.now() / 1000);
|
||||||
|
|
||||||
|
const fetcher = async ([, offset]) => getNotes(TIME, ITEM_PER_PAGE, offset);
|
||||||
|
|
||||||
export function FollowingBlock() {
|
export function FollowingBlock() {
|
||||||
const {
|
const getKey = (pageIndex, previousPageData) => {
|
||||||
status,
|
if (previousPageData && !previousPageData.data) return null;
|
||||||
data,
|
if (pageIndex === 0) return ["following", 0];
|
||||||
fetchNextPage,
|
return ["following", previousPageData.nextCursor];
|
||||||
hasNextPage,
|
};
|
||||||
isFetching,
|
|
||||||
isFetchingNextPage,
|
const { data, isLoading, size, setSize } = useSWRInfinite(getKey, fetcher);
|
||||||
}: any = useInfiniteQuery({
|
|
||||||
queryKey: ["following"],
|
const notes = useMemo(
|
||||||
queryFn: async ({ pageParam = 0 }) => {
|
() => (data ? data.flatMap((d) => d.data) : []),
|
||||||
return await getNotes(TIME, ITEM_PER_PAGE, pageParam);
|
[data],
|
||||||
},
|
);
|
||||||
getNextPageParam: (lastPage) => lastPage.nextCursor,
|
|
||||||
});
|
|
||||||
|
|
||||||
const allRows = data ? data.pages.flatMap((d: { data: any }) => d.data) : [];
|
|
||||||
const parentRef = useRef();
|
const parentRef = useRef();
|
||||||
|
|
||||||
const rowVirtualizer = useVirtualizer({
|
const rowVirtualizer = useVirtualizer({
|
||||||
count: hasNextPage ? allRows.length + 1 : allRows.length,
|
count: notes.length,
|
||||||
getScrollElement: () => parentRef.current,
|
getScrollElement: () => parentRef.current,
|
||||||
estimateSize: () => 400,
|
estimateSize: () => 400,
|
||||||
overscan: 2,
|
overscan: 2,
|
||||||
});
|
});
|
||||||
|
|
||||||
const itemsVirtualizer = rowVirtualizer.getVirtualItems();
|
const itemsVirtualizer = rowVirtualizer.getVirtualItems();
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@ -46,14 +41,10 @@ export function FollowingBlock() {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (
|
if (lastItem.index >= notes.length - 1) {
|
||||||
lastItem.index >= allRows.length - 1 &&
|
setSize(size + 1);
|
||||||
hasNextPage &&
|
|
||||||
!isFetchingNextPage
|
|
||||||
) {
|
|
||||||
fetchNextPage();
|
|
||||||
}
|
}
|
||||||
}, [fetchNextPage, allRows.length, rowVirtualizer.getVirtualItems()]);
|
}, [notes.length, rowVirtualizer.getVirtualItems()]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="shrink-0 w-[420px] border-r border-zinc-900">
|
<div className="shrink-0 w-[420px] border-r border-zinc-900">
|
||||||
@ -68,7 +59,7 @@ export function FollowingBlock() {
|
|||||||
className="scrollbar-hide flex w-full h-full flex-col justify-between gap-1.5 pt-1.5 overflow-y-auto"
|
className="scrollbar-hide flex w-full h-full flex-col justify-between gap-1.5 pt-1.5 overflow-y-auto"
|
||||||
style={{ contain: "strict" }}
|
style={{ contain: "strict" }}
|
||||||
>
|
>
|
||||||
{status === "loading" ? (
|
{!data || isLoading ? (
|
||||||
<div className="px-3 py-1.5">
|
<div className="px-3 py-1.5">
|
||||||
<div className="rounded-md bg-zinc-900 px-3 py-3 shadow-input shadow-black/20">
|
<div className="rounded-md bg-zinc-900 px-3 py-3 shadow-input shadow-black/20">
|
||||||
<NoteSkeleton />
|
<NoteSkeleton />
|
||||||
@ -91,7 +82,7 @@ export function FollowingBlock() {
|
|||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{rowVirtualizer.getVirtualItems().map((virtualRow) => {
|
{rowVirtualizer.getVirtualItems().map((virtualRow) => {
|
||||||
const note = allRows[virtualRow.index];
|
const note = notes[virtualRow.index];
|
||||||
if (note) {
|
if (note) {
|
||||||
if (note.kind === 1) {
|
if (note.kind === 1) {
|
||||||
return (
|
return (
|
||||||
@ -119,15 +110,6 @@ export function FollowingBlock() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
<div>
|
|
||||||
{isFetching && !isFetchingNextPage && (
|
|
||||||
<div className="px-3 py-1.5">
|
|
||||||
<div className="rounded-md bg-zinc-900 px-3 py-3 shadow-input shadow-black/20">
|
|
||||||
<NoteSkeleton />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
@ -1,5 +1,6 @@
|
|||||||
import { MultiAccounts } from "@shared/multiAccounts";
|
import { MultiAccounts } from "@shared/multiAccounts";
|
||||||
import { Navigation } from "@shared/navigation";
|
import { Navigation } from "@shared/navigation";
|
||||||
|
import { SWRConfig } from "swr";
|
||||||
|
|
||||||
export function LayoutSpace({ children }: { children: React.ReactNode }) {
|
export function LayoutSpace({ children }: { children: React.ReactNode }) {
|
||||||
return (
|
return (
|
||||||
@ -8,7 +9,9 @@ export function LayoutSpace({ children }: { children: React.ReactNode }) {
|
|||||||
<MultiAccounts />
|
<MultiAccounts />
|
||||||
<Navigation />
|
<Navigation />
|
||||||
</div>
|
</div>
|
||||||
<div className="w-full h-full">{children}</div>
|
<div className="w-full h-full">
|
||||||
|
<SWRConfig value={{ provider: () => new Map() }}>{children}</SWRConfig>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -1,14 +1,11 @@
|
|||||||
import { LayoutDefault } from "./layoutDefault";
|
import { LayoutDefault } from "./layoutDefault";
|
||||||
import { PageContext } from "./types";
|
import { PageContext } from "./types";
|
||||||
import { RelayProvider } from "@shared/relayProvider";
|
import { RelayProvider } from "@shared/relayProvider";
|
||||||
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
|
||||||
import { dateToUnix } from "@utils/date";
|
import { dateToUnix } from "@utils/date";
|
||||||
import { PageContextProvider } from "@utils/hooks/usePageContext";
|
import { PageContextProvider } from "@utils/hooks/usePageContext";
|
||||||
import { updateLastLogin } from "@utils/storage";
|
import { updateLastLogin } from "@utils/storage";
|
||||||
import { useEffect } from "react";
|
import { useEffect } from "react";
|
||||||
|
|
||||||
const queryClient = new QueryClient();
|
|
||||||
|
|
||||||
export function Shell({
|
export function Shell({
|
||||||
children,
|
children,
|
||||||
pageContext,
|
pageContext,
|
||||||
@ -37,11 +34,7 @@ export function Shell({
|
|||||||
return (
|
return (
|
||||||
<PageContextProvider pageContext={pageContext}>
|
<PageContextProvider pageContext={pageContext}>
|
||||||
<RelayProvider>
|
<RelayProvider>
|
||||||
<Layout>
|
<Layout>{children}</Layout>
|
||||||
<QueryClientProvider client={queryClient}>
|
|
||||||
{children}
|
|
||||||
</QueryClientProvider>
|
|
||||||
</Layout>
|
|
||||||
</RelayProvider>
|
</RelayProvider>
|
||||||
</PageContextProvider>
|
</PageContextProvider>
|
||||||
);
|
);
|
||||||
|
Loading…
Reference in New Issue
Block a user