feat: migrate to app router

Author: aledefra

pages/account.tsx app/(protected)/account/page.tsxpages/account.tsx renamed to app/(protected)/account/page.tsx

@@ -1,23 +1,26 @@
+'use client';
+
 import BurnReport from '@components/account/BurnReport';
 import Invoicing from '@components/account/invoicing/Invoicing';
 import Profile from '@components/account/profile/Profile';
 import { routePath } from '@lib/routes/route-paths';
 import CustomTabs from '@shared/CustomTabs';
-import { useRouter } from 'next/router';
+import { useRouter, useSearchParams } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { CgProfile } from 'react-icons/cg';
 import { RiBillLine, RiFireLine } from 'react-icons/ri';
 
-function Account() {
+export default function Account() {
     const [selectedTab, setSelectedTab] = useState<'invoicing' | 'profile' | 'burn-report'>('invoicing');
     const router = useRouter();
+    const searchParams = useSearchParams();
 
     useEffect(() => {
-        const { tab } = router.query;
+        const tab = searchParams.get('tab');
         if (tab && (tab === 'invoicing' || tab === 'profile' || tab === 'burn-report')) {
             setSelectedTab(tab as 'invoicing' | 'profile' | 'burn-report');
         }
-    }, [router.query]);
+    }, [searchParams]);
 
     return (
         <div className="col w-full flex-1 gap-5">
@@ -45,10 +48,7 @@ function Account() {
                 ]}
                 selectedKey={selectedTab}
                 onSelectionChange={(key) => {
-                    router.push({
-                        pathname: routePath.account,
-                        query: { tab: key },
-                    });
+                    router.push(`${routePath.account}?tab=${key}`);
                 }}
             />
 
@@ -58,5 +58,3 @@ function Account() {
         </div>
     );
 }
-
-export default Account;

pages/deeploys/create-project.tsx …tected)/deeploys/create-project/page.tsxpages/deeploys/create-project.tsx renamed to app/(protected)/deeploys/create-project/page.tsx pages/deeploys/create-project.tsx renamed to app/(protected)/deeploys/create-project/page.tsx

@@ -1,11 +1,13 @@
+'use client';
+
 import ProjectForm from '@components/create-project/ProjectForm';
 import { COLOR_TYPES } from '@data/colorTypes';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { routePath } from '@lib/routes/route-paths';
 import db from '@lib/storage/db';
 import { projectSchema } from '@schemas/project';
 import SupportFooter from '@shared/SupportFooter';
-import { useRouter } from 'next/router';
+import { useRouter } from 'next/navigation';
 import { FormProvider, useForm } from 'react-hook-form';
 import toast from 'react-hot-toast';
 import { keccak256, toBytes } from 'viem';

pages/deeploys/dashboard.tsx …/(protected)/deeploys/dashboard/page.tsxpages/deeploys/dashboard.tsx renamed to app/(protected)/deeploys/dashboard/page.tsx pages/deeploys/dashboard.tsx renamed to app/(protected)/deeploys/dashboard/page.tsx

@@ -1,28 +1,29 @@
+'use client';
+
 import Drafts from '@components/deeploys/Drafts';
 import Running, { RunningRef } from '@components/deeploys/Running';
 import { routePath } from '@lib/routes/route-paths';
 import db from '@lib/storage/db';
 import ActionButton from '@shared/ActionButton';
 import CustomTabs from '@shared/CustomTabs';
 import { useLiveQuery } from 'dexie-react-hooks';
-import { useRouter } from 'next/router';
+import { useRouter, useSearchParams } from 'next/navigation';
 import { useEffect, useRef, useState } from 'react';
 import { RiBox2Line, RiFileTextLine } from 'react-icons/ri';
 
-function Dashboard() {
+export default function Dashboard() {
     const [selectedTab, setSelectedTab] = useState<'running' | 'drafts'>('running');
     const drafts = useLiveQuery(() => db.projects.toArray());
     const runningRef = useRef<RunningRef>(null);
 
     const [projectsCount, setProjectsCount] = useState(0);
 
     const router = useRouter();
+    const searchParams = useSearchParams();
 
-    // Used to display a message with the successfully deployed jobs right after deployment
     const [visibleSuccessfulJobs, setVisibleSuccessfulJobs] = useState<{ text: string; serverAlias: string }[]>([]);
 
     useEffect(() => {
-        if (!router.isReady) return;
         const stored = sessionStorage.getItem('successfulJobs');
         if (stored) {
             try {
@@ -36,14 +37,14 @@ function Dashboard() {
                 sessionStorage.removeItem('successfulJobs');
             }
         }
-    }, [router.isReady]);
+    }, []);
 
     useEffect(() => {
-        const { tab } = router.query;
+        const tab = searchParams.get('tab');
         if (tab && (tab === 'running' || tab === 'drafts')) {
             setSelectedTab(tab as 'running' | 'drafts');
         }
-    }, [router.query]);
+    }, [searchParams]);
 
     const handleExpandAll = () => {
         runningRef.current?.expandAll();
@@ -77,10 +78,7 @@ function Dashboard() {
                     ]}
                     selectedKey={selectedTab}
                     onSelectionChange={(key) => {
-                        router.push({
-                            pathname: `${routePath.deeploys}/${routePath.dashboard}`,
-                            query: { tab: key },
-                        });
+                        router.push(`${routePath.deeploys}/${routePath.dashboard}?tab=${key}`);
                     }}
                 />
 
