mirror of
https://github.com/Monadical-SAS/reflector.git
synced 2025-12-20 20:29:06 +00:00
fix: separate browsing page into different components, limit to 10 by default (#498)
* feat: limit the amount of transcripts to 10 by default * feat: separate page into different component, greatly improving the loading and reactivity * fix: current implementation immediately invokes the onDelete and onReprocess From pr-agent-monadical: Suggestion: The current implementation immediately invokes the onDelete and onReprocess functions when the component renders, rather than when the menu items are clicked. This can cause unexpected behavior and potential memory leaks. Use callback functions that only execute when the menu items are actually clicked. [possible issue, importance: 9]
This commit is contained in:
51
www/app/(app)/browse/_components/DeleteTranscriptDialog.tsx
Normal file
51
www/app/(app)/browse/_components/DeleteTranscriptDialog.tsx
Normal file
@@ -0,0 +1,51 @@
|
||||
import React from "react";
|
||||
import {
|
||||
Button,
|
||||
AlertDialog,
|
||||
AlertDialogOverlay,
|
||||
AlertDialogContent,
|
||||
AlertDialogHeader,
|
||||
AlertDialogBody,
|
||||
AlertDialogFooter,
|
||||
} from "@chakra-ui/react";
|
||||
|
||||
interface DeleteTranscriptDialogProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
onConfirm: () => void;
|
||||
cancelRef: React.RefObject<any>;
|
||||
}
|
||||
|
||||
export default function DeleteTranscriptDialog({
|
||||
isOpen,
|
||||
onClose,
|
||||
onConfirm,
|
||||
cancelRef,
|
||||
}: DeleteTranscriptDialogProps) {
|
||||
return (
|
||||
<AlertDialog
|
||||
isOpen={isOpen}
|
||||
leastDestructiveRef={cancelRef}
|
||||
onClose={onClose}
|
||||
>
|
||||
<AlertDialogOverlay>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader fontSize="lg" fontWeight="bold">
|
||||
Delete Transcript
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogBody>
|
||||
Are you sure? You can't undo this action afterwards.
|
||||
</AlertDialogBody>
|
||||
<AlertDialogFooter>
|
||||
<Button ref={cancelRef} onClick={onClose}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button colorScheme="red" onClick={onConfirm} ml={3}>
|
||||
Delete
|
||||
</Button>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialogOverlay>
|
||||
</AlertDialog>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user