From e45d498f56f274dba11d43afd6f433cf70d5faff Mon Sep 17 00:00:00 2001 From: Lars Hampe Date: Mon, 7 Oct 2024 23:04:02 +0200 Subject: [PATCH] feat(app): refactor changelog routing, add changelog update route --- apps/app/src/hooks/useChangelog.ts | 28 ++++ apps/app/src/routeTree.gen.ts | 69 +++++++-- .../src/routes/changelog.$id.edit.lazy.tsx | 142 ++++++++++++++++++ .../$id.lazy.tsx => changelog.$id.lazy.tsx} | 17 ++- ...ate.lazy.tsx => changelog.create.lazy.tsx} | 2 +- ...ndex.lazy.tsx => changelog.index.lazy.tsx} | 2 +- 6 files changed, 239 insertions(+), 21 deletions(-) create mode 100644 apps/app/src/routes/changelog.$id.edit.lazy.tsx rename apps/app/src/routes/{changelog/$id.lazy.tsx => changelog.$id.lazy.tsx} (84%) rename apps/app/src/routes/{changelog/create.lazy.tsx => changelog.create.lazy.tsx} (98%) rename apps/app/src/routes/{changelog/index.lazy.tsx => changelog.index.lazy.tsx} (97%) diff --git a/apps/app/src/hooks/useChangelog.ts b/apps/app/src/hooks/useChangelog.ts index efb1990..71db74f 100644 --- a/apps/app/src/hooks/useChangelog.ts +++ b/apps/app/src/hooks/useChangelog.ts @@ -1,6 +1,7 @@ import type { ChangelogCreateInput, ChangelogOutput, + ChangelogUpdateInput, } from '@boring.tools/schema' import { useAuth } from '@clerk/clerk-react' import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query' @@ -9,6 +10,7 @@ import { queryFetch } from '../utils/queryFetch' type Changelog = z.infer type ChangelogCreate = z.infer +type ChangelogUpdate = z.infer export const useChangelogList = () => { const { getToken } = useAuth() @@ -57,6 +59,32 @@ export const useChangelogCreate = () => { }) } +export const useChangelogUpdate = () => { + const { getToken } = useAuth() + const queryClient = useQueryClient() + + return useMutation({ + mutationFn: async ({ + id, + payload, + }: { + id: string + payload: ChangelogUpdate + }): Promise> => + await queryFetch({ + path: `changelog/${id}`, + data: payload, + method: 'put', + token: await getToken(), + }), + onSuccess: (data) => { + queryClient.invalidateQueries({ + queryKey: ['changelogById', data.id], + }) + }, + }) +} + export const useChangelogRemove = () => { const { getToken } = useAuth() const queryClient = useQueryClient() diff --git a/apps/app/src/routeTree.gen.ts b/apps/app/src/routeTree.gen.ts index 97e1e63..5a1e246 100644 --- a/apps/app/src/routeTree.gen.ts +++ b/apps/app/src/routeTree.gen.ts @@ -21,6 +21,7 @@ const UserIndexLazyImport = createFileRoute('/user/')() const ChangelogIndexLazyImport = createFileRoute('/changelog/')() const ChangelogCreateLazyImport = createFileRoute('/changelog/create')() const ChangelogIdLazyImport = createFileRoute('/changelog/$id')() +const ChangelogIdEditLazyImport = createFileRoute('/changelog/$id/edit')() // Create/Update Routes @@ -38,20 +39,27 @@ const ChangelogIndexLazyRoute = ChangelogIndexLazyImport.update({ path: '/changelog/', getParentRoute: () => rootRoute, } as any).lazy(() => - import('./routes/changelog/index.lazy').then((d) => d.Route), + import('./routes/changelog.index.lazy').then((d) => d.Route), ) const ChangelogCreateLazyRoute = ChangelogCreateLazyImport.update({ path: '/changelog/create', getParentRoute: () => rootRoute, } as any).lazy(() => - import('./routes/changelog/create.lazy').then((d) => d.Route), + import('./routes/changelog.create.lazy').then((d) => d.Route), ) const ChangelogIdLazyRoute = ChangelogIdLazyImport.update({ path: '/changelog/$id', getParentRoute: () => rootRoute, -} as any).lazy(() => import('./routes/changelog/$id.lazy').then((d) => d.Route)) +} as any).lazy(() => import('./routes/changelog.$id.lazy').then((d) => d.Route)) + +const ChangelogIdEditLazyRoute = ChangelogIdEditLazyImport.update({ + path: '/edit', + getParentRoute: () => ChangelogIdLazyRoute, +} as any).lazy(() => + import('./routes/changelog.$id.edit.lazy').then((d) => d.Route), +) // Populate the FileRoutesByPath interface @@ -92,34 +100,56 @@ declare module '@tanstack/react-router' { preLoaderRoute: typeof UserIndexLazyImport parentRoute: typeof rootRoute } + '/changelog/$id/edit': { + id: '/changelog/$id/edit' + path: '/edit' + fullPath: '/changelog/$id/edit' + preLoaderRoute: typeof ChangelogIdEditLazyImport + parentRoute: typeof ChangelogIdLazyImport + } } } // Create and export the route tree +interface ChangelogIdLazyRouteChildren { + ChangelogIdEditLazyRoute: typeof ChangelogIdEditLazyRoute +} + +const ChangelogIdLazyRouteChildren: ChangelogIdLazyRouteChildren = { + ChangelogIdEditLazyRoute: ChangelogIdEditLazyRoute, +} + +const ChangelogIdLazyRouteWithChildren = ChangelogIdLazyRoute._addFileChildren( + ChangelogIdLazyRouteChildren, +) + export interface FileRoutesByFullPath { '/': typeof IndexLazyRoute - '/changelog/$id': typeof ChangelogIdLazyRoute + '/changelog/$id': typeof ChangelogIdLazyRouteWithChildren '/changelog/create': typeof ChangelogCreateLazyRoute '/changelog': typeof ChangelogIndexLazyRoute '/user': typeof UserIndexLazyRoute + '/changelog/$id/edit': typeof ChangelogIdEditLazyRoute } export interface FileRoutesByTo { '/': typeof IndexLazyRoute - '/changelog/$id': typeof ChangelogIdLazyRoute + '/changelog/$id': typeof ChangelogIdLazyRouteWithChildren '/changelog/create': typeof ChangelogCreateLazyRoute '/changelog': typeof ChangelogIndexLazyRoute '/user': typeof UserIndexLazyRoute + '/changelog/$id/edit': typeof ChangelogIdEditLazyRoute } export interface FileRoutesById { __root__: typeof rootRoute '/': typeof IndexLazyRoute - '/changelog/$id': typeof ChangelogIdLazyRoute + '/changelog/$id': typeof ChangelogIdLazyRouteWithChildren '/changelog/create': typeof ChangelogCreateLazyRoute '/changelog/': typeof ChangelogIndexLazyRoute '/user/': typeof UserIndexLazyRoute + '/changelog/$id/edit': typeof ChangelogIdEditLazyRoute } export interface FileRouteTypes { @@ -130,8 +160,15 @@ export interface FileRouteTypes { | '/changelog/create' | '/changelog' | '/user' + | '/changelog/$id/edit' fileRoutesByTo: FileRoutesByTo - to: '/' | '/changelog/$id' | '/changelog/create' | '/changelog' | '/user' + to: + | '/' + | '/changelog/$id' + | '/changelog/create' + | '/changelog' + | '/user' + | '/changelog/$id/edit' id: | '__root__' | '/' @@ -139,12 +176,13 @@ export interface FileRouteTypes { | '/changelog/create' | '/changelog/' | '/user/' + | '/changelog/$id/edit' fileRoutesById: FileRoutesById } export interface RootRouteChildren { IndexLazyRoute: typeof IndexLazyRoute - ChangelogIdLazyRoute: typeof ChangelogIdLazyRoute + ChangelogIdLazyRoute: typeof ChangelogIdLazyRouteWithChildren ChangelogCreateLazyRoute: typeof ChangelogCreateLazyRoute ChangelogIndexLazyRoute: typeof ChangelogIndexLazyRoute UserIndexLazyRoute: typeof UserIndexLazyRoute @@ -152,7 +190,7 @@ export interface RootRouteChildren { const rootRouteChildren: RootRouteChildren = { IndexLazyRoute: IndexLazyRoute, - ChangelogIdLazyRoute: ChangelogIdLazyRoute, + ChangelogIdLazyRoute: ChangelogIdLazyRouteWithChildren, ChangelogCreateLazyRoute: ChangelogCreateLazyRoute, ChangelogIndexLazyRoute: ChangelogIndexLazyRoute, UserIndexLazyRoute: UserIndexLazyRoute, @@ -181,16 +219,23 @@ export const routeTree = rootRoute "filePath": "index.lazy.tsx" }, "/changelog/$id": { - "filePath": "changelog/$id.lazy.tsx" + "filePath": "changelog.$id.lazy.tsx", + "children": [ + "/changelog/$id/edit" + ] }, "/changelog/create": { - "filePath": "changelog/create.lazy.tsx" + "filePath": "changelog.create.lazy.tsx" }, "/changelog/": { - "filePath": "changelog/index.lazy.tsx" + "filePath": "changelog.index.lazy.tsx" }, "/user/": { "filePath": "user/index.lazy.tsx" + }, + "/changelog/$id/edit": { + "filePath": "changelog.$id.edit.lazy.tsx", + "parent": "/changelog/$id" } } } diff --git a/apps/app/src/routes/changelog.$id.edit.lazy.tsx b/apps/app/src/routes/changelog.$id.edit.lazy.tsx new file mode 100644 index 0000000..c067f4e --- /dev/null +++ b/apps/app/src/routes/changelog.$id.edit.lazy.tsx @@ -0,0 +1,142 @@ +import { + Button, + Checkbox, + Form, + FormControl, + FormDescription, + FormField, + FormItem, + FormLabel, + FormMessage, + Input, + Textarea, +} from '@boring.tools/ui' +import { createLazyFileRoute, useNavigate } from '@tanstack/react-router' + +import { ChangelogUpdateInput } from '@boring.tools/schema' +import { zodResolver } from '@hookform/resolvers/zod' +import { useForm } from 'react-hook-form' +import type { z } from 'zod' +import { useChangelogById, useChangelogUpdate } from '../hooks/useChangelog' + +const Component = () => { + const { id } = Route.useParams() + const { data, error, isPending, refetch } = useChangelogById({ id }) + const navigate = useNavigate({ from: '/changelog/$id/edit' }) + const changelogCreate = useChangelogUpdate() + const form = useForm>({ + resolver: zodResolver(ChangelogUpdateInput), + defaultValues: data, + }) + + const onSubmit = (payload: z.infer) => { + changelogCreate.mutate( + { id, payload }, + { + onSuccess(data) { + navigate({ to: '/changelog/$id', params: { id: data.id } }) + }, + }, + ) + } + + if (error) { + return ( +
+

Changelogs

+

Please try again later

+ + +
+ ) + } + + return ( +
+ {!isPending && data && ( +
+
+ + ( + + Title + + + {' '} + + + )} + /> + + ( + + Description + +