@@ -110,5 +108,3 @@ function Dashboard() {
         </div>
     );
 }
-
-export default Dashboard;

pages/deeploys/job-draft/[draftId].tsx …d)/deeploys/job-draft/[draftId]/page.tsxpages/deeploys/job-draft/[draftId].tsx renamed to app/(protected)/deeploys/job-draft/[draftId]/page.tsx pages/deeploys/job-draft/[draftId].tsx renamed to app/(protected)/deeploys/job-draft/[draftId]/page.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import DraftEditFormWrapper from '@components/draft/DraftEditFormWrapper';
 import JobDraftBreadcrumbs from '@components/draft/JobDraftBreadcrumbs';
 import { DeploymentContextType, useDeploymentContext } from '@lib/contexts/deployment';
@@ -7,7 +9,7 @@ import ActionButton from '@shared/ActionButton';
 import SupportFooter from '@shared/SupportFooter';
 import { DraftJob, JobType, NativeDraftJob, ServiceDraftJob } from '@typedefs/deeploys';
 import { useLiveQuery } from 'dexie-react-hooks';
-import { useRouter } from 'next/router';
+import { useParams, useRouter } from 'next/navigation';
 import { useEffect } from 'react';
 import toast from 'react-hot-toast';
 import { RiArrowLeftLine } from 'react-icons/ri';
