Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bug Fix: Delete feature (Fixes three issues) #3383

Merged
merged 8 commits into from
Jun 13, 2023
Merged

Bug Fix: Delete feature (Fixes three issues) #3383

Changes from 6 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
13fa2e6
Modify: Set proper z-index of delete confirm popup
CertifiedJoon Jun 11, 2023
637eb88
Modify: text-wrap on delete confirm
CertifiedJoon Jun 11, 2023
18d740c
Modify: Review Feedback
CertifiedJoon Jun 11, 2023
3c65a6b
Merge remote-tracking branch 'origin/main' into issue/3378
notmd Jun 12, 2023
a28dee4
wip
notmd Jun 12, 2023
e5a4ec6
wip
notmd Jun 12, 2023
c264a48
wip
notmd Jun 12, 2023
d2316ba
wip
notmd Jun 12, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
108 changes: 54 additions & 54 deletions website/src/components/Chat/ChatListItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -147,26 +147,25 @@ export const ChatListItem = ({
style={{ insetInlineEnd: `8px` }}
gap="1.5"
zIndex={1}
onClick={stopEvent}
>
{!isEditing && (
<>
<EditChatButton onClick={setIsEditing.on} />
<HideChatButton chatId={chat.id} onHide={onHide} />
{/* we have to stop the event, otherwise it would cause a navigation and close the sidebar on mobile */}
<div onClick={stopEvent}>
<Menu>
<MenuButton>
<ChatListItemIconButton label={t("more_actions")} icon={MoreHorizontal} />
</MenuButton>
<Portal appendToParentPortal={false} containerRef={rootRef}>
{/* higher z-index so that it is displayed over the mobile sidebar */}
<MenuList zIndex="var(--chakra-zIndices-popover)">
<OptOutDataButton chatId={chat.id} />
<DeleteChatButton chatId={chat.id} onDelete={onDelete} />
</MenuList>
</Portal>
</Menu>
</div>
<Menu>
<MenuButton>
<ChatListItemIconButton label={t("more_actions")} icon={MoreHorizontal} />
</MenuButton>
<Portal appendToParentPortal={false} containerRef={rootRef}>
{/* higher z-index so that it is displayed over the mobile sidebar */}
<MenuList zIndex="var(--chakra-zIndices-popover)">
<OptOutDataButton chatId={chat.id} />
<DeleteChatButton chatId={chat.id} onDelete={onDelete} />
</MenuList>
</Portal>
</Menu>
</>
)}
</Flex>
Expand All @@ -193,33 +192,37 @@ const HideChatButton = ({ chatId, onHide }: { chatId: string; onHide?: (params:
return <ChatListItemIconButton label={t("hide")} icon={EyeOff} onClick={onClick} />;
};

const DeleteChatButton = ({
chatId,
onDelete,
}: {
chatId: string;
onDelete?: (params: { chatId: string }) => void;
}) => {
const DeleteChatButton = ({ chatId, onDelete }: { chatId: string; onDelete: (params: { chatId: string }) => void }) => {
const { isOpen, onOpen, onClose } = useDisclosure();
const cancelRef = useRef();
const { t } = useTranslation(["chat", "common"]);
const { trigger: triggerDelete } = useSWRMutation<any, any, any, { chat_id: string }>(
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const { trigger: triggerDelete, isMutating: isDeleting } = useSWRMutation<any, any, any, { chat_id: string }>(
API_ROUTES.DELETE_CHAT(chatId),
del
);
const onDeleteCallback = useCallback(async () => {

const router = useRouter();
const handleDelete = useCallback(async () => {
await triggerDelete({ chat_id: chatId });
onDelete?.({ chatId });
}, [onDelete, triggerDelete, chatId]);
if (router.query.id === chatId) {
// push to /chat if we are on the deleted chat
router.push("/chat");
} else {
onDelete({ chatId });
onClose();
}
}, [triggerDelete, chatId, router, onDelete, onClose]);

const alert = (
<AlertDialog isOpen={isOpen} leastDestructiveRef={cancelRef} onClose={onClose}>
<AlertDialogOverlay>
<AlertDialogContent>
<AlertDialogContent my="100px" flex="column">
<AlertDialogHeader fontSize="lg" fontWeight="bold">
{t("delete_chat")}
<Text>{t("delete_chat")}</Text>
</AlertDialogHeader>
<AlertDialogBody>
<Text fontWeight="bold" py="2">
<AlertDialogBody wordBreak="break-word">
<Text fontWeight="bold" py="2" textAlign="left">
{t("delete_confirmation")}
</Text>
<Text py="2">{t("delete_confirmation_detail")}</Text>
Expand All @@ -228,14 +231,15 @@ const DeleteChatButton = ({
<Button ref={cancelRef} onClick={onClose}>
{t("common:cancel")}
</Button>
<Button colorScheme="red" onClick={onDeleteCallback} ml={3}>
<Button colorScheme="red" onClick={handleDelete} ml={3} isLoading={isDeleting}>
{t("common:delete")}
</Button>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialogOverlay>
</AlertDialog>
);

return (
<>
<MenuItem onClick={onOpen} icon={<Trash size={16} />}>
Expand Down Expand Up @@ -263,35 +267,31 @@ const OptOutDataButton = ({ chatId }: { chatId: string }) => {
});
}, [chatId, onClose, t, toast, updateChat]);

const alert = (
<AlertDialog isOpen={isOpen} leastDestructiveRef={cancelRef} onClose={onClose}>
<AlertDialogOverlay>
<AlertDialogContent>
<AlertDialogHeader fontSize="lg" fontWeight="bold">
{t("chat:opt_out.dialog.title")}
</AlertDialogHeader>
<AlertDialogBody>
<Text py="2">{t("chat:opt_out.dialog.description")}</Text>
</AlertDialogBody>
<AlertDialogFooter>
<Button ref={cancelRef} onClick={onClose}>
{t("common:cancel")}
</Button>
<Button colorScheme="red" onClick={handleOptOut} ml={3} isLoading={isUpdating}>
{t("common:confirm")}
</Button>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialogOverlay>
</AlertDialog>
);

return (
<>
<MenuItem onClick={onOpen} icon={<FolderX size={16} />}>
{t("chat:opt_out.button")}
</MenuItem>
{alert}
<AlertDialog isOpen={isOpen} leastDestructiveRef={cancelRef} onClose={onClose}>
<AlertDialogOverlay>
<AlertDialogContent>
<AlertDialogHeader fontSize="lg" fontWeight="bold">
{t("chat:opt_out.dialog.title")}
</AlertDialogHeader>
<AlertDialogBody>
<Text py="2">{t("chat:opt_out.dialog.description")}</Text>
</AlertDialogBody>
<AlertDialogFooter>
<Button ref={cancelRef} onClick={onClose}>
{t("common:cancel")}
</Button>
<Button colorScheme="red" onClick={handleOptOut} ml={3} isLoading={isUpdating}>
{t("common:confirm")}
</Button>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialogOverlay>
</AlertDialog>
</>
);
};
Expand Down