refactor: useDeployment hook usage

web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/[deploymentId]/(overview)/components/sections/deployment-domains-section.tsx

@@ -8,9 +8,9 @@ import { DomainRow, DomainRowSkeleton } from "../../../../../details/domain-row"
 import { useDeployment } from "../../../layout-provider";
 
 export function DeploymentDomainsSection() {
-  const { deploymentId } = useDeployment();
+  const { deployment } = useDeployment();
   const { getDomainsForDeployment, isDomainsLoading } = useProjectData();
-  const domains = getDomainsForDeployment(deploymentId);
+  const domains = getDomainsForDeployment(deployment.id);
   return (
     <Section>
       <SectionHeader

web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/[deploymentId]/(overview)/components/sections/deployment-info-section.tsx

@@ -8,17 +8,13 @@ import { DisabledWrapper } from "../../../../../../components/disabled-wrapper";
 import { InfoChip } from "../../../../../../components/info-chip";
 import { RegionFlags } from "../../../../../../components/region-flags";
 import { Section, SectionHeader } from "../../../../../../components/section";
-import { useProjectData } from "../../../../../data-provider";
 import { useProjectLayout } from "../../../../../layout-provider";
 import { useDeployment } from "../../../layout-provider";
 
 export function DeploymentInfoSection() {
-  const { deploymentId } = useDeployment();
-  const { getDeploymentById } = useProjectData();
+  const { deployment } = useDeployment();
   const { setIsDetailsOpen, isDetailsOpen } = useProjectLayout();
-
-  const deployment = getDeploymentById(deploymentId);
-  const deploymentStatus = deployment?.status;
+  const deploymentStatus = deployment.status;
 
   return (
     <Section>
@@ -27,7 +23,7 @@ export function DeploymentInfoSection() {
         title="Deployment"
       />
       <ActiveDeploymentCard
-        deploymentId={deploymentId}
+        deploymentId={deployment.id}
         trailingContent={
           <div className="flex gap-1.5 items-center">
             <DisabledWrapper
@@ -50,7 +46,7 @@ export function DeploymentInfoSection() {
                 </div>
               </InfoChip>
             </DisabledWrapper>
-            <RegionFlags instances={deployment?.instances ?? []} />
+            <RegionFlags instances={deployment.instances} />
             <InfoTooltip asChild content="Show deployment details">
               <Button
                 variant="ghost"

web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/[deploymentId]/(overview)/components/sections/deployment-network-section.tsx

@@ -14,11 +14,11 @@ import { MetricCard } from "../metrics/metric-card";
 export function DeploymentNetworkSection() {
   const [latencyPercentile, setLatencyPercentile] = useState<keyof typeof PERCENTILE_VALUES>("p50");
 
-  const { deploymentId } = useDeployment();
+  const { deployment } = useDeployment();
 
-  const { currentRps, timeseries: rpsTimeseries } = useDeploymentRps(deploymentId);
+  const { currentRps, timeseries: rpsTimeseries } = useDeploymentRps(deployment.id);
   const { currentLatency, timeseries: latencyTimeseries } = useDeploymentLatency(
-    deploymentId,
+    deployment.id,
     latencyPercentile,
   );
 

web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/[deploymentId]/(overview)/components/sections/deployment-progress-section.tsx

@@ -12,10 +12,10 @@ import { DeploymentBuildStepsTable } from "../table/deployment-build-steps-table
 import { DeploymentInfoSection } from "./deployment-info-section";
 
 export function DeploymentProgressSection() {
-  const { deploymentId } = useDeployment();
+  const { deployment } = useDeployment();
   const steps = trpc.deploy.deployment.steps.useQuery(
     {
-      deploymentId,
+      deploymentId: deployment.id,
     },
     {
       refetchInterval: 1_000,
@@ -24,7 +24,7 @@ export function DeploymentProgressSection() {
 
   const buildSteps = trpc.deploy.deployment.buildSteps.useQuery(
     {
-      deploymentId,
+      deploymentId: deployment.id,
     },
     {
       refetchInterval: 1000,

web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/[deploymentId]/(overview)/components/table/hooks/use-deployment-sentinel-logs-query.ts

@@ -1,27 +1,21 @@
 import { trpc } from "@/lib/trpc/client";
-import { useProjectData } from "../../../../../../data-provider";
 import { useDeployment } from "../../../../layout-provider";
 
 export function useDeploymentSentinelLogsQuery() {
-  const { deploymentId } = useDeployment();
-  const { getDeploymentById, projectId } = useProjectData();
-
-  const deployment = getDeploymentById(deploymentId);
-  const environmentId = deployment?.environmentId ?? "";
+  const { deployment } = useDeployment();
 
   const { data, isLoading, error } = trpc.deploy.sentinelLogs.query.useInfiniteQuery(
     {
-      projectId,
-      deploymentId,
-      environmentId,
+      projectId: deployment.projectId,
+      deploymentId: deployment.id,
+      environmentId: deployment.environmentId,
       limit: 50,
       since: "6h",
       statusCodes: null,
       methods: null,
       paths: null,
     },
     {
-      enabled: Boolean(environmentId) && Boolean(deploymentId),
       refetchInterval: 5000,
       getNextPageParam: (lastPage) => (lastPage.hasMore ? lastPage.nextCursor : undefined),
     },

web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/[deploymentId]/(overview)/navigations/use-deployment-breadcrumb-config.ts

@@ -6,7 +6,6 @@ import { shortenId } from "@/lib/shorten-id";
 import { useParams } from "next/navigation";
 import { useMemo } from "react";
 import type { ComponentPropsWithoutRef } from "react";
-import { useProjectData } from "../../../../data-provider";
 import { useDeployment } from "../../layout-provider";
 
 export type BreadcrumbItem = ComponentPropsWithoutRef<typeof Navbar.Breadcrumbs.Link> & {
@@ -26,11 +25,10 @@ export function useDeploymentBreadcrumbConfig(): BreadcrumbItem[] {
   const params = useParams();
 
   const workspaceSlug = params.workspaceSlug as string;
-  const { projectId } = useProjectData();
-  const { deploymentId } = useDeployment();
+  const { deployment } = useDeployment();
 
   return useMemo(() => {
-    const basePath = `/${workspaceSlug}/projects/${projectId}`;
+    const basePath = `/${workspaceSlug}/projects/${deployment.projectId}`;
     return [
       {
         id: "projects",
@@ -43,7 +41,7 @@ export function useDeploymentBreadcrumbConfig(): BreadcrumbItem[] {
       {
         id: "project",
         href: `${basePath}`,
-        children: projectId,
+        children: deployment.projectId,
         shouldRender: true,
         active: false,
         isLast: false,
@@ -58,13 +56,13 @@ export function useDeploymentBreadcrumbConfig(): BreadcrumbItem[] {
       },
       {
         id: "deployment",
-        href: `${basePath}/deployments/${deploymentId}`,
-        children: shortenId(deploymentId),
+        href: `${basePath}/deployments/${deployment.id}`,
+        children: shortenId(deployment.id),
         isIdentifier: true,
         shouldRender: true,
         active: false,
         isLast: false,
       },
     ];
-  }, [workspaceSlug, projectId, deploymentId]);
+  }, [workspaceSlug, deployment.projectId, deployment.id]);
 }

web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/[deploymentId]/layout-provider.tsx

@@ -1,10 +1,12 @@
 "use client";
 
+import type { Deployment } from "@/lib/collections/deploy/deployments";
 import { useParams } from "next/navigation";
 import { createContext, useContext } from "react";
+import { useProjectData } from "../../data-provider";
 
 type DeploymentLayoutContextType = {
-  deploymentId: string;
+  deployment: Deployment;
 };
 
 const DeploymentLayoutContext = createContext<DeploymentLayoutContextType | null>(null);
@@ -17,8 +19,15 @@ export const DeploymentLayoutProvider = ({ children }: { children: React.ReactNo
     throw new Error("DeploymentLayoutProvider must be used within a deployment route");
   }
 
+  const { getDeploymentById } = useProjectData();
+  const deployment = getDeploymentById(deploymentId);
+
+  if (!deployment) {
+    throw new Error(`Deployment not found: ${deploymentId}`);
+  }
+
   return (
-    <DeploymentLayoutContext.Provider value={{ deploymentId }}>
+    <DeploymentLayoutContext.Provider value={{ deployment }}>
       {children}
     </DeploymentLayoutContext.Provider>
   );

web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/[deploymentId]/network/deployment-network-view.tsx

@@ -31,15 +31,15 @@ export function DeploymentNetworkView({
   showProjectDetails = false,
   showNodeDetails = false,
 }: DeploymentNetworkViewProps) {
-  const { deploymentId } = useDeployment();
+  const { deployment } = useDeployment();
   const [generatedTree, setGeneratedTree] = useState<DeploymentNode | null>(null);
   const [selectedNode, setSelectedNode] = useState<DeploymentNode | null>(null);
 
   const { data: defaultTree, isLoading } = trpc.deploy.network.get.useQuery(
     {
-      deploymentId: deploymentId ?? "",
+      deploymentId: deployment.id,
     },
-    { refetchInterval: 2000, enabled: Boolean(deploymentId) },
+    { refetchInterval: 2000 },
   );
 
   const currentTree = generatedTree ?? defaultTree ?? SKELETON_TREE;
@@ -58,8 +58,7 @@ export function DeploymentNetworkView({
           <LiveIndicator />
           {process.env.NODE_ENV === "development" && (
             <InternalDevTreeGenerator
-              // biome-ignore lint/style/noNonNullAssertion: will be fixed later, when we actually implement tRPC logic
-              deploymentId={deploymentId!}
+              deploymentId={deployment.id}
               onGenerate={setGeneratedTree}
               onReset={() => setGeneratedTree(null)}
             />
@@ -71,7 +70,7 @@ export function DeploymentNetworkView({
         data={currentTree}
         nodeSpacing={{ x: 10, y: 100 }}
         onNodeClick={isShowingSkeleton ? undefined : (node) => setSelectedNode(node)}
-        renderNode={(node, parent) => renderDeploymentNode(node, parent, deploymentId ?? undefined)}
+        renderNode={(node, parent) => renderDeploymentNode(node, parent, deployment.id)}
         renderConnection={(path, parent, child) => (
           <TreeConnectionLine key={`${parent.id}-${child.id}`} path={path} />
         )}

web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/[deploymentId]/page.tsx

@@ -9,11 +9,10 @@ import { DeploymentProgressSection } from "./(overview)/components/sections/depl
 import { useDeployment } from "./layout-provider";
 
 export default function DeploymentOverview() {
-  const { deploymentId } = useDeployment();
-  const { getDeploymentById, refetchDomains } = useProjectData();
-  const deployment = getDeploymentById(deploymentId);
+  const { deployment } = useDeployment();
+  const { refetchDomains } = useProjectData();
 
-  const ready = deployment?.status === "ready";
+  const ready = deployment.status === "ready";
 
   useEffect(() => {
     if (ready) {
@@ -32,7 +31,6 @@ export default function DeploymentOverview() {
   return (
     <ProjectContentWrapper centered>
       <DeploymentInfoSection />
-
       <DeploymentDomainsSection />
       <DeploymentNetworkSection />
     </ProjectContentWrapper>