feat(app): add version remove

apps/app/src/components/Changelog/VersionDelete.tsx

@@ -0,0 +1,82 @@
+import {
+  Alert,
+  AlertDescription,
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+  AlertTitle,
+  Button,
+} from '@boring.tools/ui'
+import { useNavigate } from '@tanstack/react-router'
+import { TriangleAlertIcon } from 'lucide-react'
+import { useState } from 'react'
+import { useChangelogVersionRemove } from '../../hooks/useChangelog'
+
+export const ChangelogVersionDelete = ({
+  id,
+  versionId,
+}: { id: string; versionId: string }) => {
+  const remove = useChangelogVersionRemove()
+  const navigate = useNavigate({ from: `/changelog/${id}` })
+  const [isOpen, setIsOpen] = useState(false)
+
+  const removeChangelogVersion = () => {
+    remove.mutate(
+      { id: versionId },
+      {
+        onSuccess: () => {
+          setIsOpen(false)
+          navigate({ to: '/changelog/$id', params: { id } })
+        },
+      },
+    )
+  }
+  return (
+    <Alert className="mt-10 max-w-screen-md" variant={'destructive'}>
+      <TriangleAlertIcon className="h-4 w-4" />
+      <AlertTitle>Danger Zone</AlertTitle>
+      <AlertDescription className="inline-flex flex-col gap-3">
+        You can remove your version here. You cannot undo this.
+        <AlertDialog open={isOpen}>
+          <AlertDialogTrigger asChild>
+            <Button
+              size={'sm'}
+              variant={'destructive'}
+              onClick={() => setIsOpen(true)}
+            >
+              Remove version
+            </Button>
+          </AlertDialogTrigger>
+          <AlertDialogContent>
+            <AlertDialogHeader>
+              <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+              <AlertDialogDescription>
+                This action cannot be undone. This will permanently delete your
+                version and remove your data from our servers.
+              </AlertDialogDescription>
+            </AlertDialogHeader>
+            <AlertDialogFooter>
+              <AlertDialogCancel onClick={() => setIsOpen(false)}>
+                Cancel
+              </AlertDialogCancel>
+              <AlertDialogAction asChild>
+                <Button
+                  onClick={removeChangelogVersion}
+                  variant={'destructive'}
+                >
+                  Remove
+                </Button>
+              </AlertDialogAction>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialog>
+      </AlertDescription>
+    </Alert>
+  )
+}

apps/app/src/hooks/useChangelog.ts

@@ -171,3 +171,22 @@ export const useChangelogVersionUpdate = () => {
     },
   })
 }
+
+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],
+      })
+    },
+  })
+}

apps/app/src/routes/changelog.$id.version.$versionId.tsx

@@ -1,5 +1,8 @@
 import { VersionUpdateInput } from '@boring.tools/schema'
 import {
+  Alert,
+  AlertDescription,
+  AlertTitle,
   Button,
   Calendar,
   Form,
@@ -41,8 +44,9 @@ import {
 } from '../hooks/useChangelog'
 import '@mdxeditor/editor/style.css'
 import { format } from 'date-fns'
-import { CalendarIcon } from 'lucide-react'
+import { CalendarIcon, TriangleAlertIcon } from 'lucide-react'
 import { useEffect, useRef } from 'react'
+import { ChangelogVersionDelete } from '../components/Changelog/VersionDelete'
 import { VersionStatus } from '../components/Changelog/VersionStatus'
 
 const Component = () => {
@@ -234,6 +238,8 @@ const Component = () => {
               </div>
             </form>
           </Form>
+
+          <ChangelogVersionDelete id={id} versionId={versionId} />
         </div>
       )}
     </div>