amy/donetick-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add notification target update functionality

Browse source
This commit is contained in:
Mo Tarbin 2024-12-14 02:11:59 -05:00
parent 36638b3a9d
commit aff432b74a
3 changed files with 132 additions and 64 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/utils/Fetcher.jsx
View file

@ -225,6 +225,14 @@ const UpdateUserDetails = userDetails => {
})
}
const UpdateNotificationTarget = notificationTarget => {
return Fetch(`${API_URL}/users/targets`, {
method: 'PUT',
headers: HEADERS(),
body: JSON.stringify(notificationTarget),
})
}
const GetSubscriptionSession = () => {
return Fetch(API_URL + `/payments/create-subscription`, {
method: 'GET',
@ -373,6 +381,7 @@ export {
UpdateChoreHistory,
UpdateChorePriority,
UpdateLabel,
UpdateNotificationTarget,
UpdatePassword,
UpdateThingState,
UpdateUserDetails,

5
src/views/Authorization/Signup.jsx
View file

@ -103,12 +103,13 @@ const SignupView = () => {
signUp(username, password, displayName, email).then(response => {
if (response.status === 201) {
handleLogin(username, password)
} else if (response.status === 403) {
setError('Signup disabled, please contact admin')
} else {
console.log('Signup failed')
response.json().then(res => {
setError(res.error)
}
)
})
}
})
}

180
src/views/Settings/NotificationSetting.jsx
View file

@ -1,85 +1,143 @@
import { Button, Divider, Input, Option, Select, Typography } from '@mui/joy'
import { useContext, useEffect, useState } from 'react'
import { useContext, useState } from 'react'
import { UserContext } from '../../contexts/UserContext'
import { GetUserProfile, UpdateUserDetails } from '../../utils/Fetcher'
import { UpdateNotificationTarget } from '../../utils/Fetcher'
const NotificationSetting = () => {
const { userProfile, setUserProfile } = useContext(UserContext)
useEffect(() => {
if (!userProfile) {
GetUserProfile().then(resp => {
resp.json().then(data => {
setUserProfile(data.res)
setChatID(data.res.chatID)
})
})
}
}, [])
const [chatID, setChatID] = useState(userProfile?.chatID)
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 defaultValue='telegram' sx={{ maxWidth: '200px' }} disabled>
<Option value='telegram'>Telegram</Option>
<Option value='discord'>Discord</Option>
<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-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>
<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={() => {
UpdateUserDetails({
chatID: Number(chatID),
}).then(resp => {
resp.json().then(data => {
setUserProfile(data)
})
})
}}
onClick={handleSave}
>
Save
</Button>