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

Update maximum file size for caching in service worker to 6MB

Browse source
This commit is contained in:
Mo Tarbin 2024-12-26 18:54:23 -05:00
parent bcd32a8616
commit 8f93cc5e62
3 changed files with 353 additions and 318 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
src/utils/TokenManager.jsx
View file

@ -1,55 +1,52 @@
import Cookies from 'js-cookie'
import { API_URL } from '../Config'
import { login, RefreshToken } from './Fetcher'
import { RefreshToken } from './Fetcher'
import { Preferences } from '@capacitor/preferences'
class ApiManager {
constructor(){
constructor() {
this.customServerURL = API_URL
this.initialized = false
}
async init(){
if(this.initialized){
async init() {
if (this.initialized) {
return
}
const { value: serverURL } = await Preferences.get({ key: 'customServerUrl' });
const { value: serverURL } = await Preferences.get({
key: 'customServerUrl',
})
this.customServerURL = serverURL || this.apiURL
this.initialized = true
}
getApiURL(){
getApiURL() {
return this.customServerURL
}
updateApiURL(url){
updateApiURL(url) {
this.customServerURL = url
}
}
export const apiManager = new ApiManager();
export const apiManager = new ApiManager()
export function Fetch(url, options) {
if (!isTokenValid()) {
// store current location in cookie
Cookies.set('ca_redirect', window.location.pathname);
Cookies.set('ca_redirect', window.location.pathname)
// Assuming you have a function isTokenValid() that checks token validity
window.location.href = '/login'; // Redirect to login page
window.location.href = '/login' // Redirect to login page
// return Promise.reject("Token is not valid");
}
if (!options) {
options = {};
options = {}
}
options.headers = { ...options.headers, ...HEADERS() };
options.headers = { ...options.headers, ...HEADERS() }
const baseURL = apiManager.getApiURL();
const baseURL = apiManager.getApiURL()
const fullURL = `${baseURL}${url}`;
return fetch(fullURL, options);
const fullURL = `${baseURL}${url}`
return fetch(fullURL, options)
}
export const HEADERS = () => {
@ -81,8 +78,7 @@ export const isTokenValid = () => {
}
export const refreshAccessToken = () => {
RefreshToken()
.then(res => {
RefreshToken().then(res => {
if (res.status === 200) {
res.json().then(data => {
localStorage.setItem('ca_token', data.token)

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

@ -1,13 +1,30 @@
import { Box, Button, Card, Checkbox, Divider, FormControl, FormHelperText, FormLabel, IconButton, Input, List, ListItem, Option, Select, Snackbar, Switch, Typography } from '@mui/joy'
import { Capacitor } from '@capacitor/core'
import { LocalNotifications } from '@capacitor/local-notifications'
import { Preferences } from '@capacitor/preferences'
import { Close } from '@mui/icons-material'
import {
Box,
Button,
Card,
Divider,
FormControl,
FormHelperText,
FormLabel,
IconButton,
Input,
Option,
Select,
Snackbar,
Switch,
Typography,
} from '@mui/joy'
import React, { useContext, useEffect, useState } from 'react'
import { UserContext } from '../../contexts/UserContext'
import { GetUserProfile, UpdateUserDetails } from '../../utils/Fetcher'
import { Capacitor } from '@capacitor/core'
import { Preferences } from '@capacitor/preferences'
import { LocalNotifications } from '@capacitor/local-notifications'
import { Close } from '@mui/icons-material'
import { PushNotifications } from '@capacitor/push-notifications'
import { UpdateNotificationTarget } from '../../utils/Fetcher'
import {
GetUserProfile,
UpdateNotificationTarget,
UpdateUserDetails,
} from '../../utils/Fetcher'
const NotificationSetting = () => {
const [isSnackbarOpen, setIsSnackbarOpen] = useState(false)
@ -23,52 +40,55 @@ const NotificationSetting = () => {
}
}, [])
const getNotificationPreferences = async () => {
const ret = await Preferences.get({ key: 'notificationPreferences' });
return JSON.parse(ret.value);
};
const setNotificationPreferences = async (value) => {
if (value.granted === false){
await Preferences.set({ key: 'notificationPreferences', value: JSON.stringify({ granted: false }) });
const ret = await Preferences.get({ key: 'notificationPreferences' })
return JSON.parse(ret.value)
}
const setNotificationPreferences = async value => {
if (value.granted === false) {
await Preferences.set({
key: 'notificationPreferences',
value: JSON.stringify({ granted: false }),
})
return
}
const currentSettings = await getNotificationPreferences();
await Preferences.set({ key: 'notificationPreferences', value: JSON.stringify({ ...currentSettings, ...value }) });
};
const currentSettings = await getNotificationPreferences()
await Preferences.set({
key: 'notificationPreferences',
value: JSON.stringify({ ...currentSettings, ...value }),
})
}
const getPushNotificationPreferences = async () => {
const ret = await Preferences.get({ key: 'pushNotificationPreferences' });
return JSON.parse(ret.value);
};
const ret = await Preferences.get({ key: 'pushNotificationPreferences' })
return JSON.parse(ret.value)
}
const setPushNotificationPreferences = async value => {
await Preferences.set({
key: 'pushNotificationPreferences',
value: JSON.stringify(value),
})
}
const [deviceNotification, setDeviceNotification] = useState(false)
const setPushNotificationPreferences = async (value) => {
await Preferences.set({ key: 'pushNotificationPreferences', value: JSON.stringify(value) });
};
const [deviceNotification, setDeviceNotification] = useState(
false
)
const [dueNotification, setDueNotification] = useState(true)
const [preDueNotification, setPreDueNotification] = useState(false)
const [naggingNotification, setNaggingNotification] = useState(false)
const [pushNotification, setPushNotification] = useState(
false
)
const [pushNotification, setPushNotification] = useState(false)
useEffect(() => {
getNotificationPreferences().then((resp) => {
getNotificationPreferences().then(resp => {
setDeviceNotification(resp.granted)
setDueNotification(resp.dueNotification)
setPreDueNotification(resp.preDueNotification)
setNaggingNotification(resp.naggingNotification)
}
)
getPushNotificationPreferences().then((resp) => {
})
getPushNotificationPreferences().then(resp => {
setPushNotification(resp.granted)
}
)
})
}, [])
const [notificationTarget, setNotificationTarget] = useState(
userProfile?.notification_target
? String(userProfile.notification_target.type)
@ -126,100 +146,104 @@ const NotificationSetting = () => {
<Typography level='body-md'>Manage your Device Notificaiton</Typography>
<FormControl
orientation="horizontal"
sx={{ width: 400, justifyContent: 'space-between' }}
>
<div>
<FormLabel>Device Notification</FormLabel>
<FormHelperText sx={{ mt: 0 }}>{Capacitor.isNativePlatform()? 'Receive notification on your device when a task is due' : 'This feature is only available on mobile devices'} </FormHelperText>
</div>
<Switch
disabled={!Capacitor.isNativePlatform()}
checked={deviceNotification}
onClick={(event) =>{
event.preventDefault()
if (deviceNotification === false){
LocalNotifications.requestPermissions().then((resp) => {
if (resp.display === 'granted') {
setDeviceNotification(true)
setNotificationPreferences({granted: true})
}
else if (resp.display === 'denied') {
setIsSnackbarOpen(true)
setDeviceNotification(false)
setNotificationPreferences({granted: false})
}
})
}
else{
setDeviceNotification(false)
}
}
}
color={deviceNotification ? 'success' : 'neutral'}
variant={deviceNotification ? 'solid' : 'outlined'}
endDecorator={deviceNotification ? 'On' : 'Off'}
slotProps={{
endDecorator: {
sx: {
minWidth: 24,
orientation='horizontal'
sx={{ width: 400, justifyContent: 'space-between' }}
>
<div>
<FormLabel>Device Notification</FormLabel>
<FormHelperText sx={{ mt: 0 }}>
{Capacitor.isNativePlatform()
? 'Receive notification on your device when a task is due'
: 'This feature is only available on mobile devices'}{' '}
</FormHelperText>
</div>
<Switch
disabled={!Capacitor.isNativePlatform()}
checked={deviceNotification}
onClick={event => {
event.preventDefault()
if (deviceNotification === false) {
LocalNotifications.requestPermissions().then(resp => {
if (resp.display === 'granted') {
setDeviceNotification(true)
setNotificationPreferences({ granted: true })
} else if (resp.display === 'denied') {
setIsSnackbarOpen(true)
setDeviceNotification(false)
setNotificationPreferences({ granted: false })
}
})
} else {
setDeviceNotification(false)
}
}}
color={deviceNotification ? 'success' : 'neutral'}
variant={deviceNotification ? 'solid' : 'outlined'}
endDecorator={deviceNotification ? 'On' : 'Off'}
slotProps={{
endDecorator: {
sx: {
minWidth: 24,
},
},
},
}}
/>
</FormControl>
{deviceNotification && (
<Card>
{[
{
'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': true
},
{
'title': 'Overdue Notification',
'checked': naggingNotification,
'set': setNaggingNotification,
'label': 'Notification when the task is overdue',
'property': 'naggingNotification',
'disabled': true
}
]
.map(item => (
<FormControl
orientation="horizontal"
sx={{ width: 385, justifyContent: 'space-between' }}
>
<div>
<FormLabel>{item.title}</FormLabel>
<FormHelperText sx={{ mt: 0 }}>{item.label} </FormHelperText>
</div>
}}
/>
</FormControl>
{deviceNotification && (
<Card>
{[
{
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: true,
},
{
title: 'Overdue Notification',
checked: naggingNotification,
set: setNaggingNotification,
label: 'Notification when the task is overdue',
property: 'naggingNotification',
disabled: true,
},
].map(item => (
<FormControl
key={item.property}
orientation='horizontal'
sx={{ width: 385, justifyContent: 'space-between' }}
>
<div>
<FormLabel>{item.title}</FormLabel>
<FormHelperText sx={{ mt: 0 }}>{item.label} </FormHelperText>
</div>
<Switch checked={item.checked}
disabled={item.disabled}
onClick={() =>{
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 } } }} />
</FormControl>
))}
</Card>
)}
{/* <FormControl
<Switch
checked={item.checked}
disabled={item.disabled}
onClick={() => {
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 } } }}
/>
</FormControl>
))}
</Card>
)}
{/* <FormControl
orientation="horizontal"
sx={{ width: 400, justifyContent: 'space-between' }}
>
@ -267,180 +291,194 @@ const NotificationSetting = () => {
/>
</FormControl> */}
<Button
<Button
variant='soft'
color='primary'
sx={{
width: '210px',
mb: 1,
}}
onClick={() => {
// schedule a local notification in 5 seconds
LocalNotifications.schedule({
notifications: [
{
title: 'Task Reminder',
body: 'You have a task due soon',
id: 1,
schedule: { at: new Date(Date.now() + 3000) },
sound: null,
attachments: null,
actionTypeId: '',
extra: null,
},
],
});
}
}>Test Notification </Button>
onClick={() => {
// schedule a local notification in 5 seconds
LocalNotifications.schedule({
notifications: [
{
title: 'Task Reminder',
body: 'You have a task due soon',
id: 1,
schedule: { at: new Date(Date.now() + 3000) },
sound: null,
attachments: null,
actionTypeId: '',
extra: null,
},
],
})
}}
>
Test Notification{' '}
</Button>
<Typography level='h3'>Custom Notification</Typography>
<Divider />
<Typography level='body-md'>Notificaiton through other platform like Telegram or Pushover</Typography>
<FormControl
orientation="horizontal"
sx={{ width: 400, justifyContent: 'space-between' }}
>
<div>
<FormLabel>Custom Notification</FormLabel>
<FormHelperText sx={{ mt: 0 }}>Receive notification on other platform</FormHelperText>
</div>
<Switch
checked={chatID !== 0}
onClick={(event) =>{
event.preventDefault()
if (chatID !== 0){
setChatID(0)
}
else{
setChatID('')
UpdateUserDetails({
chatID: Number(0),
}).then(resp => {
resp.json().then(data => {
setUserProfile(data)
})
})
}
setNotificationTarget('0')
handleSave()
}
}
color={chatID!==0 ? 'success' : 'neutral'}
variant={chatID!==0 ? 'solid' : 'outlined'}
endDecorator={chatID!==0 ? 'On' : 'Off'}
slotProps={{
endDecorator: {
sx: {
minWidth: 24,
},
},
}}
/>
</FormControl>
{chatID !== 0&& (
<Box
sx={{
display: 'flex',
flexDirection: 'column',
gap: 2,
}}
>
<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>
</Box>
)}
<Snackbar open={isSnackbarOpen} autoHideDuration={8000} onClose={() => setIsSnackbarOpen(false)} endDecorator={<IconButton size='md' onClick={() => setIsSnackbarOpen(false)}><Close/></IconButton>}>
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
<Typography level='title-md'>Permission Denied</Typography>
<Typography level='body-md'>
You have denied the permission to receive notification on this device. Please enable it in your device settings
Notificaiton through other platform like Telegram or Pushover
</Typography>
</div>
</Snackbar>
<FormControl
orientation='horizontal'
sx={{ width: 400, justifyContent: 'space-between' }}
>
<div>
<FormLabel>Custom Notification</FormLabel>
<FormHelperText sx={{ mt: 0 }}>
Receive notification on other platform
</FormHelperText>
</div>
<Switch
checked={chatID !== 0}
onClick={event => {
event.preventDefault()
if (chatID !== 0) {
setChatID(0)
} else {
setChatID('')
UpdateUserDetails({
chatID: Number(0),
}).then(resp => {
resp.json().then(data => {
setUserProfile(data)
})
})
}
setNotificationTarget('0')
handleSave()
}}
color={chatID !== 0 ? 'success' : 'neutral'}
variant={chatID !== 0 ? 'solid' : 'outlined'}
endDecorator={chatID !== 0 ? 'On' : 'Off'}
slotProps={{
endDecorator: {
sx: {
minWidth: 24,
},
},
}}
/>
</FormControl>
{chatID !== 0 && (
<Box
sx={{
display: 'flex',
flexDirection: 'column',
gap: 2,
}}
>
<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>
</Box>
)}
<Snackbar
open={isSnackbarOpen}
autoHideDuration={8000}
onClose={() => setIsSnackbarOpen(false)}
endDecorator={
<IconButton size='md' onClick={() => setIsSnackbarOpen(false)}>
<Close />
</IconButton>
}
>
<div
style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
}}
>
<Typography level='title-md'>Permission Denied</Typography>
<Typography level='body-md'>
You have denied the permission to receive notification on this
device. Please enable it in your device settings
</Typography>
</div>
</Snackbar>
</div>
)
}

1
vite.config.js
View file

@ -61,6 +61,7 @@ export default defineConfig({
workbox: {
skipWaiting: true, // Force the waiting service worker to become the active service worker
clientsClaim: true, // Take control of uncontrolled clients as soon as the service worker becomes active
maximumFileSizeToCacheInBytes: 6000000, // 6MB
},
}),
],