boring.tools/boring.tools-poc
1
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

feat: implement new module: page

Browse Source
This commit is contained in:
Lars Hampe 2024-10-24 21:21:21 +02:00
parent 17f1e20498
commit 244ffb6d03
44 changed files with 2127 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
apps/api/src/changelog/byId.ts
View File

@ -32,6 +32,11 @@ export const func = async ({ userId, id }: { userId: string; id: string }) => {
const result = await db.query.changelog.findFirst({
where: and(eq(changelog.userId, userId), eq(changelog.id, id)),
with: {
pages: {
with: {
page: true,
},
},
versions: {
orderBy: (changelog_version, { desc }) => [
desc(changelog_version.createdAt),

1
apps/api/src/changelog/update.ts
View File

@ -10,6 +10,7 @@ import { HTTPException } from 'hono/http-exception'
export const route = createRoute({
method: 'put',
path: '/:id',
tags: ['changelog'],
request: {
body: {
content: {

9
apps/api/src/index.ts
View File

@ -9,7 +9,9 @@ import changelogPublic from './changelog/public'
import version from './changelog/version'
import user from './user'
import pageApi from './page'
import { authentication } from './utils/authentication'
import { handleError, handleZodError } from './utils/errors'
import { startup } from './utils/startup'
type User = z.infer<typeof UserOutput>
@ -18,7 +20,9 @@ export type Variables = {
user: User
}
export const app = new OpenAPIHono<{ Variables: Variables }>()
export const app = new OpenAPIHono<{ Variables: Variables }>({
defaultHook: handleZodError,
})
app.use(
'*',
@ -26,13 +30,14 @@ app.use(
dsn: 'https://1d7428bbab0a305078cf4aa380721aa2@o4508167321354240.ingest.de.sentry.io/4508167323648080',
}),
)
app.onError(handleError)
app.use('*', cors())
app.use('/v1/*', authentication)
app.route('/v1/user', user)
app.route('/v1/changelog', changelog)
app.route('/v1/changelog/version', version)
app.route('/v1/page', pageApi)
app.route('/v1/changelog/public', changelogPublic)
app.doc('/openapi.json', {

65
apps/api/src/page/byId.ts Normal file
View File

@ -0,0 +1,65 @@
import { db, page } from '@boring.tools/database'
import { createRoute } from '@hono/zod-openapi'
import { and, eq } from 'drizzle-orm'
import { PageByIdParams, PageOutput } from '@boring.tools/schema'
import { HTTPException } from 'hono/http-exception'
import { verifyAuthentication } from '../utils/authentication'
import type { pageApi } from './index'
const getRoute = createRoute({
method: 'get',
tags: ['page'],
description: 'Get a page',
path: '/:id',
request: {
params: PageByIdParams,
},
responses: {
200: {
content: {
'application/json': {
schema: PageOutput,
},
},
description: 'Return changelog by id',
},
400: {
description: 'Bad Request',
},
500: {
description: 'Internal Server Error',
},
},
})
export function registerPageById(api: typeof pageApi) {
return api.openapi(getRoute, async (c) => {
const userId = verifyAuthentication(c)
const { id } = c.req.valid('param')
const result = await db.query.page.findFirst({
where: and(eq(page.id, id), eq(page.userId, userId)),
with: {
changelogs: {
with: {
changelog: true,
},
},
},
})
if (!result) {
throw new HTTPException(404, { message: 'Not Found' })
}
const { changelogs, ...rest } = result
const mappedResult = {
...rest,
changelogs: changelogs.map((log) => log.changelog),
}
return c.json(mappedResult, 200)
})
}

69
apps/api/src/page/create.ts Normal file
View File

@ -0,0 +1,69 @@
import { changelogs_to_pages, db, page } from '@boring.tools/database'
import { createRoute, type z } from '@hono/zod-openapi'
import { PageCreateInput, PageOutput } from '@boring.tools/schema'
import { HTTPException } from 'hono/http-exception'
import { verifyAuthentication } from '../utils/authentication'
import type { pageApi } from './index'
const getRoute = createRoute({
method: 'post',
tags: ['page'],
description: 'Create a page',
path: '/',
request: {
body: {
content: {
'application/json': { schema: PageCreateInput },
},
},
},
responses: {
200: {
content: {
'application/json': {
schema: PageOutput,
},
},
description: 'Return changelog by id',
},
400: {
description: 'Bad Request',
},
500: {
description: 'Internal Server Error',
},
},
})
export function registerPageCreate(api: typeof pageApi) {
return api.openapi(getRoute, async (c) => {
const userId = verifyAuthentication(c)
const { changelogIds, ...rest }: z.infer<typeof PageCreateInput> =
await c.req.json()
const [result] = await db
.insert(page)
.values({
...rest,
userId: userId,
})
.returning()
// TODO: implement transaction
if (changelogIds) {
await db.insert(changelogs_to_pages).values(
changelogIds.map((changelogId) => ({
changelogId,
pageId: result.id,
})),
)
}
if (!result) {
throw new HTTPException(404, { message: 'Not Found' })
}
return c.json(result, 200)
})
}

48
apps/api/src/page/delete.ts Normal file
View File

@ -0,0 +1,48 @@
import { db, page } from '@boring.tools/database'
import { GeneralOutput, PageByIdParams } from '@boring.tools/schema'
import { createRoute } from '@hono/zod-openapi'
import { and, eq } from 'drizzle-orm'
import { HTTPException } from 'hono/http-exception'
import type { pageApi } from '.'
import { verifyAuthentication } from '../utils/authentication'
const route = createRoute({
method: 'delete',
path: '/:id',
request: {
params: PageByIdParams,
},
responses: {
200: {
content: {
'application/json': {
schema: GeneralOutput,
},
},
description: 'Removes a changelog by id',
},
400: {
description: 'Bad Request',
},
500: {
description: 'Internal Server Error',
},
},
})
export const registerPageDelete = (api: typeof pageApi) => {
return api.openapi(route, async (c) => {
const userId = verifyAuthentication(c)
const { id } = c.req.valid('param')
const result = await db
.delete(page)
.where(and(eq(page.userId, userId), eq(page.id, id)))
.returning()
if (!result) {
throw new HTTPException(404, { message: 'Not Found' })
}
return c.json(result, 200)
})
}

24
apps/api/src/page/index.ts Normal file
View File

@ -0,0 +1,24 @@
import { OpenAPIHono } from '@hono/zod-openapi'
import type { Variables } from '..'
import type { ContextModule } from '../utils/sentry'
import { registerPageById } from './byId'
import { registerPageCreate } from './create'
import { registerPageDelete } from './delete'
import { registerPageList } from './list'
import { registerPagePublic } from './public'
import { registerPageUpdate } from './update'
export const pageApi = new OpenAPIHono<{ Variables: Variables }>()
const module: ContextModule = {
name: 'page',
}
registerPageById(pageApi)
registerPageCreate(pageApi)
registerPageList(pageApi)
registerPagePublic(pageApi)
registerPageDelete(pageApi)
registerPageUpdate(pageApi)
export default pageApi

47
apps/api/src/page/list.ts Normal file
View File

@ -0,0 +1,47 @@
import { db, page } from '@boring.tools/database'
import { createRoute, z } from '@hono/zod-openapi'
import { and, eq } from 'drizzle-orm'
import { PageListOutput } from '@boring.tools/schema'
import { HTTPException } from 'hono/http-exception'
import { verifyAuthentication } from '../utils/authentication'
import type { pageApi } from './index'
const route = createRoute({
method: 'get',
tags: ['page'],
description: 'Get a page list',
path: '/',
responses: {
200: {
content: {
'application/json': {
schema: PageListOutput,
},
},
description: 'Return changelog by id',
},
400: {
description: 'Bad Request',
},
500: {
description: 'Internal Server Error',
},
},
})
export function registerPageList(api: typeof pageApi) {
return api.openapi(route, async (c) => {
const userId = verifyAuthentication(c)
const result = await db.query.page.findMany({
where: and(eq(page.userId, userId)),
})
if (!result) {
throw new HTTPException(404, { message: 'Not Found' })
}
return c.json(result, 200)
})
}

86
apps/api/src/page/public.ts Normal file
View File

@ -0,0 +1,86 @@
import { changelog_version, db, page } from '@boring.tools/database'
import { createRoute } from '@hono/zod-openapi'
import { eq } from 'drizzle-orm'
import { PagePublicOutput, PagePublicParams } from '@boring.tools/schema'
import { HTTPException } from 'hono/http-exception'
import type { pageApi } from './index'
const getRoute = createRoute({
method: 'get',
tags: ['page'],
description: 'Get a page',
path: '/:id/public',
request: {
params: PagePublicParams,
},
responses: {
200: {
content: {
'application/json': {
schema: PagePublicOutput,
},
},
description: 'Return changelog by id',
},
400: {
description: 'Bad Request',
},
500: {
description: 'Internal Server Error',
},
},
})
export function registerPagePublic(api: typeof pageApi) {
return api.openapi(getRoute, async (c) => {
const { id } = c.req.valid('param')
const result = await db.query.page.findFirst({
where: eq(page.id, id),
columns: {
title: true,
description: true,
icon: true,
},
with: {
changelogs: {
with: {
changelog: {
columns: {
title: true,
description: true,
},
with: {
versions: {
where: eq(changelog_version.status, 'published'),
orderBy: (changelog_version, { desc }) => [
desc(changelog_version.createdAt),
],
columns: {
markdown: true,
version: true,
releasedAt: true,
},
},
},
},
},
},
},
})
if (!result) {
throw new HTTPException(404, { message: 'Not Found' })
}
const { changelogs, ...rest } = result
const mappedResult = {
...rest,
changelogs: changelogs.map((log) => log.changelog),
}
return c.json(mappedResult, 200)
})
}

80
apps/api/src/page/update.ts Normal file
View File

@ -0,0 +1,80 @@
import { changelogs_to_pages, db, page } from '@boring.tools/database'
import { createRoute, type z } from '@hono/zod-openapi'
import {
PageOutput,
PageUpdateInput,
PageUpdateParams,
} from '@boring.tools/schema'
import { and, eq } from 'drizzle-orm'
import { HTTPException } from 'hono/http-exception'
import { verifyAuthentication } from '../utils/authentication'
import type { pageApi } from './index'
const getRoute = createRoute({
method: 'put',
tags: ['page'],
description: 'Update a page',
path: '/:id',
request: {
params: PageUpdateParams,
body: {
content: {
'application/json': { schema: PageUpdateInput },
},
},
},
responses: {
200: {
content: {
'application/json': {
schema: PageOutput,
},
},
description: 'Return changelog by id',
},
400: {
description: 'Bad Request',
},
500: {
description: 'Internal Server Error',
},
},
})
export function registerPageUpdate(api: typeof pageApi) {
return api.openapi(getRoute, async (c) => {
const userId = verifyAuthentication(c)
const { id } = c.req.valid('param')
const { changelogIds, ...rest }: z.infer<typeof PageUpdateInput> =
await c.req.json()
const [result] = await db
.update(page)
.set({
...rest,
userId: userId,
})
.where(and(eq(page.userId, userId), eq(page.id, id)))
.returning()
// TODO: implement transaction
if (changelogIds) {
await db
.delete(changelogs_to_pages)
.where(eq(changelogs_to_pages.pageId, result.id))
await db.insert(changelogs_to_pages).values(
changelogIds.map((changelogId) => ({
changelogId,
pageId: result.id,
})),
)
}
if (!result) {
throw new HTTPException(404, { message: 'Not Found' })
}
return c.json(result, 200)
})
}

46
apps/api/src/utils/errors/base-error.ts Normal file
View File

@ -0,0 +1,46 @@
import type { ErrorCode } from '.'
type ErrorContext = Record<string, unknown>
export abstract class BaseError<
TContext extends ErrorContext = ErrorContext,
> extends Error {
public abstract readonly name: string
/**
* A distinct code for the error type used to differentiate between different types of errors.
* Used to build the URL for the error documentation.
* @example 'UNAUTHENTICATED' | 'INTERNAL_SERVER_ERROR'
*/
public abstract readonly code?: ErrorCode
public readonly cause?: BaseError
/**
* Additional context to help understand the error.
* @example { url: 'https://example.com/api', method: 'GET', statusCode: 401 }
*/
public readonly context?: TContext
constructor(opts: {
message: string
cause?: BaseError
context?: TContext
}) {
super(opts.message)
this.cause = opts.cause
this.context = opts.context
// TODO: add logger here!
}
public toString(): string {
return `${this.name}(${this.code}): ${
this.message
} - caused by ${this.cause?.toString()} - with context ${JSON.stringify(
this.context,
)}`
}
// get docs(): string {
// if (!this.code) return "https://example.com/docs/errors"
// return `https://example.com/docs/errors/${this.code}`;
// }
}

35
apps/api/src/utils/errors/http-error.ts Normal file
View File

@ -0,0 +1,35 @@
import { type ErrorCode, statusToCode } from '.'
import { BaseError } from './base-error'
type Context = {
url?: string
method?: string
statusCode?: number
}
export class HttpError extends BaseError<Context> {
public readonly name = HttpError.name
public readonly code: ErrorCode
constructor(opts: {
code: ErrorCode
message: string
cause?: BaseError
context?: Context
}) {
super(opts)
this.code = opts.code
}
public static fromRequest(request: Request, response: Response) {
return new HttpError({
code: statusToCode(response.status),
message: response.statusText, // can be overriden with { ...res, statusText: 'Custom message' }
context: {
url: request.url,
method: request.method,
statusCode: response.status,
},
})
}
}

120
apps/api/src/utils/errors/index.ts Normal file
View File

@ -0,0 +1,120 @@
import type { Context } from 'hono'
import { HTTPException } from 'hono/http-exception'
import { ZodError, z } from 'zod'
import { SchemaError } from './schema-error'
export const ErrorCodeEnum = z.enum([
'BAD_REQUEST',
'FORBIDDEN',
'INTERNAL_SERVER_ERROR',
'USAGE_EXCEEDED',
'DISABLED',
'CONFLICT',
'NOT_FOUND',
'NOT_UNIQUE',
'UNAUTHORIZED',
'METHOD_NOT_ALLOWED',
'UNPROCESSABLE_ENTITY',
])
export type ErrorCode = z.infer<typeof ErrorCodeEnum>
export function statusToCode(status: number): ErrorCode {
switch (status) {
case 400:
return 'BAD_REQUEST'
case 401:
return 'UNAUTHORIZED'
case 403:
return 'FORBIDDEN'
case 404:
return 'NOT_FOUND'
case 405:
return 'METHOD_NOT_ALLOWED'
case 409:
return 'METHOD_NOT_ALLOWED'
case 422:
return 'UNPROCESSABLE_ENTITY'
case 500:
return 'INTERNAL_SERVER_ERROR'
default:
return 'INTERNAL_SERVER_ERROR'
}
}
export type ErrorSchema = z.infer<ReturnType<typeof createErrorSchema>>
export function createErrorSchema(code: ErrorCode) {
return z.object({
code: ErrorCodeEnum.openapi({
example: code,
description: 'The error code related to the status code.',
}),
message: z.string().openapi({
description: 'A human readable message describing the issue.',
example: "Missing required field 'name'.",
}),
docs: z.string().openapi({
description: 'A link to the documentation for the error.',
example: `https://docs.openstatus.dev/api-references/errors/code/${code}`,
}),
})
}
export function handleError(err: Error, c: Context): Response {
if (err instanceof ZodError) {
const error = SchemaError.fromZod(err, c)
return c.json<ErrorSchema>(
{
code: 'BAD_REQUEST',
message: error.message,
docs: 'https://docs.openstatus.dev/api-references/errors/code/BAD_REQUEST',
},
{ status: 400 },
)
}
if (err instanceof HTTPException) {
const code = statusToCode(err.status)
return c.json<ErrorSchema>(
{
code: code,
message: err.message,
docs: `https://docs.openstatus.dev/api-references/errors/code/${code}`,
},
{ status: err.status },
)
}
return c.json<ErrorSchema>(
{
code: 'INTERNAL_SERVER_ERROR',
message: err.message ?? 'Something went wrong',
docs: 'https://docs.openstatus.dev/api-references/errors/code/INTERNAL_SERVER_ERROR',
},
{ status: 500 },
)
}
export function handleZodError(
result:
| {
success: true
data: unknown
}
| {
success: false
error: ZodError
},
c: Context,
) {
if (!result.success) {
const error = SchemaError.fromZod(result.error, c)
return c.json<z.infer<ReturnType<typeof createErrorSchema>>>(
{
code: 'BAD_REQUEST',
docs: 'https://docs.openstatus.dev/api-references/errors/code/BAD_REQUEST',
message: error.message,
},
{ status: 400 },
)
}
}

30
apps/api/src/utils/errors/schema-error.ts Normal file
View File

@ -0,0 +1,30 @@
import type { ZodError } from 'zod'
import type { ErrorCode } from '.'
import { BaseError } from './base-error'
import { parseZodErrorIssues } from './utils'
type Context = { raw: unknown }
export class SchemaError extends BaseError<Context> {
public readonly name = SchemaError.name
public readonly code: ErrorCode
constructor(opts: {
code: ErrorCode
message: string
cause?: BaseError
context?: Context
}) {
super(opts)
this.code = opts.code
}
static fromZod<T>(e: ZodError<T>, raw: unknown): SchemaError {
return new SchemaError({
code: 'UNPROCESSABLE_ENTITY',
message: parseZodErrorIssues(e.issues),
context: { raw: JSON.stringify(raw) },
})
}
}

66
apps/api/src/utils/errors/utils.ts Normal file
View File

@ -0,0 +1,66 @@
import type { ZodIssue } from 'zod'
import type { ErrorCode } from '.'
export function statusToCode(status: number): ErrorCode {
switch (status) {
case 400:
return 'BAD_REQUEST'
case 401:
return 'UNAUTHORIZED'
case 403:
return 'FORBIDDEN'
case 404:
return 'NOT_FOUND'
case 405:
return 'METHOD_NOT_ALLOWED'
case 409:
return 'METHOD_NOT_ALLOWED'
case 422:
return 'UNPROCESSABLE_ENTITY'
case 500:
return 'INTERNAL_SERVER_ERROR'
default:
return 'INTERNAL_SERVER_ERROR'
}
}
export function codeToStatus(code: ErrorCode): number {
switch (code) {
case 'BAD_REQUEST':
return 400
case 'UNAUTHORIZED':
return 401
case 'FORBIDDEN':
return 403
case 'NOT_FOUND':
return 404
case 'METHOD_NOT_ALLOWED':
return 405
case 'CONFLICT':
return 409
case 'UNPROCESSABLE_ENTITY':
return 422
case 'INTERNAL_SERVER_ERROR':
return 500
default:
return 500
}
}
// Props to cal.com: https://github.com/calcom/cal.com/blob/5d325495a9c30c5a9d89fc2adfa620b8fde9346e/packages/lib/server/getServerErrorFromUnknown.ts#L17
export function parseZodErrorIssues(issues: ZodIssue[]): string {
return issues
.map((i) =>
i.code === 'invalid_union'
? i.unionErrors.map((ue) => parseZodErrorIssues(ue.issues)).join('; ')
: i.code === 'unrecognized_keys'
? i.message
: `${i.path.length ? `${i.code} in '${i.path}': ` : ''}${i.message}`,
)
.join('; ')
}
export function redactError<TError extends Error | unknown>(err: TError) {
if (!(err instanceof Error)) return err
console.error(`Type of Error: ${err.constructor}`)
}

72
apps/app/src/components/Page/Delete.tsx Normal file
View File

@ -0,0 +1,72 @@
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
AlertDialogTrigger,
Button,
Tooltip,
TooltipContent,
TooltipTrigger,
} from '@boring.tools/ui'
import { useNavigate } from '@tanstack/react-router'
import { Trash2Icon } from 'lucide-react'
import { useState } from 'react'
import { usePageDelete } from '../../hooks/usePage'
export const PageDelete = ({ id }: { id: string }) => {
const remove = usePageDelete()
const navigate = useNavigate({ from: `/page/${id}` })
const [isOpen, setIsOpen] = useState(false)
const removeChangelog = () => {
remove.mutate(
{ id },
{
onSuccess: () => {
setIsOpen(false)
navigate({ to: '/page' })
},
},
)
}
return (
<Tooltip>
<AlertDialog open={isOpen}>
<AlertDialogTrigger asChild>
<TooltipTrigger asChild>
<Button variant={'ghost'} onClick={() => setIsOpen(true)}>
<Trash2Icon strokeWidth={1.5} />
</Button>
</TooltipTrigger>
</AlertDialogTrigger>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
<AlertDialogDescription>
This action cannot be undone. This will permanently delete your
page and remove your data from our servers.
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel onClick={() => setIsOpen(false)}>
Cancel
</AlertDialogCancel>
<AlertDialogAction asChild>
<Button onClick={removeChangelog} variant={'destructive'}>
Remove
</Button>
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
<TooltipContent>
<p>Remove</p>
</TooltipContent>
</Tooltip>
)
}

64
apps/app/src/components/Sidebar.tsx
View File

@ -1,37 +1,22 @@
import { ChevronRightIcon, FileStackIcon } from 'lucide-react'
import { FileStackIcon, NotebookTextIcon } from 'lucide-react'
import {
Collapsible,
CollapsibleContent,
CollapsibleTrigger,
Sidebar as SidebarComp,
SidebarContent,
SidebarFooter,
SidebarGroup,
SidebarHeader,
SidebarMenu,
SidebarMenuAction,
SidebarMenuButton,
SidebarMenuItem,
SidebarMenuSub,
SidebarMenuSubButton,
SidebarMenuSubItem,
} from '@boring.tools/ui'
import { Link } from '@tanstack/react-router'
import { useChangelogList } from '../hooks/useChangelog'
import { SidebarChangelog } from './SidebarChangelog'
import { SidebarPage } from './SidebarPage'
import { SidebarUser } from './SidebarUser'
const items = [
{
title: 'Changelog',
url: '/changelog',
icon: FileStackIcon,
isActive: true,
},
]
export function Sidebar() {
const { data, error } = useChangelogList()
return (
<SidebarComp>
<SidebarHeader>
@ -53,47 +38,8 @@ export function Sidebar() {
<SidebarContent>
<SidebarGroup>
<SidebarMenu>
{items.map((item) => (
<Collapsible key={item.title} asChild defaultOpen={item.isActive}>
<SidebarMenuItem>
<SidebarMenuButton asChild tooltip={item.title}>
<Link
to={item.url}
activeProps={{ className: 'bg-sidebar-accent' }}
>
<item.icon />
<span>{item.title}</span>
</Link>
</SidebarMenuButton>
<CollapsibleTrigger asChild>
<SidebarMenuAction className="data-[state=open]:rotate-90">
<ChevronRightIcon />
<span className="sr-only">Toggle</span>
</SidebarMenuAction>
</CollapsibleTrigger>
<CollapsibleContent>
<SidebarMenuSub>
{!error &&
data?.map((changelog) => (
<SidebarMenuSubItem key={changelog.id}>
<SidebarMenuSubButton asChild>
<Link
to={`/changelog/${changelog.id}`}
activeProps={{
className: 'bg-sidebar-primary',
}}
>
<span>{changelog.title}</span>
</Link>
</SidebarMenuSubButton>
</SidebarMenuSubItem>
))}
</SidebarMenuSub>
</CollapsibleContent>
</SidebarMenuItem>
</Collapsible>
))}
<SidebarChangelog />
<SidebarPage />
</SidebarMenu>
</SidebarGroup>
</SidebarContent>

81
apps/app/src/components/SidebarChangelog.tsx Normal file
View File

@ -0,0 +1,81 @@
import {
Collapsible,
CollapsibleContent,
CollapsibleTrigger,
SidebarMenuAction,
SidebarMenuButton,
SidebarMenuItem,
SidebarMenuSub,
SidebarMenuSubButton,
SidebarMenuSubItem,
} from '@boring.tools/ui'
import { Link } from '@tanstack/react-router'
import {
ChevronRightIcon,
FileStackIcon,
PlusCircleIcon,
PlusIcon,
} from 'lucide-react'
import { useChangelogList } from '../hooks/useChangelog'
export const SidebarChangelog = () => {
const { data, error } = useChangelogList()
return (
<Collapsible asChild>
<SidebarMenuItem>
<SidebarMenuButton asChild tooltip="Changelog">
<Link
to="/changelog"
activeProps={{ className: 'bg-sidebar-accent' }}
>
<FileStackIcon />
<span>Changelog</span>
</Link>
</SidebarMenuButton>
<CollapsibleTrigger asChild>
<SidebarMenuAction className="data-[state=open]:rotate-90">
<ChevronRightIcon />
<span className="sr-only">Toggle</span>
</SidebarMenuAction>
</CollapsibleTrigger>
<CollapsibleContent>
<SidebarMenuSub>
{!error &&
data?.map((changelog) => (
<SidebarMenuSubItem key={changelog.id}>
<SidebarMenuSubButton asChild>
<Link
to={`/changelog/${changelog.id}`}
activeProps={{
className: 'bg-sidebar-primary',
}}
>
<span>{changelog.title}</span>
</Link>
</SidebarMenuSubButton>
</SidebarMenuSubItem>
))}
<SidebarMenuSubItem className="opacity-60">
<SidebarMenuSubButton asChild>
<Link
to="/changelog/create"
activeProps={{
className: 'bg-sidebar-primary',
}}
>
<span className="flex items-center gap-1">
<PlusIcon className="w-3 h-3" />
New changelog
</span>
</Link>
</SidebarMenuSubButton>
</SidebarMenuSubItem>
</SidebarMenuSub>
</CollapsibleContent>
</SidebarMenuItem>
</Collapsible>
)
}

73
apps/app/src/components/SidebarPage.tsx Normal file
View File

@ -0,0 +1,73 @@
import {
Collapsible,
CollapsibleContent,
CollapsibleTrigger,
SidebarMenuAction,
SidebarMenuButton,
SidebarMenuItem,
SidebarMenuSub,
SidebarMenuSubButton,
SidebarMenuSubItem,
} from '@boring.tools/ui'
import { Link } from '@tanstack/react-router'
import { ChevronRightIcon, NotebookTextIcon, PlusIcon } from 'lucide-react'
import { usePageList } from '../hooks/usePage'
export const SidebarPage = () => {
const { data, error } = usePageList()
return (
<Collapsible asChild>
<SidebarMenuItem>
<SidebarMenuButton asChild tooltip="Page">
<Link to="/page" activeProps={{ className: 'bg-sidebar-accent' }}>
<NotebookTextIcon />
<span>Page</span>
</Link>
</SidebarMenuButton>
<CollapsibleTrigger asChild>
<SidebarMenuAction className="data-[state=open]:rotate-90">
<ChevronRightIcon />
<span className="sr-only">Toggle</span>
</SidebarMenuAction>
</CollapsibleTrigger>
<CollapsibleContent>
<SidebarMenuSub>
{!error &&
data?.map((page) => (
<SidebarMenuSubItem key={page.id}>
<SidebarMenuSubButton asChild>
<Link
to={`/page/${page.id}`}
activeProps={{
className: 'bg-sidebar-primary',
}}
>
<span>{page.title}</span>
</Link>
</SidebarMenuSubButton>
</SidebarMenuSubItem>
))}
<SidebarMenuSubItem className="opacity-60">
<SidebarMenuSubButton asChild>
<Link
to="/page/create"
activeProps={{
className: 'bg-sidebar-primary',
}}
>
<span className="flex items-center gap-1">
<PlusIcon className="w-3 h-3" />
New page
</span>
</Link>
</SidebarMenuSubButton>
</SidebarMenuSubItem>
</SidebarMenuSub>
</CollapsibleContent>
</SidebarMenuItem>
</Collapsible>
)
}

193
apps/app/src/hooks/usePage.ts Normal file
View File

@ -0,0 +1,193 @@
import type {
PageByIdOutput,
PageCreateInput,
PageListOutput,
PageOutput,
PageUpdateInput,
} from '@boring.tools/schema'
import { useAuth } from '@clerk/clerk-react'
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
import type { z } from 'zod'
import { queryFetch } from '../utils/queryFetch'
type Page = z.infer<typeof PageOutput>
type PageList = z.infer<typeof PageListOutput>
type PageById = z.infer<typeof PageByIdOutput>
type PageCreate = z.infer<typeof PageCreateInput>
type PageUpdate = z.infer<typeof PageUpdateInput>
export const usePageList = () => {
const { getToken } = useAuth()
return useQuery({
queryKey: ['pageList'],
queryFn: async (): Promise<ReadonlyArray<PageList>> =>
await queryFetch({
path: 'page',
method: 'get',
token: await getToken(),
}),
})
}
export const usePageById = ({ id }: { id: string }) => {
const { getToken } = useAuth()
return useQuery({
queryKey: ['pageById', id],
queryFn: async (): Promise<Readonly<PageById>> =>
await queryFetch({
path: `page/${id}`,
method: 'get',
token: await getToken(),
}),
})
}
export const usePageCreate = () => {
const { getToken } = useAuth()
const queryClient = useQueryClient()
return useMutation({
mutationFn: async (payload: PageCreate): Promise<Readonly<Page>> =>
await queryFetch({
path: 'page',
data: payload,
method: 'post',
token: await getToken(),
}),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['pageList'] })
},
})
}
export const usePageDelete = () => {
const { getToken } = useAuth()
const queryClient = useQueryClient()
return useMutation({
mutationFn: async ({ id }: { id: string }): Promise<Readonly<Page>> =>
await queryFetch({
path: `page/${id}`,
method: 'delete',
token: await getToken(),
}),
onSuccess: (data) => {
queryClient.invalidateQueries({
queryKey: ['pageList', 'pageById', data.id],
})
},
})
}
export const usePageUpdate = () => {
const { getToken } = useAuth()
const queryClient = useQueryClient()
return useMutation({
mutationFn: async ({
id,
payload,
}: {
id: string
payload: PageUpdate
}): Promise<Readonly<Page>> =>
await queryFetch({
path: `page/${id}`,
data: payload,
method: 'put',
token: await getToken(),
}),
onSuccess: (data) => {
queryClient.invalidateQueries({
queryKey: ['pageById', data.id],
})
queryClient.invalidateQueries({
queryKey: ['pageList'],
})
},
})
}
/*
export const useChangelogVersionCreate = () => {
const { getToken } = useAuth()
const queryClient = useQueryClient()
return useMutation({
mutationFn: async (payload: VersionCreate): Promise<Readonly<Version>> =>
await queryFetch({
path: 'changelog/version',
data: payload,
method: 'post',
token: await getToken(),
}),
onSuccess: (data) => {
queryClient.invalidateQueries({ queryKey: ['changelogList'] })
queryClient.invalidateQueries({
queryKey: ['changelogById', data.changelogId],
})
},
})
}
export const useChangelogVersionById = ({ id }: { id: string }) => {
const { getToken } = useAuth()
return useQuery({
queryKey: ['changelogVersionById', id],
queryFn: async (): Promise<Readonly<Version>> =>
await queryFetch({
path: `changelog/version/${id}`,
method: 'get',
token: await getToken(),
}),
})
}
export const useChangelogVersionUpdate = () => {
const { getToken } = useAuth()
const queryClient = useQueryClient()
return useMutation({
mutationFn: async ({
id,
payload,
}: {
id: string
payload: VersionUpdate
}): Promise<Readonly<Version>> =>
await queryFetch({
path: `changelog/version/${id}`,
data: payload,
method: 'put',
token: await getToken(),
}),
onSuccess: (data) => {
queryClient.invalidateQueries({
queryKey: ['changelogById', data.id],
})
},
})
}
export const useChangelogVersionRemove = () => {
const { getToken } = useAuth()
const queryClient = useQueryClient()
return useMutation({
mutationFn: async ({ id }: { id: string }): Promise<Readonly<Version>> =>
await queryFetch({
path: `changelog/version/${id}`,
method: 'delete',
token: await getToken(),
}),
onSuccess: (data) => {
queryClient.invalidateQueries({
queryKey: ['changelogList', 'changelogById', data.id],
})
},
})
}
*/

139
apps/app/src/routeTree.gen.ts
View File

@ -19,10 +19,15 @@ import { Route as ChangelogIdVersionVersionIdImport } from './routes/changelog.$
const IndexLazyImport = createFileRoute('/')()
const UserIndexLazyImport = createFileRoute('/user/')()
const PageIndexLazyImport = createFileRoute('/page/')()
const ChangelogIndexLazyImport = createFileRoute('/changelog/')()
const PageCreateLazyImport = createFileRoute('/page/create')()
const PageIdLazyImport = createFileRoute('/page/$id')()
const ChangelogCreateLazyImport = createFileRoute('/changelog/create')()
const ChangelogIdLazyImport = createFileRoute('/changelog/$id')()
const PageIdIndexLazyImport = createFileRoute('/page/$id/')()
const ChangelogIdIndexLazyImport = createFileRoute('/changelog/$id/')()
const PageIdEditLazyImport = createFileRoute('/page/$id/edit')()
const ChangelogIdVersionCreateLazyImport = createFileRoute(
'/changelog/$id/versionCreate',
)()
@ -40,6 +45,11 @@ const UserIndexLazyRoute = UserIndexLazyImport.update({
getParentRoute: () => rootRoute,
} as any).lazy(() => import('./routes/user/index.lazy').then((d) => d.Route))
const PageIndexLazyRoute = PageIndexLazyImport.update({
path: '/page/',
getParentRoute: () => rootRoute,
} as any).lazy(() => import('./routes/page.index.lazy').then((d) => d.Route))
const ChangelogIndexLazyRoute = ChangelogIndexLazyImport.update({
path: '/changelog/',
getParentRoute: () => rootRoute,
@ -47,6 +57,16 @@ const ChangelogIndexLazyRoute = ChangelogIndexLazyImport.update({
import('./routes/changelog.index.lazy').then((d) => d.Route),
)
const PageCreateLazyRoute = PageCreateLazyImport.update({
path: '/page/create',
getParentRoute: () => rootRoute,
} as any).lazy(() => import('./routes/page.create.lazy').then((d) => d.Route))
const PageIdLazyRoute = PageIdLazyImport.update({
path: '/page/$id',
getParentRoute: () => rootRoute,
} as any).lazy(() => import('./routes/page.$id.lazy').then((d) => d.Route))
const ChangelogCreateLazyRoute = ChangelogCreateLazyImport.update({
path: '/changelog/create',
getParentRoute: () => rootRoute,
@ -59,6 +79,13 @@ const ChangelogIdLazyRoute = ChangelogIdLazyImport.update({
getParentRoute: () => rootRoute,
} as any).lazy(() => import('./routes/changelog.$id.lazy').then((d) => d.Route))
const PageIdIndexLazyRoute = PageIdIndexLazyImport.update({
path: '/',
getParentRoute: () => PageIdLazyRoute,
} as any).lazy(() =>
import('./routes/page.$id.index.lazy').then((d) => d.Route),
)
const ChangelogIdIndexLazyRoute = ChangelogIdIndexLazyImport.update({
path: '/',
getParentRoute: () => ChangelogIdLazyRoute,
@ -66,6 +93,11 @@ const ChangelogIdIndexLazyRoute = ChangelogIdIndexLazyImport.update({
import('./routes/changelog.$id.index.lazy').then((d) => d.Route),
)
const PageIdEditLazyRoute = PageIdEditLazyImport.update({
path: '/edit',
getParentRoute: () => PageIdLazyRoute,
} as any).lazy(() => import('./routes/page.$id.edit.lazy').then((d) => d.Route))
const ChangelogIdVersionCreateLazyRoute =
ChangelogIdVersionCreateLazyImport.update({
path: '/versionCreate',
@ -112,6 +144,20 @@ declare module '@tanstack/react-router' {
preLoaderRoute: typeof ChangelogCreateLazyImport
parentRoute: typeof rootRoute
}
'/page/$id': {
id: '/page/$id'
path: '/page/$id'
fullPath: '/page/$id'
preLoaderRoute: typeof PageIdLazyImport
parentRoute: typeof rootRoute
}
'/page/create': {
id: '/page/create'
path: '/page/create'
fullPath: '/page/create'
preLoaderRoute: typeof PageCreateLazyImport
parentRoute: typeof rootRoute
}
'/changelog/': {
id: '/changelog/'
path: '/changelog'
@ -119,6 +165,13 @@ declare module '@tanstack/react-router' {
preLoaderRoute: typeof ChangelogIndexLazyImport
parentRoute: typeof rootRoute
}
'/page/': {
id: '/page/'
path: '/page'
fullPath: '/page'
preLoaderRoute: typeof PageIndexLazyImport
parentRoute: typeof rootRoute
}
'/user/': {
id: '/user/'
path: '/user'
@ -140,6 +193,13 @@ declare module '@tanstack/react-router' {
preLoaderRoute: typeof ChangelogIdVersionCreateLazyImport
parentRoute: typeof ChangelogIdLazyImport
}
'/page/$id/edit': {
id: '/page/$id/edit'
path: '/edit'
fullPath: '/page/$id/edit'
preLoaderRoute: typeof PageIdEditLazyImport
parentRoute: typeof PageIdLazyImport
}
'/changelog/$id/': {
id: '/changelog/$id/'
path: '/'
@ -147,6 +207,13 @@ declare module '@tanstack/react-router' {
preLoaderRoute: typeof ChangelogIdIndexLazyImport
parentRoute: typeof ChangelogIdLazyImport
}
'/page/$id/': {
id: '/page/$id/'
path: '/'
fullPath: '/page/$id/'
preLoaderRoute: typeof PageIdIndexLazyImport
parentRoute: typeof PageIdLazyImport
}
'/changelog/$id/version/$versionId': {
id: '/changelog/$id/version/$versionId'
path: '/version/$versionId'
@ -177,26 +244,49 @@ const ChangelogIdLazyRouteWithChildren = ChangelogIdLazyRoute._addFileChildren(
ChangelogIdLazyRouteChildren,
)
interface PageIdLazyRouteChildren {
PageIdEditLazyRoute: typeof PageIdEditLazyRoute
PageIdIndexLazyRoute: typeof PageIdIndexLazyRoute
}
const PageIdLazyRouteChildren: PageIdLazyRouteChildren = {
PageIdEditLazyRoute: PageIdEditLazyRoute,
PageIdIndexLazyRoute: PageIdIndexLazyRoute,
}
const PageIdLazyRouteWithChildren = PageIdLazyRoute._addFileChildren(
PageIdLazyRouteChildren,
)
export interface FileRoutesByFullPath {
'/': typeof IndexLazyRoute
'/changelog/$id': typeof ChangelogIdLazyRouteWithChildren
'/changelog/create': typeof ChangelogCreateLazyRoute
'/page/$id': typeof PageIdLazyRouteWithChildren
'/page/create': typeof PageCreateLazyRoute
'/changelog': typeof ChangelogIndexLazyRoute
'/page': typeof PageIndexLazyRoute
'/user': typeof UserIndexLazyRoute
'/changelog/$id/edit': typeof ChangelogIdEditLazyRoute
'/changelog/$id/versionCreate': typeof ChangelogIdVersionCreateLazyRoute
'/page/$id/edit': typeof PageIdEditLazyRoute
'/changelog/$id/': typeof ChangelogIdIndexLazyRoute
'/page/$id/': typeof PageIdIndexLazyRoute
'/changelog/$id/version/$versionId': typeof ChangelogIdVersionVersionIdRoute
}
export interface FileRoutesByTo {
'/': typeof IndexLazyRoute
'/changelog/create': typeof ChangelogCreateLazyRoute
'/page/create': typeof PageCreateLazyRoute
'/changelog': typeof ChangelogIndexLazyRoute
'/page': typeof PageIndexLazyRoute
'/user': typeof UserIndexLazyRoute
'/changelog/$id/edit': typeof ChangelogIdEditLazyRoute
'/changelog/$id/versionCreate': typeof ChangelogIdVersionCreateLazyRoute
'/page/$id/edit': typeof PageIdEditLazyRoute
'/changelog/$id': typeof ChangelogIdIndexLazyRoute
'/page/$id': typeof PageIdIndexLazyRoute
'/changelog/$id/version/$versionId': typeof ChangelogIdVersionVersionIdRoute
}
@ -205,11 +295,16 @@ export interface FileRoutesById {
'/': typeof IndexLazyRoute
'/changelog/$id': typeof ChangelogIdLazyRouteWithChildren
'/changelog/create': typeof ChangelogCreateLazyRoute
'/page/$id': typeof PageIdLazyRouteWithChildren
'/page/create': typeof PageCreateLazyRoute
'/changelog/': typeof ChangelogIndexLazyRoute
'/page/': typeof PageIndexLazyRoute
'/user/': typeof UserIndexLazyRoute
'/changelog/$id/edit': typeof ChangelogIdEditLazyRoute
'/changelog/$id/versionCreate': typeof ChangelogIdVersionCreateLazyRoute
'/page/$id/edit': typeof PageIdEditLazyRoute
'/changelog/$id/': typeof ChangelogIdIndexLazyRoute
'/page/$id/': typeof PageIdIndexLazyRoute
'/changelog/$id/version/$versionId': typeof ChangelogIdVersionVersionIdRoute
}
@ -219,32 +314,46 @@ export interface FileRouteTypes {
| '/'
| '/changelog/$id'
| '/changelog/create'
| '/page/$id'
| '/page/create'
| '/changelog'
| '/page'
| '/user'
| '/changelog/$id/edit'
| '/changelog/$id/versionCreate'
| '/page/$id/edit'
| '/changelog/$id/'
| '/page/$id/'
| '/changelog/$id/version/$versionId'
fileRoutesByTo: FileRoutesByTo
to:
| '/'
| '/changelog/create'
| '/page/create'
| '/changelog'
| '/page'
| '/user'
| '/changelog/$id/edit'
| '/changelog/$id/versionCreate'
| '/page/$id/edit'
| '/changelog/$id'
| '/page/$id'
| '/changelog/$id/version/$versionId'
id:
| '__root__'
| '/'
| '/changelog/$id'
| '/changelog/create'
| '/page/$id'
| '/page/create'
| '/changelog/'
| '/page/'
| '/user/'
| '/changelog/$id/edit'
| '/changelog/$id/versionCreate'
| '/page/$id/edit'
| '/changelog/$id/'
| '/page/$id/'
| '/changelog/$id/version/$versionId'
fileRoutesById: FileRoutesById
}
@ -253,7 +362,10 @@ export interface RootRouteChildren {
IndexLazyRoute: typeof IndexLazyRoute
ChangelogIdLazyRoute: typeof ChangelogIdLazyRouteWithChildren
ChangelogCreateLazyRoute: typeof ChangelogCreateLazyRoute
PageIdLazyRoute: typeof PageIdLazyRouteWithChildren
PageCreateLazyRoute: typeof PageCreateLazyRoute
ChangelogIndexLazyRoute: typeof ChangelogIndexLazyRoute
PageIndexLazyRoute: typeof PageIndexLazyRoute
UserIndexLazyRoute: typeof UserIndexLazyRoute
}
@ -261,7 +373,10 @@ const rootRouteChildren: RootRouteChildren = {
IndexLazyRoute: IndexLazyRoute,
ChangelogIdLazyRoute: ChangelogIdLazyRouteWithChildren,
ChangelogCreateLazyRoute: ChangelogCreateLazyRoute,
PageIdLazyRoute: PageIdLazyRouteWithChildren,
PageCreateLazyRoute: PageCreateLazyRoute,
ChangelogIndexLazyRoute: ChangelogIndexLazyRoute,
PageIndexLazyRoute: PageIndexLazyRoute,
UserIndexLazyRoute: UserIndexLazyRoute,
}
@ -280,7 +395,10 @@ export const routeTree = rootRoute
"/",
"/changelog/$id",
"/changelog/create",
"/page/$id",
"/page/create",
"/changelog/",
"/page/",
"/user/"
]
},
@ -299,9 +417,22 @@ export const routeTree = rootRoute
"/changelog/create": {
"filePath": "changelog.create.lazy.tsx"
},
"/page/$id": {
"filePath": "page.$id.lazy.tsx",
"children": [
"/page/$id/edit",
"/page/$id/"
]
},
"/page/create": {
"filePath": "page.create.lazy.tsx"
},
"/changelog/": {
"filePath": "changelog.index.lazy.tsx"
},
"/page/": {
"filePath": "page.index.lazy.tsx"
},
"/user/": {
"filePath": "user/index.lazy.tsx"
},
@ -313,10 +444,18 @@ export const routeTree = rootRoute
"filePath": "changelog.$id.versionCreate.lazy.tsx",
"parent": "/changelog/$id"
},
"/page/$id/edit": {
"filePath": "page.$id.edit.lazy.tsx",
"parent": "/page/$id"
},
"/changelog/$id/": {
"filePath": "changelog.$id.index.lazy.tsx",
"parent": "/changelog/$id"
},
"/page/$id/": {
"filePath": "page.$id.index.lazy.tsx",
"parent": "/page/$id"
},
"/changelog/$id/version/$versionId": {
"filePath": "changelog.$id.version.$versionId.tsx",
"parent": "/changelog/$id"

2
apps/app/src/routes/changelog.$id.lazy.tsx
View File

@ -13,7 +13,7 @@ import { useChangelogById } from '../hooks/useChangelog'
const Component = () => {
const { id } = Route.useParams()
const { data, error, isPending, refetch } = useChangelogById({ id })
console.log(data)
if (error) {
return (
<div className="flex items-center justify-center mt-32 flex-col">

192
apps/app/src/routes/page.$id.edit.lazy.tsx Normal file
View File

@ -0,0 +1,192 @@
import { PageUpdateInput } from '@boring.tools/schema'
import {
Button,
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
Form,
FormControl,
FormDescription,
FormField,
FormItem,
FormLabel,
FormMessage,
Input,
Popover,
PopoverContent,
PopoverTrigger,
Textarea,
cn,
} from '@boring.tools/ui'
import { zodResolver } from '@hookform/resolvers/zod'
import { createLazyFileRoute } from '@tanstack/react-router'
import { useNavigate } from '@tanstack/react-router'
import { Check, ChevronsUpDown } from 'lucide-react'
import { useForm } from 'react-hook-form'
import type { z } from 'zod'
import { useChangelogList } from '../hooks/useChangelog'
import { usePageById, usePageUpdate } from '../hooks/usePage'
const Component = () => {
const { id } = Route.useParams()
const navigate = useNavigate({ from: `/page/${id}/edit` })
const page = usePageById({ id })
const changelogList = useChangelogList()
const pageUpdate = usePageUpdate()
const form = useForm<z.infer<typeof PageUpdateInput>>({
resolver: zodResolver(PageUpdateInput),
defaultValues: {
...page.data,
changelogIds: page.data?.changelogs.map((log) => log.id),
},
})
const onSubmit = (values: z.infer<typeof PageUpdateInput>) => {
pageUpdate.mutate(
{ id, payload: values },
{
onSuccess(data) {
navigate({ to: '/page/$id', params: { id: data.id } })
},
},
)
}
return (
<>
<div className="flex flex-col gap-5">
<h1 className="text-3xl">Edit page</h1>
<Form {...form}>
<form
onSubmit={form.handleSubmit(onSubmit)}
className="space-y-8 max-w-screen-md"
>
<FormField
control={form.control}
name="title"
render={({ field }) => (
<FormItem>
<FormLabel>Title</FormLabel>
<FormControl>
<Input placeholder="My page" {...field} autoFocus />
</FormControl>{' '}
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="description"
render={({ field }) => (
<FormItem>
<FormLabel>Description</FormLabel>
<FormControl>
<Textarea
placeholder="Some details about the page..."
{...field}
/>
</FormControl>{' '}
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="changelogIds"
render={({ field }) => (
<FormItem className="flex flex-col">
<FormLabel>Changelogs</FormLabel>
<Popover>
<PopoverTrigger asChild>
<FormControl>
<Button
variant="outline"
role="combobox"
className={cn(
'w-[200px] justify-between',
!field.value && 'text-muted-foreground',
)}
>
{field.value.length === 1 &&
changelogList.data?.find((changelog) =>
field.value?.includes(changelog.id),
)?.title}
{field.value.length <= 0 && 'No changelog selected'}
{field.value.length > 1 &&
`${field.value.length} selected`}
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
</Button>
</FormControl>
</PopoverTrigger>
<PopoverContent className="w-[200px] p-0">
<Command>
<CommandInput placeholder="Search changelogs..." />
<CommandList>
<CommandEmpty>No changelog found.</CommandEmpty>
<CommandGroup>
{changelogList.data?.map((changelog) => (
<CommandItem
value={changelog.title}
key={changelog.id}
onSelect={() => {
const getIds = () => {
if (field.value.includes(changelog.id)) {
const asd = field.value.filter(
(id) => id !== changelog.id,
)
return asd
}
return [...field.value, changelog.id]
}
form.setValue('changelogIds', getIds())
}}
>
<Check
className={cn(
'mr-2 h-4 w-4',
field.value.includes(changelog.id)
? 'opacity-100'
: 'opacity-0',
)}
/>
{changelog.title}
</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
<FormDescription>
This changelogs are shown on this page.
</FormDescription>
<FormMessage />
</FormItem>
)}
/>
<div className="flex gap-5">
<Button
type="button"
variant={'ghost'}
onClick={() => navigate({ to: '/page/$id', params: { id } })}
>
Cancel
</Button>
<Button type="submit">Update</Button>
</div>
</form>
</Form>
</div>
</>
)
}
export const Route = createLazyFileRoute('/page/$id/edit')({
component: Component,
})

61
apps/app/src/routes/page.$id.index.lazy.tsx Normal file
View File

@ -0,0 +1,61 @@
import {
Button,
Card,
CardContent,
CardHeader,
CardTitle,
} from '@boring.tools/ui'
import { Link, createLazyFileRoute } from '@tanstack/react-router'
import { PlusCircleIcon } from 'lucide-react'
import { VersionStatus } from '../components/Changelog/VersionStatus'
import { useChangelogById } from '../hooks/useChangelog'
import { usePageById } from '../hooks/usePage'
const Component = () => {
const { id } = Route.useParams()
const { data, isPending } = usePageById({ id })
return (
<div className="flex flex-col gap-5">
{!isPending && data && (
<div>
<Card className="w-full max-w-screen-sm">
<CardHeader>
<div className="flex items-center justify-between">
<CardTitle>Changelogs ({data.changelogs?.length})</CardTitle>
<Link to="/changelog/$id/versionCreate" params={{ id }}>
<Button variant={'ghost'} size={'icon'}>
<PlusCircleIcon strokeWidth={1.5} className="w-5 h-5" />
</Button>
</Link>
</div>
</CardHeader>
<CardContent>
<div className="flex flex-col gap-1">
{data.changelogs.map((changelog) => {
return (
<Link
className="hover:bg-muted py-1 px-2 rounded transition flex gap-2 items-center"
to="/changelog/$id"
params={{
id: changelog.id,
}}
key={changelog.id}
>
{changelog.title}
</Link>
)
})}
</div>
</CardContent>
</Card>
</div>
)}
</div>
)
}
export const Route = createLazyFileRoute('/page/$id/')({
component: Component,
})

108
apps/app/src/routes/page.$id.lazy.tsx Normal file
View File

@ -0,0 +1,108 @@
import {
Button,
Tooltip,
TooltipContent,
TooltipTrigger,
} from '@boring.tools/ui'
import { Link, Outlet, createLazyFileRoute } from '@tanstack/react-router'
import { FileStackIcon, PencilIcon } from 'lucide-react'
import { PageDelete } from '../components/Page/Delete'
import { PageWrapper } from '../components/PageWrapper'
import { useChangelogById } from '../hooks/useChangelog'
import { usePageById } from '../hooks/usePage'
const Component = () => {
const { id } = Route.useParams()
const { data, error, isPending, refetch } = usePageById({ id })
console.log(data)
if (error) {
return (
<div className="flex items-center justify-center mt-32 flex-col">
<h1 className="text-3xl">Changelogs</h1>
<p>Please try again later</p>
<Button onClick={() => refetch()}>Retry</Button>
</div>
)
}
return (
<PageWrapper
breadcrumbs={[
{
name: 'Page',
to: '/page',
},
{ name: data?.title ?? '', to: `/page/${data?.id}` },
]}
>
<div className="flex flex-col gap-5">
{!isPending && data && (
<div>
<div className="flex justify-between items-center">
<div className="flex gap-3 items-center">
<FileStackIcon
strokeWidth={1.5}
className="w-10 h-10 text-muted-foreground"
/>
<div>
<h1 className="text-3xl">{data.title}</h1>
<p className="text-muted-foreground mt-2">
{data.description}
</p>
</div>
</div>
<div className="flex items-center gap-3">
{/* <Tooltip>
<TooltipTrigger asChild>
<Button variant={'ghost'}>
<TerminalSquareIcon strokeWidth={1.5} />
</Button>
</TooltipTrigger>
<TooltipContent>
<p>CLI</p>
</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger asChild>
<Button variant={'ghost'}>
<Globe2Icon strokeWidth={1.5} />
</Button>
</TooltipTrigger>
<TooltipContent>
<p>Public Page</p>
</TooltipContent>
</Tooltip> */}
<Tooltip>
<TooltipTrigger asChild>
<Link to={'/page/$id/edit'} params={{ id }}>
<Button variant={'ghost'}>
<PencilIcon strokeWidth={1.5} />
</Button>
</Link>
</TooltipTrigger>
<TooltipContent>
<p>Edit</p>
</TooltipContent>
</Tooltip>
<PageDelete id={id} />
</div>
</div>
<div className="mt-5">
<Outlet />
</div>
</div>
)}
</div>
</PageWrapper>
)
}
export const Route = createLazyFileRoute('/page/$id')({
component: Component,
})

200
apps/app/src/routes/page.create.lazy.tsx Normal file
View File

@ -0,0 +1,200 @@
import { ChangelogCreateInput, PageCreateInput } from '@boring.tools/schema'
import {
Button,
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
Form,
FormControl,
FormDescription,
FormField,
FormItem,
FormLabel,
FormMessage,
Input,
Popover,
PopoverContent,
PopoverTrigger,
Textarea,
cn,
} from '@boring.tools/ui'
import { zodResolver } from '@hookform/resolvers/zod'
import { createLazyFileRoute } from '@tanstack/react-router'
import { useNavigate } from '@tanstack/react-router'
import { Check, ChevronsUpDown } from 'lucide-react'
import { useForm } from 'react-hook-form'
import type { z } from 'zod'
import { PageWrapper } from '../components/PageWrapper'
import { useChangelogCreate, useChangelogList } from '../hooks/useChangelog'
import { usePageCreate } from '../hooks/usePage'
const languages = [
{ label: 'English', value: 'en' },
{ label: 'French', value: 'fr' },
{ label: 'German', value: 'de' },
{ label: 'Spanish', value: 'es' },
{ label: 'Portuguese', value: 'pt' },
{ label: 'Russian', value: 'ru' },
{ label: 'Japanese', value: 'ja' },
{ label: 'Korean', value: 'ko' },
{ label: 'Chinese', value: 'zh' },
] as const
const Component = () => {
const navigate = useNavigate({ from: '/page/create' })
const changelogList = useChangelogList()
const pageCreate = usePageCreate()
const form = useForm<z.infer<typeof PageCreateInput>>({
resolver: zodResolver(PageCreateInput),
defaultValues: {
title: '',
description: '',
icon: '',
changelogIds: [],
},
})
const onSubmit = (values: z.infer<typeof PageCreateInput>) => {
pageCreate.mutate(values, {
onSuccess(data) {
navigate({ to: '/page/$id', params: { id: data.id } })
},
})
}
return (
<PageWrapper
breadcrumbs={[
{
name: 'Page',
to: '/page',
},
{ name: 'New', to: '/page/create' },
]}
>
<div className="flex flex-col gap-5">
<h1 className="text-3xl">New page</h1>
<Form {...form}>
<form
onSubmit={form.handleSubmit(onSubmit)}
className="space-y-8 max-w-screen-md"
>
<FormField
control={form.control}
name="title"
render={({ field }) => (
<FormItem>
<FormLabel>Title</FormLabel>
<FormControl>
<Input placeholder="My page" {...field} autoFocus />
</FormControl>{' '}
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="description"
render={({ field }) => (
<FormItem>
<FormLabel>Description</FormLabel>
<FormControl>
<Textarea
placeholder="Some details about the page..."
{...field}
/>
</FormControl>{' '}
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="changelogIds"
render={({ field }) => (
<FormItem className="flex flex-col">
<FormLabel>Changelogs</FormLabel>
<Popover>
<PopoverTrigger asChild>
<FormControl>
<Button
variant="outline"
role="combobox"
className={cn(
'w-[200px] justify-between',
!field.value && 'text-muted-foreground',
)}
>
{field.value.length === 1 &&
changelogList.data?.find((changelog) =>
field.value?.includes(changelog.id),
)?.title}
{field.value.length <= 0 && 'No changelog selected'}
{field.value.length > 1 &&
`${field.value.length} selected`}
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
</Button>
</FormControl>
</PopoverTrigger>
<PopoverContent className="w-[200px] p-0">
<Command>
<CommandInput placeholder="Search changelogs..." />
<CommandList>
<CommandEmpty>No changelog found.</CommandEmpty>
<CommandGroup>
{changelogList.data?.map((changelog) => (
<CommandItem
value={changelog.title}
key={changelog.id}
onSelect={() => {
const getIds = () => {
if (field.value.includes(changelog.id)) {
const asd = field.value.filter(
(id) => id !== changelog.id,
)
return asd
}
return [...field.value, changelog.id]
}
form.setValue('changelogIds', getIds())
}}
>
<Check
className={cn(
'mr-2 h-4 w-4',
field.value.includes(changelog.id)
? 'opacity-100'
: 'opacity-0',
)}
/>
{changelog.title}
</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
<FormDescription>
This changelogs are shown on this page.
</FormDescription>
<FormMessage />
</FormItem>
)}
/>
<Button type="submit">Create</Button>
</form>
</Form>
</div>
</PageWrapper>
)
}
export const Route = createLazyFileRoute('/page/create')({
component: Component,
})

14
apps/app/src/routes/page.index.lazy.tsx Normal file
View File

@ -0,0 +1,14 @@
import { createLazyFileRoute } from '@tanstack/react-router'
import { usePageById, usePageList } from '../hooks/usePage'
const Component = () => {
const { data, error } = usePageList()
console.log(data)
return <div>some</div>
}
export const Route = createLazyFileRoute('/page/')({
component: Component,
})

2
apps/app/tsconfig.tsbuildinfo
View File

@ -1 +1 @@
{"root":["./src/main.tsx","./src/routeTree.gen.ts","./src/vite-env.d.ts","./src/components/Layout.tsx","./src/components/Navigation.tsx","./src/components/NavigationMobile.tsx","./src/components/Sidebar.tsx","./src/components/SidebarUser.tsx","./src/components/Changelog/Delete.tsx","./src/components/Changelog/VersionDelete.tsx","./src/components/Changelog/VersionStatus.tsx","./src/hooks/useChangelog.ts","./src/routes/__root.tsx","./src/routes/changelog.$id.edit.lazy.tsx","./src/routes/changelog.$id.index.lazy.tsx","./src/routes/changelog.$id.lazy.tsx","./src/routes/changelog.$id.version.$versionId.tsx","./src/routes/changelog.$id.versionCreate.lazy.tsx","./src/routes/changelog.create.lazy.tsx","./src/routes/changelog.index.lazy.tsx","./src/routes/index.lazy.tsx","./src/routes/user/index.lazy.tsx","./src/utils/navigation-routes.ts","./src/utils/queryFetch.ts"],"version":"5.6.2"}
{"root":["./src/main.tsx","./src/routeTree.gen.ts","./src/vite-env.d.ts","./src/components/Layout.tsx","./src/components/Navigation.tsx","./src/components/NavigationMobile.tsx","./src/components/PageWrapper.tsx","./src/components/Sidebar.tsx","./src/components/SidebarUser.tsx","./src/components/Changelog/Delete.tsx","./src/components/Changelog/VersionDelete.tsx","./src/components/Changelog/VersionStatus.tsx","./src/hooks/useChangelog.ts","./src/routes/__root.tsx","./src/routes/changelog.$id.edit.lazy.tsx","./src/routes/changelog.$id.index.lazy.tsx","./src/routes/changelog.$id.lazy.tsx","./src/routes/changelog.$id.version.$versionId.tsx","./src/routes/changelog.$id.versionCreate.lazy.tsx","./src/routes/changelog.create.lazy.tsx","./src/routes/changelog.index.lazy.tsx","./src/routes/index.lazy.tsx","./src/routes/user/index.lazy.tsx","./src/utils/navigation-routes.ts","./src/utils/queryFetch.ts"],"version":"5.6.2"}

105
apps/changelog_public/src/pages/[id].astro
View File

@ -1,11 +1,16 @@
---
import { Button } from '@boring.tools/ui'
import type { PageByIdOutput } from '@boring.tools/schema'
import { Separator } from '@boring.tools/ui'
import type { z } from 'astro/zod'
import { format } from 'date-fns'
type PageById = z.infer<typeof PageByIdOutput>
const url = import.meta.env.DEV
? 'http://localhost:3000'
: 'https://api.boring.tools'
const { id } = Astro.params
const response = await fetch(`http://localhost:3000/v1/changelog/public/${id}`)
const data = await response.json()
console.log(data)
const response = await fetch(`${url}/v1/page/${id}/public`)
const data: PageById = await response.json()
---
<html lang="en">
@ -16,33 +21,87 @@ console.log(data)
<meta name="generator" content={Astro.generator} />
<title>{data.title} | boring.tools</title>
</head>
<body>
<body class="bg-neutral-100">
<div class="w-full flex items-center justify-center">
<div class="w-full max-w-screen-sm flex my-6 flex-col gap-8">
<div class="flex flex-col">
<h1 class="prose prose-2xl">{data.title}</h1>
<p class="prose">{data.description}</p>
<p class="prose text-sm">{data.description}</p>
</div>
{data.versions.map((version) => {
return (
<div class="flex gap-10">
<div>
<h2 class="prose text-3xl font-bold">
{version.version}
</h2>
<p class="prose prose-sm">
{format(new Date(version.releasedAt), "dd-MM-yy")}
</p>
</div>
{data.changelogs.length >= 2 && <div class="flex flex-col">
<h2 class="prose prose-xl">Changelogs</h2>
{data.changelogs.map((changelog) => {
if (changelog.versions && changelog.versions?.length < 1) {
return null
}
return <div>
<h3 class="font-bold">{changelog.title}</h3>
<Separator />
<div class="flex flex-col gap-5 my-6">
<p>
{version.markdown}
</p>
{changelog.versions?.map((version) => {
return (
<div class="flex gap-10 bg-white rounded p-3 border border-neutral-300">
<div>
<h2 class="prose text-3xl font-bold">
{version.version}
</h2>
{version.releasedAt &&
<p class="prose text-xs text-center">
{format(new Date(String(version.releasedAt)), "dd-MM-yy")}
</p>
}
</div>
<p>
{version.markdown}
</p>
</div>
)
})}
</div>
</div>
)
})}
})}
</div>}
{data.changelogs.length === 1 && <div>
<h2 class="uppercase text-sm prose tracking-widest">Changelog</h2>
{data.changelogs.map((changelog) => {
if (changelog.versions && changelog.versions?.length < 1) {
return null
}
return <div>
<div class="flex flex-col gap-5 my-3">
{changelog.versions?.map((version) => {
return (
<div class="flex gap-10 bg-white rounded p-3 border border-neutral-300">
<div>
<h2 class="prose text-3xl font-bold">
{version.version}
</h2>
{version.releasedAt &&
<p class="prose text-xs text-center">
{format(new Date(String(version.releasedAt)), "dd-MM-yy")}
</p>
}
</div>
<p>
{version.markdown}
</p>
</div>
)
})}
</div>
</div>
})}
</div>}
</div>
</div>
</body>

BIN
bun.lockb
View File

Binary file not shown.

2
lefthook.yaml
View File

@ -1,6 +1,6 @@
pre-commit:
commands:
check:
glob: "*.{js,ts,cjs,mjs,d.cts,d.mts,jsx,tsx,json,jsonc}"
glob: "*.{js,ts,cjs,mjs,d.cts,d.mts,jsx,tsx,json,jsonc,astro}"
run: bunx @biomejs/biome check --write --no-errors-on-unmatched --files-ignore-unknown=true --colors=off {staged_files}
stage_fixed: true

2
packages/database/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@boring.tools/database",
"module": "src/index.ts",
"main": "./src/index.ts",
"type": "module",
"scripts": {
"db:push": "drizzle-kit push",

34
packages/database/src/schema/changelog.ts
View File

@ -3,6 +3,7 @@ import {
boolean,
pgEnum,
pgTable,
primaryKey,
text,
timestamp,
uuid,
@ -10,6 +11,7 @@ import {
} from 'drizzle-orm/pg-core'
import { json } from 'drizzle-orm/pg-core'
import { uniqueIndex } from 'drizzle-orm/pg-core'
import { page } from './page'
import { user } from './user'
export const changelog = pgTable('changelog', {
@ -21,11 +23,42 @@ export const changelog = pgTable('changelog', {
onDelete: 'cascade',
}),
pageId: uuid('pageId').references(() => page.id),
title: varchar('title', { length: 256 }),
description: text('description'),
isSemver: boolean('isSemver').default(true),
})
export const changelogs_to_pages = pgTable(
'changelogs_to_pages',
{
changelogId: uuid('changelogId')
.notNull()
.references(() => changelog.id, { onDelete: 'cascade' }),
pageId: uuid('pageId')
.notNull()
.references(() => page.id, { onDelete: 'cascade' }),
},
(t) => ({
pk: primaryKey({ columns: [t.changelogId, t.pageId] }),
}),
)
export const changelogs_to_pages_relations = relations(
changelogs_to_pages,
({ one }) => ({
changelog: one(changelog, {
fields: [changelogs_to_pages.changelogId],
references: [changelog.id],
}),
page: one(page, {
fields: [changelogs_to_pages.pageId],
references: [page.id],
}),
}),
)
export const changelog_relation = relations(changelog, ({ many, one }) => ({
versions: many(changelog_version),
commits: many(changelog_commit),
@ -33,6 +66,7 @@ export const changelog_relation = relations(changelog, ({ many, one }) => ({
fields: [changelog.userId],
references: [user.id],
}),
pages: many(changelogs_to_pages),
}))
export const changelog_version_status = pgEnum('status', [

1
packages/database/src/schema/index.ts
View File

@ -1,3 +1,4 @@
export * from './user'
export * from './access_token'
export * from './changelog'
export * from './page'

20
packages/database/src/schema/page.ts Normal file
View File

@ -0,0 +1,20 @@
import { relations } from 'drizzle-orm'
import { pgTable, text, uuid, varchar } from 'drizzle-orm/pg-core'
import { changelog, changelogs_to_pages } from './changelog'
import { user } from './user'
export const page = pgTable('page', {
id: uuid('id').primaryKey().defaultRandom(),
userId: varchar('userId', { length: 32 }).references(() => user.id, {
onDelete: 'cascade',
}),
title: text('title').notNull(),
description: text('description').notNull(),
icon: text('icon').default(''),
})
export const pageRelation = relations(page, ({ many }) => ({
changelogs: many(changelogs_to_pages),
}))

7
packages/schema/src/changelog/byId.ts
View File

@ -1,4 +1,9 @@
import { z } from '@hono/zod-openapi'
import { PageOutput } from '../page'
import { ChangelogOutput } from './base'
export const ChangelogListOutput = z.array(ChangelogOutput)
export const ChangelogListOutput = z.array(
ChangelogOutput.extend({
pages: z.array(PageOutput).optional(),
}),
)

1
packages/schema/src/index.ts
View File

@ -2,3 +2,4 @@ export * from './general'
export * from './user'
export * from './changelog'
export * from './version'
export * from './page'

13
packages/schema/src/page/base.ts Normal file
View File

@ -0,0 +1,13 @@
import { z } from '@hono/zod-openapi'
import { ChangelogOutput } from '../changelog'
export const PageOutput = z
.object({
id: z.string().uuid().openapi({
example: '',
}),
title: z.string(),
description: z.string(),
icon: z.string(),
})
.openapi('Page')

20
packages/schema/src/page/byId.ts Normal file
View File

@ -0,0 +1,20 @@
import { z } from '@hono/zod-openapi'
import { ChangelogOutput } from '../changelog'
import { PageOutput } from './base'
export const PageByIdOutput = PageOutput.extend({
changelogs: z.array(ChangelogOutput),
})
export const PageByIdParams = z.object({
id: z
.string()
.uuid()
.openapi({
param: {
name: 'id',
in: 'path',
},
example: 'a5ed5965-0506-44e6-aaec-0465ff9fe092',
}),
})

16
packages/schema/src/page/create.ts Normal file
View File

@ -0,0 +1,16 @@
import { z } from '@hono/zod-openapi'
export const PageCreateInput = z
.object({
title: z.string().min(3).openapi({
example: 'My page',
}),
description: z.string().openapi({
example: '',
}),
icon: z.string().optional().openapi({
example: 'base64...',
}),
changelogIds: z.array(z.string().uuid()),
})
.openapi('Page')

6
packages/schema/src/page/index.ts Normal file
View File

@ -0,0 +1,6 @@
export * from './base'
export * from './create'
export * from './byId'
export * from './list'
export * from './public'
export * from './update'

9
packages/schema/src/page/list.ts Normal file
View File

@ -0,0 +1,9 @@
import { z } from '@hono/zod-openapi'
import { ChangelogOutput } from '../changelog'
import { PageOutput } from './base'
export const PageListOutput = z.array(
PageOutput.extend({
changelogs: z.array(ChangelogOutput),
}),
)

35
packages/schema/src/page/public.ts Normal file
View File

@ -0,0 +1,35 @@
import { z } from '@hono/zod-openapi'
import { ChangelogOutput } from '../changelog'
import { PageOutput } from './base'
export const PagePublicOutput = z.object({
title: z.string(),
description: z.string(),
icon: z.string(),
changelogs: z.array(
z.object({
title: z.string(),
description: z.string(),
versions: z.array(
z.object({
markdown: z.string(),
version: z.string(),
releasedAt: z.date(),
}),
),
}),
),
})
export const PagePublicParams = z.object({
id: z
.string()
.uuid()
.openapi({
param: {
name: 'id',
in: 'path',
},
example: 'a5ed5965-0506-44e6-aaec-0465ff9fe092',
}),
})

13
packages/schema/src/page/update.ts Normal file
View File

@ -0,0 +1,13 @@
import { z } from '@hono/zod-openapi'
import { PageOutput } from './base'
import { PageCreateInput } from './create'
export const PageUpdateOutput = PageOutput
export const PageUpdateInput = PageCreateInput
export const PageUpdateParams = z
.object({
id: z.string().uuid(),
})
.openapi({
required: ['id'],
})