feat: add cache setting page

This commit is contained in:
SwiftHawk 2024-05-31 14:26:59 +05:00
parent 501c07d87b
commit 278d9655f6
4 changed files with 122 additions and 0 deletions

View File

@ -1,5 +1,6 @@
import AccountCircleIcon from '@mui/icons-material/AccountCircle'
import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos'
import CachedIcon from '@mui/icons-material/Cached'
import RouterIcon from '@mui/icons-material/Router'
import { useTheme } from '@mui/material'
import List from '@mui/material/List'
@ -80,6 +81,16 @@ export const SettingsPage = () => {
</ListItemIcon>
{listItem('Relays')}
</ListItemButton>
<ListItemButton
onClick={() => {
navigate(appPrivateRoutes.cacheSettings)
}}
>
<ListItemIcon>
<CachedIcon />
</ListItemIcon>
{listItem('Local Cache')}
</ListItemButton>
</List>
)
}

96
src/pages/settings/cache/index.tsx vendored Normal file
View File

@ -0,0 +1,96 @@
import ClearIcon from '@mui/icons-material/Clear'
import InputIcon from '@mui/icons-material/Input'
import IosShareIcon from '@mui/icons-material/IosShare'
import {
List,
ListItemButton,
ListItemIcon,
ListItemText,
ListSubheader,
useTheme
} from '@mui/material'
import { useState } from 'react'
import { toast } from 'react-toastify'
import { localCache } from '../../../services'
import { LoadingSpinner } from '../../../components/LoadingSpinner'
export const CacheSettingsPage = () => {
const theme = useTheme()
const [isLoading, setIsLoading] = useState(false)
const [loadingSpinnerDesc, setLoadingSpinnerDesc] = useState('')
const handleClearData = async () => {
setIsLoading(true)
setLoadingSpinnerDesc('Clearing cache data')
localCache
.clearCacheData()
.then(() => {
toast.success('cleared cached data')
})
.catch((err) => {
console.log('An error occurred in clearing cache data', err)
toast.error(err.message || 'An error occurred in clearing cache data')
})
.finally(() => {
setIsLoading(false)
})
}
const listItem = (label: string) => {
return (
<ListItemText
primary={label}
sx={{
color: theme.palette.text.primary
}}
/>
)
}
return (
<>
{isLoading && <LoadingSpinner desc={loadingSpinnerDesc} />}
<List
sx={{
width: '100%',
bgcolor: 'background.paper',
marginTop: 2
}}
subheader={
<ListSubheader
sx={{
fontSize: '1.5rem',
borderBottom: '0.5px solid',
paddingBottom: 2,
paddingTop: 2
}}
>
Cache Setting
</ListSubheader>
}
>
<ListItemButton disabled>
<ListItemIcon>
<IosShareIcon />
</ListItemIcon>
{listItem('Export (coming soon)')}
</ListItemButton>
<ListItemButton disabled>
<ListItemIcon>
<InputIcon />
</ListItemIcon>
{listItem('Import (coming soon)')}
</ListItemButton>
<ListItemButton onClick={handleClearData}>
<ListItemIcon>
<ClearIcon sx={{ color: theme.palette.error.main }} />
</ListItemIcon>
{listItem('Clear Cache')}
</ListItemButton>
</List>
</>
)
}

View File

@ -4,6 +4,7 @@ import { LandingPage } from '../pages/landing/LandingPage'
import { Login } from '../pages/login'
import { ProfilePage } from '../pages/profile'
import { SettingsPage } from '../pages/settings/Settings'
import { CacheSettingsPage } from '../pages/settings/cache'
import { ProfileSettingsPage } from '../pages/settings/profile'
import { RelaysPage } from '../pages/settings/relays'
import { SignPage } from '../pages/sign'
@ -17,6 +18,7 @@ export const appPrivateRoutes = {
verify: '/verify',
settings: '/settings',
profileSettings: '/settings/profile/:npub',
cacheSettings: '/settings/cache',
relays: '/settings/relays'
}
@ -75,6 +77,10 @@ export const privateRoutes = [
path: appPrivateRoutes.profileSettings,
element: <ProfileSettingsPage />
},
{
path: appPrivateRoutes.cacheSettings,
element: <CacheSettingsPage />
},
{
path: appPrivateRoutes.relays,
element: <RelaysPage />

View File

@ -48,6 +48,15 @@ class LocalCache {
public async deleteUserMetadata(key: string) {
await this.db.delete('userMetadata', key)
}
// Method to clear cache data
public async clearCacheData() {
// Clear the 'userMetadata' store in the IndexedDB database
await this.db.clear('userMetadata')
// Reload the current page to ensure any cached data is reset
window.location.reload()
}
}
// Export the single instance of LocalCache