mirror of
https://github.com/oceanprotocol/commons.git
synced 2023-03-15 18:03:00 +01:00
merge fixes
This commit is contained in:
parent
4660719578
commit
31d8f17b69
@ -1,32 +0,0 @@
|
||||
@import '../../styles/variables';
|
||||
|
||||
.resultsTitle {
|
||||
color: $brand-grey-light;
|
||||
font-size: $font-size-h3;
|
||||
margin-top: 0;
|
||||
margin-bottom: $spacer;
|
||||
|
||||
span {
|
||||
color: $brand-grey-dark;
|
||||
}
|
||||
}
|
||||
|
||||
.results {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-gap: $spacer;
|
||||
|
||||
@media (min-width: $break-point--medium) {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
@media (min-width: $break-point--large) {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
.empty {
|
||||
text-align: center;
|
||||
margin-top: $spacer * 4;
|
||||
color: $brand-grey-light;
|
||||
}
|
@ -1,28 +0,0 @@
|
||||
import React from 'react'
|
||||
import { render } from '@testing-library/react'
|
||||
import Results from './Results'
|
||||
import { User } from '../../context'
|
||||
import { userMockConnected } from '../../../__mocks__/user-mock'
|
||||
import {
|
||||
results,
|
||||
totalResults,
|
||||
totalPages,
|
||||
currentPage
|
||||
} from '../../../__fixtures__/search.json'
|
||||
|
||||
describe('Results', () => {
|
||||
it('renders without crashing', () => {
|
||||
const { container } = render(
|
||||
<User.Provider value={userMockConnected}>
|
||||
<Results
|
||||
results={results}
|
||||
totalResults={totalResults}
|
||||
totalPages={totalPages}
|
||||
currentPage={currentPage}
|
||||
handlePageClick={jest.fn()}
|
||||
/>
|
||||
</User.Provider>
|
||||
)
|
||||
expect(container.firstChild).toBeInTheDocument()
|
||||
})
|
||||
})
|
@ -1,45 +0,0 @@
|
||||
import React from 'react'
|
||||
import { Link } from 'react-router-dom'
|
||||
import shortid from 'shortid'
|
||||
import { DDO } from '@oceanprotocol/squid'
|
||||
import AssetTeaser from '../../components/molecules/AssetTeaser'
|
||||
import Pagination from '../../components/molecules/Pagination'
|
||||
import styles from './Results.module.scss'
|
||||
|
||||
export default function Results({
|
||||
results,
|
||||
totalResults,
|
||||
totalPages,
|
||||
currentPage,
|
||||
handlePageClick
|
||||
}: {
|
||||
results: DDO[]
|
||||
totalResults: number
|
||||
totalPages: number
|
||||
currentPage: number
|
||||
handlePageClick(data: { selected: number }): Promise<any>
|
||||
}) {
|
||||
return results && results.length ? (
|
||||
<>
|
||||
<h2 className={styles.resultsTitle}>
|
||||
{totalResults} {totalResults === 1 ? 'result' : 'results'}
|
||||
</h2>
|
||||
<div className={styles.results}>
|
||||
{results.map((asset: any) => (
|
||||
<AssetTeaser key={shortid.generate()} asset={asset} />
|
||||
))}
|
||||
</div>
|
||||
|
||||
<Pagination
|
||||
totalPages={totalPages}
|
||||
currentPage={currentPage}
|
||||
handlePageClick={handlePageClick}
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
<div className={styles.empty}>
|
||||
<p>No Data Sets Found.</p>
|
||||
<Link to="/publish">+ Publish A Data Set</Link>
|
||||
</div>
|
||||
)
|
||||
}
|
@ -1,8 +1,8 @@
|
||||
import React from 'react'
|
||||
import { render } from '@testing-library/react'
|
||||
import { User } from '../../context'
|
||||
import { userMockConnected } from '../../../__mocks__/user-mock'
|
||||
import searchMock from '../../../__fixtures__/search.json'
|
||||
import { userMockConnected } from '../../__mocks__/user-mock'
|
||||
import searchMock from '../../__fixtures__/search.json'
|
||||
import Sidebar from './Sidebar'
|
||||
|
||||
describe('Sidebar', () => {
|
||||
|
@ -4,7 +4,7 @@ import Search from '.'
|
||||
import { User } from '../../context'
|
||||
import { createMemoryHistory } from 'history'
|
||||
import { BrowserRouter as Router } from 'react-router-dom'
|
||||
import { userMockConnected } from '../../../__mocks__/user-mock'
|
||||
import { userMockConnected } from '../../__mocks__/user-mock'
|
||||
|
||||
const history = createMemoryHistory()
|
||||
|
||||
|
@ -1,16 +1,19 @@
|
||||
import React, { PureComponent, ChangeEvent } from 'react'
|
||||
import queryString from 'query-string'
|
||||
import { History, Location } from 'history'
|
||||
import { Logger, DDO } from '@oceanprotocol/squid'
|
||||
import { Logger } from '@oceanprotocol/squid'
|
||||
import Spinner from '../../components/atoms/Spinner'
|
||||
import SearchResults, {
|
||||
SearchResultsState
|
||||
} from '../../components/molecules/SearchResults'
|
||||
import Route from '../../components/templates/Route'
|
||||
import { User } from '../../context'
|
||||
import Pagination from '../../components/molecules/Pagination'
|
||||
import Content from '../../components/atoms/Content'
|
||||
import Button from '../../components/atoms/Button'
|
||||
import Input from '../../components/atoms/Form/Input'
|
||||
import withTracker from '../../hoc/withTracker'
|
||||
import Sidebar from './Sidebar'
|
||||
import Results from './Results'
|
||||
import styles from './index.module.scss'
|
||||
|
||||
interface SearchProps {
|
||||
@ -18,23 +21,15 @@ interface SearchProps {
|
||||
history: History
|
||||
}
|
||||
|
||||
interface SearchState {
|
||||
results: DDO[]
|
||||
totalResults: number
|
||||
offset: number
|
||||
totalPages: number
|
||||
currentPage: number
|
||||
isLoading: boolean
|
||||
search: string
|
||||
category: string
|
||||
license: string
|
||||
interface SearchState extends SearchResultsState {
|
||||
searchTerm: string
|
||||
searchCategories: string
|
||||
searchLicenses: string
|
||||
}
|
||||
|
||||
class Search extends PureComponent<SearchProps, SearchState> {
|
||||
public static contextType = User
|
||||
|
||||
public timeout: any = false
|
||||
|
||||
public state = {
|
||||
results: [],
|
||||
totalResults: 0,
|
||||
@ -42,61 +37,46 @@ class Search extends PureComponent<SearchProps, SearchState> {
|
||||
totalPages: 1,
|
||||
currentPage: 1,
|
||||
isLoading: true,
|
||||
search: '',
|
||||
category: '',
|
||||
license: ''
|
||||
searchTerm: '',
|
||||
searchCategories: '',
|
||||
searchLicenses: ''
|
||||
}
|
||||
|
||||
public async componentDidMount() {
|
||||
const { search } = this.props.location
|
||||
const { text, page, categories, license } = queryString.parse(search)
|
||||
const { text, page, categories } = queryString.parse(search)
|
||||
|
||||
const update: any = {}
|
||||
if (text) {
|
||||
update.search = decodeURIComponent(`${text}`)
|
||||
}
|
||||
if (categories) {
|
||||
update.category = decodeURIComponent(`${categories}`)
|
||||
}
|
||||
if (license) {
|
||||
update.license = decodeURIComponent(`${license}`)
|
||||
}
|
||||
if (page) {
|
||||
update.currentPage = Number(page)
|
||||
await this.setState({
|
||||
searchTerm: decodeURIComponent(`${text}`)
|
||||
})
|
||||
}
|
||||
|
||||
this.setState(update, () => this.searchAssets())
|
||||
if (categories) {
|
||||
await this.setState({
|
||||
searchCategories: decodeURIComponent(`${categories}`)
|
||||
})
|
||||
}
|
||||
|
||||
// switch to respective page if query string is present
|
||||
if (page) {
|
||||
const currentPage = Number(page)
|
||||
await this.setState({ currentPage })
|
||||
}
|
||||
|
||||
this.handleSearchAssets()
|
||||
}
|
||||
|
||||
private searchAssets = async (event?: any) => {
|
||||
event && event.preventDefault()
|
||||
|
||||
private handleSearchAssets = async () => {
|
||||
const { ocean } = this.context
|
||||
const { offset, currentPage, search, category, license } = this.state
|
||||
const { offset, currentPage, searchTerm, searchCategories } = this.state
|
||||
|
||||
let urlString = '?'
|
||||
const queryValues: any = {}
|
||||
if (search) {
|
||||
queryValues.text = [search]
|
||||
urlString += `text=${search}&`
|
||||
}
|
||||
if (category) {
|
||||
queryValues.categories = [category]
|
||||
urlString += `categories=${category}&`
|
||||
}
|
||||
if (license) {
|
||||
queryValues.license = [license]
|
||||
urlString += `license=${license}&`
|
||||
}
|
||||
if (currentPage !== 1) {
|
||||
urlString += `page=${currentPage}&`
|
||||
}
|
||||
|
||||
// update url
|
||||
this.props.history.push({
|
||||
pathname: this.props.location.pathname,
|
||||
search: urlString
|
||||
})
|
||||
const queryValues =
|
||||
searchCategories !== '' && searchTerm !== ''
|
||||
? { text: [searchTerm], categories: [searchCategories] }
|
||||
: searchCategories !== '' && searchTerm === ''
|
||||
? { categories: [searchCategories] }
|
||||
: { text: [searchTerm] }
|
||||
|
||||
const searchQuery = {
|
||||
offset,
|
||||
@ -123,53 +103,64 @@ class Search extends PureComponent<SearchProps, SearchState> {
|
||||
}
|
||||
}
|
||||
|
||||
private handlePageClick = async (data: { selected: number }) => {
|
||||
private onPageClick = async (data: { selected: number }) => {
|
||||
// react-pagination starts counting at 0, we start at 1
|
||||
const toPage = data.selected + 1
|
||||
|
||||
this.setState({ currentPage: toPage, isLoading: true }, () =>
|
||||
this.searchAssets()
|
||||
)
|
||||
this.props.history.push({
|
||||
pathname: this.props.location.pathname,
|
||||
search: `?text=${this.state.searchTerm}&page=${toPage}`
|
||||
})
|
||||
|
||||
this.setState({ currentPage: toPage, isLoading: true })
|
||||
await this.handleSearchAssets()
|
||||
}
|
||||
|
||||
private inputChange = (event: ChangeEvent<HTMLInputElement>) => {
|
||||
if (this.state.search !== event.target.value)
|
||||
this.setState({ search: event.target.value })
|
||||
private handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
|
||||
if (this.state.searchTerm !== event.target.value)
|
||||
this.setState({ searchTerm: event.target.value })
|
||||
}
|
||||
|
||||
public setCategory = (category: string) => {
|
||||
this.setState({ category, isLoading: true }, () => this.searchAssets())
|
||||
this.setState({ searchCategories: category, isLoading: true }, () =>
|
||||
this.handleSearchAssets()
|
||||
)
|
||||
}
|
||||
|
||||
public setLicense = (license: string) => {
|
||||
this.setState({ license, isLoading: true }, () => this.searchAssets())
|
||||
this.setState({ searchLicenses: license, isLoading: true }, () =>
|
||||
this.handleSearchAssets()
|
||||
)
|
||||
}
|
||||
|
||||
public render() {
|
||||
const {
|
||||
totalResults,
|
||||
totalPages,
|
||||
currentPage,
|
||||
isLoading,
|
||||
results,
|
||||
totalResults,
|
||||
search,
|
||||
category,
|
||||
license,
|
||||
totalPages,
|
||||
currentPage
|
||||
searchTerm,
|
||||
searchCategories,
|
||||
searchLicenses
|
||||
} = this.state
|
||||
|
||||
return (
|
||||
<Route title="Search">
|
||||
<Route title="Search" wide>
|
||||
<Content>
|
||||
<form onSubmit={this.searchAssets}>
|
||||
<form onSubmit={this.handleSearchAssets}>
|
||||
<Input
|
||||
type="search"
|
||||
name="search"
|
||||
label=""
|
||||
placeholder="e.g. shapes of plants"
|
||||
value={search}
|
||||
onChange={this.inputChange}
|
||||
value={searchTerm}
|
||||
onChange={this.handleInputChange}
|
||||
group={
|
||||
<Button primary onClick={this.searchAssets}>
|
||||
<Button
|
||||
primary
|
||||
onClick={this.handleSearchAssets}
|
||||
>
|
||||
Search
|
||||
</Button>
|
||||
}
|
||||
@ -182,24 +173,37 @@ class Search extends PureComponent<SearchProps, SearchState> {
|
||||
{isLoading ? (
|
||||
<Spinner message="Searching..." />
|
||||
) : (
|
||||
<Results
|
||||
results={results}
|
||||
totalResults={totalResults}
|
||||
totalPages={totalPages}
|
||||
currentPage={currentPage}
|
||||
handlePageClick={this.handlePageClick}
|
||||
/>
|
||||
<>
|
||||
<h2 className={styles.resultsTitle}>
|
||||
{totalResults} results for{' '}
|
||||
<span>
|
||||
{decodeURIComponent(
|
||||
searchTerm || searchCategories
|
||||
)}
|
||||
</span>
|
||||
</h2>
|
||||
<SearchResults
|
||||
isLoading={isLoading}
|
||||
results={results}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Sidebar
|
||||
category={category}
|
||||
license={license}
|
||||
category={searchCategories}
|
||||
license={searchLicenses}
|
||||
results={results}
|
||||
setCategory={this.setCategory}
|
||||
setLicense={this.setLicense}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Pagination
|
||||
totalPages={totalPages}
|
||||
currentPage={currentPage}
|
||||
handlePageClick={this.onPageClick}
|
||||
/>
|
||||
</Content>
|
||||
</Route>
|
||||
)
|
||||
|
Loading…
Reference in New Issue
Block a user