fix all the things by removing Rating altogether

package-lock.json

@@ -28718,15 +28718,6 @@
         "react-popper": "^1.3.7"
       }
     },
-    "react-rating": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/react-rating/-/react-rating-2.0.5.tgz",
-      "integrity": "sha512-uldxgLCe5bzqGX7V+7/bPgQQj2Kok6eiMgTMxjKOhfhnQkFLDlc4TjMlp7gaJFAHWdbiOnqpiShI7z8as6oWtg==",
-      "requires": {
-        "@types/lodash": "^4.14.105",
-        "@types/react": "^16.0.40"
-      }
-    },
     "react-reconciler": {
       "version": "0.25.1",
       "resolved": "https://registry.npmjs.org/react-reconciler/-/react-reconciler-0.25.1.tgz",

package.json

@@ -63,7 +63,6 @@
     "react-helmet": "^6.1.0",
     "react-markdown": "^4.3.1",
     "react-paginate": "^6.3.2",
-    "react-rating": "^2.0.5",
     "react-responsive-modal": "^5.0.2",
     "react-spring": "^8.0.27",
     "react-tabs": "^3.1.1",

src/components/atoms/Rating.module.css

@@ -1,57 +0,0 @@
-.ratings {
-  display: flex;
-  margin-left: calc(var(--spacer) / -8);
-  font-weight: var(--font-weight-base);
-}
-
-/* Handle half stars our own way */
-.ratings [style*='width:'] {
-  width: 100% !important;
-  clip-path: polygon(0 0, 60% 0, 60% 100%, 0% 100%);
-}
-
-.ratings [style*='width:100%'],
-.ratings [style*='width: 100%'] {
-  width: 100% !important;
-  clip-path: none !important;
-}
-
-.ratings [style*='width:0%'],
-.ratings [style*='width: 0%'] {
-  width: 0 !important;
-  clip-path: none !important;
-}
-
-.star {
-  margin-left: calc(var(--spacer) / 8);
-}
-
-.star svg {
-  fill: none;
-  stroke: var(--brand-grey);
-}
-
-.full {
-  composes: star;
-}
-
-.full svg {
-  fill: var(--color-primary);
-  stroke: var(--color-primary);
-}
-
-.ratingVotes {
-  display: inline-block;
-  font-size: var(--font-size-small);
-  padding-left: 5px;
-  color: var(--brand-grey);
-}
-
-.readonly {
-  composes: ratings;
-}
-
-.readonly .full svg {
-  fill: var(--color-secondary);
-  stroke: var(--color-secondary);
-}

src/components/atoms/Rating.stories.tsx

@@ -1,36 +0,0 @@
-import React from 'react'
-import Rating from './Rating'
-
-export default {
-  title: 'Atoms/Rating'
-}
-
-export const Normal = () => (
-  <Rating
-    readonly
-    curation={{
-      rating: 3,
-      numVotes: 300
-    }}
-  />
-)
-
-export const WithFraction = () => (
-  <Rating
-    readonly
-    curation={{
-      rating: 3.3,
-      numVotes: 300
-    }}
-  />
-)
-
-export const Interactive = () => (
-  <Rating
-    onClick={(value: any) => null}
-    curation={{
-      rating: 3.3,
-      numVotes: 300
-    }}
-  />
-)

src/components/atoms/Rating.tsx

@@ -1,51 +0,0 @@
-import React from 'react'
-import ReactRating from 'react-rating'
-import Star from '../../images/star.svg'
-import { Curation } from '@oceanprotocol/lib'
-import styles from './Rating.module.css'
-
-export default function Rating({
-  curation,
-  readonly,
-  isLoading,
-  onClick
-}: {
-  curation: Curation | undefined
-  readonly?: boolean
-  isLoading?: boolean
-  onClick?: (value: any) => void
-}) {
-  let numVotes = 0
-  let rating = 0
-
-  if (!curation) return null
-  ;({ numVotes, rating } = curation)
-
-  // if it's readonly then the fraction is 10 to show the average rating proper. When you select the rating you select from 1 to 5
-  const fractions = readonly ? 2 : 1
-
-  return (
-    <div className={`${readonly ? styles.readonly : styles.ratings}`}>
-      <ReactRating
-        emptySymbol={
-          <div className={styles.star}>
-            <Star />
-          </div>
-        }
-        fullSymbol={
-          <div className={styles.full}>
-            <Star />
-          </div>
-        }
-        initialRating={rating}
-        readonly={readonly || isLoading || false}
-        onClick={onClick}
-        fractions={fractions}
-      />
-
-      <span className={styles.ratingVotes}>
-        {rating} {readonly ? `(${numVotes})` : ''}
-      </span>
-    </div>
-  )
-}

src/components/molecules/AssetTeaser.tsx

@@ -5,7 +5,6 @@ import { MetaDataMarket } from '../../@types/MetaData'
 import Tags from '../atoms/Tags'
 import Price from '../atoms/Price'
 import styles from './AssetTeaser.module.css'
-import Rating from '../atoms/Rating'
 
 declare type AssetTeaserProps = {
   did: string
@@ -26,8 +25,6 @@ const AssetTeaser: React.FC<AssetTeaserProps> = ({
     access
   } = metadata.additionalInformation
 
-  const { curation } = metadata
-
   return (
     <article className={styles.teaser}>
       <Link to={`/asset/${did}`} className={styles.link}>
@@ -35,7 +32,6 @@ const AssetTeaser: React.FC<AssetTeaserProps> = ({
         {access === 'Compute' && (
           <div className={styles.accessLabel}>{access}</div>
         )}
-        <Rating curation={curation} readonly />
 
         <div className={styles.content}>
           <Dotdotdot tagName="p" clamp={3}>

src/components/organisms/AssetContent/RatingAction.module.css

@@ -1,25 +0,0 @@
-.rating {
-  composes: box from '../../atoms/Box.module.css';
-  display: flex;
-  flex-wrap: wrap;
-  flex-direction: column;
-  margin-top: 5px;
-  padding: 20px !important;
-}
-
-.rating svg {
-  width: var(--font-size-h3);
-  height: var(--font-size-h3);
-}
-
-.title {
-  font-size: var(--font-size-large);
-}
-
-.success {
-  background-color: var(--green);
-}
-
-.error {
-  background-color: var(--red);
-}

src/components/organisms/AssetContent/RatingAction.tsx

@@ -1,65 +0,0 @@
-import React, { useState, useEffect, ReactElement } from 'react'
-import { toast } from 'react-toastify'
-import Rating from '../../atoms/Rating'
-import rateAsset from '../../../utils/rateAsset'
-import { DID } from '@oceanprotocol/lib'
-import styles from './RatingAction.module.css'
-import getAssetRating from '../../../utils/getAssetRating'
-import Loader from '../../atoms/Loader'
-import { useWeb3 } from '@oceanprotocol/react'
-export default function RatingAction({
-  did,
-  onVote
-}: {
-  did: DID | string
-  onVote: () => void
-}): ReactElement {
-  const { web3, account } = useWeb3()
-  const [rating, setRating] = useState<number>(0)
-  const [isloading, setIsLoading] = useState(false)
-
-  useEffect(() => {
-    async function getOwnRating() {
-      if (!account) return
-      const currentRating = await getAssetRating(did, account)
-      currentRating && setRating(currentRating.vote)
-    }
-    getOwnRating()
-  }, [account])
-
-  async function handleRatingClick(value: number) {
-    if (!web3) return
-    setIsLoading(true)
-    try {
-      const response = await rateAsset(did, web3, value)
-      if (!response) return
-
-      onVote()
-      setRating(value)
-      toast.success('Thank you for rating!', {
-        className: styles.success
-      })
-    } catch (error) {
-      toast.error(`There was an error: ${error.message}`, {
-        className: styles.error
-      })
-    }
-    setIsLoading(false)
-  }
-
-  return account ? (
-    <aside className={styles.rating}>
-      <h3 className={styles.title}>Review this data</h3>
-
-      {isloading ? (
-        <Loader />
-      ) : (
-        <Rating
-          curation={{ rating: rating, numVotes: 0 }}
-          isLoading={isloading}
-          onClick={handleRatingClick}
-        />
-      )}
-    </aside>
-  ) : null
-}

src/components/organisms/AssetContent/index.tsx

@@ -22,21 +22,6 @@ export default function AssetContent({
   const { datePublished } = metadata.main
   const { description, categories, tags } = metadata.additionalInformation
 
-  // const { curation } = metadata
-
-  // const { getCuration } = useMetadata()
-  // const [rating, setRating] = useState<number>(curation ? curation.rating : 0)
-  // const [numVotes, setNumVotes] = useState<number>(
-  //   curation ? curation.numVotes : 0
-  // )
-
-  // const onVoteUpdate = async () => {
-  //   const { rating, numVotes } = await getCuration(did)
-
-  //   setRating(rating)
-  //   setNumVotes(numVotes)
-  // }
-
   return (
     <article className={styles.grid}>
       <div>
@@ -45,11 +30,10 @@ export default function AssetContent({
           {categories && (
             <p>
               <Link to={`/search?categories=["${categories[0]}"]`}>
-                <a>{categories[0]}</a>
+                {categories[0]}
               </Link>
             </p>
           )}
-          {/* <Rating curation={{ rating, numVotes }} readonly /> */}
         </aside>
 
         <Markdown text={description || ''} />
@@ -73,8 +57,6 @@ export default function AssetContent({
       <div>
         <div className={styles.sticky}>
           <AssetActions metadata={metadata} did={did} />
-
-          {/* <RatingAction did={did} onVote={onVoteUpdate} /> */}
         </div>
       </div>
     </article>

src/components/pages/Home.tsx

@@ -11,19 +11,23 @@ export default function HomePage(): ReactElement {
 
   useEffect(() => {
     async function getLatestAssets() {
-      const metadataStore = new MetadataStore(
+      try {
-        oceanConfig.metadataStoreUri,
+        const metadataStore = new MetadataStore(
-        Logger
+          oceanConfig.metadataStoreUri,
-      )
+          Logger
+        )
 
-      const result = await metadataStore.queryMetadata({
+        const result = await metadataStore.queryMetadata({
-        page: 1,
+          page: 1,
-        offset: 10,
+          offset: 10,
-        query: {},
+          query: {},
-        sort: { created: -1 }
+          sort: { created: -1 }
-      })
+        })
 
-      result && result.results && setAssets(result.results)
+        result && result.results && setAssets(result.results)
+      } catch (error) {
+        console.error(error.message)
+      }
     }
     getLatestAssets()
   }, [])

src/utils/getAssetRating.ts

@@ -1,34 +0,0 @@
-import axios from 'axios'
-import { DID } from '@oceanprotocol/lib'
-import { oceanConfig } from '../../app.config'
-
-export declare type GetRatingResponse = {
-  comment: string
-  datePublished: string
-  vote: number
-}
-
-const url = oceanConfig.ratingUri + '/api/v1/rating'
-
-export default async function getAssetRating(
-  did: DID | string,
-  account: string
-): Promise<GetRatingResponse | undefined> {
-  try {
-    if (!account) return
-
-    const response = await axios.get(url, {
-      params: {
-        did: did,
-        address: account
-      }
-    })
-    const votesLength = response.data.length
-
-    if (votesLength > 0) {
-      return response.data[votesLength - 1]
-    }
-  } catch (error) {
-    console.error(error.message)
-  }
-}

src/utils/rateAsset.ts

@@ -1,49 +0,0 @@
-import axios, { AxiosResponse } from 'axios'
-import Web3 from 'web3'
-import { DID } from '@oceanprotocol/lib'
-import { oceanConfig } from '../../app.config'
-
-export declare type RatingResponse = [string, number]
-
-const url = oceanConfig.ratingUri + '/api/v1/rating'
-
-export function gethash(message: string) {
-  let hex = ''
-  for (let i = 0; i < message.length; i++) {
-    hex += '' + message.charCodeAt(i).toString(16)
-  }
-  const hexMessage = '0x' + hex
-  return hexMessage
-}
-
-export default async function rateAsset(
-  did: DID | string,
-  web3: Web3,
-  value: number
-): Promise<RatingResponse | string> {
-  try {
-    const timestamp = Math.floor(+new Date() / 1000)
-    const accounts = await web3.eth.getAccounts()
-    const signature = await web3.eth.personal.sign(
-      gethash(`${timestamp}`),
-      accounts ? accounts[0] : '',
-      ''
-    )
-
-    const ratingBody = {
-      did,
-      vote: value,
-      comment: '',
-      address: accounts[0],
-      timestamp: timestamp,
-      signature: signature
-    }
-
-    const response: AxiosResponse = await axios.post(url, ratingBody)
-    if (!response) return 'No Response'
-    return response.data
-  } catch (error) {
-    console.error(error.message)
-    return `Error: ${error.message}`
-  }
-}

tests/unit/utils/getAssetRating.test.ts

@@ -1,23 +0,0 @@
-import axios, { AxiosResponse } from 'axios'
-import getAssetRating, {
-  GetRatingResponse
-} from '../../../src/utils/getAssetRating'
-
-jest.mock('axios')
-
-describe('getAssetRating()', () => {
-  it('success', async () => {
-    const ratingResponse: GetRatingResponse = {
-      comment: '',
-      datePublished: '',
-      vote: 5
-    }
-
-    ;(axios.get as any).mockResolvedValueOnce({
-      data: [ratingResponse, ratingResponse]
-    } as AxiosResponse)
-
-    const response = await getAssetRating('0x00', '0x00')
-    expect(response && response.vote).toBe(5)
-  })
-})

tests/unit/utils/rateAsset.test.ts

@@ -1,38 +0,0 @@
-import axios, { AxiosResponse } from 'axios'
-import rateAsset, { RatingResponse } from '../../../src/utils/rateAsset'
-import web3 from '../__mocks__/web3'
-
-jest.mock('axios')
-
-describe('rateAsset()', () => {
-  it('success', async () => {
-    ;(axios.post as any).mockResolvedValueOnce({
-      data: ['4.0', 1]
-    } as AxiosResponse)
-
-    const response: RatingResponse | string = await rateAsset('0x00', web3, 5)
-    expect(response && response[0]).toBe('4.0')
-  })
-
-  it('string return', async () => {
-    ;(axios.post as any).mockResolvedValueOnce({
-      data: 'Missing signature'
-    } as AxiosResponse)
-
-    const response: RatingResponse | string = await rateAsset('0x00', web3, 5)
-    expect(response && response).toBe('Missing signature')
-  })
-
-  it('error catch', async () => {
-    ;(axios.post as any).mockResolvedValueOnce({
-      data: {}
-    } as AxiosResponse)
-
-    const response: RatingResponse | string = await rateAsset(
-      '0x00',
-      {} as any,
-      5
-    )
-    expect(response && response).toContain('Error: ')
-  })
-})