diff --git a/src/views/Settings/NotificationSetting.jsx b/src/views/Settings/NotificationSetting.jsx index d761e20..18a97a8 100644 --- a/src/views/Settings/NotificationSetting.jsx +++ b/src/views/Settings/NotificationSetting.jsx @@ -25,6 +25,7 @@ import { UpdateNotificationTarget, UpdateUserDetails, } from '../../utils/Fetcher' +import SettingsLayout from './SettingsLayout' const NotificationSetting = () => { const { showWarning } = useNotification() @@ -134,330 +135,334 @@ const NotificationSetting = () => { }) } return ( -
- Device Notification - - Manage your Device Notificaiton + +
+ Device Notification + + Manage your Device Notificaiton - - { - event.preventDefault() - if (deviceNotification === false) { - LocalNotifications.requestPermissions().then(resp => { - if (resp.display === 'granted') { - setDeviceNotification(true) - setNotificationPreferences({ granted: true }) - } else if (resp.display === 'denied') { - showWarning({ - title: 'Notification Permission Denied', - message: - 'You have denied notification permissions. You can enable them later in your device settings.', - }) - setDeviceNotification(false) - setNotificationPreferences({ granted: false }) - } - }) - } else { - setDeviceNotification(false) - } - }} - color={deviceNotification ? 'success' : 'neutral'} - variant={deviceNotification ? 'solid' : 'outlined'} - slotProps={{ - endDecorator: { - sx: { - minWidth: 24, - }, - }, - }} - sx={{ mr: 2 }} - /> -
- Device Notification - - {Capacitor.isNativePlatform() - ? 'Receive notification on your device when a task is due' - : 'This feature is only available on mobile devices'}{' '} - -
- - {deviceNotification && ( - - {[ - { - title: 'Due Date Notification', - checked: dueNotification, - set: setDueNotification, - label: 'Notification when the task is due', - property: 'dueNotification', - disabled: false, - }, - { - title: 'Pre-Due Date Notification', - checked: preDueNotification, - set: setPreDueNotification, - label: 'Notification a few hours before the task is due', - property: 'preDueNotification', - disabled: false, - }, - { - title: 'Overdue Notification', - checked: naggingNotification, - set: setNaggingNotification, - label: 'Notification when the task is overdue', - property: 'naggingNotification', - disabled: false, - }, - ].map(item => ( - -
- {item.title} - {item.label} -
- - { - setNotificationPreferences({ [item.property]: !item.checked }) - item.set(!item.checked) - }} - color={item.checked ? 'success' : ''} - variant='solid' - endDecorator={item.checked ? 'On' : 'Off'} - slotProps={{ endDecorator: { sx: { minWidth: 24 } } }} - /> - - ))} - - )} - -
- Push Notifications - - {Capacitor.isNativePlatform() - ? 'Receive Nudges, Announcements, and Chore Assignments via Push Notifications' - : 'This feature is only available on mobile devices'}{' '} - -
- { - event.preventDefault() - if (pushNotification === false) { - try { - const resp = await PushNotifications.requestPermissions() - console.log('user PushNotifications permission', resp) - if (resp.receive === 'granted') { - setPushNotification(true) - setPushNotificationPreferences({ granted: true }) - // Register push notifications after permission is granted - await registerPushNotifications() - } - if (resp.receive !== 'granted') { - showWarning({ - title: 'Push Notification Permission Denied', - message: - 'Push notifications have been disabled. You can enable them in your device settings if needed.', - }) - setPushNotification(false) - setPushNotificationPreferences({ granted: false }) - console.log('User denied permission', resp) - } - } catch (error) { - console.error('Error setting up push notifications:', error) - } - } else { - setPushNotification(false) - } - }} - color={pushNotification ? 'success' : 'neutral'} - variant={pushNotification ? 'solid' : 'outlined'} - endDecorator={pushNotification ? 'On' : 'Off'} - slotProps={{ - endDecorator: { - sx: { - minWidth: 24, - }, - }, - }} - /> - - - - Custom Notification - - - Notificaiton through other platform like Telegram or Pushover - - - - { - event.preventDefault() - if (chatID !== 0) { - setChatID(0) - } else { - setChatID('') - UpdateUserDetails({ - chatID: Number(0), - }).then(resp => { - resp.json().then(data => { - refetchUserProfile() + + { + event.preventDefault() + if (deviceNotification === false) { + LocalNotifications.requestPermissions().then(resp => { + if (resp.display === 'granted') { + setDeviceNotification(true) + setNotificationPreferences({ granted: true }) + } else if (resp.display === 'denied') { + showWarning({ + title: 'Notification Permission Denied', + message: + 'You have denied notification permissions. You can enable them later in your device settings.', + }) + setDeviceNotification(false) + setNotificationPreferences({ granted: false }) + } }) - }) - } - setNotificationTarget('0') - handleSave() - }} - color={chatID !== 0 ? 'success' : 'neutral'} - variant={chatID !== 0 ? 'solid' : 'outlined'} - slotProps={{ - endDecorator: { - sx: { - minWidth: 24, + } else { + setDeviceNotification(false) + } + }} + color={deviceNotification ? 'success' : 'neutral'} + variant={deviceNotification ? 'solid' : 'outlined'} + slotProps={{ + endDecorator: { + sx: { + minWidth: 24, + }, }, - }, - }} - sx={{ mr: 2 }} - /> -
- Custom Notification - - Receive notification on other platform - -
- - {chatID !== 0 && ( - +
+ Device Notification + + {Capacitor.isNativePlatform() + ? 'Receive notification on your device when a task is due' + : 'This feature is only available on mobile devices'}{' '} + +
+ + {deviceNotification && ( + + {[ + { + title: 'Due Date Notification', + checked: dueNotification, + set: setDueNotification, + label: 'Notification when the task is due', + property: 'dueNotification', + disabled: false, + }, + { + title: 'Pre-Due Date Notification', + checked: preDueNotification, + set: setPreDueNotification, + label: 'Notification a few hours before the task is due', + property: 'preDueNotification', + disabled: false, + }, + { + title: 'Overdue Notification', + checked: naggingNotification, + set: setNaggingNotification, + label: 'Notification when the task is overdue', + property: 'naggingNotification', + disabled: false, + }, + ].map(item => ( + +
+ {item.title} + {item.label} +
+ + { + setNotificationPreferences({ + [item.property]: !item.checked, + }) + item.set(!item.checked) + }} + color={item.checked ? 'success' : ''} + variant='solid' + endDecorator={item.checked ? 'On' : 'Off'} + slotProps={{ endDecorator: { sx: { minWidth: 24 } } }} + /> + + ))} + + )} + +
+ Push Notifications + + {Capacitor.isNativePlatform() + ? 'Receive Nudges, Announcements, and Chore Assignments via Push Notifications' + : 'This feature is only available on mobile devices'}{' '} + +
+ { + event.preventDefault() + if (pushNotification === false) { + try { + const resp = await PushNotifications.requestPermissions() + console.log('user PushNotifications permission', resp) + if (resp.receive === 'granted') { + setPushNotification(true) + setPushNotificationPreferences({ granted: true }) + // Register push notifications after permission is granted + await registerPushNotifications() + } + if (resp.receive !== 'granted') { + showWarning({ + title: 'Push Notification Permission Denied', + message: + 'Push notifications have been disabled. You can enable them in your device settings if needed.', + }) + setPushNotification(false) + setPushNotificationPreferences({ granted: false }) + console.log('User denied permission', resp) + } + } catch (error) { + console.error('Error setting up push notifications:', error) + } + } else { + setPushNotification(false) + } + }} + color={pushNotification ? 'success' : 'neutral'} + variant={pushNotification ? 'solid' : 'outlined'} + endDecorator={pushNotification ? 'On' : 'Off'} + slotProps={{ + endDecorator: { + sx: { + minWidth: 24, + }, + }, + }} + /> + + + + Custom Notification + + + Notificaiton through other platform like Telegram or Pushover + - Chat ID - - setChatID(e.target.value)} - placeholder='User ID / Chat ID' - sx={{ - width: '200px', - }} - /> - - If you don't know your Chat ID, start chat with userinfobot and - it will send you your Chat ID.{' '} - - Click here - {' '} - to start chat with userinfobot{' '} - - - )} - {notificationTarget === '2' && ( - <> - User key - setChatID(e.target.value)} - placeholder='User ID' - sx={{ - width: '200px', - }} - /> - - )} - {error && ( - - {error} - - )} - - - - )} -
+ + {notificationTarget === '1' && ( + <> + + You need to initiate a message to the bot in order for the + Telegram notification to work{' '} + + Click here + {' '} + to start a chat + + + Chat ID + + setChatID(e.target.value)} + placeholder='User ID / Chat ID' + sx={{ + width: '200px', + }} + /> + + If you don't know your Chat ID, start chat with userinfobot + and it will send you your Chat ID.{' '} + + Click here + {' '} + to start chat with userinfobot{' '} + + + )} + {notificationTarget === '2' && ( + <> + User key + setChatID(e.target.value)} + placeholder='User ID' + sx={{ + width: '200px', + }} + /> + + )} + {error && ( + + {error} + + )} + + + + )} +
+ ) } diff --git a/src/views/Settings/NotificationSettings.jsx b/src/views/Settings/NotificationSettings.jsx deleted file mode 100644 index a94ebd2..0000000 --- a/src/views/Settings/NotificationSettings.jsx +++ /dev/null @@ -1,12 +0,0 @@ -import NotificationSetting from './NotificationSetting' -import SettingsLayout from './SettingsLayout' - -const NotificationSettings = () => { - return ( - - - - ) -} - -export default NotificationSettings \ No newline at end of file