feat: added caching using browsers built in index db #96
@ -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
96
src/pages/settings/cache/index.tsx
vendored
Normal 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>
|
||||
</>
|
||||
)
|
||||
}
|
@ -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 />
|
||||
|
9
src/services/cache/index.ts
vendored
9
src/services/cache/index.ts
vendored
@ -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
|
||||
|
Loading…
Reference in New Issue
Block a user