-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Adds functionality for users to create notifications for various plat…
…forms
- Loading branch information
Showing
95 changed files
with
3,322 additions
and
74 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| // import dependencies | ||
| import PropTypes from 'prop-types'; | ||
|
|
||
| // import local files | ||
| import Modal from '../../ui/modal'; | ||
|
|
||
| const NotificationDeleteModal = ({ name, handleClose, handleConfirm }) => { | ||
| return ( | ||
| <> | ||
| <Modal.Title>Are you absolutely sure?</Modal.Title> | ||
| <Modal.Message style={{ width: '400px' }}> | ||
| By continuing you will be deleting{' '} | ||
| <span style={{ fontWeight: '600', color: 'var(--primary-700)' }}> | ||
| {name} notification | ||
| </span>{' '} | ||
| from all linked monitors.{' '} | ||
| <span style={{ fontWeight: '600' }}>This action cannot be undone.</span> | ||
| </Modal.Message> | ||
| <Modal.Actions> | ||
| <Modal.Button onClick={handleClose}>Cancel</Modal.Button> | ||
| <Modal.Button color="red" onClick={handleConfirm}> | ||
| Confirm | ||
| </Modal.Button> | ||
| </Modal.Actions> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| NotificationDeleteModal.displayName = 'NotificationDeleteModal'; | ||
|
|
||
| NotificationDeleteModal.propTypes = { | ||
| name: PropTypes.string.isRequired, | ||
| handleClose: PropTypes.func.isRequired, | ||
| handleConfirm: PropTypes.func.isRequired, | ||
| }; | ||
|
|
||
| export default NotificationDeleteModal; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,83 @@ | ||
| // import dependencies | ||
| import PropTypes from 'prop-types'; | ||
|
|
||
| // import local files | ||
| import Dropdown from '../../../ui/dropdown'; | ||
| import useDropdown from '../../../../hooks/useDropdown'; | ||
|
|
||
| const notifications = { | ||
| Discord: { name: 'Discord', icon: 'discord.svg' }, | ||
| Slack: { name: 'Slack', icon: 'slack.svg' }, | ||
| Telegram: { name: 'Telegram', icon: 'telegram.svg' }, | ||
| Webhook: { name: 'Webhook', icon: 'webhook.svg' }, | ||
| }; | ||
|
|
||
| const NotificationModalPlatform = ({ isEdit, setPlatform, platform }) => { | ||
| const { dropdownIsOpen, toggleDropdown } = useDropdown(); | ||
|
|
||
| return ( | ||
| <> | ||
| <label className="input-label">Notification Type</label> | ||
| {isEdit && ( | ||
| <Dropdown.Trigger asInput> | ||
| <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}> | ||
| <img | ||
| src={`/notifications/${notifications[platform].icon}`} | ||
| style={{ width: '22px' }} | ||
| /> | ||
| <div>{notifications[platform].name}</div> | ||
| </div> | ||
| </Dropdown.Trigger> | ||
| )} | ||
| {!isEdit && ( | ||
| <Dropdown.Container | ||
| position="right" | ||
| isOpen={dropdownIsOpen} | ||
| toggleDropdown={toggleDropdown} | ||
| id="home-menu-layout" | ||
| > | ||
| <Dropdown.Trigger | ||
| isOpen={dropdownIsOpen} | ||
| toggleDropdown={toggleDropdown} | ||
| asInput | ||
| > | ||
| <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}> | ||
| <img | ||
| src={`/notifications/${notifications[platform].icon}`} | ||
| style={{ width: '22px' }} | ||
| /> | ||
| <div>{notifications[platform].name}</div> | ||
| </div> | ||
| </Dropdown.Trigger> | ||
| <Dropdown.List isOpen={dropdownIsOpen} fullWidth> | ||
| {Object.values(notifications).map((notification) => ( | ||
| <Dropdown.Item | ||
| onClick={() => { | ||
| setPlatform({ key: 'platform', value: notification.name }); | ||
| toggleDropdown(); | ||
| }} | ||
| key={notification.name} | ||
| > | ||
| <img | ||
| src={`/notifications/${notification.icon}`} | ||
| style={{ width: '20px' }} | ||
| /> | ||
| <div>{notification.name}</div> | ||
| </Dropdown.Item> | ||
| ))} | ||
| </Dropdown.List> | ||
| </Dropdown.Container> | ||
| )} | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| NotificationModalPlatform.displayName = 'NotificationModalPlatform'; | ||
|
|
||
| NotificationModalPlatform.propTypes = { | ||
| isEdit: PropTypes.bool, | ||
| setPlatform: PropTypes.func.isRequired, | ||
| platform: PropTypes.string.isRequired, | ||
| }; | ||
|
|
||
| export default NotificationModalPlatform; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,55 @@ | ||
| // import dependencies | ||
| import PropTypes from 'prop-types'; | ||
|
|
||
| // import local files | ||
| import Dropdown from '../../../ui/dropdown'; | ||
| import useDropdown from '../../../../hooks/useDropdown'; | ||
|
|
||
| const NotificationModalType = ({ messageType = 'basic', setMessageType }) => { | ||
| const { dropdownIsOpen, toggleDropdown } = useDropdown(); | ||
|
|
||
| return ( | ||
| <> | ||
| <label className="input-label">Message Type</label> | ||
| <Dropdown.Container | ||
| position="right" | ||
| isOpen={dropdownIsOpen} | ||
| toggleDropdown={toggleDropdown} | ||
| id="home-menu-layout" | ||
| > | ||
| <Dropdown.Trigger | ||
| isOpen={dropdownIsOpen} | ||
| toggleDropdown={toggleDropdown} | ||
| asInput | ||
| > | ||
| {messageType.charAt(0).toUpperCase() + messageType.slice(1)} | ||
| </Dropdown.Trigger> | ||
| <Dropdown.List isOpen={dropdownIsOpen} fullWidth> | ||
| {['Basic', 'Pretty', 'Nerdy'].map((type) => ( | ||
| <Dropdown.Item | ||
| key={type} | ||
| onClick={() => { | ||
| setMessageType({ | ||
| key: 'messageType', | ||
| value: type.toLowerCase(), | ||
| }); | ||
| toggleDropdown(); | ||
| }} | ||
| > | ||
| {type} | ||
| </Dropdown.Item> | ||
| ))} | ||
| </Dropdown.List> | ||
| </Dropdown.Container> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| NotificationModalType.displayName = 'NotificationModalType'; | ||
|
|
||
| NotificationModalType.propTypes = { | ||
| messageType: PropTypes.oneOf(['basic', 'pretty', 'nerdy']), | ||
| setMessageType: PropTypes.func, | ||
| }; | ||
|
|
||
| export default NotificationModalType; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,103 @@ | ||
| import './styles.scss'; | ||
|
|
||
| // import dependencies | ||
| import { useEffect } from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
|
|
||
| // import local files | ||
| import Modal from '../../ui/modal'; | ||
| import NotificationModalType from './dropdown/type'; | ||
| import NotificationModalPlatform from './dropdown/platform'; | ||
| import NotificationsTemplates from '../../../../shared/notifications'; | ||
| import useNotificationForm from '../../../hooks/useNotificationForm'; | ||
| import NotificationModalPayload from './payload'; | ||
| import * as inputForPlatform from './platform'; | ||
|
|
||
| // Notification types | ||
| // - Up and running | ||
| // - Application went down | ||
| // - Warning (If the monitor goes down once it shows a warning, else throw error) | ||
|
|
||
| const NotificationModal = ({ values, isEdit, closeModal, addNotification }) => { | ||
| const { inputs, errors, handleInput, handleSubmit } = useNotificationForm( | ||
| values, | ||
| isEdit, | ||
| closeModal | ||
| ); | ||
|
|
||
| const handleKeydown = (event) => { | ||
| if (event?.key === 'Escape' || event?.key === 'Esc') { | ||
| closeModal(); | ||
| } | ||
| }; | ||
|
|
||
| useEffect(() => { | ||
| document.addEventListener('keydown', handleKeydown); | ||
|
|
||
| return () => { | ||
| document.removeEventListener('keydown', handleKeydown); | ||
| }; | ||
| }, []); | ||
|
|
||
| const message = NotificationsTemplates[inputs.platform][inputs.messageType]; | ||
|
|
||
| const PlatformInputs = inputForPlatform[inputs.platform]; | ||
|
|
||
| return ( | ||
| <Modal.Container | ||
| closeButton={closeModal} | ||
| contentProps={{ style: { maxWidth: '650px', width: '100%' } }} | ||
| > | ||
| <Modal.Title style={{ textAlign: 'center' }}> | ||
| {isEdit ? 'Edit Notification' : 'Add Notification'} | ||
| </Modal.Title> | ||
|
|
||
| {errors['general'] && ( | ||
| <div className="input-error-general">{errors['general']}</div> | ||
| )} | ||
|
|
||
| <Modal.Message> | ||
| <NotificationModalPlatform | ||
| isEdit={isEdit} | ||
| values={inputs} | ||
| setPlatform={handleInput} | ||
| platform={inputs.platform} | ||
| /> | ||
| <PlatformInputs | ||
| values={inputs} | ||
| errors={errors} | ||
| handleInput={handleInput} | ||
| /> | ||
| <NotificationModalType | ||
| messageType={inputs.messageType} | ||
| setMessageType={handleInput} | ||
| /> | ||
| <label className="input-label">Payload</label> | ||
| <NotificationModalPayload message={message} /> | ||
| </Modal.Message> | ||
|
|
||
| <Modal.Actions> | ||
| <Modal.Button color={'red'} onClick={closeModal}> | ||
| Cancel | ||
| </Modal.Button> | ||
| <Modal.Button | ||
| color={'green'} | ||
| onClick={() => handleSubmit(addNotification)} | ||
| > | ||
| {isEdit ? 'Update' : 'Create'} | ||
| </Modal.Button> | ||
| </Modal.Actions> | ||
| </Modal.Container> | ||
| ); | ||
| }; | ||
|
|
||
| NotificationModal.displayName = 'NotificationModal'; | ||
|
|
||
| NotificationModal.propTypes = { | ||
| isEdit: PropTypes.bool, | ||
| values: PropTypes.object, | ||
| closeModal: PropTypes.func, | ||
| addNotification: PropTypes.func, | ||
| }; | ||
|
|
||
| export default NotificationModal; |
Oops, something went wrong.