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

migrate to tanstack query v5

Browse Source
This commit is contained in:
reya
2023-10-28 07:35:39 +07:00
parent 42eb882f52
commit 555c8ec08a
51 changed files with 290 additions and 305 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/shared/widgets/eventLoader.tsx
View File

@@ -29,7 +29,9 @@ export function EventLoader({ firstTime }: { firstTime: boolean }) {
setProgress(100);
setIsFetched();
// invalidate queries
queryClient.invalidateQueries(['local-network-widget']);
queryClient.invalidateQueries({
queryKey: ['local-network-widget']
});
await db.updateLastLogin();
}
}

12
src/shared/widgets/global/articles.tsx
View File

@@ -14,9 +14,9 @@ import { Widget } from '@utils/types';
export function GlobalArticlesWidget({ params }: { params: Widget }) {
const { ndk } = useNDK();
const { status, data } = useQuery(
['global-articles'],
async () => {
const { status, data } = useQuery({
queryKey: ['global-articles'],
queryFn: async () => {
const events = await ndk.fetchEvents({
kinds: [NDKKind.Article],
limit: 200,
@@ -24,8 +24,8 @@ export function GlobalArticlesWidget({ params }: { params: Widget }) {
const sortedEvents = [...events].sort((x, y) => y.created_at - x.created_at);
return sortedEvents;
},
{ refetchOnWindowFocus: false }
);
refetchOnWindowFocus: false,
});
// render event match event kind
const renderItem = useCallback(
@@ -43,7 +43,7 @@ export function GlobalArticlesWidget({ params }: { params: Widget }) {
<WidgetWrapper>
<TitleBar id={params.id} title={params.title} />
<div className="flex-1">
{status === 'loading' ? (
{status === 'pending' ? (
<div className="flex h-full w-full items-center justify-center ">
<div className="inline-flex flex-col items-center justify-center gap-2">
<LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-white" />

12
src/shared/widgets/global/files.tsx
View File

@@ -15,9 +15,9 @@ import { Widget } from '@utils/types';
export function GlobalFilesWidget({ params }: { params: Widget }) {
const { ndk } = useNDK();
const { status, data } = useQuery(
['global-file-sharing'],
async () => {
const { status, data } = useQuery({
queryKey: ['global-file-sharing'],
queryFn: async () => {
const events = await ndk.fetchEvents({
// @ts-expect-error, NDK not support file metadata yet
kinds: [1063],
@@ -26,8 +26,8 @@ export function GlobalFilesWidget({ params }: { params: Widget }) {
const sortedEvents = [...events].sort((x, y) => y.created_at - x.created_at);
return sortedEvents;
},
{ refetchOnWindowFocus: false }
);
refetchOnWindowFocus: false,
});
// render event match event kind
const renderItem = useCallback(
@@ -45,7 +45,7 @@ export function GlobalFilesWidget({ params }: { params: Widget }) {
<WidgetWrapper>
<TitleBar id={params.id} title={params.title} />
<div className="flex-1">
{status === 'loading' ? (
{status === 'pending' ? (
<div className="flex h-full w-full items-center justify-center ">
<div className="inline-flex flex-col items-center justify-center gap-2">
<LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-white" />

12
src/shared/widgets/global/hashtag.tsx
View File

@@ -22,9 +22,9 @@ import { Widget } from '@utils/types';
export function GlobalHashtagWidget({ params }: { params: Widget }) {
const { ndk } = useNDK();
const { status, data } = useQuery(
['hashtag-' + params.title],
async () => {
const { status, data } = useQuery({
queryKey: ['hashtag-' + params.title],
queryFn: async () => {
const events = await ndk.fetchEvents({
kinds: [NDKKind.Text, NDKKind.Repost, NDKKind.Article],
'#t': [params.content],
@@ -33,8 +33,8 @@ export function GlobalHashtagWidget({ params }: { params: Widget }) {
const sortedEvents = [...events].sort((x, y) => y.created_at - x.created_at);
return sortedEvents;
},
{ refetchOnWindowFocus: false }
);
refetchOnWindowFocus: false,
});
// render event match event kind
const renderItem = useCallback(
@@ -75,7 +75,7 @@ export function GlobalHashtagWidget({ params }: { params: Widget }) {
<WidgetWrapper>
<TitleBar id={params.id} title={params.title} />
<div className="flex-1">
{status === 'loading' ? (
{status === 'pending' ? (
<div className="flex h-full w-full items-center justify-center">
<div className="inline-flex flex-col items-center justify-center gap-2">
<LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-white" />

3
src/shared/widgets/local/articles.tsx
View File

@@ -17,6 +17,7 @@ export function LocalArticlesWidget({ params }: { params: Widget }) {
const { status, data, hasNextPage, isFetchingNextPage, fetchNextPage } =
useInfiniteQuery({
queryKey: ['local-articles'],
initialPageParam: 0,
queryFn: async ({ pageParam = 0 }) => {
return await db.getAllEventsByKinds([NDKKind.Article], 20, pageParam);
},
@@ -45,7 +46,7 @@ export function LocalArticlesWidget({ params }: { params: Widget }) {
<WidgetWrapper>
<TitleBar id={params.id} title={params.title} />
<div className="flex-1">
{status === 'loading' ? (
{status === 'pending' ? (
<div className="flex h-full w-full items-center justify-center ">
<div className="inline-flex flex-col items-center justify-center gap-2">
<LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-white" />

3
src/shared/widgets/local/feeds.tsx
View File

@@ -24,6 +24,7 @@ export function LocalFeedsWidget({ params }: { params: Widget }) {
const { status, data, hasNextPage, isFetchingNextPage, fetchNextPage } =
useInfiniteQuery({
queryKey: ['group-feeds-' + params.id],
initialPageParam: 0,
queryFn: async ({ pageParam = 0 }) => {
const authors = JSON.parse(params.content);
return await db.getAllEventsByAuthors(authors, 20, pageParam);
@@ -81,7 +82,7 @@ export function LocalFeedsWidget({ params }: { params: Widget }) {
<WidgetWrapper>
<TitleBar id={params.id} title={params.title} />
<div className="flex-1">
{status === 'loading' ? (
{status === 'pending' ? (
<div className="flex h-full w-full items-center justify-center">
<div className="inline-flex flex-col items-center justify-center gap-2">
<LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-white" />

3
src/shared/widgets/local/files.tsx
View File

@@ -17,6 +17,7 @@ export function LocalFilesWidget({ params }: { params: Widget }) {
const { status, data, hasNextPage, isFetchingNextPage, fetchNextPage } =
useInfiniteQuery({
queryKey: ['local-file-sharing'],
initialPageParam: 0,
queryFn: async ({ pageParam = 0 }) => {
return await db.getAllEventsByKinds([1063], 20, pageParam);
},
@@ -45,7 +46,7 @@ export function LocalFilesWidget({ params }: { params: Widget }) {
<WidgetWrapper>
<TitleBar id={params.id} title={params.title} />
<div className="flex-1">
{status === 'loading' ? (
{status === 'pending' ? (
<div className="flex h-full w-full items-center justify-center ">
<div className="inline-flex flex-col items-center justify-center gap-2">
<LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-white" />

3
src/shared/widgets/local/follows.tsx
View File

@@ -24,6 +24,7 @@ export function LocalFollowsWidget({ params }: { params: Widget }) {
const { status, data, hasNextPage, isFetchingNextPage, fetchNextPage } =
useInfiniteQuery({
queryKey: ['follows-' + params.title],
initialPageParam: 0,
queryFn: async ({ pageParam = 0 }) => {
return await db.getAllEventsByAuthors(db.account.follows, 20, pageParam);
},
@@ -80,7 +81,7 @@ export function LocalFollowsWidget({ params }: { params: Widget }) {
<WidgetWrapper>
<TitleBar id={params.id} title="Follows" />
<div className="flex-1">
{status === 'loading' ? (
{status === 'pending' ? (
<div className="flex h-full w-full items-center justify-center ">
<div className="inline-flex flex-col items-center justify-center gap-2">
<LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-white" />

3
src/shared/widgets/local/network.tsx
View File

@@ -29,6 +29,7 @@ export function LocalNetworkWidget() {
const { status, data, hasNextPage, isFetchingNextPage, fetchNextPage } =
useInfiniteQuery({
queryKey: ['local-network-widget'],
initialPageParam: 0,
queryFn: async ({ pageParam = 0 }) => {
return await db.getAllEvents(20, pageParam);
},
@@ -136,7 +137,7 @@ export function LocalNetworkWidget() {
<WidgetWrapper>
<TitleBar id="9999" />
<div className="flex-1">
{status === 'loading' ? (
{status === 'pending' ? (
<div className="px-3 py-1.5">
<div className="rounded-xl bg-neutral-100 px-3 py-3 dark:bg-neutral-900">
<NoteSkeleton />

2
src/shared/widgets/local/thread.tsx
View File

@@ -43,7 +43,7 @@ export function LocalThreadWidget({ params }: { params: Widget }) {
<WidgetWrapper>
<TitleBar id={params.id} title={params.title} />
<WVList className="flex-1 overflow-y-auto px-3">
{status === 'loading' ? (
{status === 'pending' ? (
<div className="flex h-16 items-center justify-center rounded-xl bg-neutral-100 px-3 py-3 dark:bg-neutral-900">
<LoaderIcon className="h-5 w-5 animate-spin" />
</div>

20
src/shared/widgets/local/user.tsx
View File

@@ -23,9 +23,9 @@ import { Widget } from '@utils/types';
export function LocalUserWidget({ params }: { params: Widget }) {
const { ndk } = useNDK();
const { status, data } = useQuery(
['user-posts', params.content],
async () => {
const { status, data } = useQuery({
queryKey: ['user-posts', params.content],
queryFn: async () => {
const events = await ndk.fetchEvents({
// @ts-expect-error, NDK not support file metadata yet
kinds: [NDKKind.Text, NDKKind.Repost, 1063, NDKKind.Article],
@@ -35,13 +35,11 @@ export function LocalUserWidget({ params }: { params: Widget }) {
const sortedEvents = [...events].sort((x, y) => y.created_at - x.created_at);
return sortedEvents;
},
{
staleTime: Infinity,
refetchOnMount: false,
refetchOnReconnect: false,
refetchOnWindowFocus: false,
}
);
staleTime: Infinity,
refetchOnMount: false,
refetchOnReconnect: false,
refetchOnWindowFocus: false,
});
// render event match event kind
const renderItem = useCallback(
@@ -90,7 +88,7 @@ export function LocalUserWidget({ params }: { params: Widget }) {
Latest posts
</h3>
<div className="flex h-full w-full flex-col justify-between gap-1.5 pb-10">
{status === 'loading' ? (
{status === 'pending' ? (
<div className="px-3 py-1.5">
<div className="rounded-xl bg-neutral-100 px-3 py-3 dark:bg-neutral-900">
<NoteSkeleton />

20
src/shared/widgets/nostrBand/trendingAccounts.tsx
View File

@@ -13,9 +13,9 @@ interface Response {
}
export function TrendingAccountsWidget({ params }: { params: Widget }) {
const { status, data } = useQuery(
['trending-profiles-widget'],
async () => {
const { status, data } = useQuery({
queryKey: ['trending-profiles-widget'],
queryFn: async () => {
const res = await fetch('https://api.nostr.band/v0/trending/profiles');
if (!res.ok) {
throw new Error('Error');
@@ -24,19 +24,17 @@ export function TrendingAccountsWidget({ params }: { params: Widget }) {
if (!json.profiles) return [];
return json.profiles;
},
{
refetchOnMount: false,
refetchOnReconnect: false,
refetchOnWindowFocus: false,
staleTime: Infinity,
}
);
refetchOnMount: false,
refetchOnReconnect: false,
refetchOnWindowFocus: false,
staleTime: Infinity,
});
return (
<WidgetWrapper>
<TitleBar id={params.id} title="Trending Accounts" />
<div className="flex-1">
{status === 'loading' ? (
{status === 'pending' ? (
<div className="flex h-full w-full items-center justify-center ">
<div className="inline-flex flex-col items-center justify-center gap-2">
<LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-white" />

20
src/shared/widgets/nostrBand/trendingNotes.tsx
View File

@@ -14,9 +14,9 @@ interface Response {
}
export function TrendingNotesWidget({ params }: { params: Widget }) {
const { status, data } = useQuery(
['trending-notes-widget'],
async () => {
const { status, data } = useQuery({
queryKey: ['trending-notes-widget'],
queryFn: async () => {
const res = await fetch('https://api.nostr.band/v0/trending/notes');
if (!res.ok) {
throw new Error('failed to fecht trending notes');
@@ -25,19 +25,17 @@ export function TrendingNotesWidget({ params }: { params: Widget }) {
if (!json.notes) return null;
return json.notes;
},
{
refetchOnMount: false,
refetchOnReconnect: false,
refetchOnWindowFocus: false,
staleTime: Infinity,
}
);
refetchOnMount: false,
refetchOnReconnect: false,
refetchOnWindowFocus: false,
staleTime: Infinity,
});
return (
<WidgetWrapper>
<TitleBar id={params.id} title="Trending Notes" />
<div className="flex-1">
{status === 'loading' ? (
{status === 'pending' ? (
<div className="flex h-full w-full items-center justify-center ">
<div className="inline-flex flex-col items-center justify-center gap-2">
<LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-white" />

23
src/shared/widgets/nostrBandUserProfile.tsx
View File

@@ -3,6 +3,7 @@ import { useQuery } from '@tanstack/react-query';
import { useEffect, useState } from 'react';
import { toast } from 'sonner';
import { useNDK } from '@libs/ndk/provider';
import { useStorage } from '@libs/storage/provider';
import { FollowIcon, UnfollowIcon } from '@shared/icons';
@@ -18,20 +19,18 @@ export interface Profile {
export function NostrBandUserProfile({ data }: { data: Profile }) {
const { db } = useStorage();
const { ndk } = useStorage();
const { status, data: userStats } = useQuery(
['user-stats', data.pubkey],
async () => {
const { ndk } = useNDK();
const { status, data: userStats } = useQuery({
queryKey: ['user-stats', data.pubkey],
queryFn: async () => {
const res = await fetch(`https://api.nostr.band/v0/stats/profile/${data.pubkey}`);
return res.json();
},
{
refetchOnMount: false,
refetchOnReconnect: false,
refetchOnWindowFocus: false,
staleTime: Infinity,
}
);
refetchOnMount: false,
refetchOnReconnect: false,
refetchOnWindowFocus: false,
staleTime: Infinity,
});
const embedProfile = data.profile ? JSON.parse(data.profile.content) : null;
const profile = embedProfile;
@@ -137,7 +136,7 @@ export function NostrBandUserProfile({ data }: { data: Profile }) {
</p>
</div>
<div className="mt-8">
{status === 'loading' ? (
{status === 'pending' ? (
<p>Loading...</p>
) : (
<div className="flex w-full items-center gap-8">