feat: added caching using browsers built in index db #96
@ -1,5 +1,6 @@
|
|||||||
import AccountCircleIcon from '@mui/icons-material/AccountCircle'
|
import AccountCircleIcon from '@mui/icons-material/AccountCircle'
|
||||||
import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos'
|
import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos'
|
||||||
|
import CachedIcon from '@mui/icons-material/Cached'
|
||||||
import RouterIcon from '@mui/icons-material/Router'
|
import RouterIcon from '@mui/icons-material/Router'
|
||||||
import { useTheme } from '@mui/material'
|
import { useTheme } from '@mui/material'
|
||||||
import List from '@mui/material/List'
|
import List from '@mui/material/List'
|
||||||
@ -80,6 +81,16 @@ export const SettingsPage = () => {
|
|||||||
</ListItemIcon>
|
</ListItemIcon>
|
||||||
{listItem('Relays')}
|
{listItem('Relays')}
|
||||||
</ListItemButton>
|
</ListItemButton>
|
||||||
|
<ListItemButton
|
||||||
|
onClick={() => {
|
||||||
|
navigate(appPrivateRoutes.cacheSettings)
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<ListItemIcon>
|
||||||
|
<CachedIcon />
|
||||||
|
</ListItemIcon>
|
||||||
|
{listItem('Local Cache')}
|
||||||
|
</ListItemButton>
|
||||||
</List>
|
</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 { Login } from '../pages/login'
|
||||||
import { ProfilePage } from '../pages/profile'
|
import { ProfilePage } from '../pages/profile'
|
||||||
import { SettingsPage } from '../pages/settings/Settings'
|
import { SettingsPage } from '../pages/settings/Settings'
|
||||||
|
import { CacheSettingsPage } from '../pages/settings/cache'
|
||||||
import { ProfileSettingsPage } from '../pages/settings/profile'
|
import { ProfileSettingsPage } from '../pages/settings/profile'
|
||||||
import { RelaysPage } from '../pages/settings/relays'
|
import { RelaysPage } from '../pages/settings/relays'
|
||||||
import { SignPage } from '../pages/sign'
|
import { SignPage } from '../pages/sign'
|
||||||
@ -17,6 +18,7 @@ export const appPrivateRoutes = {
|
|||||||
verify: '/verify',
|
verify: '/verify',
|
||||||
settings: '/settings',
|
settings: '/settings',
|
||||||
profileSettings: '/settings/profile/:npub',
|
profileSettings: '/settings/profile/:npub',
|
||||||
|
cacheSettings: '/settings/cache',
|
||||||
relays: '/settings/relays'
|
relays: '/settings/relays'
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -75,6 +77,10 @@ export const privateRoutes = [
|
|||||||
path: appPrivateRoutes.profileSettings,
|
path: appPrivateRoutes.profileSettings,
|
||||||
element: <ProfileSettingsPage />
|
element: <ProfileSettingsPage />
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: appPrivateRoutes.cacheSettings,
|
||||||
|
element: <CacheSettingsPage />
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: appPrivateRoutes.relays,
|
path: appPrivateRoutes.relays,
|
||||||
element: <RelaysPage />
|
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) {
|
public async deleteUserMetadata(key: string) {
|
||||||
await this.db.delete('userMetadata', key)
|
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
|
// Export the single instance of LocalCache
|
||||||
|
Loading…
Reference in New Issue
Block a user