mirror of
https://github.com/oceanprotocol/commons.git
synced 2023-03-15 18:03:00 +01:00
refactor to fill sidebar with metadata from search results
This commit is contained in:
parent
111f4668de
commit
bab254e106
GPG Key ID:
606EEEF3C479A91F
@ -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,89 +12,104 @@ 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}
|
||||
>
|
||||
<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
|
||||
const filters = [
|
||||
{ label: labelCategories, items: filterCategories },
|
||||
{ label: labelLicense, items: filterLicenses }
|
||||
]
|
||||
|
||||
return (
|
||||
<li
|
||||
key={option}
|
||||
className={
|
||||
isActive ? styles.active : undefined
|
||||
}
|
||||
>
|
||||
<Button
|
||||
link
|
||||
className={styles.option}
|
||||
onClick={() =>
|
||||
filter.label === 'Category'
|
||||
? setCategory(option)
|
||||
: setLicense(option)
|
||||
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
|
||||
.map((option: string) => {
|
||||
const isActive =
|
||||
category === option ||
|
||||
license === option
|
||||
|
||||
return (
|
||||
<li
|
||||
key={shortid.generate()}
|
||||
className={
|
||||
isActive
|
||||
? styles.active
|
||||
: undefined
|
||||
}
|
||||
>
|
||||
{option}{' '}
|
||||
</Button>
|
||||
{isActive && (
|
||||
<Button
|
||||
link
|
||||
className={styles.cancel}
|
||||
title="Clear"
|
||||
className={styles.option}
|
||||
onClick={() =>
|
||||
filter.label === 'Category'
|
||||
? setCategory('')
|
||||
: setLicense('')
|
||||
? setCategory(option)
|
||||
: setLicense(option)
|
||||
}
|
||||
>
|
||||
×
|
||||
{option}{' '}
|
||||
</Button>
|
||||
)}
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
{isActive && (
|
||||
<Button
|
||||
link
|
||||
className={styles.cancel}
|
||||
title="Clear"
|
||||
onClick={() =>
|
||||
filter.label ===
|
||||
'Category'
|
||||
? setCategory('')
|
||||
: setLicense('')
|
||||
}
|
||||
>
|
||||
×
|
||||
</Button>
|
||||
)}
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@ -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}
|
||||
/>
|
||||
|
||||
@ -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 ? (
|
||||
<div className={styles.results}>
|
||||
{this.state.results.map((asset: any) => (
|
||||
<AssetTeaser key={asset.id} asset={asset} />
|
||||
))}
|
||||
</div>
|
||||
this.state.results && this.state.results.length ? (
|
||||
<>
|
||||
<div className={styles.results}>
|
||||
{this.state.results.map((asset: any) => (
|
||||
<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 && (
|
||||
<h2 className={styles.resultsTitle}>
|
||||
{totalResults} results for{' '}
|
||||
<span>
|
||||
{decodeURIComponent(
|
||||
this.state.search ||
|
||||
this.state.category
|
||||
)}
|
||||
</span>
|
||||
</h2>
|
||||
)}
|
||||
{isLoading ? (
|
||||
<Spinner message="Searching..." />
|
||||
) : (
|
||||
<>
|
||||
<h2 className={styles.resultsTitle}>
|
||||
{totalResults} results for{' '}
|
||||
<span>
|
||||
{decodeURIComponent(
|
||||
search || category
|
||||
)}
|
||||
</span>
|
||||
</h2>
|
||||
|
||||
{this.renderResults()}
|
||||
|
||||
{!this.state.isLoading && (
|
||||
<Pagination
|
||||
totalPages={totalPages}
|
||||
currentPage={currentPage}
|
||||
handlePageClick={this.handlePageClick}
|
||||
/>
|
||||
{this.renderResults()}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user