codex-storage/codex-marketplace-ui
1
0
Fork 0
mirror of https://github.com/codex-storage/codex-marketplace-ui.git synced 2025-02-23 21:28:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve code splitting

Browse Source
This commit is contained in:
Arnaud 2024-10-24 15:08:20 +02:00
parent fecc7a55e3
commit 39badaaf14
No known key found for this signature in database
GPG Key ID: 69D6CE281FCAE663
4 changed files with 152 additions and 136 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

120
src/routeTree.gen.ts
View File

@ -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'
@ -17,13 +19,18 @@ import { Route as DashboardIndexImport } from './routes/dashboard/index'
import { Route as DashboardSettingsImport } from './routes/dashboard/settings'
import { Route as DashboardRequestsImport } from './routes/dashboard/requests'
import { Route as DashboardPurchasesImport } from './routes/dashboard/purchases'
import { Route as DashboardPeersImport } from './routes/dashboard/peers'
import { Route as DashboardHelpImport } from './routes/dashboard/help'
import { Route as DashboardFavoritesImport } from './routes/dashboard/favorites'
import { Route as DashboardDisclaimerImport } from './routes/dashboard/disclaimer'
import { Route as DashboardAvailabilitiesImport } from './routes/dashboard/availabilities'
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 DashboardRoute = DashboardImport.update({
@ -44,6 +51,23 @@ const DashboardIndexRoute = DashboardIndexImport.update({
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',
path: '/settings',
@ -62,12 +86,6 @@ const DashboardPurchasesRoute = DashboardPurchasesImport.update({
getParentRoute: () => DashboardRoute,
} as any)
const DashboardPeersRoute = DashboardPeersImport.update({
id: '/peers',
path: '/peers',
getParentRoute: () => DashboardRoute,
} as any)
const DashboardHelpRoute = DashboardHelpImport.update({
id: '/help',
path: '/help',
@ -86,12 +104,6 @@ const DashboardDisclaimerRoute = DashboardDisclaimerImport.update({
getParentRoute: () => DashboardRoute,
} as any)
const DashboardAvailabilitiesRoute = DashboardAvailabilitiesImport.update({
id: '/availabilities',
path: '/availabilities',
getParentRoute: () => DashboardRoute,
} as any)
const DashboardAboutRoute = DashboardAboutImport.update({
id: '/about',
path: '/about',
@ -123,13 +135,6 @@ declare module '@tanstack/react-router' {
preLoaderRoute: typeof DashboardAboutImport
parentRoute: typeof DashboardImport
}
'/dashboard/availabilities': {
id: '/dashboard/availabilities'
path: '/availabilities'
fullPath: '/dashboard/availabilities'
preLoaderRoute: typeof DashboardAvailabilitiesImport
parentRoute: typeof DashboardImport
}
'/dashboard/disclaimer': {
id: '/dashboard/disclaimer'
path: '/disclaimer'
@ -151,13 +156,6 @@ declare module '@tanstack/react-router' {
preLoaderRoute: typeof DashboardHelpImport
parentRoute: typeof DashboardImport
}
'/dashboard/peers': {
id: '/dashboard/peers'
path: '/peers'
fullPath: '/dashboard/peers'
preLoaderRoute: typeof DashboardPeersImport
parentRoute: typeof DashboardImport
}
'/dashboard/purchases': {
id: '/dashboard/purchases'
path: '/purchases'
@ -179,6 +177,20 @@ declare module '@tanstack/react-router' {
preLoaderRoute: typeof DashboardSettingsImport
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: '/'
@ -193,27 +205,27 @@ declare module '@tanstack/react-router' {
interface DashboardRouteChildren {
DashboardAboutRoute: typeof DashboardAboutRoute
DashboardAvailabilitiesRoute: typeof DashboardAvailabilitiesRoute
DashboardDisclaimerRoute: typeof DashboardDisclaimerRoute
DashboardFavoritesRoute: typeof DashboardFavoritesRoute
DashboardHelpRoute: typeof DashboardHelpRoute
DashboardPeersRoute: typeof DashboardPeersRoute
DashboardPurchasesRoute: typeof DashboardPurchasesRoute
DashboardRequestsRoute: typeof DashboardRequestsRoute
DashboardSettingsRoute: typeof DashboardSettingsRoute
DashboardAvailabilitiesLazyRoute: typeof DashboardAvailabilitiesLazyRoute
DashboardPeersLazyRoute: typeof DashboardPeersLazyRoute
DashboardIndexRoute: typeof DashboardIndexRoute
}
const DashboardRouteChildren: DashboardRouteChildren = {
DashboardAboutRoute: DashboardAboutRoute,
DashboardAvailabilitiesRoute: DashboardAvailabilitiesRoute,
DashboardDisclaimerRoute: DashboardDisclaimerRoute,
DashboardFavoritesRoute: DashboardFavoritesRoute,
DashboardHelpRoute: DashboardHelpRoute,
DashboardPeersRoute: DashboardPeersRoute,
DashboardPurchasesRoute: DashboardPurchasesRoute,
DashboardRequestsRoute: DashboardRequestsRoute,
DashboardSettingsRoute: DashboardSettingsRoute,
DashboardAvailabilitiesLazyRoute: DashboardAvailabilitiesLazyRoute,
DashboardPeersLazyRoute: DashboardPeersLazyRoute,
DashboardIndexRoute: DashboardIndexRoute,
}
@ -225,28 +237,28 @@ export interface FileRoutesByFullPath {
'/': typeof IndexRoute
'/dashboard': typeof DashboardRouteWithChildren
'/dashboard/about': typeof DashboardAboutRoute
'/dashboard/availabilities': typeof DashboardAvailabilitiesRoute
'/dashboard/disclaimer': typeof DashboardDisclaimerRoute
'/dashboard/favorites': typeof DashboardFavoritesRoute
'/dashboard/help': typeof DashboardHelpRoute
'/dashboard/peers': typeof DashboardPeersRoute
'/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
'/dashboard/about': typeof DashboardAboutRoute
'/dashboard/availabilities': typeof DashboardAvailabilitiesRoute
'/dashboard/disclaimer': typeof DashboardDisclaimerRoute
'/dashboard/favorites': typeof DashboardFavoritesRoute
'/dashboard/help': typeof DashboardHelpRoute
'/dashboard/peers': typeof DashboardPeersRoute
'/dashboard/purchases': typeof DashboardPurchasesRoute
'/dashboard/requests': typeof DashboardRequestsRoute
'/dashboard/settings': typeof DashboardSettingsRoute
'/dashboard/availabilities': typeof DashboardAvailabilitiesLazyRoute
'/dashboard/peers': typeof DashboardPeersLazyRoute
'/dashboard': typeof DashboardIndexRoute
}
@ -255,14 +267,14 @@ export interface FileRoutesById {
'/': typeof IndexRoute
'/dashboard': typeof DashboardRouteWithChildren
'/dashboard/about': typeof DashboardAboutRoute
'/dashboard/availabilities': typeof DashboardAvailabilitiesRoute
'/dashboard/disclaimer': typeof DashboardDisclaimerRoute
'/dashboard/favorites': typeof DashboardFavoritesRoute
'/dashboard/help': typeof DashboardHelpRoute
'/dashboard/peers': typeof DashboardPeersRoute
'/dashboard/purchases': typeof DashboardPurchasesRoute
'/dashboard/requests': typeof DashboardRequestsRoute
'/dashboard/settings': typeof DashboardSettingsRoute
'/dashboard/availabilities': typeof DashboardAvailabilitiesLazyRoute
'/dashboard/peers': typeof DashboardPeersLazyRoute
'/dashboard/': typeof DashboardIndexRoute
}
@ -272,41 +284,41 @@ export interface FileRouteTypes {
| '/'
| '/dashboard'
| '/dashboard/about'
| '/dashboard/availabilities'
| '/dashboard/disclaimer'
| '/dashboard/favorites'
| '/dashboard/help'
| '/dashboard/peers'
| '/dashboard/purchases'
| '/dashboard/requests'
| '/dashboard/settings'
| '/dashboard/availabilities'
| '/dashboard/peers'
| '/dashboard/'
fileRoutesByTo: FileRoutesByTo
to:
| '/'
| '/dashboard/about'
| '/dashboard/availabilities'
| '/dashboard/disclaimer'
| '/dashboard/favorites'
| '/dashboard/help'
| '/dashboard/peers'
| '/dashboard/purchases'
| '/dashboard/requests'
| '/dashboard/settings'
| '/dashboard/availabilities'
| '/dashboard/peers'
| '/dashboard'
id:
| '__root__'
| '/'
| '/dashboard'
| '/dashboard/about'
| '/dashboard/availabilities'
| '/dashboard/disclaimer'
| '/dashboard/favorites'
| '/dashboard/help'
| '/dashboard/peers'
| '/dashboard/purchases'
| '/dashboard/requests'
| '/dashboard/settings'
| '/dashboard/availabilities'
| '/dashboard/peers'
| '/dashboard/'
fileRoutesById: FileRoutesById
}
@ -344,14 +356,14 @@ export const routeTree = rootRoute
"filePath": "dashboard.tsx",
"children": [
"/dashboard/about",
"/dashboard/availabilities",
"/dashboard/disclaimer",
"/dashboard/favorites",
"/dashboard/help",
"/dashboard/peers",
"/dashboard/purchases",
"/dashboard/requests",
"/dashboard/settings",
"/dashboard/availabilities",
"/dashboard/peers",
"/dashboard/"
]
},
@ -359,10 +371,6 @@ export const routeTree = rootRoute
"filePath": "dashboard/about.tsx",
"parent": "/dashboard"
},
"/dashboard/availabilities": {
"filePath": "dashboard/availabilities.tsx",
"parent": "/dashboard"
},
"/dashboard/disclaimer": {
"filePath": "dashboard/disclaimer.tsx",
"parent": "/dashboard"
@ -375,10 +383,6 @@ export const routeTree = rootRoute
"filePath": "dashboard/help.tsx",
"parent": "/dashboard"
},
"/dashboard/peers": {
"filePath": "dashboard/peers.tsx",
"parent": "/dashboard"
},
"/dashboard/purchases": {
"filePath": "dashboard/purchases.tsx",
"parent": "/dashboard"
@ -391,6 +395,14 @@ export const routeTree = rootRoute
"filePath": "dashboard/settings.tsx",
"parent": "/dashboard"
},
"/dashboard/availabilities": {
"filePath": "dashboard/availabilities.lazy.tsx",
"parent": "/dashboard"
},
"/dashboard/peers": {
"filePath": "dashboard/peers.lazy.tsx",
"parent": "/dashboard"
},
"/dashboard/": {
"filePath": "dashboard/index.tsx",
"parent": "/dashboard"

84
src/routes/dashboard/availabilities.tsx → src/routes/dashboard/availabilities.lazy.tsx
View File

@ -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 (
<div className="container">
@ -135,7 +135,8 @@ export function Availabilities() {
<div className="availabilities-header">
<AvailabilitySunburst
availabilities={availabilities}
space={space}></AvailabilitySunburst>
space={space}
></AvailabilitySunburst>
<AvailabilityEdit
space={space}
@ -155,17 +156,18 @@ export function Availabilities() {
)}
</div>
</div>
);
)
}
}
export const Route = createFileRoute("/dashboard/availabilities")({
export const Route = createLazyFileRoute('/dashboard/availabilities')({
component: () => (
<ErrorBoundary
fallback={({ error }) => (
<ErrorPlaceholder error={error} subtitle="Cannot retrieve the data." />
)}>
)}
>
<Availabilities />
</ErrorBoundary>
),
});
})

82
src/routes/dashboard/peers.tsx → src/routes/dashboard/peers.lazy.tsx
View File

@ -1,28 +1,28 @@
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";
import { useQuery } from "@tanstack/react-query";
import { PeerCountryCell } from "../../components/Peers/PeerCountryCell";
import { useCallback, useState } from "react";
import { PeerPin } from "../../components/Peers/types";
import "./peers.css";
import { CodexSdk } from "../../sdk/codex";
import { ErrorBoundary } from "@sentry/react";
import { ErrorPlaceholder } from "../../components/ErrorPlaceholder/ErrorPlaceholder";
import { Cell, Row, Table } from '@codex-storage/marketplace-ui-components'
import { createLazyFileRoute } from '@tanstack/react-router'
import { getMapJSON } from 'dotted-map'
import DottedMap from 'dotted-map/without-countries'
import { Promises } from '../../utils/promises'
import { useQuery } from '@tanstack/react-query'
import { PeerCountryCell } from '../../components/Peers/PeerCountryCell'
import { useCallback, useState } from 'react'
import { PeerPin } from '../../components/Peers/types'
import './peers.css'
import { CodexSdk } from '../../sdk/codex'
import { ErrorBoundary } from '@sentry/react'
import { ErrorPlaceholder } from '../../components/ErrorPlaceholder/ErrorPlaceholder'
// This function accepts the same arguments as DottedMap in the example above.
const mapJsonString = getMapJSON({ height: 60, grid: "diagonal" });
const mapJsonString = getMapJSON({ height: 60, grid: 'diagonal' })
const Peers = () => {
const [pins, setPins] = useState<[PeerPin, number][]>([]);
const [pins, setPins] = useState<[PeerPin, number][]>([])
const { data } = useQuery({
queryFn: () =>
CodexSdk.debug()
.info()
.then((s) => Promises.rejectOnError(s)),
queryKey: ["debug"],
queryKey: ['debug'],
// No need to retry because if the connection to the node
// is back again, all the queries will be invalidated.
@ -38,36 +38,36 @@ const Peers = () => {
// Throw the error to the error boundary
throwOnError: true,
});
})
const onPinAdd = useCallback((pin: PeerPin) => {
setPins((val) => {
const [, quantity = 0] =
val.find(([p]) => p.lat === pin.lat && p.lng == pin.lng) || [];
return [...val, [pin, quantity + 1]];
});
}, []);
val.find(([p]) => p.lat === pin.lat && p.lng == pin.lng) || []
return [...val, [pin, quantity + 1]]
})
}, [])
// It’s safe to re-create the map at each render, because of the
// pre-computation it’s super fast ⚡️
const map = new DottedMap({ map: JSON.parse(mapJsonString) });
const map = new DottedMap({ map: JSON.parse(mapJsonString) })
pins.map(([pin, quantity]) =>
map.addPin({
lat: pin.lat,
lng: pin.lng,
svgOptions: { color: "#d6ff79", radius: 0.8 * quantity },
})
);
svgOptions: { color: '#d6ff79', radius: 0.8 * quantity },
}),
)
const svgMap = map.getSVG({
radius: 0.42,
color: "#423B38",
shape: "circle",
backgroundColor: "#020300",
});
color: '#423B38',
shape: 'circle',
backgroundColor: '#020300',
})
const headers = ["Country", "PeerId", "Active"];
const headers = ['Country', 'PeerId', 'Active']
const rows =
(data?.table?.nodes || []).map((node) => (
@ -75,7 +75,8 @@ const Peers = () => {
cells={[
<PeerCountryCell
onPinAdd={onPinAdd}
address={node.address}></PeerCountryCell>,
address={node.address}
></PeerCountryCell>,
<Cell>{node.peerId}</Cell>,
<Cell>
{node.seen ? (
@ -84,8 +85,9 @@ const Peers = () => {
<div className="networkIndicator-point networkIndicator-point--offline"></div>
)}
</Cell>,
]}></Row>
)) || [];
]}
></Row>
)) || []
return (
<div className="peers">
@ -96,20 +98,22 @@ const Peers = () => {
<div
className="peers-map"
dangerouslySetInnerHTML={{ __html: svgMap }}></div>
dangerouslySetInnerHTML={{ __html: svgMap }}
></div>
<Table headers={headers} rows={rows} className="peers-table" />
</div>
);
};
)
}
export const Route = createFileRoute("/dashboard/peers")({
export const Route = createLazyFileRoute('/dashboard/peers')({
component: () => (
<ErrorBoundary
fallback={({ error }) => (
<ErrorPlaceholder error={error} subtitle="Cannot retrieve the data." />
)}>
)}
>
<Peers />
</ErrorBoundary>
),
});
})

2
vite.config.ts
View File

@ -14,8 +14,6 @@ export default defineConfig({
rollupOptions: {
output: {
manualChunks: {
echarts: ['echarts'],
"dotted-map": ["dotted-map"],
"@sentry/react": ["@sentry/react"],
}
},