chore: upgrade to react 19 rc

2024-08-12 10:32:20 +07:00
parent da8162069b
commit be16d5c21d
11 changed files with 682 additions and 626 deletions
--- a/src/routes.gen.ts
+++ b/src/routes.gen.ts
@@ -26,9 +26,9 @@ import { Route as CreateTopicImport } from './routes/create-topic'
 import { Route as CreateNewsfeedImport } from './routes/create-newsfeed'
 import { Route as CreateGroupImport } from './routes/create-group'
 import { Route as BootstrapRelaysImport } from './routes/bootstrap-relays'
-import { Route as AccountImport } from './routes/$account'
 import { Route as IndexImport } from './routes/index'
 import { Route as EditorIndexImport } from './routes/editor/index'
+import { Route as AccountIndexImport } from './routes/$account/index'
 import { Route as ZapIdImport } from './routes/zap.$id'
 import { Route as UsersPubkeyImport } from './routes/users/$pubkey'
 import { Route as TrendingUsersImport } from './routes/trending.users'
@@ -41,12 +41,12 @@ import { Route as SettingsBitcoinConnectImport } from './routes/settings/bitcoin
 import { Route as SettingsBackupImport } from './routes/settings/backup'
 import { Route as SearchUsersImport } from './routes/search.users'
 import { Route as SearchNotesImport } from './routes/search.notes'
-import { Route as PanelAccountImport } from './routes/panel.$account'
 import { Route as EventsIdImport } from './routes/events/$id'
 import { Route as CreateNewsfeedUsersImport } from './routes/create-newsfeed.users'
 import { Route as CreateNewsfeedF2fImport } from './routes/create-newsfeed.f2f'
 import { Route as AuthCreateProfileImport } from './routes/auth/create-profile'
-import { Route as AccountHomeImport } from './routes/$account.home'
+import { Route as AccountPanelImport } from './routes/$account/panel'
+import { Route as AccountHomeImport } from './routes/$account/home'
 import { Route as AuthAccountBackupImport } from './routes/auth/$account.backup'

 // Create Virtual Routes
@@ -133,11 +133,6 @@ const BootstrapRelaysRoute = BootstrapRelaysImport.update({
  getParentRoute: () => rootRoute,
 } as any)

