From c6350f7c05e227cc12fd7427228997002131dc80 Mon Sep 17 00:00:00 2001 From: Andrew Leonard Date: Wed, 12 Jul 2023 01:07:08 -0400 Subject: [PATCH 1/3] feat: add ability to permanently delete emails that have not yet received any mail --- src/pages/popup/components/home/Home.tsx | 7 +++ .../home/detail/EmailDetailPane.tsx | 57 +++++++++++++------ .../buttons/PermanentlyDeleteButton.tsx | 24 ++++++++ ...x => PermanentDeleteConfirmationModal.tsx} | 16 +++--- .../popup/components/home/icons/icons.tsx | 16 ++++++ 5 files changed, 94 insertions(+), 26 deletions(-) create mode 100644 src/pages/popup/components/home/detail/buttons/PermanentlyDeleteButton.tsx rename src/pages/popup/components/home/detail/modals/{DeleteConfirmationModal.tsx => PermanentDeleteConfirmationModal.tsx} (90%) diff --git a/src/pages/popup/components/home/Home.tsx b/src/pages/popup/components/home/Home.tsx index 26701c8..6712c0c 100644 --- a/src/pages/popup/components/home/Home.tsx +++ b/src/pages/popup/components/home/Home.tsx @@ -84,6 +84,12 @@ export default function HomeComponent({ onLogout }: HomeComponentProps) { const addNewEmailToEmailList = (newEmail: MaskedEmail) => { setMaskedEmails((prevEmails) => [newEmail, ...prevEmails]); }; + const removeEmailFromEmailList = (emailToRemove: MaskedEmail) => { + setMaskedEmails((prevEmails) => + prevEmails.filter((email) => email.id !== emailToRemove.id) + ); + }; + useEffect(() => { refreshMaskedEmails(); }, []); @@ -148,6 +154,7 @@ export default function HomeComponent({ onLogout }: HomeComponentProps) { diff --git a/src/pages/popup/components/home/detail/EmailDetailPane.tsx b/src/pages/popup/components/home/detail/EmailDetailPane.tsx index fb02643..5f14e13 100644 --- a/src/pages/popup/components/home/detail/EmailDetailPane.tsx +++ b/src/pages/popup/components/home/detail/EmailDetailPane.tsx @@ -12,6 +12,7 @@ import { MaskedEmail, MaskedEmailState, Options, + permanentlyDeleteEmail, Session, updateEmail } from 'fastmail-masked-email'; @@ -30,26 +31,32 @@ import SaveButton from '@pages/popup/components/home/detail/buttons/SaveButton'; import EditButton from '@pages/popup/components/home/detail/buttons/EditButton'; import CancelEditingButton from '@pages/popup/components/home/detail/buttons/CancelEditingButton'; import DeleteButton from '@pages/popup/components/home/detail/buttons/DeleteButton'; -import DeleteConfirmationModal from '@pages/popup/components/home/detail/modals/DeleteConfirmationModal'; +import PermanentDeleteConfirmationModal from '@pages/popup/components/home/detail/modals/PermanentDeleteConfirmationModal'; import { displaySuccessToast } from '../../../../../../utils/toastUtil'; import { COLOR_BIG_STONE, COLOR_WHITE } from '../../../../../../utils/constants/colors'; +import PermanentlyDeleteButton from '@pages/popup/components/home/detail/buttons/PermanentlyDeleteButton'; export default function EmailDetailPane({ selectedEmail, updateEmailInList, isEditing, - setIsEditing + setIsEditing, + removeEmailFromEmailList }: { selectedEmail: MaskedEmail | null; updateEmailInList: (updatedEmail: MaskedEmail) => void; isEditing: boolean; setIsEditing: (value: ((prevState: boolean) => boolean) | boolean) => void; + removeEmailFromEmailList: (emailToRemove: MaskedEmail) => void; }) { - // State for delete confirmation modal visibility - const [showDeleteModal, setShowDeleteModal] = useState(false); + // State for permanent delete confirmation modal visibility + const [ + showPermanentDeleteConfirmationModal, + setShowPermanentDeleteConfirmationModal + ] = useState(false); // Track whether the selected email is favorited const [isFavorited, setIsFavorited] = useState(false); // Track whether the user has clicked the copy button for an email detail and we need to show the alert @@ -60,14 +67,12 @@ export default function EmailDetailPane({ selectedEmail?.forDomain || null ); - // Open delete confirmation modal - const openDeleteConfirmationModal = () => { - setShowDeleteModal(true); + const openPermanentDeleteConfirmationModal = () => { + setShowPermanentDeleteConfirmationModal(true); }; - // Close delete confirmation modal - const closeDeleteConfirmationModal = () => { - setShowDeleteModal(false); + const closePermanentDeleteConfirmationModal = () => { + setShowPermanentDeleteConfirmationModal(false); }; // Handle delete action @@ -78,7 +83,16 @@ export default function EmailDetailPane({ await deleteEmail(selectedEmail.id, session); updateEmailInList({ ...selectedEmail, state: 'deleted' }); // Update the email in the email list selectedEmail.state = 'deleted'; // Update the email in the email detail - closeDeleteConfirmationModal(); + closePermanentDeleteConfirmationModal(); + } + }; + const handlePermanentDelete = async () => { + if (selectedEmail) { + const session = await getFastmailSession(); + //TODO: Add better error handling here + await permanentlyDeleteEmail(selectedEmail.id, session); + removeEmailFromEmailList(selectedEmail); + closePermanentDeleteConfirmationModal(); } }; const handleDescriptionChange = (newDescription: string) => { @@ -220,15 +234,15 @@ export default function EmailDetailPane({ )} {!isEditing && ( )} - {/* Delete Confirmation Modal */} - {showDeleteModal && ( - )} @@ -279,7 +293,14 @@ export default function EmailDetailPane({ {/* Create a toast to tell the user the text was copied to their clipboard*/} -
+ {selectedEmail && + selectedEmail.lastMessageAt === null && + selectedEmail.state === 'deleted' && ( + + )} +
{selectedEmail.lastMessageAt && (
void; +} + +const PermanentlyDeleteButton: React.FC = ({ + onClick +}) => { + return ( +
+ +
+ ); +}; + +export default PermanentlyDeleteButton; diff --git a/src/pages/popup/components/home/detail/modals/DeleteConfirmationModal.tsx b/src/pages/popup/components/home/detail/modals/PermanentDeleteConfirmationModal.tsx similarity index 90% rename from src/pages/popup/components/home/detail/modals/DeleteConfirmationModal.tsx rename to src/pages/popup/components/home/detail/modals/PermanentDeleteConfirmationModal.tsx index cd5d56b..8cd7e0f 100644 --- a/src/pages/popup/components/home/detail/modals/DeleteConfirmationModal.tsx +++ b/src/pages/popup/components/home/detail/modals/PermanentDeleteConfirmationModal.tsx @@ -2,17 +2,17 @@ import React from 'react'; import { MaskedEmail } from 'fastmail-masked-email'; import { DeletedIcon } from '@pages/popup/components/home/icons/icons'; -interface DeleteConfirmationModalProps { +interface PermanentDeleteConfirmationModalProps { closeModal: () => void; - handleDelete: () => Promise; + handlePermanentDelete: () => Promise; selectedEmail: MaskedEmail | null; } -export default function DeleteConfirmationModal({ +export default function PermanentDeleteConfirmationModal({ closeModal, - handleDelete, + handlePermanentDelete, selectedEmail -}: DeleteConfirmationModalProps) { +}: PermanentDeleteConfirmationModalProps) { return ( <>
- Delete Email + Permanently Delete Email
diff --git a/src/pages/popup/components/home/icons/icons.tsx b/src/pages/popup/components/home/icons/icons.tsx index e9e84b1..73ca286 100644 --- a/src/pages/popup/components/home/icons/icons.tsx +++ b/src/pages/popup/components/home/icons/icons.tsx @@ -218,3 +218,19 @@ export const SettingsIcon: React.FC = ({ iconClasses }) => ( /> ); + +export const WarningIcon: React.FC = ({ iconClasses }) => ( + + + +); From af6e4434d594db5ef6a885d8d6ad443135dad1c7 Mon Sep 17 00:00:00 2001 From: semantic-release-bot Date: Wed, 12 Jul 2023 05:10:12 +0000 Subject: [PATCH 2/3] chore(release): 1.2.0-beta.1 [skip ci] # [1.2.0-beta.1](https://github.com/ajyey/masked-email-manager/compare/v1.1.2...v1.2.0-beta.1) (2023-07-12) ### Features * add ability to permanently delete emails that have not yet received any mail ([c6350f7](https://github.com/ajyey/masked-email-manager/commit/c6350f7c05e227cc12fd7427228997002131dc80)) --- CHANGELOG.md | 7 +++++++ package.json | 2 +- 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 6a68130..8fcb2c9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,10 @@ +# [1.2.0-beta.1](https://github.com/ajyey/masked-email-manager/compare/v1.1.2...v1.2.0-beta.1) (2023-07-12) + + +### Features + +* add ability to permanently delete emails that have not yet received any mail ([c6350f7](https://github.com/ajyey/masked-email-manager/commit/c6350f7c05e227cc12fd7427228997002131dc80)) + ## [1.1.2](https://github.com/ajyey/masked-email-manager/compare/v1.1.1...v1.1.2) (2023-07-05) diff --git a/package.json b/package.json index ae6c6f0..b855d0a 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "masked-email-manager", "displayName": "Masked Email Manager", "description": "A web extension to manage your Fastmail masked emails", - "version": "1.1.2", + "version": "1.2.0-beta.1", "license": "MIT", "repository": { "type": "git", From 109554e51e76f42ca07938800130c908275cf752 Mon Sep 17 00:00:00 2001 From: Andrew Leonard Date: Wed, 12 Jul 2023 01:18:59 -0400 Subject: [PATCH 3/3] style: replace icon for title of permanent delete modal --- src/pages/popup/components/home/detail/EmailDetailPane.tsx | 2 +- .../home/detail/modals/PermanentDeleteConfirmationModal.tsx | 6 ++++-- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/pages/popup/components/home/detail/EmailDetailPane.tsx b/src/pages/popup/components/home/detail/EmailDetailPane.tsx index 5f14e13..28e636c 100644 --- a/src/pages/popup/components/home/detail/EmailDetailPane.tsx +++ b/src/pages/popup/components/home/detail/EmailDetailPane.tsx @@ -31,13 +31,13 @@ import SaveButton from '@pages/popup/components/home/detail/buttons/SaveButton'; import EditButton from '@pages/popup/components/home/detail/buttons/EditButton'; import CancelEditingButton from '@pages/popup/components/home/detail/buttons/CancelEditingButton'; import DeleteButton from '@pages/popup/components/home/detail/buttons/DeleteButton'; -import PermanentDeleteConfirmationModal from '@pages/popup/components/home/detail/modals/PermanentDeleteConfirmationModal'; import { displaySuccessToast } from '../../../../../../utils/toastUtil'; import { COLOR_BIG_STONE, COLOR_WHITE } from '../../../../../../utils/constants/colors'; import PermanentlyDeleteButton from '@pages/popup/components/home/detail/buttons/PermanentlyDeleteButton'; +import PermanentDeleteConfirmationModal from '@pages/popup/components/home/detail/modals/PermanentDeleteConfirmationModal'; export default function EmailDetailPane({ selectedEmail, diff --git a/src/pages/popup/components/home/detail/modals/PermanentDeleteConfirmationModal.tsx b/src/pages/popup/components/home/detail/modals/PermanentDeleteConfirmationModal.tsx index 8cd7e0f..ada500b 100644 --- a/src/pages/popup/components/home/detail/modals/PermanentDeleteConfirmationModal.tsx +++ b/src/pages/popup/components/home/detail/modals/PermanentDeleteConfirmationModal.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { MaskedEmail } from 'fastmail-masked-email'; -import { DeletedIcon } from '@pages/popup/components/home/icons/icons'; +import { WarningIcon } from '@pages/popup/components/home/icons/icons'; interface PermanentDeleteConfirmationModalProps { closeModal: () => void; @@ -26,7 +26,9 @@ export default function PermanentDeleteConfirmationModal({ {/*Modal header*/}

- +
Permanently Delete Email