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/app/auth/components/features/followList.tsx
+++ b/src/app/auth/components/features/followList.tsx
@@ -9,9 +9,9 @@ import { User } from '@shared/user';
 export function FollowList() {
  const { db } = useStorage();
  const { ndk } = useNDK();
-  const { status, data } = useQuery(
-    ['follows'],
-    async () => {
+  const { status, data } = useQuery({
+    queryKey: ['follows'],
+    queryFn: async () => {
      const user = ndk.getUser({ hexpubkey: db.account.pubkey });
      const follows = await user.follows();
      const followsAsArr = [];
@@ -29,16 +29,14 @@ export function FollowList() {

      return followsAsArr;
    },
-    {
-      refetchOnWindowFocus: false,
-    }
-  );
+    refetchOnWindowFocus: false,
+  });

  return (
    <div className="relative rounded-xl bg-neutral-100 p-3 text-neutral-800 dark:bg-neutral-900 dark:text-neutral-200">
      <h5 className="font-semibold">Your follows</h5>
      <div className="mt-2 flex w-full items-center justify-center">
-        {status === 'loading' ? (
+        {status === 'pending' ? (
          <LoaderIcon className="h-4 w-4 animate-spin text-neutral-900 dark:text-neutral-100" />
        ) : (
          <div className="isolate flex -space-x-2">
--- a/src/app/auth/onboarding/enrich.tsx
+++ b/src/app/auth/onboarding/enrich.tsx
@@ -17,12 +17,15 @@ import { arrayToNIP02 } from '@utils/transform';
 export function OnboardEnrichScreen() {
  const { ndk } = useNDK();
  const { db } = useStorage();
-  const { status, data } = useQuery(['trending-profiles-widget'], async () => {
-    const res = await fetch('https://api.nostr.band/v0/trending/profiles');
-    if (!res.ok) {
-      throw new Error('Error');
-    }
-    return res.json();
+  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');
+      }
+      return res.json();
+    },
  });

  const [loading, setLoading] = useState(false);
@@ -90,7 +93,7 @@ export function OnboardEnrichScreen() {
        </h1>
      </div>
      <div className="flex w-full flex-nowrap items-center gap-4 overflow-x-auto px-4 scrollbar-none">
-        {status === 'loading' ? (
+        {status === 'pending' ? (
          <div className="flex h-full w-full items-center justify-center">
            <LoaderIcon className="h-4 w-4 animate-spin text-neutral-900 dark:text-neutral-100" />
          </div>
--- a/src/app/auth/onboarding/relays.tsx
+++ b/src/app/auth/onboarding/relays.tsx
@@ -24,15 +24,13 @@ export function OnboardRelaysScreen() {
  const { db } = useStorage();
  const { ndk } = useNDK();
  const { getAllRelaysByUsers } = useNostr();
-  const { status, data } = useQuery(
-    ['relays'],
-    async () => {
+  const { status, data } = useQuery({
+    queryKey: ['relays'],
+    queryFn: async () => {
      return await getAllRelaysByUsers();
    },
-    {
-      refetchOnWindowFocus: false,
-    }
-  );
+    refetchOnWindowFocus: false,
+  });

  const toggleRelay = (relay: string) => {
    if (relays.has(relay)) {
@@ -89,7 +87,7 @@ export function OnboardRelaysScreen() {
        </h1>
        <div className="flex flex-col gap-4">
          <div className="flex h-[420px] w-full flex-col overflow-y-auto rounded-xl bg-neutral-100 dark:bg-neutral-900">
-            {status === 'loading' ? (
+            {status === 'pending' ? (
              <div className="flex h-full w-full items-center justify-center">
                <LoaderIcon className="h-4 w-4 animate-spin text-neutral-900 dark:text-neutral-100" />
              </div>
--- a/src/app/chats/chat.tsx
+++ b/src/app/chats/chat.tsx
@@ -22,8 +22,12 @@ export function ChatScreen() {
  const { ndk } = useNDK();
  const { pubkey } = useParams();
  const { fetchNIP04Messages } = useNostr();
-  const { status, data } = useQuery(['nip04-dm', pubkey], async () => {
-    return await fetchNIP04Messages(pubkey);
+  const { status, data } = useQuery({
+    queryKey: ['nip04-dm', pubkey],
+    queryFn: async () => {
+      return await fetchNIP04Messages(pubkey);
+    },
+    refetchOnWindowFocus: false,
  });

  const renderItem = useCallback(
@@ -69,7 +73,7 @@ export function ChatScreen() {
            <User pubkey={pubkey} variant="simple" />
          </div>
          <div className="h-full w-full flex-1 px-3 py-3">
-            {status === 'loading' ? (
+            {status === 'pending' ? (
              <div className="flex h-full w-full items-center justify-center">
                <div className="flex flex-col items-center gap-1.5">
                  <LoaderIcon className="h-5 w-5 animate-spin text-neutral-900 dark:text-neutral-100" />
--- a/src/app/chats/components/chatListItem.tsx
+++ b/src/app/chats/components/chatListItem.tsx
@@ -19,7 +19,7 @@ export const ChatListItem = memo(function ChatListItem({ event }: { event: NDKEv
  const svgURI =
    'data:image/svg+xml;utf8,' + encodeURIComponent(minidenticon(event.pubkey, 90, 50));

-  if (status === 'loading') {
+  if (status === 'pending') {
    return (
      <div className="flex items-center gap-2.5 rounded-md px-3">
        <div className="h-10 w-10 shrink-0 animate-pulse rounded-lg bg-neutral-400 dark:bg-neutral-600" />
--- a/src/app/chats/components/mediaUploader.tsx
+++ b/src/app/chats/components/mediaUploader.tsx
@@ -3,14 +3,11 @@ import { Dispatch, SetStateAction, useState } from 'react';

 import { LoaderIcon, MediaIcon } from '@shared/icons';

-import { useNostr } from '@utils/hooks/useNostr';
-
 export function MediaUploader({
  setState,
 }: {
  setState: Dispatch<SetStateAction<string>>;
 }) {
-  const { upload } = useNostr();
  const [loading, setLoading] = useState(false);

  const uploadMedia = async () => {
--- a/src/app/chats/index.tsx
+++ b/src/app/chats/index.tsx
@@ -11,18 +11,16 @@ import { useNostr } from '@utils/hooks/useNostr';

 export function ChatsScreen() {
  const { getAllNIP04Chats } = useNostr();
-  const { status, data } = useQuery(
-    ['nip04-chats'],
-    async () => {
+  const { status, data } = useQuery({
+    queryKey: ['nip04-chats'],
+    queryFn: async () => {
      return await getAllNIP04Chats();
    },
-    {
-      refetchOnWindowFocus: false,
-      refetchOnMount: false,
-      refetchOnReconnect: false,
-      staleTime: Infinity,
-    }
-  );
+    refetchOnWindowFocus: false,
+    refetchOnMount: false,
+    refetchOnReconnect: false,
+    staleTime: Infinity,
+  });

  const renderItem = useCallback(
    (event: NDKEvent) => {
@@ -43,7 +41,7 @@ export function ChatsScreen() {
          </h3>
        </div>
        <div className="flex h-full flex-col gap-1">
-          {status === 'loading' ? (
+          {status === 'pending' ? (
            <div className="flex h-full w-full items-center justify-center pb-16">
              <div className="inline-flex flex-col items-center justify-center gap-2">
                <LoaderIcon className="h-5 w-5 animate-spin text-neutral-900 dark:text-neutral-100" />
--- a/src/app/error.tsx
+++ b/src/app/error.tsx
@@ -8,7 +8,6 @@ interface RouteError {

 interface DebugInfo {
  os: null | string;
-  version: null | string;
  appDir: null | string;
 }

@@ -18,24 +17,20 @@ export function ErrorScreen() {

  const [debugInfo, setDebugInfo] = useState<DebugInfo>({
    os: null,
-    version: null,
    appDir: null,
  });

  useEffect(() => {
    async function getInformation() {
      const { platform, version } = await import('@tauri-apps/plugin-os');
-      const { getVersion } = await import('@tauri-apps/plugin-app');
      const { appConfigDir } = await import('@tauri-apps/api/path');

      const platformName = await platform();
      const osVersion = await version();
-      const appVersion = await getVersion();
      const appDir = await appConfigDir();

      setDebugInfo({
        os: platformName + ' ' + osVersion,
-        version: appVersion,
        appDir: appDir,
      });
    }
@@ -59,9 +54,6 @@ export function ErrorScreen() {
            <p className="font-medium text-neutral-600 dark:text-neutral-400">
              Current location: {location.pathname}
            </p>
-            <p className="font-medium text-neutral-600 dark:text-neutral-400">
-              App version: {debugInfo.version}
-            </p>
            <p className="font-medium text-neutral-600 dark:text-neutral-400">
              Platform: {debugInfo.os}
            </p>
--- a/src/app/explore/components/groupTitle.tsx
+++ b/src/app/explore/components/groupTitle.tsx
@@ -5,7 +5,7 @@ import { useProfile } from '@utils/hooks/useProfile';
 export const GroupTitle = memo(function GroupTitle({ pubkey }: { pubkey: string }) {
  const { status, user } = useProfile(pubkey);

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

--- a/src/app/explore/components/userLatestPosts.tsx
+++ b/src/app/explore/components/userLatestPosts.tsx
@@ -16,8 +16,12 @@ import { useNostr } from '@utils/hooks/useNostr';

 export function UserLatestPosts({ pubkey }: { pubkey: string }) {
  const { getEventsByPubkey } = useNostr();
-  const { status, data } = useQuery(['user-posts', pubkey], async () => {
-    return await getEventsByPubkey(pubkey);
+  const { status, data } = useQuery({
+    queryKey: ['user-posts', pubkey],
+    queryFn: async () => {
+      return await getEventsByPubkey(pubkey);
+    },
+    refetchOnWindowFocus: false,
  });

  const renderItem = useCallback(
@@ -60,7 +64,7 @@ export function UserLatestPosts({ pubkey }: { pubkey: string }) {
        Latest post
      </h3>
      <div>
-        {status === 'loading' ? (
+        {status === 'pending' ? (
          <div className="px-3">
            <div className="inline-flex h-16 w-full items-center justify-center gap-1.5 rounded-lg bg-neutral-300 text-sm font-medium dark:bg-neutral-700">
              <LoaderIcon className="h-4 w-4 animate-spin" />
--- a/src/app/explore/components/userWithDrawer.tsx
+++ b/src/app/explore/components/userWithDrawer.tsx
@@ -84,7 +84,7 @@ export const UserWithDrawer = memo(function UserWithDrawer({
      <Dialog.Portal>
        <Dialog.Content className="fixed right-0 top-0 z-50 flex h-full w-[400px] animate-slideRightAndFade items-center justify-center px-4 pb-4 pt-16 transition-all">
          <div className="h-full w-full overflow-y-auto rounded-lg border border-neutral-300 bg-neutral-200 py-3 dark:border-neutral-700 dark:bg-neutral-800">
-            {status === 'loading' ? (
+            {status === 'pending' ? (
              <div>
                <p>Loading...</p>
              </div>
--- a/src/app/new/components/mentionPopupItem.tsx
+++ b/src/app/new/components/mentionPopupItem.tsx
@@ -6,7 +6,7 @@ import { displayNpub } from '@utils/shortenKey';
 export function MentionPopupItem({ pubkey, embed }: { pubkey: string; embed?: string }) {
  const { status, user } = useProfile(pubkey, embed);

-  if (status === 'loading') {
+  if (status === 'pending') {
    return (
      <div className="flex items-center gap-2.5 px-2">
        <div className="relative h-8 w-8 shrink-0 animate-pulse rounded bg-neutral-400 dark:bg-neutral-600" />
--- a/src/app/notes/article.tsx
+++ b/src/app/notes/article.tsx
@@ -72,7 +72,7 @@ export function ArticleNoteScreen() {
      </div>
      <div className="relative col-span-6 flex flex-col overflow-y-auto">
        <div className="mx-auto w-full max-w-2xl">
-          {status === 'loading' ? (
+          {status === 'pending' ? (
            <div className="px-3 py-1.5">Loading...</div>
          ) : (
            <div className="flex h-min w-full flex-col px-3">
--- a/src/app/notes/text.tsx
+++ b/src/app/notes/text.tsx
@@ -91,7 +91,7 @@ export function TextNoteScreen() {
      </div>
      <div className="relative col-span-6 flex flex-col overflow-y-auto">
        <div className="mx-auto w-full max-w-2xl">
-          {status === 'loading' ? (
+          {status === 'pending' ? (
            <div className="px-3 py-1.5">Loading...</div>
          ) : (
            <div className="flex h-min w-full flex-col px-3">
--- a/src/app/relays/components/relayEventList.tsx
+++ b/src/app/relays/components/relayEventList.tsx
@@ -17,9 +17,9 @@ import {

 export function RelayEventList({ relayUrl }: { relayUrl: string }) {
  const { fetcher } = useNDK();
-  const { status, data } = useQuery(
-    ['relay-event'],
-    async () => {
+  const { status, data } = useQuery({
+    queryKey: ['relay-event'],
+    queryFn: async () => {
      const url = 'wss://' + relayUrl;
      const events = await fetcher.fetchLatestEvents(
        [url],
@@ -30,8 +30,8 @@ export function RelayEventList({ relayUrl }: { relayUrl: string }) {
      );
      return events as unknown as NDKEvent[];
    },
-    { refetchOnWindowFocus: false }
-  );
+    refetchOnWindowFocus: false,
+  });

  const renderItem = useCallback(
    (event: NDKEvent) => {
@@ -70,7 +70,7 @@ export function RelayEventList({ relayUrl }: { relayUrl: string }) {
  return (
    <div className="h-full">
      <div className="mx-auto w-full max-w-[500px]">
-        {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-white" />
@@ -78,7 +78,7 @@ export function RelayEventList({ relayUrl }: { relayUrl: string }) {
            </div>
          </div>
        ) : (
-          <VList className="scrollbar-none h-full">
+          <VList className="h-full scrollbar-none">
            <div className="h-10" />
            {data.map((item) => renderItem(item))}
            <div className="h-16" />
--- a/src/app/relays/components/relayForm.tsx
+++ b/src/app/relays/components/relayForm.tsx
@@ -25,7 +25,10 @@ export function RelayForm() {
        const res = await db.createRelay(url);
        if (!res) return setError("You're already using this relay");

-        queryClient.invalidateQueries(['user-relay']);
+        queryClient.invalidateQueries({
+          queryKey: ['user-relay'],
+        });
+
        setError('');
        setUrl('');
      } else {
--- a/src/app/relays/components/relayList.tsx
+++ b/src/app/relays/components/relayList.tsx
@@ -17,18 +17,16 @@ export function RelayList() {

  const { getAllRelaysByUsers } = useNostr();
  const { db } = useStorage();
-  const { status, data } = useQuery(
-    ['relays'],
-    async () => {
+  const { status, data } = useQuery({
+    queryKey: ['relays'],
+    queryFn: async () => {
      return await getAllRelaysByUsers();
    },
-    {
-      refetchOnWindowFocus: false,
-      refetchOnMount: false,
-      refetchOnReconnect: false,
-      staleTime: Infinity,
-    }
-  );
+    refetchOnWindowFocus: false,
+    refetchOnMount: false,
+    refetchOnReconnect: false,
+    staleTime: Infinity,
+  });

  const inspectRelay = (relayUrl: string) => {
    const url = new URL(relayUrl);
@@ -40,12 +38,14 @@ export function RelayList() {
    const res = await db.createRelay(url);

    if (!res) await message("You're aldready connected to this relay");
-    queryClient.invalidateQueries(['user-relay']);
+    queryClient.invalidateQueries({
+      queryKey: ['user-relay'],
+    });
  };

  return (
    <div className="col-span-2 border-r border-neutral-100 dark:border-neutral-900">
-      {status === 'loading' ? (
+      {status === 'pending' ? (
        <div className="flex h-full w-full items-center justify-center pb-10">
          <div className="inline-flex flex-col items-center justify-center gap-2">
            <LoaderIcon className="h-5 w-5 animate-spin text-neutral-900 dark:text-neutral-100" />
--- a/src/app/relays/components/userRelay.tsx
+++ b/src/app/relays/components/userRelay.tsx
@@ -12,22 +12,24 @@ export function UserRelay() {

  const { relayUrls } = useNDK();
  const { db } = useStorage();
-  const { status, data } = useQuery(
-    ['user-relay'],
-    async () => {
+  const { status, data } = useQuery({
+    queryKey: ['user-relay'],
+    queryFn: async () => {
      return await db.getExplicitRelayUrls();
    },
-    { refetchOnWindowFocus: false }
-  );
+    refetchOnWindowFocus: false,
+  });

  const removeRelay = async (relayUrl: string) => {
    await db.removeRelay(relayUrl);
-    queryClient.invalidateQueries(['user-relay']);
+    queryClient.invalidateQueries({
+      queryKey: ['user-relay'],
+    });
  };

  return (
    <div className="mt-3 px-3">
-      {status === 'loading' ? (
+      {status === 'pending' ? (
        <p>Loading...</p>
      ) : (
        <div className="flex flex-col gap-2">
--- a/src/app/settings/components/version.tsx
+++ b/src/app/settings/components/version.tsx
@@ -1,17 +1,4 @@
-import { getVersion } from '@tauri-apps/plugin-app';
-import { useEffect, useState } from 'react';
-
 export function VersionSetting() {
-  const [version, setVersion] = useState<string>('');
-
-  useEffect(() => {
-    async function checkVersion() {
-      const appVersion = await getVersion();
-      setVersion(appVersion);
-    }
-    checkVersion();
-  }, []);
-
  return (
    <div className="inline-flex items-center justify-between px-5 py-4">
      <div className="flex flex-col gap-1">
@@ -21,7 +8,7 @@ export function VersionSetting() {
        </span>
      </div>
      <div className="inline-flex items-center gap-2">
-        <span className="font-medium text-neutral-300">{version}</span>
+        <span className="font-medium text-neutral-300">2</span>
      </div>
    </div>
  );
--- a/src/app/users/components/modal.tsx
+++ b/src/app/users/components/modal.tsx
@@ -210,7 +210,9 @@ export function EditProfileModal() {

    if (publishedRelays) {
      // invalid cache
-      queryClient.invalidateQueries(['user', db.account.pubkey]);
+      queryClient.invalidateQueries({
+        queryKey: ['user', db.account.pubkey]
+      });
      // reset form
      reset();
      // reset state
--- a/src/app/users/components/stats.tsx
+++ b/src/app/users/components/stats.tsx
@@ -5,15 +5,19 @@ import { LoaderIcon } from '@shared/icons';
 import { compactNumber } from '@utils/number';

 export function UserStats({ pubkey }: { pubkey: string }) {
-  const { status, data } = useQuery(['user-metadata', pubkey], async () => {
-    const res = await fetch(`https://api.nostr.band/v0/stats/profile/${pubkey}`);
-    if (!res.ok) {
-      throw new Error('Error');
-    }
-    return await res.json();
+  const { status, data } = useQuery({
+    queryKey: ['user-metadata', pubkey],
+
+    ...async () => {
+      const res = await fetch(`https://api.nostr.band/v0/stats/profile/${pubkey}`);
+      if (!res.ok) {
+        throw new Error('Error');
+      }
+      return await res.json();
+    },
  });

-  if (status === 'loading') {
+  if (status === 'pending') {
    return (
      <div className="flex w-full items-center justify-center">
        <LoaderIcon className="h-5 w-5 animate-spin text-neutral-900 dark:text-neutral-100" />
--- a/src/app/users/index.tsx
+++ b/src/app/users/index.tsx
@@ -19,14 +19,18 @@ import {
 export function UserScreen() {
  const { pubkey } = useParams();
  const { ndk } = useNDK();
-  const { status, data } = useQuery(['user-feed', pubkey], async () => {
-    const events = await ndk.fetchEvents({
-      kinds: [NDKKind.Text, NDKKind.Repost, NDKKind.Article],
-      authors: [pubkey],
-      limit: 50,
-    });
-    const sorted = [...events].sort((a, b) => b.created_at - a.created_at);
-    return sorted;
+  const { status, data } = useQuery({
+    queryKey: ['user-feed', pubkey],
+    queryFn: async () => {
+      const events = await ndk.fetchEvents({
+        kinds: [NDKKind.Text, NDKKind.Repost, NDKKind.Article],
+        authors: [pubkey],
+        limit: 50,
+      });
+      const sorted = [...events].sort((a, b) => b.created_at - a.created_at);
+      return sorted;
+    },
+    refetchOnWindowFocus: false,
  });

  // render event match event kind
@@ -73,7 +77,7 @@ export function UserScreen() {
          Latest posts
        </h3>
        <div className="mx-auto flex h-full max-w-[500px] flex-col justify-between gap-1.5 pb-4 pt-1.5">
-          {status === 'loading' ? (
+          {status === 'pending' ? (
            <div>Loading...</div>
          ) : data.length === 0 ? (
            <div className="px-3 py-1.5">