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

loading state for search

Browse Source
This commit is contained in:
Matthias Kretschmann 2019-04-02 14:25:16 +02:00
parent 46d5540316
commit 78f4d3a12e
Signed by: m
GPG Key ID: 606EEEF3C479A91F
2 changed files with 10 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/routes/Home.tsx
View File

@ -54,7 +54,7 @@ class Home extends Component<HomeProps, HomeState> {
private searchAssets = (event: FormEvent<HTMLFormElement>) => { private searchAssets = (event: FormEvent<HTMLFormElement>) => {
event.preventDefault() event.preventDefault()
this.props.history.push(`/search?q=${this.state.search}`) this.props.history.push(`/search?text=${this.state.search}`)
} }
} }

14
client/src/routes/Search.tsx
View File

@ -1,5 +1,6 @@
import queryString from 'query-string'
import React, { Component } from 'react' import React, { Component } from 'react'
import queryString from 'query-string'
import Spinner from '../components/atoms/Spinner'
import Route from '../components/templates/Route' import Route from '../components/templates/Route'
import { User } from '../context/User' import { User } from '../context/User'
import Asset from '../components/molecules/Asset' import Asset from '../components/molecules/Asset'
@ -7,6 +8,7 @@ import styles from './Search.module.scss'
interface SearchState { interface SearchState {
results: any[] results: any[]
isLoading: boolean
} }
interface SearchProps { interface SearchProps {
@ -15,16 +17,18 @@ interface SearchProps {
} }
export default class Search extends Component<SearchProps, SearchState> { export default class Search extends Component<SearchProps, SearchState> {
public state = { results: [] } public state = { results: [], isLoading: true }
public async componentDidMount() { public async componentDidMount() {
const searchParams = queryString.parse(this.props.location.search) const searchParams = queryString.parse(this.props.location.search)
const assets = await this.context.ocean.assets.search(searchParams.q) const assets = await this.context.ocean.assets.search(searchParams.text)
this.setState({ results: assets }) this.setState({ results: assets, isLoading: false })
} }
public renderResults = () => public renderResults = () =>
this.state.results.length ? ( this.state.isLoading ? (
<Spinner message="Searching..." />
) : this.state.results.length ? (
<div className={styles.results}> <div className={styles.results}>
{this.state.results.map((asset: any) => ( {this.state.results.map((asset: any) => (
<Asset key={asset.id} asset={asset} /> <Asset key={asset.id} asset={asset} />