oceanprotocol/commons
1
0
Fork 0
mirror of https://github.com/oceanprotocol/commons.git synced 2023-03-15 18:03:00 +01:00
Code Releases Activity

refactor to fill sidebar with metadata from search results

Browse Source
This commit is contained in:
Matthias Kretschmann 2019-09-12 19:03:11 +02:00
parent 111f4668de
commit bab254e106
Signed by: m
GPG Key ID: 606EEEF3C479A91F
3 changed files with 123 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

142
client/src/routes/Search/Filters.tsx
View File

@ -1,4 +1,5 @@
import React, { PureComponent } from 'react' import React from 'react'
import shortid from 'shortid'
import Button from '../../components/atoms/Button' import Button from '../../components/atoms/Button'
import styles from './Filters.module.scss' import styles from './Filters.module.scss'
import data from '../../data/form-publish.json' import data from '../../data/form-publish.json'
@ -11,89 +12,104 @@ const labelCategories =
steps[1].fields.categories && steps[1].fields.categories &&
steps[1].fields.categories.label steps[1].fields.categories.label
const optionsCategories =
steps &&
steps[1].fields &&
steps[1].fields.categories &&
steps[1].fields.categories.options
const labelLicense = const labelLicense =
steps && steps &&
steps[2].fields && steps[2].fields &&
steps[2].fields.license && steps[2].fields.license &&
steps[2].fields.license.label steps[2].fields.license.label
const optionsLicense = function getFilterMetadata(results: any[]) {
steps && const filterCategories: string[] = []
steps[2].fields && const filterLicenses: string[] = []
steps[2].fields.license &&
steps[2].fields.license.options
const filters = [ results.map(asset => {
{ label: labelCategories, items: optionsCategories }, const { metadata } = asset.findServiceByType('Metadata')
{ label: labelLicense, items: optionsLicense } const { categories, license } = metadata.base
] categories && filterCategories.push(categories[0])
license && filterLicenses.push(license)
return null
})
export default class Filters extends PureComponent<{ return { filterCategories, filterLicenses }
}
export default function Filters({
category,
license,
results,
setCategory,
setLicense
}: {
category: string category: string
license: string license: string
results: any[]
setCategory(category: string): void setCategory(category: string): void
setLicense(license: string): void setLicense(license: string): void
}> { }) {
public render() { const { filterCategories, filterLicenses } = getFilterMetadata(results)
const { category, license, setCategory, setLicense } = this.props
return filters.map(filter => ( const filters = [
<div { label: labelCategories, items: filterCategories },
key={filter.items && filter.items[0]} { label: labelLicense, items: filterLicenses }
className={styles.filter} ]
>
<h3 className={styles.filterTitle}>{filter.label}</h3>
<ul className={styles.filter}>
{filter.items &&
filter.items
.sort((a: string, b: string) => a.localeCompare(b)) // sort alphabetically
.map((option: string) => {
const isActive =
category === option || license === option
return ( return (
<li <>
key={option} {filters.map(filter => (
className={ <div key={shortid.generate()} className={styles.filter}>
isActive ? styles.active : undefined <h3 className={styles.filterTitle}>{filter.label}</h3>
} <ul className={styles.filter}>
> {filter.items &&
<Button filter.items
link .sort((a: string, b: string) =>
className={styles.option} a.localeCompare(b)
onClick={() => ) // sort alphabetically
filter.label === 'Category' .map((option: string) => {
? setCategory(option) const isActive =
: setLicense(option) category === option ||
license === option
return (
<li
key={shortid.generate()}
className={
isActive
? styles.active
: undefined
} }
> >
{option}{' '}
</Button>
{isActive && (
<Button <Button
link link
className={styles.cancel} className={styles.option}
title="Clear"
onClick={() => onClick={() =>
filter.label === 'Category' filter.label === 'Category'
? setCategory('') ? setCategory(option)
: setLicense('') : setLicense(option)
} }
> >
&times; {option}{' '}
</Button> </Button>
)} {isActive && (
</li> <Button
) link
})} className={styles.cancel}
</ul> title="Clear"
</div> onClick={() =>
)) filter.label ===
} 'Category'
? setCategory('')
: setLicense('')
}
>
&times;
</Button>
)}
</li>
)
})}
</ul>
</div>
))}
</>
)
} }

