Change bookmarks and migration (#675)

* changed bookmark structure to list of dids

* fixed add, remove bookmark

* wip

* fixed type error and migration

* remove logs

* fix lint error

Co-authored-by: Norbi <katunanorbert@gmai.com>

src/components/molecules/Bookmarks.tsx

@@ -85,15 +85,13 @@ export default function Bookmarks(): ReactElement {
   const [pinned, setPinned] = useState<DDO[]>()
   const [isLoading, setIsLoading] = useState<boolean>()
 
-  const networkName = (config as ConfigHelperConfig)?.network
-
   useEffect(() => {
-    if (!appConfig.metadataCacheUri || !networkName || bookmarks === {}) return
+    if (!appConfig.metadataCacheUri || bookmarks === []) return
 
     const source = axios.CancelToken.source()
 
     async function init() {
-      if (!bookmarks[networkName]?.length) {
+      if (!bookmarks?.length) {
         setPinned([])
         return
       }
@@ -102,7 +100,7 @@ export default function Bookmarks(): ReactElement {
 
       try {
         const resultPinned = await getAssetsBookmarked(
-          bookmarks[networkName],
+          bookmarks,
           appConfig.metadataCacheUri,
           source.token
         )
@@ -118,7 +116,7 @@ export default function Bookmarks(): ReactElement {
     return () => {
       source.cancel()
     }
-  }, [bookmarks, appConfig.metadataCacheUri, networkName])
+  }, [bookmarks, appConfig.metadataCacheUri])
 
   return (
     <Table

src/components/organisms/AssetContent/Bookmark.tsx

@@ -2,15 +2,12 @@ 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 { ConfigHelperConfig } from '@oceanprotocol/lib'
 import { useOcean } from '../../../providers/Ocean'
 
 export default function Bookmark({ did }: { did: string }): ReactElement {
   const { config } = useOcean()
   const { bookmarks, addBookmark, removeBookmark } = useUserPreferences()
-  const isBookmarked =
-    bookmarks &&
-    bookmarks[(config as ConfigHelperConfig).network]?.includes(did)
+  const isBookmarked = bookmarks && bookmarks?.includes(did)
 
   function handleBookmark() {
     isBookmarked ? removeBookmark(did) : addBookmark(did)

src/components/organisms/AssetContent/index.tsx

@@ -80,7 +80,7 @@ export default function AssetContent(props: AssetContentProps): ReactElement {
         {showPricing && <Pricing ddo={ddo} />}
         <div className={styles.content}>
           <MetaMain />
-          {/* <Bookmark did={ddo.id} /> */}
+          <Bookmark did={ddo.id} />
 
           {isInPurgatory ? (
             <Alert

src/components/pages/Home.tsx

@@ -141,7 +141,7 @@ export default function HomePage(): ReactElement {
 
         <section className={styles.section}>
           <h3>Bookmarks</h3>
-          {/* <Bookmarks /> */}
+          <Bookmarks />
         </section>
 
         {queryAndDids && (

src/providers/UserPreferences.tsx

@@ -15,9 +15,7 @@ interface UserPreferencesValue {
   currency: string
   locale: string
   chainIds: number[]
-  bookmarks: {
-    [network: string]: string[]
-  }
+  bookmarks: string[]
   setChainIds: (chainIds: number[]) => void
   setDebug: (value: boolean) => void
   setCurrency: (value: string) => void
@@ -56,7 +54,7 @@ function UserPreferencesProvider({
     localStorage?.currency || 'EUR'
   )
   const [locale, setLocale] = useState<string>()
-  const [bookmarks, setBookmarks] = useState(localStorage?.bookmarks || {})
+  const [bookmarks, setBookmarks] = useState(localStorage?.bookmarks || [])
   const [chainIds, setChainIds] = useState(
     localStorage?.chainIds || appConfig.chainIds
   )
@@ -79,28 +77,25 @@ function UserPreferencesProvider({
     setLocale(window.navigator.language)
   }, [])
 
-  // function addBookmark(didToAdd: string): void {
-  //   const newPinned = {
-  //     ...bookmarks,
-  //     [networkName]: [didToAdd].concat(bookmarks[networkName])
-  //   }
-  //   setBookmarks(newPinned)
-  // }
+  function addBookmark(didToAdd: string): void {
+    const newPinned = [...bookmarks, didToAdd]
+    setBookmarks(newPinned)
+  }
 
-  // function removeBookmark(didToAdd: string): void {
-  //   const newPinned = {
-  //     ...bookmarks,
-  //     [networkName]: bookmarks[networkName].filter(
-  //       (did: string) => did !== didToAdd
-  //     )
-  //   }
-  //   setBookmarks(newPinned)
-  // }
+  function removeBookmark(didToAdd: string): void {
+    const newPinned = bookmarks.filter((did: string) => did !== didToAdd)
+    setBookmarks(newPinned)
+  }
 
   // Bookmarks old data structure migration
   useEffect(() => {
-    if (!bookmarks.length) return
-    const newPinned = { mainnet: bookmarks as any }
+    if (bookmarks.length !== undefined) return
+    const newPinned: string[] = []
+    for (const network in bookmarks) {
+      ;(bookmarks[network] as unknown as string[]).forEach((did: string) => {
+        did !== null && newPinned.push(did)
+      })
+    }
     setBookmarks(newPinned)
   }, [bookmarks])
 
@@ -115,9 +110,9 @@ function UserPreferencesProvider({
           bookmarks,
           setChainIds,
           setDebug,
-          setCurrency
-          // addBookmark,
-          // removeBookmark
+          setCurrency,
+          addBookmark,
+          removeBookmark
         } as UserPreferencesValue
       }
     >