replace custom hook with useParams (#7863)

packages/web/app/src/components/layouts/target.tsx

@@ -1,4 +1,4 @@
-import { createContext, ReactElement, ReactNode, useContext, useMemo, useState } from 'react';
+import { ReactElement, ReactNode, useMemo, useState } from 'react';
 import { LinkIcon } from 'lucide-react';
 import { useQuery } from 'urql';
 import { Header } from '@/components/navigation/header';
@@ -47,42 +47,6 @@ export enum Page {
   Settings = 'settings',
 }
 
-type TargetReference = {
-  organizationSlug: string;
-  projectSlug: string;
-  targetSlug: string;
-};
-
-const TargetReferenceContext = createContext<TargetReference | undefined>(undefined);
-
-type TargetReferenceProviderProps = {
-  children: ReactNode;
-  organizationSlug: string;
-  projectSlug: string;
-  targetSlug: string;
-};
-
-export const TargetReferenceProvider = ({
-  children,
-  organizationSlug,
-  projectSlug,
-  targetSlug,
-}: TargetReferenceProviderProps) => {
-  return (
-    <TargetReferenceContext.Provider value={{ organizationSlug, projectSlug, targetSlug }}>
-      {children}
-    </TargetReferenceContext.Provider>
-  );
-};
-
-export const useTargetReference = () => {
-  const context = useContext(TargetReferenceContext);
-  if (!context) {
-    throw new Error('useTargetReference must be used within a TargetReferenceProvider');
-  }
-  return context;
-};
-
 const TargetLayoutQuery = graphql(`
   query TargetLayoutQuery($organizationSlug: String!, $projectSlug: String!, $targetSlug: String!) {
     me {
@@ -157,11 +121,7 @@ export const TargetLayout = ({
   useLastVisitedOrganizationWriter(currentOrganization?.slug);
 
   return (
-    <TargetReferenceProvider
-      organizationSlug={organizationSlug}
-      projectSlug={projectSlug}
-      targetSlug={targetSlug}
-    >
+    <>
       <Header>
         <div className="flex flex-row items-center gap-4">
           <HiveLink className="size-8" />
@@ -291,7 +251,7 @@ export const TargetLayout = ({
           <div className={cn('min-h-(--content-height) container pb-7', className)}>{children}</div>
         </>
       )}
-    </TargetReferenceProvider>
+    </>
   );
 };
 

packages/web/app/src/pages/target-traces.tsx

@@ -23,7 +23,6 @@ import {
 import { Bar, BarChart, ReferenceArea, XAxis } from 'recharts';
 import { useClient, useQuery } from 'urql';
 import { z } from 'zod';
-import { Page, TargetLayout, useTargetReference } from '@/components/layouts/target';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import {
@@ -34,7 +33,6 @@ import {
 } from '@/components/ui/chart';
 import { CopyIconButton } from '@/components/ui/copy-icon-button';
 import { DateRangePicker, Preset, presetLast7Days } from '@/components/ui/date-range-picker';
-import { Meta } from '@/components/ui/meta';
 import { SubPageLayoutHeader } from '@/components/ui/page-content-layout';
 import { QueryError } from '@/components/ui/query-error';
 import {
@@ -65,7 +63,7 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/comp
 import { FragmentType, graphql, useFragment } from '@/gql';
 import { useDateRangeController } from '@/lib/hooks/use-date-range-controller';
 import { cn } from '@/lib/utils';
-import { Link, useNavigate, useRouter } from '@tanstack/react-router';
+import { Link, useNavigate, useParams, useRouter } from '@tanstack/react-router';
 import {
   flexRender,
   getCoreRowModel,
@@ -310,7 +308,9 @@ const TracesList = memo(function TracesList(
     [router],
   );
 
-  const targetRef = useTargetReference();
+  const targetRef = useParams({
+    from: '/authenticated/$organizationSlug/$projectSlug/$targetSlug/traces',
+  });
   const table = useReactTable({
     data,
     columns: [
@@ -1103,13 +1103,15 @@ const TargetTracesFetchMoreTracesQuery = graphql(`
   }
 `);
 
-function TargetTracesPageContent(
+export function TargetTracesPageContent(
   props: SortProps &
     FilterProps & {
       range: Preset['range'] | null;
     },
 ) {
-  const targetRef = useTargetReference();
+  const targetRef = useParams({
+    from: '/authenticated/$organizationSlug/$projectSlug/$targetSlug/traces',
+  });
 
   const dateRangeController = useDateRangeController({
     // TODO: ressolve retention from account
@@ -1390,34 +1392,6 @@ function TargetTracesPageContent(
   );
 }
 
-export function TargetTracesPage(
-  props: {
-    organizationSlug: string;
-    projectSlug: string;
-    targetSlug: string;
-    range: Preset['range'] | null;
-  } & SortProps &
-    FilterProps,
-) {
-  return (
-    <>
-      <Meta title="Traces" />
-      <TargetLayout
-        organizationSlug={props.organizationSlug}
-        projectSlug={props.projectSlug}
-        targetSlug={props.targetSlug}
-        page={Page.Traces}
-      >
-        <TargetTracesPageContent
-          sorting={props.sorting}
-          filter={props.filter}
-          range={props.range}
-        />
-      </TargetLayout>
-    </>
-  );
-}
-
 function GridTable(props: {
   rows: Array<{
     key: string;

packages/web/app/src/router.tsx

@@ -28,6 +28,8 @@ import {
 import { ErrorComponent } from './components/error';
 import { NotFound } from './components/not-found';
 import 'react-toastify/dist/ReactToastify.css';
+import { Page, TargetLayout } from '@/components/layouts/target';
+import { Meta } from '@/components/ui/meta';
 import { useLocalStorage } from '@/lib/hooks';
 import { zodValidator } from '@tanstack/zod-adapter';
 import { authenticated } from './components/authenticated-container';
@@ -90,7 +92,7 @@ import { TargetTracePage } from './pages/target-trace';
 import {
   FilterState,
   TargetTracesFilterState,
-  TargetTracesPage,
+  TargetTracesPageContent,
   TargetTracesSort,
 } from './pages/target-traces';
 
@@ -785,14 +787,17 @@ const targetTracesRoute = createRoute({
     const range = useMemo(() => (from && to ? { from, to } : null), [from, to]);
 
     return (
-      <TargetTracesPage
-        organizationSlug={organizationSlug}
-        projectSlug={projectSlug}
-        targetSlug={targetSlug}
-        sorting={sort}
-        filter={filter}
-        range={range}
-      />
+      <>
+        <Meta title="Traces" />
+        <TargetLayout
+          organizationSlug={organizationSlug}
+          projectSlug={projectSlug}
+          targetSlug={targetSlug}
+          page={Page.Traces}
+        >
+          <TargetTracesPageContent sorting={sort} filter={filter} range={range} />
+        </TargetLayout>
+      </>
     );
   },
 });