feat: added caching using browsers built in index db #96

Merged
b merged 9 commits from issue-69 into staging 2024-05-31 11:38:20 +00:00
4 changed files with 122 additions and 0 deletions
Showing only changes of commit 278d9655f6 - Show all commits

View File

@ -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
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 { 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 />

View File

@ -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