migrate to tanstack query v5

2023-10-28 07:35:39 +07:00
parent 42eb882f52
commit 555c8ec08a
51 changed files with 290 additions and 305 deletions
--- a/src/shared/accounts/active.tsx
+++ b/src/shared/accounts/active.tsx
@@ -94,7 +94,7 @@ export function ActiveAccount() {
    );
  }, []);

-  if (status === 'loading') {
+  if (status === 'pending') {
    return (
      <div className="aspect-square h-auto w-full animate-pulse rounded-lg bg-neutral-300 dark:bg-neutral-700" />
    );
--- a/src/shared/nip05.tsx
+++ b/src/shared/nip05.tsx
@@ -20,9 +20,9 @@ export const NIP05 = memo(function NIP05({
  nip05: string;
  className?: string;
 }) {
-  const { status, data } = useQuery(
-    ['nip05', nip05],
-    async () => {
+  const { status, data } = useQuery({
+    queryKey: ['nip05', nip05],
+    queryFn: async () => {
      try {
        const localPath = nip05.split('@')[0];
        const service = nip05.split('@')[1];
@@ -47,15 +47,13 @@ export const NIP05 = memo(function NIP05({
        throw new Error(`Failed to verify NIP-05, error: ${e}`);
      }
    },
-    {
-      refetchOnMount: false,
-      refetchOnReconnect: false,
-      refetchOnWindowFocus: false,
-      staleTime: Infinity,
-    }
-  );
+    refetchOnMount: false,
+    refetchOnReconnect: false,
+    refetchOnWindowFocus: false,
+    staleTime: Infinity,
+  });

-  if (status === 'loading') {
+  if (status === 'pending') {
    <div className="h-3 w-20 animate-pulse rounded bg-white/10" />;
  }

--- a/src/shared/notes/child.tsx
+++ b/src/shared/notes/child.tsx
@@ -30,7 +30,7 @@ export function ChildNote({ id, root }: { id: string; root?: string }) {
    }
  };

-  if (status === 'loading') {
+  if (status === 'pending') {
    return (
      <>
        <div className="absolute bottom-0 left-[18px] h-[calc(100%-3.4rem)] w-0.5 bg-gradient-to-t from-black/20 to-black/10 dark:from-white/20 dark:to-white/10" />
--- a/src/shared/notes/kinds/repost.tsx
+++ b/src/shared/notes/kinds/repost.tsx
@@ -28,9 +28,9 @@ export function Repost({
    event.content.length > 0 ? JSON.parse(event.content) : null;

  const { ndk } = useNDK();
-  const { status, isError, data } = useQuery(
-    ['repost', event.id],
-    async () => {
+  const { status, isError, data } = useQuery({
+    queryKey: ['repost', event.id],
+    queryFn: async () => {
      const id = event.tags.find((el) => el[0] === 'e')[1];
      if (!id) throw new Error('wrong id');

@@ -39,11 +39,9 @@ export function Repost({

      return ndkEvent;
    },
-    {
-      enabled: embedEvent === null,
-      refetchOnWindowFocus: false,
-    }
-  );
+    enabled: embedEvent === null,
+    refetchOnWindowFocus: false,
+  });

  const renderKind = useCallback((repostEvent: NDKEvent) => {
    switch (repostEvent.kind) {
@@ -87,7 +85,7 @@ export function Repost({
    );
  }

-  if (status === 'loading') {
+  if (status === 'pending') {
    return (
      <div className="h-min w-full px-3 pb-3">
        <div className="relative overflow-hidden rounded-xl border border-neutral-300 bg-neutral-200 p-3 dark:border-neutral-700 dark:bg-neutral-800">
--- a/src/shared/notes/mentions/note.tsx
+++ b/src/shared/notes/mentions/note.tsx
@@ -46,7 +46,7 @@ export const MentionNote = memo(function MentionNote({ id }: { id: string }) {
    }
  };

-  if (status === 'loading') {
+  if (status === 'pending') {
    return (
      <div className="mt-3 cursor-default rounded-lg border border-neutral-300 bg-neutral-200 p-3 dark:border-neutral-700 dark:bg-neutral-800">
        <NoteSkeleton />
--- a/src/shared/notes/metadata.tsx
+++ b/src/shared/notes/metadata.tsx
@@ -17,9 +17,9 @@ export function NoteMetadata({ id }: { id: string }) {

  const { db } = useStorage();
  const { ndk } = useNDK();
-  const { status, data } = useQuery(
-    ['note-metadata', id],
-    async () => {
+  const { status, data } = useQuery({
+    queryKey: ['note-metadata', id],
+    queryFn: async () => {
      let replies = 0;
      let zap = 0;
      const users = [];
@@ -53,14 +53,12 @@ export function NoteMetadata({ id }: { id: string }) {

      return { replies, users, zap };
    },
-    {
-      enabled: !!ndk,
-      refetchOnWindowFocus: false,
-      refetchOnReconnect: false,
-    }
-  );
+    enabled: !!ndk,
+    refetchOnWindowFocus: false,
+    refetchOnReconnect: false,
+  });

-  if (status === 'loading') {
+  if (status === 'pending') {
    return (
      <div className="relative z-10 flex items-center gap-3 pb-3">
        <div className="mt-2 h-6 w-11 shrink-0"></div>
--- a/src/shared/notes/preview/link.tsx
+++ b/src/shared/notes/preview/link.tsx
@@ -8,7 +8,7 @@ export function LinkPreview({ urls }: { urls: string[] }) {

  return (
    <div className="my-2">
-      {status === 'loading' ? (
+      {status === 'pending' ? (
        <div className="flex flex-col bg-neutral-200 dark:bg-neutral-800">
          <div className="h-44 w-full animate-pulse bg-neutral-400 dark:bg-neutral-600" />
          <div className="flex flex-col gap-2 px-3 py-3">
--- a/src/shared/notes/stats.tsx
+++ b/src/shared/notes/stats.tsx
@@ -10,9 +10,9 @@ import { compactNumber } from '@utils/number';

 export function NoteStats({ id }: { id: string }) {
  const { ndk } = useNDK();
-  const { status, data } = useQuery(
-    ['note-stats', id],
-    async () => {
+  const { status, data } = useQuery({
+    queryKey: ['note-stats', id],
+    queryFn: async () => {
      let reactions = 0;
      let reposts = 0;
      let zaps = 0;
@@ -48,10 +48,11 @@ export function NoteStats({ id }: { id: string }) {

      return { reposts, reactions, zaps };
    },
-    { refetchOnWindowFocus: false, refetchOnReconnect: false }
-  );
+    refetchOnWindowFocus: false,
+    refetchOnReconnect: false,
+  });

-  if (status === 'loading') {
+  if (status === 'pending') {
    return (
      <div className="flex h-11 items-center">
        <LoaderIcon className="h-4 w-4 animate-spin text-white" />
--- a/src/shared/notification/notifyNote.tsx
+++ b/src/shared/notification/notifyNote.tsx
@@ -62,7 +62,7 @@ export function NotifyNote({ event }: { event: NDKEvent }) {
    }
  };

-  if (status === 'loading') {
+  if (status === 'pending') {
    return (
      <div className="h-min w-full px-3 pb-3">
        <div className="relative overflow-hidden rounded-xl bg-white/10 px-3 py-3 backdrop-blur-xl">
--- a/src/shared/user.tsx
+++ b/src/shared/user.tsx
@@ -46,7 +46,7 @@ export const User = memo(function User({
  const svgURI =
    'data:image/svg+xml;utf8,' + encodeURIComponent(minidenticon(pubkey, 90, 50));

-  if (status === 'loading') {
+  if (status === 'pending') {
    if (variant === 'avatar') {
      return (
        <div className="h-12 w-12 animate-pulse overflow-hidden rounded-lg bg-neutral-300 dark:bg-neutral-700" />
--- a/src/shared/widgets/eventLoader.tsx
+++ b/src/shared/widgets/eventLoader.tsx
@@ -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();
      }
    }
--- a/src/shared/widgets/global/articles.tsx
+++ b/src/shared/widgets/global/articles.tsx
@@ -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" />
--- a/src/shared/widgets/global/files.tsx
+++ b/src/shared/widgets/global/files.tsx
@@ -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" />
--- a/src/shared/widgets/global/hashtag.tsx
+++ b/src/shared/widgets/global/hashtag.tsx
@@ -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" />
--- a/src/shared/widgets/local/articles.tsx
+++ b/src/shared/widgets/local/articles.tsx
@@ -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" />
--- a/src/shared/widgets/local/feeds.tsx
+++ b/src/shared/widgets/local/feeds.tsx
@@ -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" />
--- a/src/shared/widgets/local/files.tsx
+++ b/src/shared/widgets/local/files.tsx
@@ -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" />
--- a/src/shared/widgets/local/follows.tsx
+++ b/src/shared/widgets/local/follows.tsx
@@ -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" />
--- a/src/shared/widgets/local/network.tsx
+++ b/src/shared/widgets/local/network.tsx
@@ -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 />
--- a/src/shared/widgets/local/thread.tsx
+++ b/src/shared/widgets/local/thread.tsx
@@ -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>
--- a/src/shared/widgets/local/user.tsx
+++ b/src/shared/widgets/local/user.tsx
@@ -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 />
--- a/src/shared/widgets/nostrBand/trendingAccounts.tsx
+++ b/src/shared/widgets/nostrBand/trendingAccounts.tsx
@@ -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" />
--- a/src/shared/widgets/nostrBand/trendingNotes.tsx
+++ b/src/shared/widgets/nostrBand/trendingNotes.tsx
@@ -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" />
--- a/src/shared/widgets/nostrBandUserProfile.tsx
+++ b/src/shared/widgets/nostrBandUserProfile.tsx
@@ -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">