From 0bf859d48577c757035b60da6190080a8e0ad957 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Fri, 25 Nov 2022 19:08:40 +0100
Subject: [PATCH] Simplified DeleteShortUrlModal so that it only requires
 writing 'delete'

---
 src/short-urls/helpers/DeleteShortUrlModal.tsx       |  8 +++++---
 test/short-urls/helpers/DeleteShortUrlModal.test.tsx | 10 ++++------
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/short-urls/helpers/DeleteShortUrlModal.tsx b/src/short-urls/helpers/DeleteShortUrlModal.tsx
index 37582b95..e62a946e 100644
--- a/src/short-urls/helpers/DeleteShortUrlModal.tsx
+++ b/src/short-urls/helpers/DeleteShortUrlModal.tsx
@@ -15,6 +15,8 @@ interface DeleteShortUrlModalConnectProps extends ShortUrlModalProps {
   resetDeleteShortUrl: () => void;
 }
 
+const DELETION_PATTERN = 'delete';
+
 export const DeleteShortUrlModal = ({
   shortUrl,
   toggle,
@@ -41,12 +43,12 @@ export const DeleteShortUrlModal = ({
         <ModalBody>
           <p><b className="text-danger">Caution!</b> You are about to delete a short URL.</p>
           <p>This action cannot be undone. Once you have deleted it, all the visits stats will be lost.</p>
-          <p>Write <b>{shortUrl.shortCode}</b> to confirm deletion.</p>
+          <p>Write <b>{DELETION_PATTERN}</b> to confirm deletion.</p>
 
           <input
             type="text"
             className="form-control"
-            placeholder={`Insert the short code (${shortUrl.shortCode})`}
+            placeholder={`Insert ${DELETION_PATTERN}`}
             value={inputValue}
             onChange={(e) => setInputValue(e.target.value)}
           />
@@ -62,7 +64,7 @@ export const DeleteShortUrlModal = ({
           <button
             type="submit"
             className="btn btn-danger"
-            disabled={inputValue !== shortUrl.shortCode || loading}
+            disabled={inputValue !== DELETION_PATTERN || loading}
           >
             {loading ? 'Deleting...' : 'Delete'}
           </button>
diff --git a/test/short-urls/helpers/DeleteShortUrlModal.test.tsx b/test/short-urls/helpers/DeleteShortUrlModal.test.tsx
index 448705ef..a71cd977 100644
--- a/test/short-urls/helpers/DeleteShortUrlModal.test.tsx
+++ b/test/short-urls/helpers/DeleteShortUrlModal.test.tsx
@@ -62,30 +62,28 @@ describe('<DeleteShortUrlModal />', () => {
   });
 
   it('enables submit button when proper short code is provided', async () => {
-    const shortCode = 'abc123';
     const { user } = setUp({
       loading: false,
       error: false,
-      shortCode,
+      shortCode: 'abc123',
     });
     const getDeleteBtn = () => screen.getByRole('button', { name: 'Delete' });
 
     expect(getDeleteBtn()).toHaveAttribute('disabled');
-    await user.type(screen.getByPlaceholderText(/^Insert the short code/), shortCode);
+    await user.type(screen.getByPlaceholderText('Insert delete'), 'delete');
     expect(getDeleteBtn()).not.toHaveAttribute('disabled');
   });
 
   it('tries to delete short URL when form is submit', async () => {
-    const shortCode = 'abc123';
     const { user } = setUp({
       loading: false,
       error: false,
       deleted: true,
-      shortCode,
+      shortCode: 'abc123',
     });
 
     expect(deleteShortUrl).not.toHaveBeenCalled();
-    await user.type(screen.getByPlaceholderText(/^Insert the short code/), shortCode);
+    await user.type(screen.getByPlaceholderText('Insert delete'), 'delete');
     await user.click(screen.getByRole('button', { name: 'Delete' }));
     expect(deleteShortUrl).toHaveBeenCalledTimes(1);
     await waitFor(() => expect(shortUrlDeleted).toHaveBeenCalledTimes(1));