From 73715574828fc9e883fd8e4c4c6545fcd53f3d40 Mon Sep 17 00:00:00 2001 From: "a.bouhuolia" Date: Tue, 9 Nov 2021 12:34:55 +0200 Subject: [PATCH] feat: optimize style of SMS notifications module. --- .../DataTableCells/SwitchFieldCell.js | 18 ++++++++--- src/components/Dialog/Dialog.js | 10 +++--- src/components/Dialog/DialogContent.js | 2 +- src/components/Dialog/DialogFooterActions.js | 26 +++++++++++++++ src/components/Dialog/DialogSuspense.js | 2 +- src/components/Dialog/index.js | 6 ++++ src/components/index.js | 9 ++---- .../SMSMessageDialog/SMSMessageForm.js | 1 - .../SMSMessageDialog/SMSMessageFormContent.js | 1 - .../SMSMessageFormFloatingActions.js | 12 +++---- .../NotifyViaSMSFormFloatingActions.js | 15 +++------ .../SMSIntegration/SMSMessagesDataTable.js | 32 +++++++++++++++++-- .../Preferences/SMSIntegration/components.js | 6 ++-- src/hooks/query/settings.js | 1 - 14 files changed, 96 insertions(+), 45 deletions(-) create mode 100644 src/components/Dialog/DialogFooterActions.js create mode 100644 src/components/Dialog/index.js diff --git a/src/components/DataTableCells/SwitchFieldCell.js b/src/components/DataTableCells/SwitchFieldCell.js index df5bb0e89..a25e96ae4 100644 --- a/src/components/DataTableCells/SwitchFieldCell.js +++ b/src/components/DataTableCells/SwitchFieldCell.js @@ -1,21 +1,28 @@ import React from 'react'; import classNames from 'classnames'; -import { get } from 'lodash'; import { Classes, Switch, FormGroup, Intent } from '@blueprintjs/core'; +import { safeInvoke } from 'utils'; + +/** + * Switch editable cell. + */ const SwitchEditableCell = ({ row: { index, original }, - column: { id, switchProps }, + column: { id, switchProps, onSwitchChange }, cell: { value: initialValue }, payload, }) => { const [value, setValue] = React.useState(initialValue); + // Handle the switch change. const onChange = (e) => { const newValue = e.target.checked; setValue(newValue); - payload.updateData(index, id, newValue); + + safeInvoke(payload.updateData, index, id, newValue); + safeInvoke(onSwitchChange, e, newValue, original); }; React.useEffect(() => { @@ -31,7 +38,7 @@ const SwitchEditableCell = ({ > ); }; -export default SwitchEditableCell; + +export default SwitchEditableCell; \ No newline at end of file diff --git a/src/components/Dialog/Dialog.js b/src/components/Dialog/Dialog.js index 95e1fdcbf..c5f793251 100644 --- a/src/components/Dialog/Dialog.js +++ b/src/components/Dialog/Dialog.js @@ -9,16 +9,16 @@ function DialogComponent(props) { const { name, children, closeDialog, onClose } = props; const handleClose = (event) => { - closeDialog(name) + closeDialog(name); onClose && onClose(event); }; return ( - { children } + {children} ); } -export default compose( - withDialogActions, -)(DialogComponent); \ No newline at end of file +const DialogRoot = compose(withDialogActions)(DialogComponent); + +export { DialogRoot as Dialog }; diff --git a/src/components/Dialog/DialogContent.js b/src/components/Dialog/DialogContent.js index 265182bc5..cb438f499 100644 --- a/src/components/Dialog/DialogContent.js +++ b/src/components/Dialog/DialogContent.js @@ -2,7 +2,7 @@ import React from 'react'; import { Spinner, Classes } from '@blueprintjs/core'; import classNames from 'classnames'; -export default function DialogContent(props) { +export function DialogContent(props) { const { isLoading, children } = props; const loadingContent = ( diff --git a/src/components/Dialog/DialogFooterActions.js b/src/components/Dialog/DialogFooterActions.js new file mode 100644 index 000000000..91c856e9a --- /dev/null +++ b/src/components/Dialog/DialogFooterActions.js @@ -0,0 +1,26 @@ +import React from 'react'; +import styled from 'styled-components'; +import { Classes } from '@blueprintjs/core'; + +export function DialogFooterActions({ alignment = 'right', children }) { + return ( + + {children} + + ); +} + +const DialogFooterActionsRoot = styled.div` + margin-left: -10px; + margin-right: -10px; + justify-content: ${(props) => + props.alignment === 'right' ? 'flex-end' : 'flex-start'}; + + .bp3-button { + margin-left: 10px; + margin-left: 10px; + } +`; diff --git a/src/components/Dialog/DialogSuspense.js b/src/components/Dialog/DialogSuspense.js index 6513d28c5..56ed625b9 100644 --- a/src/components/Dialog/DialogSuspense.js +++ b/src/components/Dialog/DialogSuspense.js @@ -5,7 +5,7 @@ function LoadingContent() { return (
); } -export default function DialogSuspense({ +export function DialogSuspense({ children }) { return ( diff --git a/src/components/Dialog/index.js b/src/components/Dialog/index.js new file mode 100644 index 000000000..c7c0982fb --- /dev/null +++ b/src/components/Dialog/index.js @@ -0,0 +1,6 @@ + + +export * from './Dialog'; +export * from './DialogFooterActions'; +export * from './DialogSuspense'; +export * from './DialogContent'; \ No newline at end of file diff --git a/src/components/index.js b/src/components/index.js index ee698b70c..b8ca111f4 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -23,9 +23,6 @@ import AccountsSelectList from './AccountsSelectList'; import AccountsTypesSelect from './AccountsTypesSelect'; import LoadingIndicator from './LoadingIndicator'; import DashboardActionViewsList from './Dashboard/DashboardActionViewsList'; -import Dialog from './Dialog/Dialog'; -import DialogContent from './Dialog/DialogContent'; -import DialogSuspense from './Dialog/DialogSuspense'; import InputPrependButton from './Forms/InputPrependButton'; import CategoriesSelectList from './CategoriesSelectList'; import Row from './Grid/Row'; @@ -63,6 +60,7 @@ import AvaterCell from './AvaterCell'; import { ItemsMultiSelect } from './Items'; import MoreMenuItems from './MoreMenutItems'; +export * from './Dialog'; export * from './Menu'; export * from './AdvancedFilter/AdvancedFilterDropdown'; export * from './AdvancedFilter/AdvancedFilterPopover'; @@ -121,9 +119,6 @@ export { LoadingIndicator, DashboardActionViewsList, AppToaster, - Dialog, - DialogContent, - DialogSuspense, InputPrependButton, CategoriesSelectList, Col, @@ -159,5 +154,5 @@ export { ItemsMultiSelect, Card, AvaterCell, - MoreMenuItems + MoreMenuItems, }; diff --git a/src/containers/Dialogs/SMSMessageDialog/SMSMessageForm.js b/src/containers/Dialogs/SMSMessageDialog/SMSMessageForm.js index a693850ec..3f2e8ecc9 100644 --- a/src/containers/Dialogs/SMSMessageDialog/SMSMessageForm.js +++ b/src/containers/Dialogs/SMSMessageDialog/SMSMessageForm.js @@ -64,7 +64,6 @@ function SMSMessageForm({ } setSubmitting(false); }; - debugger; editSMSNotificationMutate(form).then(onSuccess).catch(onError); }; diff --git a/src/containers/Dialogs/SMSMessageDialog/SMSMessageFormContent.js b/src/containers/Dialogs/SMSMessageDialog/SMSMessageFormContent.js index 2d1890208..8cfc998f5 100644 --- a/src/containers/Dialogs/SMSMessageDialog/SMSMessageFormContent.js +++ b/src/containers/Dialogs/SMSMessageDialog/SMSMessageFormContent.js @@ -60,7 +60,6 @@ function SMSMessagePreviewSection() { return ( - Note: Note: One SMS unit can contain a maximum of 160 characters. {messagesUnits} SMS units will be used to diff --git a/src/containers/Dialogs/SMSMessageDialog/SMSMessageFormFloatingActions.js b/src/containers/Dialogs/SMSMessageDialog/SMSMessageFormFloatingActions.js index d7eabc30e..e4eba28df 100644 --- a/src/containers/Dialogs/SMSMessageDialog/SMSMessageFormFloatingActions.js +++ b/src/containers/Dialogs/SMSMessageDialog/SMSMessageFormFloatingActions.js @@ -1,9 +1,8 @@ import React from 'react'; import { Intent, Button, Classes } from '@blueprintjs/core'; import { useFormikContext } from 'formik'; -import styled from 'styled-components'; -import { FormattedMessage as T } from 'components'; +import { DialogFooterActions, FormattedMessage as T } from 'components'; import { useSMSMessageDialogContext } from './SMSMessageDialogProvider'; import withDialogActions from 'containers/Dialog/withDialogActions'; @@ -20,6 +19,7 @@ function SMSMessageFormFloatingActions({ // Formik context. const { isSubmitting } = useFormikContext(); + // SMS Message dialog contxt. const { dialogName } = useSMSMessageDialogContext(); // Handle close button click. @@ -29,7 +29,7 @@ function SMSMessageFormFloatingActions({ return (
- + @@ -41,13 +41,9 @@ function SMSMessageFormFloatingActions({ > Save SMS Message - +
); } export default compose(withDialogActions)(SMSMessageFormFloatingActions); - -const FooterActions = styled.div` - justify-content: flex-start; -`; diff --git a/src/containers/NotifyViaSMS/NotifyViaSMSFormFloatingActions.js b/src/containers/NotifyViaSMS/NotifyViaSMSFormFloatingActions.js index 96e3b50e0..84b517e44 100644 --- a/src/containers/NotifyViaSMS/NotifyViaSMSFormFloatingActions.js +++ b/src/containers/NotifyViaSMS/NotifyViaSMSFormFloatingActions.js @@ -1,11 +1,8 @@ import React from 'react'; import { useFormikContext } from 'formik'; import { Intent, Button, Classes } from '@blueprintjs/core'; -import styled from 'styled-components'; -import { FormattedMessage as T } from 'components'; - -import { safeCallback } from 'utils'; +import { DialogFooterActions, FormattedMessage as T } from 'components'; /** * @@ -21,7 +18,7 @@ export default function NotifyViaSMSFormFloatingActions({ onCancel }) { return (
- + - +
); -} - -const FooterActions = styled.div` - justify-content: flex-start; -`; +} \ No newline at end of file diff --git a/src/containers/Preferences/SMSIntegration/SMSMessagesDataTable.js b/src/containers/Preferences/SMSIntegration/SMSMessagesDataTable.js index a183e4bd9..8635fbf6d 100644 --- a/src/containers/Preferences/SMSIntegration/SMSMessagesDataTable.js +++ b/src/containers/Preferences/SMSIntegration/SMSMessagesDataTable.js @@ -1,25 +1,53 @@ import React from 'react'; import styled from 'styled-components'; +import { Intent } from '@blueprintjs/core'; -import { DataTable } from 'components'; +import { DataTable, AppToaster } from 'components'; import TableSkeletonRows from 'components/Datatable/TableSkeletonRows'; import { useSMSIntegrationTableColumns, ActionsMenu } from './components'; import { useSMSIntegrationContext } from './SMSIntegrationProvider'; +import { useSettingEditSMSNotification } from 'hooks/query'; import withDialogActions from 'containers/Dialog/withDialogActions'; import { compose } from 'utils'; +/** + * SMS Message data table. + */ function SMSMessagesDataTable({ // #withDialogAction openDialog, }) { + // Edit SMS message notification mutations. + const { mutateAsync: editSMSNotificationMutate } = + useSettingEditSMSNotification(); + + // Handle notification switch change. + const handleNotificationSwitchChange = React.useCallback( + (event, value, notification) => { + editSMSNotificationMutate({ + notification_key: notification.key, + is_notification_enabled: value, + }).then(() => { + AppToaster.show({ + message: 'SMS notification hs been enabled successfully.', + intent: Intent.SUCCESS, + }); + }); + }, + [editSMSNotificationMutate], + ); + // Table columns. - const columns = useSMSIntegrationTableColumns(); + const columns = useSMSIntegrationTableColumns({ + onSwitchChange: handleNotificationSwitchChange, + }); const { notifications, isSMSNotificationsLoading } = useSMSIntegrationContext(); + // handle edit message link click const handleEditMessageText = ({ key }) => { openDialog('sms-message-form', { notificationkey: key }); }; diff --git a/src/containers/Preferences/SMSIntegration/components.js b/src/containers/Preferences/SMSIntegration/components.js index 3e59329ba..f1708574a 100644 --- a/src/containers/Preferences/SMSIntegration/components.js +++ b/src/containers/Preferences/SMSIntegration/components.js @@ -5,6 +5,7 @@ import { Menu, MenuItem } from '@blueprintjs/core'; import { ButtonLink } from 'components'; import { SwitchFieldCell } from 'components/DataTableCells'; + import { safeInvoke } from 'utils'; /** @@ -63,7 +64,7 @@ export function ActionsMenu({ * Retrieve SMS notifications messages table columns * @returns */ -export function useSMSIntegrationTableColumns() { +export function useSMSIntegrationTableColumns({ onSwitchChange }) { return React.useMemo( () => [ { @@ -98,9 +99,10 @@ export function useSMSIntegrationTableColumns() { disableResizing: true, disableSortBy: true, width: '80', + onSwitchChange, }, ], - [], + [onSwitchChange], ); } diff --git a/src/hooks/query/settings.js b/src/hooks/query/settings.js index 492ce6521..b7c70b335 100644 --- a/src/hooks/query/settings.js +++ b/src/hooks/query/settings.js @@ -1,4 +1,3 @@ -import { useEffect } from 'react'; import { useMutation, useQueryClient } from 'react-query'; import { useRequestQuery } from '../useQueryRequest'; import useApiRequest from '../useRequest';