From d415fca359c62b30b6605e8d9be06cbf18c327fb Mon Sep 17 00:00:00 2001 From: James Nuanez Date: Fri, 24 Apr 2020 21:14:35 -0700 Subject: [PATCH] Show delete errors in modal instead of in a notification --- src/components/blocks/FormError.js | 6 +- src/components/blocks/Modal.js | 4 ++ src/components/blocks/TableContent.js | 57 +++++++++++------- src/components/pages/internal/AccountsList.js | 60 ++++++------------- .../pages/internal/ApplicationsList.js | 26 ++++---- .../pages/internal/PhoneNumbersList.js | 9 +-- .../pages/internal/SipTrunksList.js | 9 +-- 7 files changed, 76 insertions(+), 95 deletions(-) diff --git a/src/components/blocks/FormError.js b/src/components/blocks/FormError.js index bd50ee7..4336cef 100644 --- a/src/components/blocks/FormError.js +++ b/src/components/blocks/FormError.js @@ -13,7 +13,7 @@ const FormErrorContainer = styled.div` font-weight: 500; text-align: left; ${props => props.grid && `grid-column: 2;`} - & > span { + & > div { margin-left: 0.5rem; } & ul { @@ -28,7 +28,7 @@ const FormErrorContainer = styled.div` const FormError = props => ( - +
{typeof props.message === 'object' && props.message.length ? (
    {props.message.map((message, i) => ( @@ -38,7 +38,7 @@ const FormError = props => ( ) : ( props.message )} - +
); diff --git a/src/components/blocks/Modal.js b/src/components/blocks/Modal.js index 775c914..d28c796 100644 --- a/src/components/blocks/Modal.js +++ b/src/components/blocks/Modal.js @@ -17,6 +17,10 @@ const Overlay = styled.div` `; const ModalContainer = styled.div` + max-height: calc(100% - 2rem); + max-width: 700px; + overflow: auto; + margin: 1rem; padding: 2rem; border-radius: 0.5rem; background: #FFF; diff --git a/src/components/blocks/TableContent.js b/src/components/blocks/TableContent.js index 4db1bba..68f6b5d 100644 --- a/src/components/blocks/TableContent.js +++ b/src/components/blocks/TableContent.js @@ -9,6 +9,7 @@ import Checkbox from '../elements/Checkbox.js'; import TableMenu from '../blocks/TableMenu.js'; import Loader from '../blocks/Loader.js'; import Modal from '../blocks/Modal.js'; +import FormError from '../blocks/FormError.js'; const Td = styled.td` padding: 0.5rem 0; @@ -132,10 +133,11 @@ const TableContent = props => { //============================================================================= // Handle Deleting content //============================================================================= + const [ errorMessage, setErrorMessage ] = useState(''); const deleteContent = async () => { setShowModalLoader(true); - const success = await props.deleteContent(contentToDelete); - if (success) { + const result = await props.deleteContent(contentToDelete); + if (result === 'success') { const newContent = await props.getContent(); sortTableContent({ newContent }); setContentToDelete({}); @@ -144,7 +146,10 @@ const TableContent = props => { level: 'success', message: `${props.name.charAt(0).toUpperCase()}${props.name.slice(1)} deleted successfully`, }); + } else { + setErrorMessage(result); } + setSelected([]); setShowModalLoader(false); }; @@ -159,27 +164,35 @@ const TableContent = props => { content={ showModalLoader ? - : - - {props.formatContentToDelete(contentToDelete).map((d, i) => ( - - - - - ))} - -
{d.name} - {typeof d.content === 'string' - ? d.content - :
    - {d.content.map((c, i) => ( -
  • {c}
    • - ))} -
- } -
+ :
+ + + {props.formatContentToDelete(contentToDelete).map((d, i) => ( + + + + + ))} + +
{d.name} + {typeof d.content === 'string' + ? d.content + :
    + {d.content.map((c, i) => ( +
  • {c}
    • + ))} +
+ } +
+ {errorMessage && ( + + )} +
} - handleCancel={() => setContentToDelete({})} + handleCancel={() => { + setContentToDelete({}); + setErrorMessage(''); + }} handleSubmit={deleteContent} actionText="Delete" /> diff --git a/src/components/pages/internal/AccountsList.js b/src/components/pages/internal/AccountsList.js index 4d69f4f..d36a6c2 100644 --- a/src/components/pages/internal/AccountsList.js +++ b/src/components/pages/internal/AccountsList.js @@ -118,47 +118,26 @@ const AccountsList = () => { const accountPhoneNumbers = phoneNumbers.filter(p => ( p.account_sid === accountToDelete.sid )); - if (accountApps.length) { - dispatch({ - type: 'ADD', - level: 'error', - message: -
+ let errorMessages = []; + for (const app of accountApps) { + errorMessages.push(`Application: ${app.name}`); + } + for (const num of accountPhoneNumbers) { + errorMessages.push(`Phone Number: ${num.number}`); + } + if (errorMessages.length) { + return ( +

- This account cannot be deleted because it is in use by the - following application{accountApps.length > 1 && 's'}: + This account cannot be deleted because it is in use by:

    - {accountApps.map((app, i) => ( -
  • {app.name}
    • + {errorMessages.map((err, i) => ( +
  • {err}
    • ))}
-
- , - }); - } - if (accountPhoneNumbers.length) { - dispatch({ - type: 'ADD', - level: 'error', - message: -
-

- This account cannot be deleted because it is in use by the - following phone number{accountPhoneNumbers.length > 1 && 's'}: -

-
    - {accountPhoneNumbers.map((p, i) => ( -
  • {p.number}
    • - ))} -
-
- , - }); - } - - if (accountApps.length || accountPhoneNumbers.length) { - return false; + + ); } // Delete account @@ -170,7 +149,7 @@ const AccountsList = () => { Authorization: `Bearer ${localStorage.getItem('token')}`, }, }); - return true; + return 'success'; } catch (err) { if (err.response && err.response.status === 401) { localStorage.removeItem('token'); @@ -182,14 +161,9 @@ const AccountsList = () => { message: 'Your session has expired. Please log in and try again.', }); } else { - dispatch({ - type: 'ADD', - level: 'error', - message: (err.response && err.response.data && err.response.data.msg) || 'Unable to delete account', - }); console.log(err.response || err); + return ((err.response && err.response.data && err.response.data.msg) || 'Unable to delete account'); } - return false; } }; diff --git a/src/components/pages/internal/ApplicationsList.js b/src/components/pages/internal/ApplicationsList.js index b5c2253..5f51247 100644 --- a/src/components/pages/internal/ApplicationsList.js +++ b/src/components/pages/internal/ApplicationsList.js @@ -123,12 +123,17 @@ const ApplicationsList = () => { if (accountsRequiringThisApp.length) { const accountName = accountsRequiringThisApp[0].name; - dispatch({ - type: 'ADD', - level: 'error', - message: `This application cannot be deleted because it is set to receive SIP Device Calls on account: ${accountName}`, - }); - return false; + return ( + +

+ This application cannot be deleted because the following + account uses it to receive SIP Device Calls: +

+
    +
  • {accountName}
    • +
+ + ); } await axios({ @@ -139,7 +144,7 @@ const ApplicationsList = () => { Authorization: `Bearer ${localStorage.getItem('token')}`, }, }); - return true; + return 'success'; } catch (err) { if (err.response && err.response.status === 401) { localStorage.removeItem('token'); @@ -151,14 +156,9 @@ const ApplicationsList = () => { message: 'Your session has expired. Please log in and try again.', }); } else { - dispatch({ - type: 'ADD', - level: 'error', - message: (err.response && err.response.data && err.response.data.msg) || 'Unable to delete application', - }); console.log(err.response || err); + return ((err.response && err.response.data && err.response.data.msg) || 'Unable to delete application'); } - return false; } }; diff --git a/src/components/pages/internal/PhoneNumbersList.js b/src/components/pages/internal/PhoneNumbersList.js index 145e3d7..2174269 100644 --- a/src/components/pages/internal/PhoneNumbersList.js +++ b/src/components/pages/internal/PhoneNumbersList.js @@ -151,7 +151,7 @@ const PhoneNumbersList = () => { Authorization: `Bearer ${localStorage.getItem('token')}`, }, }); - return true; + return 'success'; } catch (err) { if (err.response && err.response.status === 401) { localStorage.removeItem('token'); @@ -163,14 +163,9 @@ const PhoneNumbersList = () => { message: 'Your session has expired. Please log in and try again.', }); } else { - dispatch({ - type: 'ADD', - level: 'error', - message: (err.response && err.response.data && err.response.data.msg) || 'Unable to delete phone number', - }); console.log(err.response || err); + return ((err.response && err.response.data && err.response.data.msg) || 'Unable to delete phone number'); } - return false; } }; diff --git a/src/components/pages/internal/SipTrunksList.js b/src/components/pages/internal/SipTrunksList.js index e58bba1..781da25 100644 --- a/src/components/pages/internal/SipTrunksList.js +++ b/src/components/pages/internal/SipTrunksList.js @@ -135,7 +135,7 @@ const SipTrunksList = () => { Authorization: `Bearer ${localStorage.getItem('token')}`, }, }); - return true; + return 'success'; } catch (err) { if (err.response && err.response.status === 401) { localStorage.removeItem('token'); @@ -147,14 +147,9 @@ const SipTrunksList = () => { message: 'Your session has expired. Please log in and try again.', }); } else { - dispatch({ - type: 'ADD', - level: 'error', - message: (err.response && err.response.data && err.response.data.msg) || 'Unable to delete SIP trunk', - }); console.log(err.response || err); + return ((err.response && err.response.data && err.response.data.msg) || 'Unable to delete SIP trunk'); } - return false; } };