-const AccountRoute = AccountImport.update({
-  path: '/$account',
-  getParentRoute: () => rootRoute,
-} as any)
-
 const IndexRoute = IndexImport.update({
  path: '/',
  getParentRoute: () => rootRoute,
@@ -148,6 +143,13 @@ const EditorIndexRoute = EditorIndexImport.update({
  getParentRoute: () => rootRoute,
 } as any)

+const AccountIndexRoute = AccountIndexImport.update({
+  path: '/$account/',
+  getParentRoute: () => rootRoute,
+} as any).lazy(() =>
+  import('./routes/$account/index.lazy').then((d) => d.Route),
+)
+
 const AuthRemoteLazyRoute = AuthRemoteLazyImport.update({
  path: '/remote',
  getParentRoute: () => AuthLazyRoute,
@@ -218,11 +220,6 @@ const SearchNotesRoute = SearchNotesImport.update({
  getParentRoute: () => SearchRoute,
 } as any)

-const PanelAccountRoute = PanelAccountImport.update({
-  path: '/panel/$account',
-  getParentRoute: () => rootRoute,
-} as any)
-
 const EventsIdRoute = EventsIdImport.update({
  path: '/events/$id',
  getParentRoute: () => rootRoute,
@@ -243,10 +240,17 @@ const AuthCreateProfileRoute = AuthCreateProfileImport.update({
  getParentRoute: () => AuthLazyRoute,
 } as any)

+const AccountPanelRoute = AccountPanelImport.update({
+  path: '/$account/panel',
+  getParentRoute: () => rootRoute,
+} as any).lazy(() =>
+  import('./routes/$account/panel.lazy').then((d) => d.Route),
+)
+
 const AccountHomeRoute = AccountHomeImport.update({
-  path: '/home',
-  getParentRoute: () => AccountRoute,
-} as any)
+  path: '/$account/home',
+  getParentRoute: () => rootRoute,
+} as any).lazy(() => import('./routes/$account/home.lazy').then((d) => d.Route))

 const AuthAccountBackupRoute = AuthAccountBackupImport.update({
  path: '/$account/backup',
@@ -264,13 +268,6 @@ declare module '@tanstack/react-router' {
      preLoaderRoute: typeof IndexImport
      parentRoute: typeof rootRoute
    }
-    '/$account': {
-      id: '/$account'
-      path: '/$account'
-      fullPath: '/$account'
-      preLoaderRoute: typeof AccountImport
-      parentRoute: typeof rootRoute
-    }
    '/bootstrap-relays': {
      id: '/bootstrap-relays'
      path: '/bootstrap-relays'
@@ -378,10 +375,17 @@ declare module '@tanstack/react-router' {
    }
    '/$account/home': {
      id: '/$account/home'
-      path: '/home'
+      path: '/$account/home'
      fullPath: '/$account/home'
      preLoaderRoute: typeof AccountHomeImport
-      parentRoute: typeof AccountImport
+      parentRoute: typeof rootRoute
+    }
+    '/$account/panel': {
+      id: '/$account/panel'
+      path: '/$account/panel'
+      fullPath: '/$account/panel'
+      preLoaderRoute: typeof AccountPanelImport
+      parentRoute: typeof rootRoute
    }
    '/auth/create-profile': {
      id: '/auth/create-profile'
@@ -411,13 +415,6 @@ declare module '@tanstack/react-router' {
      preLoaderRoute: typeof EventsIdImport
      parentRoute: typeof rootRoute
    }
-    '/panel/$account': {
-      id: '/panel/$account'
-      path: '/panel/$account'
-      fullPath: '/panel/$account'
-      preLoaderRoute: typeof PanelAccountImport
-      parentRoute: typeof rootRoute
-    }
    '/search/notes': {
      id: '/search/notes'
      path: '/notes'
@@ -516,6 +513,13 @@ declare module '@tanstack/react-router' {
      preLoaderRoute: typeof AuthRemoteLazyImport
      parentRoute: typeof AuthLazyImport
    }
+    '/$account/': {
+      id: '/$account/'
+      path: '/$account'
+      fullPath: '/$account'
+      preLoaderRoute: typeof AccountIndexImport
+      parentRoute: typeof rootRoute
+    }
    '/editor/': {
      id: '/editor/'
      path: '/editor'
@@ -537,7 +541,6 @@ declare module '@tanstack/react-router' {

 export const routeTree = rootRoute.addChildren({
  IndexRoute,
-  AccountRoute: AccountRoute.addChildren({ AccountHomeRoute }),
  BootstrapRelaysRoute,
  CreateGroupRoute,
  CreateNewsfeedRoute: CreateNewsfeedRoute.addChildren({
@@ -571,10 +574,12 @@ export const routeTree = rootRoute.addChildren({
    AuthAccountBackupRoute,
  }),
  LandingLazyRoute,
+  AccountHomeRoute,
+  AccountPanelRoute,
  EventsIdRoute,
-  PanelAccountRoute,
  UsersPubkeyRoute,
  ZapIdRoute,
+  AccountIndexRoute,
  EditorIndexRoute,
 })

@@ -587,7 +592,6 @@ export const routeTree = rootRoute.addChildren({
      "filePath": "__root.tsx",
      "children": [
        "/",
-        "/$account",
        "/bootstrap-relays",
        "/create-group",
        "/create-newsfeed",
@@ -603,22 +607,18 @@ export const routeTree = rootRoute.addChildren({
        "/trending",
        "/auth",
        "/landing",
+        "/$account/home",
+        "/$account/panel",
        "/events/$id",
-        "/panel/$account",
        "/users/$pubkey",
        "/zap/$id",
+        "/$account/",
        "/editor/"
      ]
    },
    "/": {
      "filePath": "index.tsx"
    },
-    "/$account": {
-      "filePath": "$account.tsx",
-      "children": [
-        "/$account/home"
-      ]
-    },
    "/bootstrap-relays": {
      "filePath": "bootstrap-relays.tsx"
    },
@@ -691,8 +691,10 @@ export const routeTree = rootRoute.addChildren({
      "filePath": "landing.lazy.tsx"
    },
    "/$account/home": {
-      "filePath": "$account.home.tsx",
-      "parent": "/$account"
+      "filePath": "$account/home.tsx"
+    },
+    "/$account/panel": {
+      "filePath": "$account/panel.tsx"
    },
    "/auth/create-profile": {
      "filePath": "auth/create-profile.tsx",
@@ -709,9 +711,6 @@ export const routeTree = rootRoute.addChildren({
    "/events/$id": {
      "filePath": "events/$id.tsx"
    },
-    "/panel/$account": {
-      "filePath": "panel.$account.tsx"
-    },
    "/search/notes": {
      "filePath": "search.notes.tsx",
      "parent": "/search"
@@ -766,6 +765,9 @@ export const routeTree = rootRoute.addChildren({
      "filePath": "auth/remote.lazy.tsx",
      "parent": "/auth"
    },
+    "/$account/": {
+      "filePath": "$account/index.tsx"
+    },
    "/editor/": {
      "filePath": "editor/index.tsx"
    },
--- a/src/routes/$account/home.lazy.tsx
+++ b/src/routes/$account/home.lazy.tsx
@@ -3,7 +3,7 @@ import { Column } from "@/components/column";
 import { Toolbar } from "@/components/toolbar";
 import { NostrQuery } from "@/system";
 import type { ColumnEvent, LumeColumn } from "@/types";
-import { createFileRoute } from "@tanstack/react-router";
+import { createLazyFileRoute } from "@tanstack/react-router";
 import { listen } from "@tauri-apps/api/event";
 import { getCurrentWindow } from "@tauri-apps/api/window";
 import useEmblaCarousel from "embla-carousel-react";
@@ -11,11 +11,7 @@ import { nanoid } from "nanoid";
 import { useCallback, useEffect, useState } from "react";
 import { useDebouncedCallback } from "use-debounce";

-export const Route = createFileRoute("/$account/home")({
-	loader: async () => {
-		const columns = await NostrQuery.getColumns();
-		return columns;
-	},
+export const Route = createLazyFileRoute("/$account/home")({
 	component: Screen,
 });

--- a/src/routes/$account/home.tsx
+++ b/src/routes/$account/home.tsx
@@ -0,0 +1,9 @@
+import { NostrQuery } from "@/system";
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/$account/home")({
+	loader: async () => {
+		const columns = await NostrQuery.getColumns();
+		return columns;
+	},
+});
--- a/src/routes/$account/index.lazy.tsx
+++ b/src/routes/$account/index.lazy.tsx
@@ -6,23 +6,14 @@ import {
 	SearchIcon,
 } from "@/components";
 import { User } from "@/components/user";
-import { LumeWindow, NostrAccount, NostrQuery } from "@/system";
-import { Outlet, createFileRoute } from "@tanstack/react-router";
+import { LumeWindow, NostrAccount } from "@/system";
+import { Outlet, createLazyFileRoute } from "@tanstack/react-router";
 import { Menu, MenuItem, PredefinedMenuItem } from "@tauri-apps/api/menu";
 import { getCurrentWindow } from "@tauri-apps/api/window";
 import { message } from "@tauri-apps/plugin-dialog";
 import { memo, useCallback, useState } from "react";

-export const Route = createFileRoute("/$account")({
-	beforeLoad: async ({ params }) => {
-		const settings = await NostrQuery.getUserSettings();
-		const accounts = await NostrAccount.getAccounts();
-		const otherAccounts = accounts.filter(
-			(account) => account !== params.account,
-		);
-
-		return { otherAccounts, settings };
-	},
+export const Route = createLazyFileRoute("/$account/")({
 	component: Screen,
 });

--- a/src/routes/$account/index.tsx
+++ b/src/routes/$account/index.tsx
@@ -0,0 +1,14 @@
+import { NostrAccount, NostrQuery } from "@/system";
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/$account/")({
+	beforeLoad: async ({ params }) => {
+		const settings = await NostrQuery.getUserSettings();
+		const accounts = await NostrAccount.getAccounts();
+		const otherAccounts = accounts.filter(
+			(account) => account !== params.account,
+		);
+
+		return { otherAccounts, settings };
+	},
+});
--- a/src/routes/$account/panel.lazy.tsx
+++ b/src/routes/$account/panel.lazy.tsx
@@ -12,7 +12,7 @@ import { Kind } from "@/types";
 import * as ScrollArea from "@radix-ui/react-scroll-area";
 import * as Tabs from "@radix-ui/react-tabs";
 import { useQuery } from "@tanstack/react-query";
-import { createFileRoute } from "@tanstack/react-router";
+import { createLazyFileRoute } from "@tanstack/react-router";
 import { invoke } from "@tauri-apps/api/core";
 import { Menu, MenuItem, PredefinedMenuItem } from "@tauri-apps/api/menu";
 import { getCurrentWindow } from "@tauri-apps/api/window";
@@ -20,10 +20,7 @@ import { open } from "@tauri-apps/plugin-shell";
 import { type ReactNode, useCallback, useEffect, useRef } from "react";
 import { Virtualizer } from "virtua";

-export const Route = createFileRoute("/panel/$account")({
-	beforeLoad: async ({ context }) => {
-		console.log(context);
-	},
+export const Route = createLazyFileRoute("/$account/panel")({
 	component: Screen,
 });

@@ -33,7 +30,6 @@ function Screen() {
 	const { isLoading, data } = useQuery({
 		queryKey: ["notification", account],
 		queryFn: async () => {
-			console.log(queryClient);
 			const events = await NostrQuery.getNotifications();
 			return events;
 		},
@@ -72,6 +68,7 @@ function Screen() {

 			return { texts, zaps, reactions };
 		},
+		refetchOnWindowFocus: false,
 	});

 	const showContextMenu = useCallback(async (e: React.MouseEvent) => {
@@ -125,7 +122,7 @@ function Screen() {
 		return () => {
 			unlisten.then((f) => f());
 		};
-	}, []);
+	}, [account]);

 	if (isLoading) {
 		return (