@@ -17,8 +19,8 @@ export default function EditJobDraft() {
     const { setStep } = useDeploymentContext() as DeploymentContextType;
 
     const router = useRouter();
-    const draftIdParam = router.query.draftId;
-    const draftId = Array.isArray(draftIdParam) ? draftIdParam[0] : draftIdParam;
+    const params = useParams<{ draftId?: string }>();
+    const draftId = params?.draftId;
 
     const draftJob: DraftJob | undefined | null = useLiveQuery(
         draftId ? () => db.jobs.get(parseInt(draftId)) : () => undefined,

pages/deeploys/job/[jobId]/edit.tsx …cted)/deeploys/job/[jobId]/edit/page.tsxpages/deeploys/job/[jobId]/edit.tsx renamed to app/(protected)/deeploys/job/[jobId]/edit/page.tsx pages/deeploys/job/[jobId]/edit.tsx renamed to app/(protected)/deeploys/job/[jobId]/edit/page.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { CspEscrowAbi } from '@blockchain/CspEscrow';
 import { DeeployFlowModal } from '@components/draft/DeeployFlowModal';
 import JobEditFormWrapper from '@components/edit-job/JobEditFormWrapper';
@@ -22,6 +24,7 @@ import { jobSchema } from '@schemas/index';
 import ActionButton from '@shared/ActionButton';
 import DeeployErrors from '@shared/jobs/DeeployErrors';
 import SupportFooter from '@shared/SupportFooter';
+import { useRunningJob } from '@lib/hooks/useRunningJob';
 import {
     GenericJobDeployment,
     GenericJobSpecifications,
@@ -33,11 +36,10 @@ import {
     ServiceJobSpecifications,
 } from '@typedefs/deeploys';
 import { JOB_TYPE_OPTIONS, JobTypeOption } from '@typedefs/jobType';
-import { useRunningJob } from '@lib/hooks/useRunningJob';
 import { useEffect, useRef, useState } from 'react';
 import { toast } from 'react-hot-toast';
 import { RiArrowLeftLine } from 'react-icons/ri';
-import { useRouter } from 'next/router';
+import { useParams, useRouter } from 'next/navigation';
 import { useAccount, usePublicClient, useSignMessage, useWalletClient } from 'wagmi';
 import z from 'zod';
 
@@ -46,8 +48,8 @@ export default function EditJob() {
     const { setFetchAppsRequired, setStep, escrowContractAddress } = useDeploymentContext() as DeploymentContextType;
 
     const router = useRouter();
-    const jobIdParam = router.query.jobId;
-    const jobId = Array.isArray(jobIdParam) ? jobIdParam[0] : jobIdParam;
+    const params = useParams<{ jobId?: string }>();
+    const jobId = params?.jobId;
     const { job, isLoading: isJobLoading } = useRunningJob(jobId, {
         onError: () => router.replace('/404'),
     });

pages/deeploys/job/[jobId]/extend.tsx …ed)/deeploys/job/[jobId]/extend/page.tsxpages/deeploys/job/[jobId]/extend.tsx renamed to app/(protected)/deeploys/job/[jobId]/extend/page.tsx pages/deeploys/job/[jobId]/extend.tsx renamed to app/(protected)/deeploys/job/[jobId]/extend/page.tsx

@@ -1,18 +1,20 @@
+'use client';
+
 import JobExtension from '@components/extend-job/JobExtension';
 import JobBreadcrumbs from '@components/job/JobBreadcrumbs';
 import ExtendJobPageLoading from '@components/loading/ExtendJobPageLoading';
 import ActionButton from '@shared/ActionButton';
 import SupportFooter from '@shared/SupportFooter';
 import { JOB_TYPE_OPTIONS, JobTypeOption } from '@typedefs/jobType';
 import { useRunningJob } from '@lib/hooks/useRunningJob';
-import { useRouter } from 'next/router';
-import { useEffect, useMemo, useState } from 'react';
+import { useParams, useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
 import { RiArrowLeftLine } from 'react-icons/ri';
 
 export default function ExtendJob() {
     const router = useRouter();
-    const jobIdParam = router.query.jobId;
-    const jobId = useMemo(() => (Array.isArray(jobIdParam) ? jobIdParam[0] : jobIdParam), [jobIdParam]);
+    const params = useParams<{ jobId?: string }>();
+    const jobId = params?.jobId;
     const { job, isLoading } = useRunningJob(jobId, {
         onError: () => router.replace('/404'),
     });

pages/deeploys/job/[jobId]/index.tsx …protected)/deeploys/job/[jobId]/page.tsxpages/deeploys/job/[jobId]/index.tsx renamed to app/(protected)/deeploys/job/[jobId]/page.tsx pages/deeploys/job/[jobId]/index.tsx renamed to app/(protected)/deeploys/job/[jobId]/page.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import JobDeploymentSection from '@components/job/config/JobDeploymentSection';
 import JobPluginsSection from '@components/job/config/JobPluginsSection';
 import JobBreadcrumbs from '@components/job/JobBreadcrumbs';
@@ -16,15 +18,15 @@ import SupportFooter from '@shared/SupportFooter';
 import { JOB_TYPE_OPTIONS, JobTypeOption } from '@typedefs/jobType';
 import { uniq } from 'lodash';
 import Link from 'next/link';
-import { useRouter } from 'next/router';
-import { useEffect, useMemo, useState } from 'react';
+import { useParams, useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
 import { RiArrowLeftLine, RiCloseFill } from 'react-icons/ri';
 
 export default function Job() {
     const { fetchApps } = useDeploymentContext() as DeploymentContextType;
     const router = useRouter();
-    const jobIdParam = router.query.jobId;
-    const jobId = useMemo(() => (Array.isArray(jobIdParam) ? jobIdParam[0] : jobIdParam), [jobIdParam]);
+    const params = useParams<{ jobId?: string }>();
+    const jobId = params?.jobId;
 
     const { job, isLoading, fetchJob } = useRunningJob(jobId, {
         onError: () => router.replace(routePath.notFound),

pages/deeploys/legacy-requester.tsx …cted)/deeploys/legacy-requester/page.tsxpages/deeploys/legacy-requester.tsx renamed to app/(protected)/deeploys/legacy-requester/page.tsx pages/deeploys/legacy-requester.tsx renamed to app/(protected)/deeploys/legacy-requester/page.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { Button } from '@heroui/button';
 import { SelectItem } from '@heroui/select';
 import { config, environment, getDevAddress, isUsingDevAddress } from '@lib/config';

pages/deeploys/monitor.tsx app/(protected)/deeploys/monitor/page.tsxpages/deeploys/monitor.tsx renamed to app/(protected)/deeploys/monitor/page.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { CspEscrowAbi } from '@blockchain/CspEscrow';
 import { getRunningJobResources, RunningJobResources } from '@data/containerResources';
 import { Skeleton } from '@heroui/skeleton';
@@ -22,8 +24,8 @@ import { JOB_TYPE_OPTIONS, JobTypeOption } from '@typedefs/jobType';
 import { useLiveQuery } from 'dexie-react-hooks';
 import _ from 'lodash';
 import Link from 'next/link';
-import { useRouter } from 'next/router';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from 'react';
 import toast from 'react-hot-toast';
 import { RiCalendarLine, RiDraftLine, RiTimeLine } from 'react-icons/ri';
 import { usePublicClient, useWalletClient } from 'wagmi';
@@ -400,7 +402,7 @@ export default function Monitor() {
     );
 }
 
-function Wrapper({ children }: { children: React.ReactNode }) {
+function Wrapper({ children }: { children: ReactNode }) {
     return (
         <div className="mx-auto w-3xl">
             <div className="list">{children}</div>

app/(protected)/deeploys/page.tsx

@@ -0,0 +1,5 @@
+import { redirect } from 'next/navigation';
+
+export default function DeeploysIndex() {
+    redirect('/deeploys/dashboard');
+}