fix: refactor useParams

Author: aledefra

app/(protected)/deeploys/job-draft/[draftId]/page.tsx

@@ -19,8 +19,7 @@ export default function EditJobDraft() {
     const { setStep } = useDeploymentContext() as DeploymentContextType;
 
     const router = useRouter();
-    const params = useParams<{ draftId?: string }>();
-    const draftId = params?.draftId;
+    const { draftId } = useParams<{ draftId?: string }>();
 
     const draftJob: DraftJob | undefined | null = useLiveQuery(
         draftId ? () => db.jobs.get(parseInt(draftId)) : () => undefined,

app/(protected)/deeploys/job/[jobId]/edit/page.tsx

@@ -48,8 +48,7 @@ export default function EditJob() {
     const { setFetchAppsRequired, setStep, escrowContractAddress } = useDeploymentContext() as DeploymentContextType;
 
     const router = useRouter();
-    const params = useParams<{ jobId?: string }>();
-    const jobId = params?.jobId;
+    const { jobId } = useParams<{ jobId?: string }>();
     const { job, isLoading: isJobLoading } = useRunningJob(jobId, {
         onError: () => router.replace('/404'),
     });

app/(protected)/deeploys/job/[jobId]/extend/page.tsx

@@ -13,8 +13,7 @@ import { RiArrowLeftLine } from 'react-icons/ri';
 
 export default function ExtendJob() {
     const router = useRouter();
-    const params = useParams<{ jobId?: string }>();
-    const jobId = params?.jobId;
+    const { jobId } = useParams<{ jobId?: string }>();
     const { job, isLoading } = useRunningJob(jobId, {
         onError: () => router.replace('/404'),
     });

app/(protected)/deeploys/job/[jobId]/page.tsx

@@ -25,8 +25,7 @@ import { RiArrowLeftLine, RiCloseFill } from 'react-icons/ri';
 export default function Job() {
     const { fetchApps } = useDeploymentContext() as DeploymentContextType;
     const router = useRouter();
-    const params = useParams<{ jobId?: string }>();
-    const jobId = params?.jobId;
+    const { jobId } = useParams<{ jobId?: string }>();
 
     const { job, isLoading, fetchJob } = useRunningJob(jobId, {
         onError: () => router.replace(routePath.notFound),

app/(protected)/deeploys/project-draft/[projectHash]/page.tsx

@@ -17,8 +17,7 @@ export default function ProjectDraft() {
     const { jobType, setJobType, projectPage, setProjectPage } = useDeploymentContext() as DeploymentContextType;
 
     const router = useRouter();
-    const params = useParams<{ projectHash?: string }>();
-    const projectHash = params?.projectHash;
+    const { projectHash } = useParams<{ projectHash?: string }>();
 
     const project: DraftProject | undefined | null = useLiveQuery(
         isValidProjectHash(projectHash) ? () => db.projects.get(projectHash) : () => undefined,

app/(protected)/deeploys/project/[projectHash]/page.tsx

@@ -36,8 +36,7 @@ export default function Project() {
 
     const publicClient = usePublicClient();
 
-    const params = useParams<{ projectHash?: string }>();
-    const projectHash = params?.projectHash;
+    const { projectHash } = useParams<{ projectHash?: string }>();
 
     // Used to display a message with the successfully deployed jobs right after deployment
     const [successfulJobs, setSuccessfulJobs] = useState<{ text: string; serverAlias: string }[]>([]);

app/(protected)/tunnels/[id]/page.tsx

@@ -41,8 +41,7 @@ export default function TunnelPage() {
     const { confirm } = useInteractionContext() as InteractionContextType;
 
     const router = useRouter();
-    const params = useParams<{ id?: string }>();
-    const id = params?.id;
+    const { id } = useParams<{ id?: string }>();
 
     const [tunnel, setTunnel] = useState<Tunnel | undefined>();
 

src/components/create-job/JobFormHeader.tsx

@@ -14,8 +14,7 @@ import { useEffect, useState } from 'react';
 function JobFormHeader({ steps }: { steps: string[] }) {
     const { jobType, getProjectName } = useDeploymentContext() as DeploymentContextType;
 
-    const params = useParams<{ projectHash?: string }>();
-    const projectHash = params?.projectHash;
+    const { projectHash } = useParams<{ projectHash?: string }>();
 
     const [projectName, setProjectName] = useState<string | undefined>();
 

src/components/create-job/JobFormWrapper.tsx

@@ -32,8 +32,7 @@ const JOB_TYPE_STEPS: Record<JobType, Step[]> = {
 };
 
 function JobFormWrapper({ projectName, draftJobsCount }) {
-    const params = useParams<{ projectHash?: string }>();
-    const projectHash = params?.projectHash;
+    const { projectHash } = useParams<{ projectHash?: string }>();
 
     const { step, jobType, setJobType, setProjectOverviewTab } = useDeploymentContext() as DeploymentContextType;
     const { account } = useAuthenticationContext() as AuthenticationContextType;

src/components/create-job/steps/deployment/ServiceDeployment.tsx

@@ -26,8 +26,7 @@ function ServiceDeployment({ isEditingRunningJob }: { isEditingRunningJob?: bool
     const { tunnelingSecrets } = useTunnelsContext() as TunnelsContextType;
 
     const { watch, setValue } = useFormContext();
-    const params = useParams<{ projectHash?: string }>();
-    const projectHash = params?.projectHash;
+    const { projectHash } = useParams<{ projectHash?: string }>();
 
     const serviceId: number = watch('serviceId');
     const alias: string = watch('deployment.jobAlias');