mirror of
https://github.com/oceanprotocol/market.git
synced 2024-06-28 00:27:49 +02:00
network agnostic bookmarks (#162)
* network agnostic bookmarks * bookmark data structure migration
This commit is contained in:
parent
86ca66d2cb
commit
c849fd0396
|
@ -7,20 +7,21 @@ import { Link } from 'gatsby'
|
|||
import styles from './Bookmarks.module.css'
|
||||
import Price from '../atoms/Price'
|
||||
import Tooltip from '../atoms/Tooltip'
|
||||
import { ConfigHelperConfig } from '@oceanprotocol/lib/dist/node/utils/ConfigHelper'
|
||||
|
||||
async function getAssetsBookmarked(pins: string[], metadataCacheUri: string) {
|
||||
try {
|
||||
const metadataCache = new MetadataCache(metadataCacheUri, Logger)
|
||||
const result: DDO[] = []
|
||||
async function getAssetsBookmarked(
|
||||
bookmarks: string[],
|
||||
metadataCacheUri: string
|
||||
) {
|
||||
const metadataCache = new MetadataCache(metadataCacheUri, Logger)
|
||||
const result: DDO[] = []
|
||||
|
||||
for (const pin of pins) {
|
||||
result.push(await metadataCache.retrieveDDO(pin))
|
||||
}
|
||||
|
||||
return result
|
||||
} catch (error) {
|
||||
Logger.error(error.message)
|
||||
for (const bookmark of bookmarks) {
|
||||
const ddo = bookmark && (await metadataCache.retrieveDDO(bookmark))
|
||||
ddo && result.push(ddo)
|
||||
}
|
||||
|
||||
return result
|
||||
}
|
||||
|
||||
const columns = [
|
||||
|
@ -63,19 +64,32 @@ export default function Bookmarks(): ReactElement {
|
|||
const [isLoading, setIsLoading] = useState<boolean>()
|
||||
|
||||
useEffect(() => {
|
||||
if (!bookmarks || !bookmarks.length) return
|
||||
if (!config || bookmarks === {}) return
|
||||
|
||||
const networkName = (config as ConfigHelperConfig).network
|
||||
|
||||
async function init() {
|
||||
if (!bookmarks[networkName]?.length) {
|
||||
setPinned([])
|
||||
return
|
||||
}
|
||||
|
||||
setIsLoading(true)
|
||||
const resultPinned = await getAssetsBookmarked(
|
||||
bookmarks,
|
||||
config.metadataCacheUri
|
||||
)
|
||||
setPinned(resultPinned)
|
||||
|
||||
try {
|
||||
const resultPinned = await getAssetsBookmarked(
|
||||
bookmarks[networkName],
|
||||
config.metadataCacheUri
|
||||
)
|
||||
setPinned(resultPinned)
|
||||
} catch (error) {
|
||||
Logger.error(error.message)
|
||||
}
|
||||
|
||||
setIsLoading(false)
|
||||
}
|
||||
init()
|
||||
}, [bookmarks, config.metadataCacheUri])
|
||||
}, [bookmarks, config.metadataCacheUri, config])
|
||||
|
||||
return (
|
||||
<Table
|
||||
|
|
|
@ -2,10 +2,15 @@ import { useUserPreferences } from '../../../providers/UserPreferences'
|
|||
import React, { ReactElement } from 'react'
|
||||
import styles from './Bookmark.module.css'
|
||||
import { ReactComponent as BookmarkIcon } from '../../../images/bookmark.svg'
|
||||
import { useOcean } from '@oceanprotocol/react'
|
||||
import { ConfigHelperConfig } from '@oceanprotocol/lib/dist/node/utils/ConfigHelper'
|
||||
|
||||
export default function Bookmark({ did }: { did: string }): ReactElement {
|
||||
const { config } = useOcean()
|
||||
const { bookmarks, addBookmark, removeBookmark } = useUserPreferences()
|
||||
const isBookmarked = bookmarks?.includes(did)
|
||||
const isBookmarked =
|
||||
bookmarks &&
|
||||
bookmarks[(config as ConfigHelperConfig).network]?.includes(did)
|
||||
|
||||
function handleBookmark() {
|
||||
isBookmarked ? removeBookmark(did) : addBookmark(did)
|
||||
|
|
|
@ -8,12 +8,17 @@ import React, {
|
|||
} from 'react'
|
||||
import { Logger } from '@oceanprotocol/lib'
|
||||
import { LogLevel } from '@oceanprotocol/lib/dist/node/utils/Logger'
|
||||
import { useOcean } from '@oceanprotocol/react'
|
||||
import { getNetworkName } from '../utils/wallet'
|
||||
import { ConfigHelperConfig } from '@oceanprotocol/lib/dist/node/utils/ConfigHelper'
|
||||
|
||||
interface UserPreferencesValue {
|
||||
debug: boolean
|
||||
currency: string
|
||||
locale: string
|
||||
bookmarks: string[]
|
||||
bookmarks: {
|
||||
[network: string]: string[]
|
||||
}
|
||||
setDebug: (value: boolean) => void
|
||||
setCurrency: (value: string) => void
|
||||
addBookmark: (did: string) => void
|
||||
|
@ -43,6 +48,8 @@ function UserPreferencesProvider({
|
|||
}: {
|
||||
children: ReactNode
|
||||
}): ReactElement {
|
||||
const { config } = useOcean()
|
||||
const networkName = (config as ConfigHelperConfig).network
|
||||
const localStorage = getLocalStorage()
|
||||
|
||||
// Set default values from localStorage
|
||||
|
@ -51,7 +58,7 @@ function UserPreferencesProvider({
|
|||
localStorage?.currency || 'EUR'
|
||||
)
|
||||
const [locale, setLocale] = useState<string>()
|
||||
const [bookmarks, setBookmarks] = useState(localStorage?.bookmarks || [])
|
||||
const [bookmarks, setBookmarks] = useState(localStorage?.bookmarks || {})
|
||||
|
||||
// Write values to localStorage on change
|
||||
useEffect(() => {
|
||||
|
@ -72,15 +79,30 @@ function UserPreferencesProvider({
|
|||
}, [])
|
||||
|
||||
function addBookmark(didToAdd: string): void {
|
||||
const newPinned = [didToAdd].concat(bookmarks)
|
||||
const newPinned = {
|
||||
...bookmarks,
|
||||
[networkName]: [didToAdd].concat(bookmarks[networkName])
|
||||
}
|
||||
setBookmarks(newPinned)
|
||||
}
|
||||
|
||||
function removeBookmark(didToAdd: string): void {
|
||||
const newPinned = bookmarks.filter((did: string) => did !== didToAdd)
|
||||
const newPinned = {
|
||||
...bookmarks,
|
||||
[networkName]: bookmarks[networkName].filter(
|
||||
(did: string) => did !== didToAdd
|
||||
)
|
||||
}
|
||||
setBookmarks(newPinned)
|
||||
}
|
||||
|
||||
// Bookmarks old data structure migration
|
||||
useEffect(() => {
|
||||
if (!bookmarks.length) return
|
||||
const newPinned = { mainnet: bookmarks as any }
|
||||
setBookmarks(newPinned)
|
||||
}, [bookmarks])
|
||||
|
||||
return (
|
||||
<UserPreferencesContext.Provider
|
||||
value={
|
||||
|
|
Loading…
Reference in New Issue
Block a user