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

30
src/utils/TokenManager.jsx
View file

@ -1,6 +1,6 @@
import Cookies from 'js-cookie'
import { API_URL } from '../Config'
import { login, RefreshToken } from './Fetcher'
import { RefreshToken } from './Fetcher'
import { Preferences } from '@capacitor/preferences'
@ -13,12 +13,12 @@ class ApiManager {
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() {
return this.customServerURL
@ -28,28 +28,25 @@ class ApiManager {
}
}
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)

224
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,50 +40,53 @@ const NotificationSetting = () => {
}
}, [])
const getNotificationPreferences = async () => {
const ret = await Preferences.get({ key: 'notificationPreferences' });
return JSON.parse(ret.value);
};
const setNotificationPreferences = async (value) => {
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 }) });
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 setPushNotificationPreferences = async value => {
await Preferences.set({
key: 'pushNotificationPreferences',
value: JSON.stringify(value),
})
}
const [deviceNotification, setDeviceNotification] = useState(
false
)
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(
@ -126,37 +146,37 @@ const NotificationSetting = () => {
<Typography level='body-md'>Manage your Device Notificaiton</Typography>
<FormControl
orientation="horizontal"
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>
<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) =>{
onClick={event => {
event.preventDefault()
if (deviceNotification === false) {
LocalNotifications.requestPermissions().then((resp) => {
LocalNotifications.requestPermissions().then(resp => {
if (resp.display === 'granted') {
setDeviceNotification(true)
setNotificationPreferences({ granted: true })
}
else if (resp.display === 'denied') {
} else if (resp.display === 'denied') {
setIsSnackbarOpen(true)
setDeviceNotification(false)
setNotificationPreferences({ granted: false })
}
})
}
else{
} else {
setDeviceNotification(false)
}
}
}
}}
color={deviceNotification ? 'success' : 'neutral'}
variant={deviceNotification ? 'solid' : 'outlined'}
endDecorator={deviceNotification ? 'On' : 'Off'}
@ -173,33 +193,33 @@ const NotificationSetting = () => {
<Card>
{[
{
'title': 'Due Date Notification',
'checked': dueNotification,
'set': setDueNotification,
'label': 'Notification when the task is due',
'property': 'dueNotification',
'disabled': false
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: '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 => (
title: 'Overdue Notification',
checked: naggingNotification,
set: setNaggingNotification,
label: 'Notification when the task is overdue',
property: 'naggingNotification',
disabled: true,
},
].map(item => (
<FormControl
orientation="horizontal"
key={item.property}
orientation='horizontal'
sx={{ width: 385, justifyContent: 'space-between' }}
>
<div>
@ -207,14 +227,18 @@ const NotificationSetting = () => {
<FormHelperText sx={{ mt: 0 }}>{item.label} </FormHelperText>
</div>
<Switch checked={item.checked}
<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 } } }} />
variant='solid'
endDecorator={item.checked ? 'On' : 'Off'}
slotProps={{ endDecorator: { sx: { minWidth: 24 } } }}
/>
</FormControl>
))}
</Card>
@ -274,7 +298,6 @@ const NotificationSetting = () => {
width: '210px',
mb: 1,
}}
onClick={() => {
// schedule a local notification in 5 seconds
LocalNotifications.schedule({
@ -290,30 +313,34 @@ const NotificationSetting = () => {
extra: null,
},
],
});
}
}>Test Notification </Button>
})
}}
>
Test Notification{' '}
</Button>
<Typography level='h3'>Custom Notification</Typography>
<Divider />
<Typography level='body-md'>Notificaiton through other platform like Telegram or Pushover</Typography>
<Typography level='body-md'>
Notificaiton through other platform like Telegram or Pushover
</Typography>
<FormControl
orientation="horizontal"
orientation='horizontal'
sx={{ width: 400, justifyContent: 'space-between' }}
>
<div>
<FormLabel>Custom Notification</FormLabel>
<FormHelperText sx={{ mt: 0 }}>Receive notification on other platform</FormHelperText>
<FormHelperText sx={{ mt: 0 }}>
Receive notification on other platform
</FormHelperText>
</div>
<Switch
checked={chatID !== 0}
onClick={(event) =>{
onClick={event => {
event.preventDefault()
if (chatID !== 0) {
setChatID(0)
}
else{
} else {
setChatID('')
UpdateUserDetails({
chatID: Number(0),
@ -325,10 +352,7 @@ const NotificationSetting = () => {
}
setNotificationTarget('0')
handleSave()
}
}
}}
color={chatID !== 0 ? 'success' : 'neutral'}
variant={chatID !== 0 ? 'solid' : 'outlined'}
endDecorator={chatID !== 0 ? 'On' : 'Off'}
@ -343,14 +367,12 @@ const NotificationSetting = () => {
</FormControl>
{chatID !== 0 && (
<Box
sx={{
display: 'flex',
flexDirection: 'column',
gap: 2,
}}
>
<Select
value={notificationTarget}
sx={{ maxWidth: '200px' }}
@ -363,8 +385,8 @@ const NotificationSetting = () => {
{notificationTarget === '1' && (
<>
<Typography level='body-xs'>
You need to initiate a message to the bot in order for the Telegram
notification to work{' '}
You need to initiate a message to the bot in order for the
Telegram notification to work{' '}
<a
style={{
textDecoration: 'underline',
@ -388,8 +410,8 @@ const NotificationSetting = () => {
}}
/>
<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.{' '}
If you don't know your Chat ID, start chat with userinfobot and
it will send you your Chat ID.{' '}
<a
style={{
textDecoration: 'underline',
@ -433,11 +455,27 @@ const NotificationSetting = () => {
</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' }}>
<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
You have denied the permission to receive notification on this
device. Please enable it in your device settings
</Typography>
</div>
</Snackbar>

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
},
}),
],