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

search results tweaks

This commit is contained in:
Matthias Kretschmann 2019-04-02 14:51:59 +02:00
parent 78f4d3a12e
commit 7cb54cbd06
Signed by: m
GPG Key ID: 606EEEF3C479A91F
3 changed files with 53 additions and 9 deletions

View File

@ -3,13 +3,21 @@
.header {
margin-top: $spacer;
margin-bottom: $spacer;
}
h1 {
.title {
margin: 0;
}
}
p {
.description {
margin-top: $spacer / 2;
font-size: $font-size-large;
}
.titleReverse {
color: $brand-grey-light;
span {
color: $brand-grey-dark;
}
}

View File

@ -7,12 +7,14 @@ import meta from '../../data/meta.json'
const Route = ({
title,
description,
titleReverse,
wide,
children,
className
}: {
title: string
description?: string
titleReverse?: boolean
children: any
wide?: boolean
className?: string
@ -26,8 +28,22 @@ const Route = ({
<Content wide={wide}>
<article>
<header className={styles.header}>
<h1>{title}</h1>
{description && <p>{description}</p>}
<h1
className={
titleReverse ? styles.titleReverse : styles.title
}
dangerouslySetInnerHTML={{
__html: title
}}
/>
{description && (
<p
className={styles.description}
dangerouslySetInnerHTML={{
__html: description
}}
/>
)}
</header>
{children}

View File

@ -1,5 +1,6 @@
import React, { Component } from 'react'
import queryString from 'query-string'
import { Logger } from '@oceanprotocol/squid'
import Spinner from '../components/atoms/Spinner'
import Route from '../components/templates/Route'
import { User } from '../context/User'
@ -21,8 +22,21 @@ export default class Search extends Component<SearchProps, SearchState> {
public async componentDidMount() {
const searchParams = queryString.parse(this.props.location.search)
const queryRequest = {
offset: 500,
page: 1,
query: {
text: searchParams.text
},
sort: {
text: 1
}
}
const assets = await this.context.ocean.assets.search(searchParams.text)
this.setState({ results: assets, isLoading: false })
Logger.log(`Loaded ${assets.length} assets`)
}
public renderResults = () =>
@ -39,8 +53,14 @@ export default class Search extends Component<SearchProps, SearchState> {
)
public render() {
const searchTerm = queryString.parse(this.props.location.search).text
return (
<Route title="Search Results" wide>
<Route
title={`Search Results for <span>${searchTerm}</span>`}
titleReverse
wide
>
{this.renderResults()}
</Route>
)