reya/lume
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fully migrate to swr, remove react-query

Browse Source
This commit is contained in:
Ren Amamiya
2023-06-06 11:44:03 +07:00
parent d0b1353bdf
commit 1b56684cf5
7 changed files with 75 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/app/note/components/skeleton.tsx
View File

@@ -1,18 +1,17 @@
export function NoteSkeleton() {
return (
<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="flex flex-col gap-0.5">
<div className="h-3 w-20 rounded-sm bg-zinc-700" />
<div className="h-2 w-12 rounded-sm bg-zinc-700" />
<div className="h-4 w-20 rounded bg-zinc-700" />
</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="h-4 w-full rounded-sm bg-zinc-700" />
<div className="h-4 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-2/3 rounded-sm bg-zinc-700" />
<div className="h-3 w-1/2 rounded-sm bg-zinc-700" />
</div>
</div>
</div>

74
src/app/space/components/blocks/feed.tsx
View File

@@ -3,47 +3,44 @@ import { NoteQuoteRepost } from "@app/note/components/quoteRepost";
import { NoteSkeleton } from "@app/note/components/skeleton";
import { CancelIcon } from "@shared/icons";
import { useActiveAccount } from "@stores/accounts";
import { useInfiniteQuery } from "@tanstack/react-query";
import { useVirtualizer } from "@tanstack/react-virtual";
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 TIME = Math.floor(Date.now() / 1000);
const fetcher = async ([pubkey, offset]) =>
getNotesByAuthor(pubkey, TIME, ITEM_PER_PAGE, offset);
export function FeedBlock({ params }: { params: any }) {
const removeBlock = useActiveAccount((state: any) => state.removeBlock);
const {
status,
data,
fetchNextPage,
hasNextPage,
isFetching,
isFetchingNextPage,
}: any = useInfiniteQuery({
queryKey: [params.title],
queryFn: async ({ pageParam = 0 }) => {
return await getNotesByAuthor(
params.content,
TIME,
ITEM_PER_PAGE,
pageParam,
);
},
getNextPageParam: (lastPage) => lastPage.nextCursor,
});
const close = () => {
removeBlock(params.id);
};
const getKey = (pageIndex, previousPageData) => {
if (previousPageData && !previousPageData.data) return null;
if (pageIndex === 0) return [params.content, 0];
return [params.content, previousPageData.nextCursor];
};
const { data, isLoading, size, setSize } = useSWRInfinite(getKey, fetcher);
const notes = useMemo(
() => (data ? data.flatMap((d) => d.data) : []),
[data],
);
const allRows = data ? data.pages.flatMap((d: { data: any }) => d.data) : [];
const parentRef = useRef();
const rowVirtualizer = useVirtualizer({
count: hasNextPage ? allRows.length + 1 : allRows.length,
count: notes.length,
getScrollElement: () => parentRef.current,
estimateSize: () => 400,
overscan: 2,
});
const itemsVirtualizer = rowVirtualizer.getVirtualItems();
useEffect(() => {
@@ -53,18 +50,10 @@ export function FeedBlock({ params }: { params: any }) {
return;
}
if (
lastItem.index >= allRows.length - 1 &&
hasNextPage &&
!isFetchingNextPage
) {
fetchNextPage();
if (lastItem.index >= notes.length - 1) {
setSize(size + 1);
}
}, [fetchNextPage, allRows.length, rowVirtualizer.getVirtualItems()]);
const close = () => {
removeBlock(params.id);
};
}, [notes.length, rowVirtualizer.getVirtualItems()]);
return (
<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"
style={{ contain: "strict" }}
>
{status === "loading" ? (
{!data || isLoading ? (
<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 />
@@ -110,7 +99,7 @@ export function FeedBlock({ params }: { params: any }) {
}}
>
{rowVirtualizer.getVirtualItems().map((virtualRow) => {
const note = allRows[virtualRow.index];
const note = notes[virtualRow.index];
if (note) {
if (note.kind === 1) {
return (
@@ -138,15 +127,6 @@ export function FeedBlock({ params }: { params: any }) {
</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>
);

64
src/app/space/components/blocks/following.tsx
View File

@@ -1,42 +1,37 @@
import { NoteBase } from "@app/note/components/base";
import { NoteQuoteRepost } from "@app/note/components/quoteRepost";
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 { 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 TIME = Math.floor(Date.now() / 1000);
const fetcher = async ([, offset]) => getNotes(TIME, ITEM_PER_PAGE, offset);
export function FollowingBlock() {
const {
status,
data,
fetchNextPage,
hasNextPage,
isFetching,
isFetchingNextPage,
}: any = useInfiniteQuery({
queryKey: ["following"],
queryFn: async ({ pageParam = 0 }) => {
return await getNotes(TIME, ITEM_PER_PAGE, pageParam);
},
getNextPageParam: (lastPage) => lastPage.nextCursor,
});
const getKey = (pageIndex, previousPageData) => {
if (previousPageData && !previousPageData.data) return null;
if (pageIndex === 0) return ["following", 0];
return ["following", previousPageData.nextCursor];
};
const { data, isLoading, size, setSize } = useSWRInfinite(getKey, fetcher);
const notes = useMemo(
() => (data ? data.flatMap((d) => d.data) : []),
[data],
);
const allRows = data ? data.pages.flatMap((d: { data: any }) => d.data) : [];
const parentRef = useRef();
const rowVirtualizer = useVirtualizer({
count: hasNextPage ? allRows.length + 1 : allRows.length,
count: notes.length,
getScrollElement: () => parentRef.current,
estimateSize: () => 400,
overscan: 2,
});
const itemsVirtualizer = rowVirtualizer.getVirtualItems();
useEffect(() => {
@@ -46,14 +41,10 @@ export function FollowingBlock() {
return;
}
if (
lastItem.index >= allRows.length - 1 &&
hasNextPage &&
!isFetchingNextPage
) {
fetchNextPage();
if (lastItem.index >= notes.length - 1) {
setSize(size + 1);
}
}, [fetchNextPage, allRows.length, rowVirtualizer.getVirtualItems()]);
}, [notes.length, rowVirtualizer.getVirtualItems()]);
return (
<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"
style={{ contain: "strict" }}
>
{status === "loading" ? (
{!data || isLoading ? (
<div className="px-3 py-1.5">
<div className="rounded-md bg-zinc-900 px-3 py-3 shadow-input shadow-black/20">
<NoteSkeleton />
@@ -91,7 +82,7 @@ export function FollowingBlock() {
}}
>
{rowVirtualizer.getVirtualItems().map((virtualRow) => {
const note = allRows[virtualRow.index];
const note = notes[virtualRow.index];
if (note) {
if (note.kind === 1) {
return (
@@ -119,15 +110,6 @@ export function FollowingBlock() {
</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>
);

5
src/app/space/layout.tsx
View File

@@ -1,5 +1,6 @@
import { MultiAccounts } from "@shared/multiAccounts";
import { Navigation } from "@shared/navigation";
import { SWRConfig } from "swr";
export function LayoutSpace({ children }: { children: React.ReactNode }) {
return (
@@ -8,7 +9,9 @@ export function LayoutSpace({ children }: { children: React.ReactNode }) {
<MultiAccounts />
<Navigation />
</div>
<div className="w-full h-full">{children}</div>
<div className="w-full h-full">
<SWRConfig value={{ provider: () => new Map() }}>{children}</SWRConfig>
</div>
</div>
);
}