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

80
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 styles from './Filters.module.scss'
import data from '../../data/form-publish.json'
@ -11,57 +12,70 @@ const labelCategories =
steps[1].fields.categories &&
steps[1].fields.categories.label
const optionsCategories =
steps &&
steps[1].fields &&
steps[1].fields.categories &&
steps[1].fields.categories.options
const labelLicense =
steps &&
steps[2].fields &&
steps[2].fields.license &&
steps[2].fields.license.label
const optionsLicense =
steps &&
steps[2].fields &&
steps[2].fields.license &&
steps[2].fields.license.options
function getFilterMetadata(results: any[]) {
const filterCategories: string[] = []
const filterLicenses: string[] = []
const filters = [
{ label: labelCategories, items: optionsCategories },
{ label: labelLicense, items: optionsLicense }
]
results.map(asset => {
const { metadata } = asset.findServiceByType('Metadata')
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
license: string
results: any[]
setCategory(category: string): void
setLicense(license: string): void
}> {
public render() {
const { category, license, setCategory, setLicense } = this.props
}) {
const { filterCategories, filterLicenses } = getFilterMetadata(results)
return filters.map(filter => (
<div
key={filter.items && filter.items[0]}
className={styles.filter}
>
const filters = [
{ label: labelCategories, items: filterCategories },
{ label: labelLicense, items: filterLicenses }
]
return (
<>
{filters.map(filter => (
<div key={shortid.generate()} 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
.sort((a: string, b: string) =>
a.localeCompare(b)
) // sort alphabetically
.map((option: string) => {
const isActive =
category === option || license === option
category === option ||
license === option
return (
<li
key={option}
key={shortid.generate()}
className={
isActive ? styles.active : undefined
isActive
? styles.active
: undefined
}
>
<Button
@ -81,7 +95,8 @@ export default class Filters extends PureComponent<{
className={styles.cancel}
title="Clear"
onClick={() =>
filter.label === 'Category'
filter.label ===
'Category'
? setCategory('')
: setLicense('')
}
@ -94,6 +109,7 @@ export default class Filters extends PureComponent<{
})}
</ul>
</div>
))
}
))}
</>
)
}

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

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

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