3
client/src/routes/Search/Sidebar.tsx
View File

@ -8,6 +8,7 @@ export default function Sidebar({
inputChange, inputChange,
category, category,
license, license,
results,
setCategory, setCategory,
setLicense setLicense
}: { }: {
@ -15,6 +16,7 @@ export default function Sidebar({
inputChange: any inputChange: any
category: string category: string
license: string license: string
results: any[]
setCategory(category: string): void setCategory(category: string): void
setLicense(license: string): void setLicense(license: string): void
}) { }) {
@ -37,6 +39,7 @@ export default function Sidebar({
<Filters <Filters
category={category} category={category}
license={license} license={license}
results={results}
setCategory={setCategory} setCategory={setCategory}
setLicense={setLicense} setLicense={setLicense}
/> />

72
client/src/routes/Search/index.tsx
View File

@ -2,6 +2,7 @@ import React, { PureComponent, ChangeEvent } from 'react'
import { Link } from 'react-router-dom' import { Link } from 'react-router-dom'
import queryString from 'query-string' import queryString from 'query-string'
import { History, Location } from 'history' import { History, Location } from 'history'
import shortid from 'shortid'
import { Logger } from '@oceanprotocol/squid' import { Logger } from '@oceanprotocol/squid'
import Spinner from '../../components/atoms/Spinner' import Spinner from '../../components/atoms/Spinner'
import Route from '../../components/templates/Route' import Route from '../../components/templates/Route'
@ -165,14 +166,20 @@ class Search extends PureComponent<SearchProps, SearchState> {
} }
public renderResults = () => public renderResults = () =>
this.state.isLoading ? ( this.state.results && this.state.results.length ? (
<Spinner message="Searching..." /> <>
) : this.state.results && this.state.results.length ? ( <div className={styles.results}>
<div className={styles.results}> {this.state.results.map((asset: any) => (
{this.state.results.map((asset: any) => ( <AssetTeaser key={shortid.generate()} asset={asset} />
<AssetTeaser key={asset.id} asset={asset} /> ))}
))} </div>
</div>
<Pagination
totalPages={this.state.totalPages}
currentPage={this.state.currentPage}
handlePageClick={this.handlePageClick}
/>
</>
) : ( ) : (
<div className={styles.empty}> <div className={styles.empty}>
<p>No Data Sets Found.</p> <p>No Data Sets Found.</p>
@ -181,42 +188,45 @@ class Search extends PureComponent<SearchProps, SearchState> {
) )
public render() { public render() {
const { totalResults, totalPages, currentPage } = this.state const {
isLoading,
results,
totalResults,
search,
category,
license
} = this.state
return ( return (
<Route title="Search" wide> <Route title="Search" wide>
<Content wide> <Content wide>
<div className={styles.content}> <div className={styles.content}>
<Sidebar <Sidebar
search={this.state.search} search={search}
inputChange={this.inputChange} inputChange={this.inputChange}
category={this.state.category} category={category}
license={this.state.license} results={results}
license={license}
setCategory={this.setCategory} setCategory={this.setCategory}
setLicense={this.setLicense} setLicense={this.setLicense}
/> />
<div> <div>
{!this.state.isLoading && ( {isLoading ? (
<h2 className={styles.resultsTitle}> <Spinner message="Searching..." />
{totalResults} results for{' '} ) : (
<span> <>
{decodeURIComponent( <h2 className={styles.resultsTitle}>
this.state.search || {totalResults} results for{' '}
this.state.category <span>
)} {decodeURIComponent(
</span> search || category
</h2> )}
)} </span>
</h2>
{this.renderResults()} {this.renderResults()}
</>
{!this.state.isLoading && (
<Pagination
totalPages={totalPages}
currentPage={currentPage}
handlePageClick={this.handlePageClick}
/>
)} )}
</div> </div>
</div> </div>