feat(app): add changelog remove from page

apps/api/src/page/update.ts

@@ -54,23 +54,31 @@ export const registerPageUpdate = (api: typeof pageApi) => {
       .update(page)
       .set({
         ...rest,
-        userId: 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 (changelogIds.length === 0) {
+        await db
+          .delete(changelogs_to_pages)
+          .where(eq(changelogs_to_pages.pageId, result.id))
+      }
+      if (changelogIds?.length >= 1) {
+        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' })
     }

apps/app/src/routes/page.$id.index.lazy.tsx

@@ -13,12 +13,12 @@ const Component = () => {
   const { id } = Route.useParams()
   const { data, isPending } = usePageById({ id })
   const pageUpdate = usePageUpdate()
-  const removeChangelog = (id: string) => {
+  const removeChangelog = (idToRemove: string) => {
     const payload = {
       title: data?.title,
       description: data?.description,
       changelogIds: data?.changelogs
-        .filter((log) => log.id !== id)
+        .filter((log) => log.id !== idToRemove)
         .map((l) => l.id),
     }
     pageUpdate.mutate({ id, payload })
@@ -32,12 +32,6 @@ const Component = () => {
             <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>
@@ -57,7 +51,7 @@ const Component = () => {
 
                       <Button
                         size={'icon'}
-                        variant={'destructive'}
+                        variant={'ghost-destructive'}
                         onClick={() => removeChangelog(changelog.id)}
                       >
                         <CircleMinusIcon className="w-4 h-4" />