add delete function modal

src/components/delete-function-modal.tsx

@@ -0,0 +1,71 @@
+import { useFunction } from "@/hooks/use-function";
+import { Route } from "@/routes";
+import {
+	Button,
+	HStack,
+	Modal,
+	ModalBody,
+	ModalContent,
+	ModalFooter,
+	ModalHeader,
+	ModalOverlay,
+	Stack,
+	Text,
+} from "@kvib/react";
+
+type Props = {
+	onOpen: () => void;
+	onClose: () => void;
+	isOpen: boolean;
+	functionId: number;
+};
+
+export function DeleteFunctionModal({ onClose, isOpen, functionId }: Props) {
+	const { func, removeFunction } = useFunction(functionId);
+	const navigate = Route.useNavigate();
+
+	return (
+		<Modal onClose={onClose} isOpen={isOpen} isCentered>
+			<ModalOverlay />
+			<ModalContent>
+				<ModalHeader>Slett funksjon</ModalHeader>
+				<ModalBody>
+					<Stack>
+						<Text size="sm">Er du sikker på at du vil slette funksjonen?</Text>
+					</Stack>
+				</ModalBody>
+				<ModalFooter>
+					<HStack justifyContent="end">
+						<Button variant="tertiary" colorScheme="blue" onClick={onClose}>
+							Avbryt
+						</Button>
+						<Button
+							aria-label="Slett funksjon"
+							variant="primary"
+							colorScheme="red"
+							leftIcon="delete"
+							onClick={async (e) => {
+								e.preventDefault();
+								if (!func.data) return;
+								const deletedFunctionParentPath = func.data.path
+									.split(".")
+									.slice(0, -1)
+									.join(".");
+
+								await removeFunction.mutateAsync(func.data.id);
+								navigate({
+									search: {
+										path: deletedFunctionParentPath ?? "1",
+									},
+								});
+							}}
+							isLoading={removeFunction.isPending}
+						>
+							Slett funksjon
+						</Button>
+					</HStack>
+				</ModalFooter>
+			</ModalContent>
+		</Modal>
+	);
+}

src/components/function-card.tsx

@@ -1,17 +1,30 @@
 import { useFunction } from "@/hooks/use-function";
 import { Route } from "@/routes";
-import { Card, Flex, Icon, IconButton, Input, Text } from "@kvib/react";
+import {
+	Card,
+	Flex,
+	Icon,
+	IconButton,
+	Input,
+	Text,
+	useDisclosure,
+} from "@kvib/react";
 import { Link as TSRLink } from "@tanstack/react-router";
 import { useRef, useState } from "react";
+import { DeleteFunctionModal } from "./delete-function-modal";
 
 export function FunctionCard({
 	functionId,
 	selected,
 }: { functionId: number; selected: boolean }) {
-	const { func, updateFunction, removeFunction } = useFunction(functionId);
+	const { func, updateFunction } = useFunction(functionId);
 	const nameInputRef = useRef<HTMLInputElement>(null);
 	const [edit, setEdit] = useState(false);
-	const navigate = Route.useNavigate();
+	const {
+		isOpen: isDeleteOpen,
+		onOpen: onDeleteOpen,
+		onClose: onDeleteClose,
+	} = useDisclosure();
 
 	function saveName() {
 		const newName = nameInputRef.current?.value;
@@ -87,21 +100,7 @@ export function FunctionCard({
 									aria-label="delete"
 									icon="delete"
 									type="button"
-									onClick={(e) => {
-										e.preventDefault();
-										if (!func.data) return;
-										const deletedFunctionParentPath = func.data.path
-											.split(".")
-											.slice(0, -1)
-											.join(".");
-
-										removeFunction.mutate(func.data.id);
-										navigate({
-											search: {
-												path: deletedFunctionParentPath ?? "1",
-											},
-										});
-									}}
+									onClick={onDeleteOpen}
 								/>
 							</>
 						) : (
@@ -125,6 +124,15 @@ export function FunctionCard({
 					</Flex>
 				</Flex>
 			</TSRLink>
+			<DeleteFunctionModal
+				onOpen={onDeleteOpen}
+				onClose={() => {
+					setEdit(false);
+					onDeleteClose();
+				}}
+				isOpen={isDeleteOpen}
+				functionId={functionId}
+			/>
 		</Card>
 	);
 }