Merge branch 'develop' into main

ajyey · Jul 12, 2023 · 75be481 · 75be481
2 parents a869deb + acc8553
commit 75be481
Show file tree

Hide file tree

Showing 7 changed files with 106 additions and 29 deletions.
diff --git 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
@@ -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",

diff --git 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) {
               <EmailDetailPane
                 selectedEmail={selectedEmail}
                 updateEmailInList={updateEmailInList}
+                removeEmailFromEmailList={removeEmailFromEmailList}
                 isEditing={isEditing}
                 setIsEditing={setIsEditing}
               />

diff --git 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 { 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,
   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<boolean>(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 && (
                 <DeleteButton
-                  onClick={openDeleteConfirmationModal}
+                  onClick={handleDelete}
                   disabled={selectedEmail.state === 'deleted'} // Disable the delete button if the email is already deleted
                 />
               )}
-              {/* Delete Confirmation Modal */}
-              {showDeleteModal && (
-                <DeleteConfirmationModal
-                  closeModal={closeDeleteConfirmationModal}
-                  handleDelete={handleDelete}
+              {/* Permanent Delete Confirmation Modal */}
+              {showPermanentDeleteConfirmationModal && (
+                <PermanentDeleteConfirmationModal
+                  closeModal={closePermanentDeleteConfirmationModal}
+                  handlePermanentDelete={handlePermanentDelete} //TODO:
                   selectedEmail={selectedEmail}
                 />
               )}
@@ -279,7 +293,14 @@ export default function EmailDetailPane({
                 {/* Create a toast to tell the user the text was copied to their clipboard*/}
                 <Toaster />
               </div>
-              <div className="flex items-center justify-center mt-3 mb-3 text-gray-200 flex-col text-xs">
+              {selectedEmail &&
+                selectedEmail.lastMessageAt === null &&
+                selectedEmail.state === 'deleted' && (
+                  <PermanentlyDeleteButton
+                    onClick={openPermanentDeleteConfirmationModal}
+                  />
+                )}
+              <div className="flex items-center justify-center mt-2 mb-3 text-gray-200 flex-col text-xs">
                 {selectedEmail.lastMessageAt && (
                   <div>
                     <LastMessageAt

diff --git a/src/pages/popup/components/home/detail/buttons/PermanentlyDeleteButton.tsx b/src/pages/popup/components/home/detail/buttons/PermanentlyDeleteButton.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import { WarningIcon } from '@pages/popup/components/home/icons/icons';
+
+interface PermanentlyDeleteButtonProps {
+  onClick: () => void;
+}
+
+const PermanentlyDeleteButton: React.FC<PermanentlyDeleteButtonProps> = ({
+  onClick
+}) => {
+  return (
+    <div className="inline-flex items-center justify-center mt-2">
+      <button
+        onClick={onClick}
+        className="text-white text-sm px-3 py-1 rounded hover:bg-red-500 bg-red-600/[0.75] focus:outline-none focus:ring-4 focus:ring-blue-3 inline-flex items-center"
+      >
+        <WarningIcon iconClasses="w-4 h-4 mr-2 stroke-white stroke-2" />
+        Permanently Delete
+      </button>
+    </div>
+  );
+};
+
+export default PermanentlyDeleteButton;
diff --git a/...detail/modals/DeleteConfirmationModal.tsx → ...dals/PermanentDeleteConfirmationModal.tsx b/...detail/modals/DeleteConfirmationModal.tsx → ...dals/PermanentDeleteConfirmationModal.tsx
@@ -1,18 +1,18 @@
 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 DeleteConfirmationModalProps {
+interface PermanentDeleteConfirmationModalProps {
   closeModal: () => void;
-  handleDelete: () => Promise<void>;
+  handlePermanentDelete: () => Promise<void>;
   selectedEmail: MaskedEmail | null;
 }
 
-export default function DeleteConfirmationModal({
+export default function PermanentDeleteConfirmationModal({
   closeModal,
-  handleDelete,
+  handlePermanentDelete,
   selectedEmail
-}: DeleteConfirmationModalProps) {
+}: PermanentDeleteConfirmationModalProps) {
   return (
     <>
       <div
@@ -26,9 +26,11 @@ export default function DeleteConfirmationModal({
             {/*Modal header*/}
             <div className="flex items-start justify-between p-4 border-b rounded-t dark:border-gray-600">
               <h3 className="text-xl font-semibold text-gray-900 dark:text-white flex items-center">
-                <DeletedIcon iconClasses={'w-5 h-5 mr-2 stroke-red-500'} />
+                <WarningIcon
+                  iconClasses={'w-5 h-5 mr-2 stroke-red-500 stroke-2'}
+                />
                 <div className="text-lg font-semibold truncate">
-                  Delete Email
+                  Permanently Delete Email
                 </div>
               </h3>
               <button
@@ -56,7 +58,7 @@ export default function DeleteConfirmationModal({
             {/*Modal body*/}
             <div className="p-4 space-y-4">
               <div className="text-white text-sm">
-                {`Are you sure you want to delete `}
+                {`Are you sure you want to permanently delete `}
                 <span className="font-semibold text-malibu">
                   {selectedEmail?.email}
                 </span>
@@ -69,7 +71,7 @@ export default function DeleteConfirmationModal({
                 data-modal-hide="defaultModal"
                 type="button"
                 className="text-white hover:bg-red-600 bg-red-700 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center"
-                onClick={handleDelete}
+                onClick={handlePermanentDelete}
               >
                 Delete
               </button>

diff --git 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<IconProps> = ({ iconClasses }) => (
     />
   </svg>
 );
+
+export const WarningIcon: React.FC<IconProps> = ({ iconClasses }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+    className={`${iconClasses}`}
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"
+    />
+  </svg>
+);