From ead057937885aea471a56e699b0bf13c9728a5e9 Mon Sep 17 00:00:00 2001 From: Nisarg Bhatt Date: Sat, 18 Oct 2025 22:52:32 +0530 Subject: [PATCH 1/6] Initial tanstack router change added --- .vscode/settings.json | 12 +- apps/frontend/package.json | 7 +- .../frontend/src/api/query/listDefinition.tsx | 73 +++--- apps/frontend/src/app/definitions/page.tsx | 96 -------- .../frontend/src/components/layout/Layout.tsx | 17 +- apps/frontend/src/contexts/ContextFactory.tsx | 9 +- apps/frontend/src/main.tsx | 75 +++--- apps/frontend/src/routeTree.gen.ts | 173 ++++++++++++++ apps/frontend/src/routes/__root.tsx | 32 +++ .../-components}/RunNowAction.tsx | 0 .../-components}/RuntimeCard.tsx | 0 .../-components}/RuntimeList.tsx | 0 .../definitions/$definitionId/index.tsx} | 15 +- .../-components}/RuntimeStartAction.tsx | 0 .../-components}/RuntimeTaskCard.tsx | 0 .../runtime/$runtimeId/index.tsx} | 15 +- .../-components}/DefinitionCard.tsx | 11 +- .../-components}/DefinitionDeleteButton.tsx | 0 .../-components}/DefinitionBasicDialog.tsx | 0 .../create/-components}/DefinitionFetcher.tsx | 0 .../create/-components}/DefinitionForm.tsx | 0 .../definitions/create/index.tsx} | 20 +- .../frontend/src/routes/definitions/index.tsx | 81 +++++++ .../frontend/src/routes/definitions/route.tsx | 40 ++++ .../src/{app/page.tsx => routes/index.tsx} | 22 +- apps/frontend/tsconfig.json | 1 - apps/frontend/vite.config.ts | 11 +- bun.lock | 221 +++++++++--------- 28 files changed, 592 insertions(+), 339 deletions(-) delete mode 100644 apps/frontend/src/app/definitions/page.tsx create mode 100644 apps/frontend/src/routeTree.gen.ts create mode 100644 apps/frontend/src/routes/__root.tsx rename apps/frontend/src/{app/definitions/[id]/__components => routes/definitions/$definitionId/-components}/RunNowAction.tsx (100%) rename apps/frontend/src/{app/definitions/[id]/__components => routes/definitions/$definitionId/-components}/RuntimeCard.tsx (100%) rename apps/frontend/src/{app/definitions/[id]/__components => routes/definitions/$definitionId/-components}/RuntimeList.tsx (100%) rename apps/frontend/src/{app/definitions/[id]/page.tsx => routes/definitions/$definitionId/index.tsx} (84%) rename apps/frontend/src/{app/definitions/[id]/runtime/[id]/__components => routes/definitions/$definitionId/runtime/$runtimeId/-components}/RuntimeStartAction.tsx (100%) rename apps/frontend/src/{app/definitions/[id]/runtime/[id]/__components => routes/definitions/$definitionId/runtime/$runtimeId/-components}/RuntimeTaskCard.tsx (100%) rename apps/frontend/src/{app/definitions/[id]/runtime/[id]/page.tsx => routes/definitions/$definitionId/runtime/$runtimeId/index.tsx} (93%) rename apps/frontend/src/{app/definitions/__components => routes/definitions/-components}/DefinitionCard.tsx (82%) rename apps/frontend/src/{app/definitions/__components => routes/definitions/-components}/DefinitionDeleteButton.tsx (100%) rename apps/frontend/src/{app/definitions/create/__components => routes/definitions/create/-components}/DefinitionBasicDialog.tsx (100%) rename apps/frontend/src/{app/definitions/create/__components => routes/definitions/create/-components}/DefinitionFetcher.tsx (100%) rename apps/frontend/src/{app/definitions/create/__components => routes/definitions/create/-components}/DefinitionForm.tsx (100%) rename apps/frontend/src/{app/definitions/create/page.tsx => routes/definitions/create/index.tsx} (59%) create mode 100644 apps/frontend/src/routes/definitions/index.tsx create mode 100644 apps/frontend/src/routes/definitions/route.tsx rename apps/frontend/src/{app/page.tsx => routes/index.tsx} (86%) diff --git a/.vscode/settings.json b/.vscode/settings.json index 2413838..d388b93 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,5 +1,15 @@ { "typescript.tsdk": "node_modules/typescript/lib", "npm.packageManager": "bun", - "npm.scriptRunner": "bun" + "npm.scriptRunner": "bun", + "editor.defaultFormatter": "biomejs.biome", + "files.readonlyInclude": { + "**/routeTree.gen.ts": true + }, + "files.watcherExclude": { + "**/routeTree.gen.ts": true + }, + "search.exclude": { + "**/routeTree.gen.ts": true + } } \ No newline at end of file diff --git a/apps/frontend/package.json b/apps/frontend/package.json index 93dadae..8a3a4c8 100644 --- a/apps/frontend/package.json +++ b/apps/frontend/package.json @@ -12,10 +12,10 @@ "dependencies": { "@hookform/resolvers": "^5.2.2", "@monaco-editor/react": "^4.7.0", - "@orpc/openapi-client": "catalog:", - "@orpc/tanstack-query": "catalog:", "@orpc/client": "catalog:", "@orpc/contract": "catalog:", + "@orpc/openapi-client": "catalog:", + "@orpc/tanstack-query": "catalog:", "@radix-ui/react-accordion": "^1.2.12", "@radix-ui/react-alert-dialog": "^1.1.15", "@radix-ui/react-aspect-ratio": "^1.1.7", @@ -46,6 +46,8 @@ "@repo/utils": "workspace:*", "@tailwindcss/vite": "^4.1.7", "@tanstack/react-query": "^5.76.1", + "@tanstack/react-router": "^1.133.13", + "@tanstack/react-router-devtools": "^1.133.13", "@xyflow/react": "^12.6.4", "axios": "^1.9.0", "class-variance-authority": "^0.7.1", @@ -73,6 +75,7 @@ "zod": "^4.1.11" }, "devDependencies": { + "@tanstack/router-plugin": "^1.133.13", "@types/react": "^19", "@types/react-dom": "^19", "@vitejs/plugin-react": "^4.2.1", diff --git a/apps/frontend/src/api/query/listDefinition.tsx b/apps/frontend/src/api/query/listDefinition.tsx index 75d82c7..d27533c 100644 --- a/apps/frontend/src/api/query/listDefinition.tsx +++ b/apps/frontend/src/api/query/listDefinition.tsx @@ -1,10 +1,10 @@ import { openApiClient } from '@lib/orpc'; -import { useQuery } from '@tanstack/react-query'; -import { useEffect, useState } from 'react'; -import { useSearchParams } from 'react-router'; +import { queryOptions } from '@tanstack/react-query'; import { z } from 'zod/v3'; -const responseSchema = z.object({ +export const queryKey = 'list-definition'; + +export const responseSchema = z.object({ list: z.array( z.object({ id: z.number(), @@ -21,44 +21,35 @@ const responseSchema = z.object({ }), }); -export const queryKey = 'list-definition'; - -export const useListDefinition = () => { - const [searchParams, setSearchParams] = useSearchParams(); - - const [paginationState, setPaginationState] = useState<{ +export const fetchDefinitionList = async (params: { + signal?: AbortSignal; + paginationState: { page: number; size: number; - }>({ - page: Number(searchParams.get('page') ?? '1'), - size: Number(searchParams.get('size') ?? '10'), - }); - - const listDefinition = useQuery({ - queryKey: [queryKey, paginationState.page, paginationState.size], - queryFn: async ({ signal }) => { - const response = await openApiClient.definition - .list( - { - page: paginationState.page.toString(), - limit: paginationState.size.toString(), - }, - { - signal, - } - ) - .then((res) => responseSchema.parse(res.data)); + }; +}) => { + const response = await openApiClient.definition + .list( + { + page: params.paginationState.page.toString(), + limit: params.paginationState.size.toString(), + }, + { + signal: params.signal, + } + ) + .then((res) => responseSchema.parse(res.data)); + + return response; +}; - return response; - }, +export const definitionListQuery = (params: { + paginationState: { + page: number; + size: number; + }; +}) => + queryOptions({ + queryKey: [queryKey, params.paginationState.page, params.paginationState.size], + queryFn: ({ signal }) => fetchDefinitionList({ signal, paginationState: params.paginationState }), }); - - useEffect(() => { - setSearchParams({ - page: paginationState.page.toString(), - size: paginationState.size.toString(), - }); - }, [paginationState, setSearchParams]); - - return { query: listDefinition, paginationState, setPaginationState }; -}; diff --git a/apps/frontend/src/app/definitions/page.tsx b/apps/frontend/src/app/definitions/page.tsx deleted file mode 100644 index 7910ea6..0000000 --- a/apps/frontend/src/app/definitions/page.tsx +++ /dev/null @@ -1,96 +0,0 @@ -import { useListDefinition } from '@/api/query/listDefinition'; -import SimplePagination from '@/components/helpers/SimplePagination'; -import { Button } from '@/components/ui/button'; -import { PlusIcon, WorkflowIcon } from 'lucide-react'; -import type { FC } from 'react'; -import { useEffect } from 'react'; -import { Link } from 'react-router'; -import DefinitionCard from './__components/DefinitionCard'; -import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from '@/components/ui/empty'; -import { Breadcrumb, BreadcrumbItem, BreadcrumbList, BreadcrumbPage } from '@/components/ui/breadcrumb'; - -interface Props {} - -const DefinitionsPage: FC = () => { - const { query, setPaginationState } = useListDefinition(); - const { data, isLoading, error } = query; - - useEffect(() => { - if (error) { - console.error(error); - } - }, [error]); - - return ( -
- - - - Home - - - -

- Definitions -

-

List of all definitions

-
- - - -
- -
- {isLoading ?

Loading...

: null} - {data && !isLoading && data?.list?.length < 1 ? ( - - - - - - No Definitions Yet - - You haven't created any definitions yet. Get started by creating your first Definition. - - - - ) : null} - {data && !isLoading ? ( -
- {data?.list?.map((i) => ( - - ))} -
- ) : null} - {data ? ( -
- { - setPaginationState((prev) => ({ - ...prev, - page: page, - })); - }} - /> -
- ) : null} -
-
- ); -}; - -export default DefinitionsPage; diff --git a/apps/frontend/src/components/layout/Layout.tsx b/apps/frontend/src/components/layout/Layout.tsx index 0a4a97f..7d6f098 100644 --- a/apps/frontend/src/components/layout/Layout.tsx +++ b/apps/frontend/src/components/layout/Layout.tsx @@ -1,11 +1,16 @@ import { cn } from '@/lib/utils'; -import { Link, Outlet } from 'react-router'; import { ModeToggle } from '../helpers/mode-toggle'; import { WorkflowIcon } from 'lucide-react'; import ContextFactory from '@/contexts/ContextFactory'; import { Button } from '../ui/button'; +import type { FC, ReactNode } from 'react'; +import { Link } from '@tanstack/react-router'; -export function Layout() { +interface Props { + children: ReactNode; +} + +const Layout: FC = ({ children }) => { return (
@@ -23,9 +28,7 @@ export function Layout() {
-
- -
+
{children}