feat(app): changelog remove action
Some checks failed
Build and Push Docker Image / tests (push) Successful in 29s
Build and Push Docker Image / build (push) Failing after 43s

This commit is contained in:
Lars Hampe 2024-10-07 11:41:16 +02:00
parent 89dcb42364
commit 00fe6eafcd
3 changed files with 149 additions and 13 deletions

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 { useChangelogRemove } from '../../hooks/useChangelog'
export const ChangelogDelete = ({ id }: { id: string }) => {
const remove = useChangelogRemove()
const navigate = useNavigate({ from: `/changelog/${id}` })
const [isOpen, setIsOpen] = useState(false)
const removeChangelog = () => {
remove.mutate(
{ id },
{
onSuccess: () => {
setIsOpen(false)
navigate({ to: '/changelog' })
},
},
)
}
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
changelog 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>
)
}

View File

@ -1,4 +1,4 @@
import { ThemeProvider } from '@boring.tools/ui'
import { ThemeProvider, TooltipProvider } from '@boring.tools/ui'
import { ClerkProvider } from '@clerk/clerk-react'
import { RouterProvider, createRouter } from '@tanstack/react-router'
import { StrictMode } from 'react'
@ -36,16 +36,18 @@ if (!rootElement.innerHTML) {
<StrictMode>
<ClerkProvider publishableKey={PUBLISHABLE_KEY}>
<ThemeProvider defaultTheme="dark" storageKey="ui-theme">
<QueryClientProvider client={queryClient}>
{import.meta.env.PROD && (
<script
defer
src="https://umami.hashdot.co/script.js"
data-website-id="446678cc-e2d8-4b6f-8e8f-389cd7f6db28"
/>
)}
<RouterProvider router={router} />
</QueryClientProvider>
<TooltipProvider delayDuration={350}>
<QueryClientProvider client={queryClient}>
{import.meta.env.PROD && (
<script
defer
src="https://umami.hashdot.co/script.js"
data-website-id="446678cc-e2d8-4b6f-8e8f-389cd7f6db28"
/>
)}
<RouterProvider router={router} />
</QueryClientProvider>
</TooltipProvider>
</ThemeProvider>
</ClerkProvider>
</StrictMode>,

View File

@ -1,5 +1,18 @@
import { Button } from '@boring.tools/ui'
import {
Button,
Tooltip,
TooltipContent,
TooltipTrigger,
} from '@boring.tools/ui'
import { createLazyFileRoute } from '@tanstack/react-router'
import {
FileStackIcon,
Globe2Icon,
PencilIcon,
TerminalSquareIcon,
Trash2Icon,
} from 'lucide-react'
import { ChangelogDelete } from '../../components/Changelog/Delete'
import { useChangelogById } from '../../hooks/useChangelog'
const Component = () => {
@ -21,7 +34,56 @@ const Component = () => {
<div className="flex flex-col gap-5">
{!isPending && data && (
<div>
<h1 className="text-3xl">{data.title}</h1>
<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>
<Button variant={'ghost'}>
<PencilIcon strokeWidth={1.5} />
</Button>
</TooltipTrigger>
<TooltipContent>
<p>Edit</p>
</TooltipContent>
</Tooltip>
<ChangelogDelete id={id} />
</div>
</div>
</div>
)}
</div>