148 lines
4 KiB
JavaScript
148 lines
4 KiB
JavaScript
import { Button, Divider, Input, Option, Select, Typography } from '@mui/joy'
|
|
import { useContext, useState } from 'react'
|
|
import { UserContext } from '../../contexts/UserContext'
|
|
import { UpdateNotificationTarget } from '../../utils/Fetcher'
|
|
|
|
const NotificationSetting = () => {
|
|
const { userProfile, setUserProfile } = useContext(UserContext)
|
|
const [notificationTarget, setNotificationTarget] = useState(
|
|
userProfile?.notification_target
|
|
? String(userProfile.notification_target.type)
|
|
: '0',
|
|
)
|
|
|
|
const [chatID, setChatID] = useState(
|
|
userProfile?.notification_target?.target_id,
|
|
)
|
|
const [error, setError] = useState('')
|
|
const SaveValidation = () => {
|
|
switch (notificationTarget) {
|
|
case '1':
|
|
if (chatID === '') {
|
|
setError('Chat ID is required')
|
|
return false
|
|
} else if (isNaN(chatID) || chatID === '0') {
|
|
setError('Invalid Chat ID')
|
|
return false
|
|
}
|
|
break
|
|
case '2':
|
|
if (chatID === '') {
|
|
setError('User key is required')
|
|
return false
|
|
}
|
|
break
|
|
default:
|
|
break
|
|
}
|
|
setError('')
|
|
return true
|
|
}
|
|
const handleSave = () => {
|
|
if (!SaveValidation()) return
|
|
|
|
UpdateNotificationTarget({
|
|
target: chatID,
|
|
type: Number(notificationTarget),
|
|
}).then(resp => {
|
|
alert('Notification target updated')
|
|
setUserProfile({
|
|
...userProfile,
|
|
notification_target: {
|
|
target: chatID,
|
|
type: Number(notificationTarget),
|
|
},
|
|
})
|
|
})
|
|
}
|
|
return (
|
|
<div className='grid gap-4 py-4' id='notifications'>
|
|
<Typography level='h3'>Notification Settings</Typography>
|
|
<Divider />
|
|
<Typography level='body-md'>Manage your notification settings</Typography>
|
|
|
|
<Select
|
|
value={notificationTarget}
|
|
sx={{ maxWidth: '200px' }}
|
|
onChange={(e, selected) => setNotificationTarget(selected)}
|
|
>
|
|
<Option value='0'>None</Option>
|
|
<Option value='1'>Telegram</Option>
|
|
<Option value='2'>Pushover</Option>
|
|
</Select>
|
|
{notificationTarget === '1' && (
|
|
<>
|
|
<Typography level='body-xs'>
|
|
You need to initiate a message to the bot in order for the Telegram
|
|
notification to work{' '}
|
|
<a
|
|
style={{
|
|
textDecoration: 'underline',
|
|
color: '#0891b2',
|
|
}}
|
|
href='https://t.me/DonetickBot'
|
|
>
|
|
Click here
|
|
</a>{' '}
|
|
to start a chat
|
|
</Typography>
|
|
|
|
<Typography level='body-sm'>Chat ID</Typography>
|
|
|
|
<Input
|
|
value={chatID}
|
|
onChange={e => setChatID(e.target.value)}
|
|
placeholder='User ID / Chat ID'
|
|
sx={{
|
|
width: '200px',
|
|
}}
|
|
/>
|
|
<Typography mt={0} level='body-xs'>
|
|
If you don't know your Chat ID, start chat with userinfobot and it
|
|
will send you your Chat ID.{' '}
|
|
<a
|
|
style={{
|
|
textDecoration: 'underline',
|
|
color: '#0891b2',
|
|
}}
|
|
href='https://t.me/userinfobot'
|
|
>
|
|
Click here
|
|
</a>{' '}
|
|
to start chat with userinfobot{' '}
|
|
</Typography>
|
|
</>
|
|
)}
|
|
{notificationTarget === '2' && (
|
|
<>
|
|
<Typography level='body-sm'>User key</Typography>
|
|
<Input
|
|
value={chatID}
|
|
onChange={e => setChatID(e.target.value)}
|
|
placeholder='User ID'
|
|
sx={{
|
|
width: '200px',
|
|
}}
|
|
/>
|
|
</>
|
|
)}
|
|
{error && (
|
|
<Typography color='warning' level='body-sm'>
|
|
{error}
|
|
</Typography>
|
|
)}
|
|
|
|
<Button
|
|
sx={{
|
|
width: '110px',
|
|
mb: 1,
|
|
}}
|
|
onClick={handleSave}
|
|
>
|
|
Save
|
|
</Button>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default NotificationSetting
|