diff --git a/e2e/availabilities.spec.ts b/e2e/availabilities.spec.ts index ce823d2..5b4ee1a 100644 --- a/e2e/availabilities.spec.ts +++ b/e2e/availabilities.spec.ts @@ -3,6 +3,7 @@ import test, { expect } from "@playwright/test"; test('creates an availability', async ({ page }) => { await page.goto('/dashboard'); await page.getByRole('link', { name: 'Sales' }).click(); + await page.waitForTimeout(500); await page.getByRole('button').first().click(); await page.getByLabel('Total size').click(); await page.getByLabel('Total size').fill('0.50'); @@ -26,6 +27,7 @@ test('creates an availability', async ({ page }) => { test('availability navigation buttons', async ({ page }) => { await page.goto('/dashboard/availabilities'); + await page.waitForTimeout(500); await page.getByRole('button').first().click(); await expect(page.locator('.stepper-number-done')).not.toBeVisible() await expect(page.locator('.stepper-number-active')).toBeVisible() diff --git a/package-lock.json b/package-lock.json index 1fb38e7..ee93a5a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4841,4 +4841,4 @@ "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==" } } -} +} \ No newline at end of file diff --git a/src/routeTree.gen.ts b/src/routeTree.gen.ts index d5991c6..1431900 100644 --- a/src/routeTree.gen.ts +++ b/src/routeTree.gen.ts @@ -8,6 +8,8 @@ // This file is auto-generated by TanStack Router +import { createFileRoute } from '@tanstack/react-router' + // Import Routes import { Route as rootRoute } from './routes/__root' @@ -32,6 +34,13 @@ import { Route as DashboardAvailabilitiesImport } from './routes/dashboard/avail import { Route as DashboardAnalyticsImport } from './routes/dashboard/analytics' import { Route as DashboardAboutImport } from './routes/dashboard/about' +// Create Virtual Routes + +const DashboardPeersLazyImport = createFileRoute('/dashboard/peers')() +const DashboardAvailabilitiesLazyImport = createFileRoute( + '/dashboard/availabilities', +)() + // Create/Update Routes const OnboardingNameRoute = OnboardingNameImport.update({ @@ -69,6 +78,22 @@ const DashboardWalletRoute = DashboardWalletImport.update({ path: '/wallet', getParentRoute: () => DashboardRoute, } as any) +const DashboardPeersLazyRoute = DashboardPeersLazyImport.update({ + id: '/peers', + path: '/peers', + getParentRoute: () => DashboardRoute, +} as any).lazy(() => + import('./routes/dashboard/peers.lazy').then((d) => d.Route), +) + +const DashboardAvailabilitiesLazyRoute = + DashboardAvailabilitiesLazyImport.update({ + id: '/availabilities', + path: '/availabilities', + getParentRoute: () => DashboardRoute, + } as any).lazy(() => + import('./routes/dashboard/availabilities.lazy').then((d) => d.Route), + ) const DashboardSettingsRoute = DashboardSettingsImport.update({ id: '/settings', @@ -289,134 +314,171 @@ declare module '@tanstack/react-router' { path: '/wallet' fullPath: '/dashboard/wallet' preLoaderRoute: typeof DashboardWalletImport - parentRoute: typeof DashboardImport - } - '/dashboard/': { - id: '/dashboard/' - path: '/' - fullPath: '/dashboard/' - preLoaderRoute: typeof DashboardIndexImport - parentRoute: typeof DashboardImport + '/dashboard/availabilities': { + id: '/dashboard/availabilities' + path: '/availabilities' + fullPath: '/dashboard/availabilities' + preLoaderRoute: typeof DashboardAvailabilitiesLazyImport + parentRoute: typeof DashboardImport + } + '/dashboard/peers': { + id: '/dashboard/peers' + path: '/peers' + fullPath: '/dashboard/peers' + preLoaderRoute: typeof DashboardPeersLazyImport + parentRoute: typeof DashboardImport + } + '/dashboard/': { + id: '/dashboard/' + path: '/' + fullPath: '/dashboard/' + preLoaderRoute: typeof DashboardIndexImport + parentRoute: typeof DashboardImport + } } } -} -// Create and export the route tree + // Create and export the route tree -interface DashboardRouteChildren { - DashboardAboutRoute: typeof DashboardAboutRoute - DashboardAnalyticsRoute: typeof DashboardAnalyticsRoute - DashboardAvailabilitiesRoute: typeof DashboardAvailabilitiesRoute - DashboardDeviceRoute: typeof DashboardDeviceRoute - DashboardDisclaimerRoute: typeof DashboardDisclaimerRoute - DashboardFavoritesRoute: typeof DashboardFavoritesRoute - DashboardFilesRoute: typeof DashboardFilesRoute - DashboardHelpRoute: typeof DashboardHelpRoute - DashboardLogsRoute: typeof DashboardLogsRoute - DashboardNodesRoute: typeof DashboardNodesRoute - DashboardPeersRoute: typeof DashboardPeersRoute - DashboardPurchasesRoute: typeof DashboardPurchasesRoute - DashboardRequestsRoute: typeof DashboardRequestsRoute - DashboardSettingsRoute: typeof DashboardSettingsRoute - DashboardWalletRoute: typeof DashboardWalletRoute - DashboardIndexRoute: typeof DashboardIndexRoute -} + interface DashboardRouteChildren { + DashboardAboutRoute: typeof DashboardAboutRoute + DashboardAnalyticsRoute: typeof DashboardAnalyticsRoute + DashboardAvailabilitiesRoute: typeof DashboardAvailabilitiesRoute + DashboardDeviceRoute: typeof DashboardDeviceRoute + DashboardDisclaimerRoute: typeof DashboardDisclaimerRoute + DashboardFavoritesRoute: typeof DashboardFavoritesRoute + DashboardFilesRoute: typeof DashboardFilesRoute + DashboardHelpRoute: typeof DashboardHelpRoute + DashboardLogsRoute: typeof DashboardLogsRoute + DashboardNodesRoute: typeof DashboardNodesRoute + DashboardPeersRoute: typeof DashboardPeersRoute + DashboardPurchasesRoute: typeof DashboardPurchasesRoute + DashboardRequestsRoute: typeof DashboardRequestsRoute + DashboardSettingsRoute: typeof DashboardSettingsRoute + DashboardWalletRoute: typeof DashboardWalletRoute + DashboardPurchasesRoute: typeof DashboardPurchasesRoute + DashboardRequestsRoute: typeof DashboardRequestsRoute + DashboardSettingsRoute: typeof DashboardSettingsRoute + DashboardAvailabilitiesLazyRoute: typeof DashboardAvailabilitiesLazyRoute + DashboardPeersLazyRoute: typeof DashboardPeersLazyRoute + DashboardIndexRoute: typeof DashboardIndexRoute + } -const DashboardRouteChildren: DashboardRouteChildren = { - DashboardAboutRoute: DashboardAboutRoute, - DashboardAnalyticsRoute: DashboardAnalyticsRoute, - DashboardAvailabilitiesRoute: DashboardAvailabilitiesRoute, - DashboardDeviceRoute: DashboardDeviceRoute, - DashboardDisclaimerRoute: DashboardDisclaimerRoute, - DashboardFavoritesRoute: DashboardFavoritesRoute, - DashboardFilesRoute: DashboardFilesRoute, - DashboardHelpRoute: DashboardHelpRoute, - DashboardLogsRoute: DashboardLogsRoute, - DashboardNodesRoute: DashboardNodesRoute, - DashboardPeersRoute: DashboardPeersRoute, - DashboardPurchasesRoute: DashboardPurchasesRoute, - DashboardRequestsRoute: DashboardRequestsRoute, - DashboardSettingsRoute: DashboardSettingsRoute, - DashboardWalletRoute: DashboardWalletRoute, - DashboardIndexRoute: DashboardIndexRoute, -} + const DashboardRouteChildren: DashboardRouteChildren = { + DashboardAboutRoute: DashboardAboutRoute, + DashboardAnalyticsRoute: DashboardAnalyticsRoute, + DashboardAvailabilitiesRoute: DashboardAvailabilitiesRoute, + DashboardDeviceRoute: DashboardDeviceRoute, + DashboardDisclaimerRoute: DashboardDisclaimerRoute, + DashboardFavoritesRoute: DashboardFavoritesRoute, + DashboardFilesRoute: DashboardFilesRoute, + DashboardHelpRoute: DashboardHelpRoute, + DashboardLogsRoute: DashboardLogsRoute, + DashboardNodesRoute: DashboardNodesRoute, + DashboardPeersRoute: DashboardPeersRoute, + DashboardPurchasesRoute: DashboardPurchasesRoute, + DashboardRequestsRoute: DashboardRequestsRoute, + DashboardSettingsRoute: DashboardSettingsRoute, + DashboardWalletRoute: DashboardWalletRoute, + DashboardPurchasesRoute: DashboardPurchasesRoute, + DashboardRequestsRoute: DashboardRequestsRoute, + DashboardSettingsRoute: DashboardSettingsRoute, + DashboardAvailabilitiesLazyRoute: DashboardAvailabilitiesLazyRoute, + DashboardPeersLazyRoute: DashboardPeersLazyRoute, + DashboardIndexRoute: DashboardIndexRoute, + } -const DashboardRouteWithChildren = DashboardRoute._addFileChildren( - DashboardRouteChildren, -) + const DashboardRouteWithChildren = DashboardRoute._addFileChildren( + DashboardRouteChildren, + ) -export interface FileRoutesByFullPath { - '/': typeof IndexRoute - '/dashboard': typeof DashboardRouteWithChildren - '/onboarding-checks': typeof OnboardingChecksRoute - '/onboarding-name': typeof OnboardingNameRoute - '/dashboard/about': typeof DashboardAboutRoute - '/dashboard/analytics': typeof DashboardAnalyticsRoute - '/dashboard/availabilities': typeof DashboardAvailabilitiesRoute - '/dashboard/device': typeof DashboardDeviceRoute - '/dashboard/disclaimer': typeof DashboardDisclaimerRoute - '/dashboard/favorites': typeof DashboardFavoritesRoute - '/dashboard/files': typeof DashboardFilesRoute - '/dashboard/help': typeof DashboardHelpRoute - '/dashboard/logs': typeof DashboardLogsRoute - '/dashboard/nodes': typeof DashboardNodesRoute - '/dashboard/peers': typeof DashboardPeersRoute - '/dashboard/purchases': typeof DashboardPurchasesRoute - '/dashboard/requests': typeof DashboardRequestsRoute - '/dashboard/settings': typeof DashboardSettingsRoute - '/dashboard/wallet': typeof DashboardWalletRoute - '/dashboard/': typeof DashboardIndexRoute -} + export interface FileRoutesByFullPath { + '/': typeof IndexRoute + '/dashboard': typeof DashboardRouteWithChildren + '/onboarding-checks': typeof OnboardingChecksRoute + '/onboarding-name': typeof OnboardingNameRoute + '/dashboard/about': typeof DashboardAboutRoute + '/dashboard/analytics': typeof DashboardAnalyticsRoute + '/dashboard/availabilities': typeof DashboardAvailabilitiesRoute + '/dashboard/device': typeof DashboardDeviceRoute + '/dashboard/disclaimer': typeof DashboardDisclaimerRoute + '/dashboard/favorites': typeof DashboardFavoritesRoute + '/dashboard/files': typeof DashboardFilesRoute + '/dashboard/help': typeof DashboardHelpRoute + '/dashboard/logs': typeof DashboardLogsRoute + '/dashboard/nodes': typeof DashboardNodesRoute + '/dashboard/peers': typeof DashboardPeersRoute + '/dashboard/purchases': typeof DashboardPurchasesRoute + '/dashboard/requests': typeof DashboardRequestsRoute + '/dashboard/settings': typeof DashboardSettingsRoute + '/dashboard/wallet': typeof DashboardWalletRoute + '/dashboard/purchases': typeof DashboardPurchasesRoute + '/dashboard/requests': typeof DashboardRequestsRoute + '/dashboard/settings': typeof DashboardSettingsRoute + '/dashboard/availabilities': typeof DashboardAvailabilitiesLazyRoute + '/dashboard/peers': typeof DashboardPeersLazyRoute + '/dashboard/': typeof DashboardIndexRoute + } -export interface FileRoutesByTo { - '/': typeof IndexRoute - '/onboarding-checks': typeof OnboardingChecksRoute - '/onboarding-name': typeof OnboardingNameRoute - '/dashboard/about': typeof DashboardAboutRoute - '/dashboard/analytics': typeof DashboardAnalyticsRoute - '/dashboard/availabilities': typeof DashboardAvailabilitiesRoute - '/dashboard/device': typeof DashboardDeviceRoute - '/dashboard/disclaimer': typeof DashboardDisclaimerRoute - '/dashboard/favorites': typeof DashboardFavoritesRoute - '/dashboard/files': typeof DashboardFilesRoute - '/dashboard/help': typeof DashboardHelpRoute - '/dashboard/logs': typeof DashboardLogsRoute - '/dashboard/nodes': typeof DashboardNodesRoute - '/dashboard/peers': typeof DashboardPeersRoute - '/dashboard/purchases': typeof DashboardPurchasesRoute - '/dashboard/requests': typeof DashboardRequestsRoute - '/dashboard/settings': typeof DashboardSettingsRoute - '/dashboard/wallet': typeof DashboardWalletRoute - '/dashboard': typeof DashboardIndexRoute -} + export interface FileRoutesByTo { + '/': typeof IndexRoute + '/onboarding-checks': typeof OnboardingChecksRoute + '/onboarding-name': typeof OnboardingNameRoute + '/dashboard/about': typeof DashboardAboutRoute + '/dashboard/analytics': typeof DashboardAnalyticsRoute + '/dashboard/availabilities': typeof DashboardAvailabilitiesRoute + '/dashboard/device': typeof DashboardDeviceRoute + '/dashboard/disclaimer': typeof DashboardDisclaimerRoute + '/dashboard/favorites': typeof DashboardFavoritesRoute + '/dashboard/files': typeof DashboardFilesRoute + '/dashboard/help': typeof DashboardHelpRoute + '/dashboard/logs': typeof DashboardLogsRoute + '/dashboard/nodes': typeof DashboardNodesRoute + '/dashboard/peers': typeof DashboardPeersRoute + '/dashboard/purchases': typeof DashboardPurchasesRoute + '/dashboard/requests': typeof DashboardRequestsRoute + '/dashboard/settings': typeof DashboardSettingsRoute + '/dashboard/wallet': typeof DashboardWalletRoute + '/dashboard/purchases': typeof DashboardPurchasesRoute + '/dashboard/requests': typeof DashboardRequestsRoute + '/dashboard/settings': typeof DashboardSettingsRoute + '/dashboard/availabilities': typeof DashboardAvailabilitiesLazyRoute + '/dashboard/peers': typeof DashboardPeersLazyRoute + '/dashboard': typeof DashboardIndexRoute + } -export interface FileRoutesById { - __root__: typeof rootRoute - '/': typeof IndexRoute - '/dashboard': typeof DashboardRouteWithChildren - '/onboarding-checks': typeof OnboardingChecksRoute - '/onboarding-name': typeof OnboardingNameRoute - '/dashboard/about': typeof DashboardAboutRoute - '/dashboard/analytics': typeof DashboardAnalyticsRoute - '/dashboard/availabilities': typeof DashboardAvailabilitiesRoute - '/dashboard/device': typeof DashboardDeviceRoute - '/dashboard/disclaimer': typeof DashboardDisclaimerRoute - '/dashboard/favorites': typeof DashboardFavoritesRoute - '/dashboard/files': typeof DashboardFilesRoute - '/dashboard/help': typeof DashboardHelpRoute - '/dashboard/logs': typeof DashboardLogsRoute - '/dashboard/nodes': typeof DashboardNodesRoute - '/dashboard/peers': typeof DashboardPeersRoute - '/dashboard/purchases': typeof DashboardPurchasesRoute - '/dashboard/requests': typeof DashboardRequestsRoute - '/dashboard/settings': typeof DashboardSettingsRoute - '/dashboard/wallet': typeof DashboardWalletRoute - '/dashboard/': typeof DashboardIndexRoute -} + export interface FileRoutesById { + __root__: typeof rootRoute + '/': typeof IndexRoute + '/dashboard': typeof DashboardRouteWithChildren + '/onboarding-checks': typeof OnboardingChecksRoute + '/onboarding-name': typeof OnboardingNameRoute + '/dashboard/about': typeof DashboardAboutRoute + '/dashboard/analytics': typeof DashboardAnalyticsRoute + '/dashboard/availabilities': typeof DashboardAvailabilitiesRoute + '/dashboard/device': typeof DashboardDeviceRoute + '/dashboard/disclaimer': typeof DashboardDisclaimerRoute + '/dashboard/favorites': typeof DashboardFavoritesRoute + '/dashboard/files': typeof DashboardFilesRoute + '/dashboard/help': typeof DashboardHelpRoute + '/dashboard/logs': typeof DashboardLogsRoute + '/dashboard/nodes': typeof DashboardNodesRoute + '/dashboard/peers': typeof DashboardPeersRoute + '/dashboard/purchases': typeof DashboardPurchasesRoute + '/dashboard/requests': typeof DashboardRequestsRoute + '/dashboard/settings': typeof DashboardSettingsRoute + '/dashboard/wallet': typeof DashboardWalletRoute + '/dashboard/purchases': typeof DashboardPurchasesRoute + '/dashboard/requests': typeof DashboardRequestsRoute + '/dashboard/settings': typeof DashboardSettingsRoute + '/dashboard/availabilities': typeof DashboardAvailabilitiesLazyRoute + '/dashboard/peers': typeof DashboardPeersLazyRoute + '/dashboard/': typeof DashboardIndexRoute + } -export interface FileRouteTypes { - fileRoutesByFullPath: FileRoutesByFullPath - fullPaths: + export interface FileRouteTypes { + fileRoutesByFullPath: FileRoutesByFullPath + fullPaths: | '/' | '/dashboard' | '/onboarding-checks' @@ -436,9 +498,14 @@ export interface FileRouteTypes { | '/dashboard/requests' | '/dashboard/settings' | '/dashboard/wallet' + | '/dashboard/purchases' + | '/dashboard/requests' + | '/dashboard/settings' + | '/dashboard/availabilities' + | '/dashboard/peers' | '/dashboard/' - fileRoutesByTo: FileRoutesByTo - to: + fileRoutesByTo: FileRoutesByTo + to: | '/' | '/onboarding-checks' | '/onboarding-name' @@ -457,8 +524,13 @@ export interface FileRouteTypes { | '/dashboard/requests' | '/dashboard/settings' | '/dashboard/wallet' + | '/dashboard/purchases' + | '/dashboard/requests' + | '/dashboard/settings' + | '/dashboard/availabilities' + | '/dashboard/peers' | '/dashboard' - id: + id: | '__root__' | '/' | '/dashboard' @@ -479,27 +551,32 @@ export interface FileRouteTypes { | '/dashboard/requests' | '/dashboard/settings' | '/dashboard/wallet' + | '/dashboard/purchases' + | '/dashboard/requests' + | '/dashboard/settings' + | '/dashboard/availabilities' + | '/dashboard/peers' | '/dashboard/' - fileRoutesById: FileRoutesById -} + fileRoutesById: FileRoutesById + } -export interface RootRouteChildren { - IndexRoute: typeof IndexRoute - DashboardRoute: typeof DashboardRouteWithChildren - OnboardingChecksRoute: typeof OnboardingChecksRoute - OnboardingNameRoute: typeof OnboardingNameRoute -} + export interface RootRouteChildren { + IndexRoute: typeof IndexRoute + DashboardRoute: typeof DashboardRouteWithChildren + OnboardingChecksRoute: typeof OnboardingChecksRoute + OnboardingNameRoute: typeof OnboardingNameRoute + } -const rootRouteChildren: RootRouteChildren = { - IndexRoute: IndexRoute, - DashboardRoute: DashboardRouteWithChildren, - OnboardingChecksRoute: OnboardingChecksRoute, - OnboardingNameRoute: OnboardingNameRoute, -} + const rootRouteChildren: RootRouteChildren = { + IndexRoute: IndexRoute, + DashboardRoute: DashboardRouteWithChildren, + OnboardingChecksRoute: OnboardingChecksRoute, + OnboardingNameRoute: OnboardingNameRoute, + } -export const routeTree = rootRoute - ._addFileChildren(rootRouteChildren) - ._addFileTypes() + export const routeTree = rootRoute + ._addFileChildren(rootRouteChildren) + ._addFileTypes() /* prettier-ignore-end */ @@ -536,6 +613,11 @@ export const routeTree = rootRoute "/dashboard/requests", "/dashboard/settings", "/dashboard/wallet", + "/dashboard/purchases", + "/dashboard/requests", + "/dashboard/settings", + "/dashboard/availabilities", + "/dashboard/peers", "/dashboard/" ] }, @@ -603,6 +685,12 @@ export const routeTree = rootRoute }, "/dashboard/wallet": { "filePath": "dashboard/wallet.tsx", + "/dashboard/availabilities": { + "filePath": "dashboard/availabilities.lazy.tsx", + "parent": "/dashboard" + }, + "/dashboard/peers": { + "filePath": "dashboard/peers.lazy.tsx", "parent": "/dashboard" }, "/dashboard/": { diff --git a/src/routes/dashboard/availabilities.tsx b/src/routes/dashboard/availabilities.lazy.tsx similarity index 69% rename from src/routes/dashboard/availabilities.tsx rename to src/routes/dashboard/availabilities.lazy.tsx index fe0a012..9fc66cb 100644 --- a/src/routes/dashboard/availabilities.tsx +++ b/src/routes/dashboard/availabilities.lazy.tsx @@ -1,30 +1,30 @@ -import { createFileRoute } from "@tanstack/react-router"; -import { ErrorBoundary } from "@sentry/react"; -import { ErrorPlaceholder } from "../../components/ErrorPlaceholder/ErrorPlaceholder"; +import { createLazyFileRoute } from '@tanstack/react-router' +import { ErrorBoundary } from '@sentry/react' +import { ErrorPlaceholder } from '../../components/ErrorPlaceholder/ErrorPlaceholder' import { SpaceAllocationItem, Spinner, -} from "@codex-storage/marketplace-ui-components"; -import { useQuery } from "@tanstack/react-query"; -import { Promises } from "../../utils/promises"; -import { CodexSdk } from "../../sdk/codex"; -import "./availabilities.css"; -import { AvailabilitiesTable } from "../../components/Availability/AvailabilitiesTable"; -import { AvailabilityEdit } from "../../components/Availability/AvailabilityEdit"; -import { Strings } from "../../utils/strings"; -import { PrettyBytes } from "../../utils/bytes"; -import { AvailabilitySunburst } from "../../components/Availability/AvailabilitySunburst"; -import { Errors } from "../../utils/errors"; -import { availabilityColors } from "../../components/Availability/availability.colors"; -import { AvailabilityStorage } from "../../utils/availabilities-storage"; -import { AvailabilityWithSlots } from "../../components/Availability/types"; +} from '@codex-storage/marketplace-ui-components' +import { useQuery } from '@tanstack/react-query' +import { Promises } from '../../utils/promises' +import { CodexSdk } from '../../sdk/codex' +import './availabilities.css' +import { AvailabilitiesTable } from '../../components/Availability/AvailabilitiesTable' +import { AvailabilityEdit } from '../../components/Availability/AvailabilityEdit' +import { Strings } from '../../utils/strings' +import { PrettyBytes } from '../../utils/bytes' +import { AvailabilitySunburst } from '../../components/Availability/AvailabilitySunburst' +import { Errors } from '../../utils/errors' +import { availabilityColors } from '../../components/Availability/availability.colors' +import { AvailabilityStorage } from '../../utils/availabilities-storage' +import { AvailabilityWithSlots } from '../../components/Availability/types' const defaultSpace = { quotaMaxBytes: 0, quotaReservedBytes: 0, quotaUsedBytes: 0, totalBlocks: 0, -}; +} export function Availabilities() { { @@ -44,22 +44,22 @@ export function Availabilities() { .reservations(a.id) .then((res) => { if (res.error) { - Errors.report(res); - return { ...a, slots: [] }; + Errors.report(res) + return { ...a, slots: [] } } - return { ...a, slots: res.data }; + return { ...a, slots: res.data } }) .then((data) => AvailabilityStorage.get(data.id).then((n) => ({ ...data, - name: n || "", - })) - ) - ) - ) + name: n || '', + })), + ), + ), + ), ), - queryKey: ["availabilities"], + queryKey: ['availabilities'], initialData: [], // .then((res) => @@ -79,7 +79,7 @@ export function Availabilities() { // Throw the error to the error boundary throwOnError: true, - }); + }) // Error will be catched in ErrorBounday const { data: space = defaultSpace } = useQuery({ @@ -87,7 +87,7 @@ export function Availabilities() { CodexSdk.data() .space() .then((s) => Promises.rejectOnError(s)), - queryKey: ["space"], + queryKey: ['space'], initialData: defaultSpace, // No need to retry because if the connection to the node @@ -104,24 +104,24 @@ export function Availabilities() { // Throw the error to the error boundary throwOnError: true, - }); + }) const allocation: SpaceAllocationItem[] = availabilities.map( (a, index) => ({ title: Strings.shortId(a.id), size: a.totalSize, - tooltip: a.id + "\u000D\u000A" + PrettyBytes(a.totalSize), + tooltip: a.id + '\u000D\u000A' + PrettyBytes(a.totalSize), color: availabilityColors[index], - }) - ); + }), + ) allocation.push({ - title: "Space remaining", + title: 'Space remaining', // TODO move this to domain size: space.quotaMaxBytes - space.quotaReservedBytes - space.quotaUsedBytes, - color: "transparent", - }); + color: 'transparent', + }) return (
@@ -135,7 +135,8 @@ export function Availabilities() {
+ space={space} + >
- ); + ) } } -export const Route = createFileRoute("/dashboard/availabilities")({ +export const Route = createLazyFileRoute('/dashboard/availabilities')({ component: () => ( ( - )}> + )} + > ), -}); +}) diff --git a/src/routes/dashboard/peers.tsx b/src/routes/dashboard/peers.lazy.tsx similarity index 97% rename from src/routes/dashboard/peers.tsx rename to src/routes/dashboard/peers.lazy.tsx index b423fb5..1c802cb 100644 --- a/src/routes/dashboard/peers.tsx +++ b/src/routes/dashboard/peers.lazy.tsx @@ -1,5 +1,4 @@ import { Cell, Row, Table } from "@codex-storage/marketplace-ui-components"; -import { createFileRoute } from "@tanstack/react-router"; import { getMapJSON } from "dotted-map"; import DottedMap from "dotted-map/without-countries"; import { Promises } from "../../utils/promises"; @@ -14,6 +13,7 @@ import { ErrorPlaceholder } from "../../components/ErrorPlaceholder/ErrorPlaceho import { PeersIcon } from "../../components/Menu/PeersIcon"; import { SuccessCheckIcon } from "../../components/SuccessCheckIcon/SuccessCheckIcon"; import { ErrorCircleIcon } from "../../components/ErrorCircleIcon/ErrorCircleIcon"; +import { createLazyFileRoute } from "@tanstack/react-router"; // This function accepts the same arguments as DottedMap in the example above. const mapJsonString = getMapJSON({ height: 60, grid: "diagonal" }); @@ -139,7 +139,7 @@ const Peers = () => { ); }; -export const Route = createFileRoute("/dashboard/peers")({ +export const Route = createLazyFileRoute("/dashboard/peers")({ component: () => ( ( diff --git a/vite.config.ts b/vite.config.ts index 991bd02..8e3dcff 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -12,6 +12,11 @@ export default defineConfig({ build: { sourcemap: true, rollupOptions: { + output: { + manualChunks: { + "@sentry/react": ["@sentry/react"], + } + }, onwarn(warning, defaultHandler) { if (warning.code === "SOURCEMAP_ERROR") { return;