oceanprotocol/market
1
0
Fork 0
mirror of https://github.com/oceanprotocol/market.git synced 2024-12-02 05:57:29 +01:00
Code Releases Activity

fix all the things by removing Rating altogether

Browse Source
This commit is contained in:
Matthias Kretschmann 2020-07-15 13:35:26 +02:00
parent ace7e88865
commit c533194392
Signed by: m
GPG Key ID: 606EEEF3C479A91F
14 changed files with 16 additions and 422 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
package-lock.json generated
View File

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

1
package.json
View File

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

57
src/components/atoms/Rating.module.css
View File

@ -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);
}

36
src/components/atoms/Rating.stories.tsx
View File

@ -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
}}
/>
)

51
src/components/atoms/Rating.tsx
View File

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

4
src/components/molecules/AssetTeaser.tsx
View File

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

25
src/components/organisms/AssetContent/RatingAction.module.css
View File

@ -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);
}

65
src/components/organisms/AssetContent/RatingAction.tsx
View File

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

20
src/components/organisms/AssetContent/index.tsx
View File

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

26
src/components/pages/Home.tsx
View File

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

34
src/utils/getAssetRating.ts
View File

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

49
src/utils/rateAsset.ts
View File

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

23
tests/unit/utils/getAssetRating.test.ts
View File

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

38
tests/unit/utils/rateAsset.test.ts
View File

@ -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: ')
})
})