From cdaa43646581d2a6c62d8c785ca425b80be8beba Mon Sep 17 00:00:00 2001 From: Nate Kelley Date: Tue, 19 Aug 2025 12:19:59 -0600 Subject: [PATCH] memo pass through --- .../metricChartServerAssetContext.tsx | 13 ----- .../metricIndexServerAssetContext.tsx | 9 +++- .../AppAssetCheckLayout.tsx | 54 ++++++++++--------- .../getAssetIdAndVersionNumberServer.ts | 0 .../useGetAssetPasswordConfig.ts | 0 .../AppAssetCheckLayout}/useShowLoader.ts | 0 .../layouts/AssetContainer/AssetContainer.tsx | 7 +++ .../AssetContainer/MetricAssetContainer.tsx | 13 +++++ apps/web-tss/src/routes/app/_app/_asset.tsx | 17 ++---- 9 files changed, 60 insertions(+), 53 deletions(-) rename apps/web-tss/src/{context/BusterAssets => layouts/AppAssetCheckLayout}/getAssetIdAndVersionNumberServer.ts (100%) rename apps/web-tss/src/{context/BusterAssets => layouts/AppAssetCheckLayout}/useGetAssetPasswordConfig.ts (100%) rename apps/web-tss/src/{context/BusterAssets => layouts/AppAssetCheckLayout}/useShowLoader.ts (100%) create mode 100644 apps/web-tss/src/layouts/AssetContainer/AssetContainer.tsx create mode 100644 apps/web-tss/src/layouts/AssetContainer/MetricAssetContainer.tsx diff --git a/apps/web-tss/src/context/BusterAssets/metric-server/metricChartServerAssetContext.tsx b/apps/web-tss/src/context/BusterAssets/metric-server/metricChartServerAssetContext.tsx index a5d5fa1a0..8d221ca6a 100644 --- a/apps/web-tss/src/context/BusterAssets/metric-server/metricChartServerAssetContext.tsx +++ b/apps/web-tss/src/context/BusterAssets/metric-server/metricChartServerAssetContext.tsx @@ -1,19 +1,6 @@ -import { - useChildMatches, - useLinkProps, - useLocation, - useMatch, - useMatchRoute, - useParams, - useParentMatches, - useSearch, - useStableCallback, -} from '@tanstack/react-router'; import { MetricViewChart } from '@/controllers/MetricController/MetricViewChart'; import { useGetMetricParams } from './useGetMetricParams'; -//const Route = getRouteApi('/app/_app/_asset/metrics/$metricId'); - export const component = () => { const { metricId, metric_version_number } = useGetMetricParams(); diff --git a/apps/web-tss/src/context/BusterAssets/metric-server/metricIndexServerAssetContext.tsx b/apps/web-tss/src/context/BusterAssets/metric-server/metricIndexServerAssetContext.tsx index c817245b3..271d70dad 100644 --- a/apps/web-tss/src/context/BusterAssets/metric-server/metricIndexServerAssetContext.tsx +++ b/apps/web-tss/src/context/BusterAssets/metric-server/metricIndexServerAssetContext.tsx @@ -3,7 +3,9 @@ import type { QueryClient } from '@tanstack/react-query'; import { Outlet, redirect } from '@tanstack/react-router'; import { z } from 'zod'; import { prefetchGetMetric } from '@/api/buster_rest/metrics'; +import { MetricAssetContainer } from '@/layouts/AssetContainer/MetricAssetContainer'; import type { FileRouteTypes } from '@/routeTree.gen'; +import { useGetMetricParams } from './useGetMetricParams'; export const validateSearch = z.object({ metric_version_number: z.coerce.number().optional(), @@ -69,5 +71,10 @@ export const head = ({ loaderData }: { loaderData?: { title: string | undefined }); export const component = () => { - return ; + const params = useGetMetricParams(); + return ( + + + + ); }; diff --git a/apps/web-tss/src/layouts/AppAssetCheckLayout/AppAssetCheckLayout.tsx b/apps/web-tss/src/layouts/AppAssetCheckLayout/AppAssetCheckLayout.tsx index 1ab615194..d47c67e33 100644 --- a/apps/web-tss/src/layouts/AppAssetCheckLayout/AppAssetCheckLayout.tsx +++ b/apps/web-tss/src/layouts/AppAssetCheckLayout/AppAssetCheckLayout.tsx @@ -1,48 +1,52 @@ import type { AssetType } from '@buster/server-shared/assets'; -import type { ShareAssetType } from '@buster/server-shared/share'; +import { useParams, useSearch } from '@tanstack/react-router'; import type React from 'react'; -import { useMemo } from 'react'; import { FileIndeterminateLoader } from '@/components/features/loaders/FileIndeterminateLoader'; import { AppNoPageAccess } from '@/controllers/AppNoPageAccess'; import { AppPasswordAccess } from '@/controllers/AppPasswordAccess'; -import { useShowLoader } from '../../context/BusterAssets/useShowLoader'; +import { getAssetIdAndVersionNumber } from './getAssetIdAndVersionNumberServer'; +import { useGetAssetPasswordConfig } from './useGetAssetPasswordConfig'; +import { useShowLoader } from './useShowLoader'; export type AppAssetCheckLayoutProps = { - assetId: string; - type: AssetType; - versionNumber: undefined | number; - passwordRequired: boolean; - isPublic: boolean; - hasAccess: boolean; + assetType: AssetType; }; export const AppAssetCheckLayout: React.FC< { children: React.ReactNode; } & AppAssetCheckLayoutProps -> = ({ children, assetId, type, versionNumber, passwordRequired, isPublic, hasAccess }) => { - const showLoader = useShowLoader(assetId, type, versionNumber); +> = ({ children, assetType }) => { + const params = useParams({ strict: false }); + const search = useSearch({ strict: false }); - const Component = useMemo(() => { - if (!hasAccess && !isPublic) { - return ; - } + const { assetId, versionNumber } = getAssetIdAndVersionNumber(assetType, params, search); - if (isPublic && passwordRequired) { - return ( - - {children} - - ); - } + const { hasAccess, isPublic, passwordRequired } = useGetAssetPasswordConfig( + assetId, + assetType, + versionNumber + ); - return <>{children}; - }, [hasAccess, isPublic, passwordRequired, assetId, type, children]); + const showLoader = useShowLoader(assetId, assetType, versionNumber); + + let content: React.ReactNode; + if (!hasAccess && !isPublic) { + content = ; + } else if (isPublic && passwordRequired) { + content = ( + + {children} + + ); + } else { + content = children; + } return ( <> {showLoader && } - {Component} + {content} ); }; diff --git a/apps/web-tss/src/context/BusterAssets/getAssetIdAndVersionNumberServer.ts b/apps/web-tss/src/layouts/AppAssetCheckLayout/getAssetIdAndVersionNumberServer.ts similarity index 100% rename from apps/web-tss/src/context/BusterAssets/getAssetIdAndVersionNumberServer.ts rename to apps/web-tss/src/layouts/AppAssetCheckLayout/getAssetIdAndVersionNumberServer.ts diff --git a/apps/web-tss/src/context/BusterAssets/useGetAssetPasswordConfig.ts b/apps/web-tss/src/layouts/AppAssetCheckLayout/useGetAssetPasswordConfig.ts similarity index 100% rename from apps/web-tss/src/context/BusterAssets/useGetAssetPasswordConfig.ts rename to apps/web-tss/src/layouts/AppAssetCheckLayout/useGetAssetPasswordConfig.ts diff --git a/apps/web-tss/src/context/BusterAssets/useShowLoader.ts b/apps/web-tss/src/layouts/AppAssetCheckLayout/useShowLoader.ts similarity index 100% rename from apps/web-tss/src/context/BusterAssets/useShowLoader.ts rename to apps/web-tss/src/layouts/AppAssetCheckLayout/useShowLoader.ts diff --git a/apps/web-tss/src/layouts/AssetContainer/AssetContainer.tsx b/apps/web-tss/src/layouts/AssetContainer/AssetContainer.tsx new file mode 100644 index 000000000..b2695f6a5 --- /dev/null +++ b/apps/web-tss/src/layouts/AssetContainer/AssetContainer.tsx @@ -0,0 +1,7 @@ +import type React from 'react'; + +export const AssetContainer: React.FC<{ + children: React.ReactNode; +}> = ({ children }) => { + return
{children}
; +}; diff --git a/apps/web-tss/src/layouts/AssetContainer/MetricAssetContainer.tsx b/apps/web-tss/src/layouts/AssetContainer/MetricAssetContainer.tsx new file mode 100644 index 000000000..1cc178804 --- /dev/null +++ b/apps/web-tss/src/layouts/AssetContainer/MetricAssetContainer.tsx @@ -0,0 +1,13 @@ +import { AssetContainer } from './AssetContainer'; + +export const MetricAssetContainer: React.FC<{ + children: React.ReactNode; + metricId: string; + metric_version_number: number | undefined; +}> = ({ children, metricId, metric_version_number }) => { + return ( + + METRIC {children} {metricId} {metric_version_number} + + ); +}; diff --git a/apps/web-tss/src/routes/app/_app/_asset.tsx b/apps/web-tss/src/routes/app/_app/_asset.tsx index ee90783bb..0c395cb8d 100644 --- a/apps/web-tss/src/routes/app/_app/_asset.tsx +++ b/apps/web-tss/src/routes/app/_app/_asset.tsx @@ -7,9 +7,9 @@ import { useSearch, } from '@tanstack/react-router'; import { getTitle as getAssetTitle } from '@/api/buster_rest/title'; -import { getAssetIdAndVersionNumber } from '@/context/BusterAssets/getAssetIdAndVersionNumberServer'; -import { useGetAssetPasswordConfig } from '@/context/BusterAssets/useGetAssetPasswordConfig'; import { AppAssetCheckLayout, type AppAssetCheckLayoutProps } from '@/layouts/AppAssetCheckLayout'; +import { getAssetIdAndVersionNumber } from '@/layouts/AppAssetCheckLayout/getAssetIdAndVersionNumberServer'; +import { useGetAssetPasswordConfig } from '@/layouts/AppAssetCheckLayout/useGetAssetPasswordConfig'; export const Route = createFileRoute('/app/_app/_asset')({ component: RouteComponent, @@ -27,20 +27,9 @@ export const Route = createFileRoute('/app/_app/_asset')({ const stableCtxSelector = (ctx: RouteContext) => ctx.assetType; function RouteComponent() { const assetType = Route.useRouteContext({ select: stableCtxSelector }) || 'metric'; - const params = useParams({ strict: false }); - const search = useSearch({ strict: false }); - const { assetId, versionNumber } = getAssetIdAndVersionNumber(assetType, params, search); - const passwordConfig = useGetAssetPasswordConfig(assetId, assetType, versionNumber); - - const containerParams: AppAssetCheckLayoutProps = { - assetId, - type: assetType, - versionNumber, - ...passwordConfig, - }; return ( - + );