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

sidebar component splitup, active states, sidebar styling

Browse Source
This commit is contained in:
Matthias Kretschmann 2019-08-02 00:56:06 +02:00
parent 526750887a
commit bd27ed37b1
Signed by: m
GPG Key ID: 606EEEF3C479A91F
8 changed files with 214 additions and 124 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
client/src/components/atoms/Button.tsx
View File

@ -4,7 +4,8 @@ import cx from 'classnames'
import styles from './Button.module.scss'
interface ButtonProps {
children: string
children: any
title?: string
className?: string
primary?: boolean
link?: boolean

2
client/src/components/molecules/AssetTeaser.module.scss
View File

@ -8,7 +8,7 @@
> a {
display: block;
height: 100%;
padding: $spacer;
padding: $spacer / $line-height;
border: 1px solid $brand-grey-lighter;
border-radius: $border-radius;
background: $brand-white;

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

@ -58,7 +58,7 @@ class Home extends PureComponent<HomeProps, HomeState> {
<h2 className={styles.title}>Explore Categories</h2>
<div className={styles.categories}>
{this.context.categories
.sort((a: any, b: any) => a.localeCompare(b)) // sort alphabetically
.sort((a: string, b: string) => a.localeCompare(b)) // sort alphabetically
.map((category: string) => (
<CategoryLink
category={category}

50
client/src/routes/Search/Filters.module.scss Normal file
View File

@ -0,0 +1,50 @@
@import '../../styles/variables';
.filter {
ul {
padding-left: 0;
li {
position: relative;
&:before {
display: none;
}
}
}
}
.option {
padding-top: $spacer / 10;
padding-bottom: $spacer / 10;
padding-right: $spacer / 6;
text-align: left;
color: $brand-grey-light;
font-size: $font-size-small;
transition: .1s ease-out;
.active & {
color: $brand-grey-dark;
font-weight: $font-weight-bold;
border-left: .3rem solid $brand-black;
padding-left: $spacer / 4;
}
}
.cancel {
position: absolute;
right: 0;
top: $spacer / 10;
font-size: $font-size-h3;
color: inherit;
line-height: 1;
}
.filterTitle {
font-size: $font-size-base;
color: $brand-grey-light;
margin-top: 0;
border-bottom: 1px solid $brand-grey-lighter;
padding-bottom: $spacer / 4;
margin-bottom: $spacer / 4;
}

99
client/src/routes/Search/Filters.tsx Normal file
View File

@ -0,0 +1,99 @@
import React, { PureComponent } from 'react'
import Button from '../../components/atoms/Button'
import styles from './Filters.module.scss'
import data from '../../data/form-publish.json'
const { steps } = data
const labelCategories =
steps &&
steps[1].fields &&
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
const filters = [
{ label: labelCategories, items: optionsCategories },
{ label: labelLicense, items: optionsLicense }
]
export default class Sidebar extends PureComponent<{
category: string
license: string
setCategory(category: string): void
setLicense(license: string): void
}> {
public render() {
const { category, license, setCategory, setLicense } = this.props
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
return (
<li
key={option}
className={
isActive ? styles.active : undefined
}
>
<Button
link
className={styles.option}
onClick={() =>
filter.label === 'Category'
? setCategory(option)
: setLicense(option)
}
>
{option}{' '}
</Button>
{isActive && (
<Button
link
className={styles.cancel}
title="Clear"
onClick={() =>
alert(
'TODO: Implement clearing'
)
}
>
&times;
</Button>
)}
</li>
)
})}
</ul>
</div>
))
}
}

24
client/src/routes/Search/Sidebar.module.scss
View File

@ -11,27 +11,3 @@
}
}
}
.filter {
// ul {
// padding-left: 0;
// li:before {
// display: none;
// }
// }
button {
text-align: left;
color: $brand-grey;
font-size: $font-size-small;
}
}
.filterTitle {
font-size: $font-size-base;
color: $brand-grey-light;
margin-top: 0;
border-bottom: 1px solid $brand-grey-lighter;
padding-bottom: $spacer / 2;
}

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

@ -1,65 +1,46 @@
import React, { PureComponent } from 'react'
import Button from '../../components/atoms/Button'
import React from 'react'
import Input from '../../components/atoms/Form/Input'
import Filters from './Filters'
import styles from './Sidebar.module.scss'
import data from '../../data/form-publish.json'
export default class Sidebar extends PureComponent<{
export default function Sidebar({
searchInput,
inputChange,
category,
license,
setCategory,
setLicense
}: {
search: string
searchInput: string
inputChange: any
category: string
license: string
}> {
public render() {
const { search, inputChange, category, license } = this.props
const { steps }: any = data
setCategory(category: string): void
setLicense(license: string): void
}) {
return (
<aside className={styles.sidebar}>
<Input
type="search"
name="searchInput"
label="Search"
placeholder="e.g. shapes of plants"
value={searchInput}
onChange={inputChange}
// group={
// <Button primary onClick={search}>
// Search
// </Button>
// }
/>
return (
<aside className={styles.sidebar}>
<Input
type="search"
name="search"
label="Search"
placeholder="e.g. shapes of plants"
value={search}
onChange={inputChange}
group={
<Button primary onClick={search}>
Search
</Button>
}
/>
<div className={styles.filter}>
<h3 className={styles.filterTitle}>Categories</h3>
<ul>
{steps[1].fields.categories.options.map(
(category: string) => (
<li key={category}>
<Button link onClick={() => null}>
{category}
</Button>
</li>
)
)}
</ul>
</div>
<div className={styles.filter}>
<h3 className={styles.filterTitle}>License</h3>
<ul className={styles.filter}>
{steps[2].fields.license.options.map(
(license: string) => (
<li key={license}>
<Button link onClick={() => null}>
{license}
</Button>
</li>
)
)}
</ul>
</div>
</aside>
)
}
<Filters
category={category}
license={license}
setCategory={setCategory}
setLicense={setLicense}
/>
</aside>
)
}

65
client/src/routes/Search/index.tsx
View File

@ -25,9 +25,8 @@ interface SearchState {
totalPages: number
currentPage: number
isLoading: boolean
searchTerm: string
searchCategories: string
search: string
searchInput: string
category: string
license: string
}
@ -42,10 +41,8 @@ class Search extends PureComponent<SearchProps, SearchState> {
totalPages: 1,
currentPage: 1,
isLoading: true,
searchTerm: '',
searchCategories: '',
searchLicense: '',
search: '',
searchInput: '',
category: '',
license: ''
}
@ -56,15 +53,12 @@ class Search extends PureComponent<SearchProps, SearchState> {
let update: any = {}
if (text) {
update.searchTerm = decodeURIComponent(`${text}`)
update.search = decodeURIComponent(`${text}`)
}
if (categories) {
update.searchCategories = decodeURIComponent(`${categories}`)
update.category = decodeURIComponent(`${categories}`)
}
if (license) {
update.searchLicense = decodeURIComponent(`${license}`)
update.license = decodeURIComponent(`${license}`)
}
if (page) {
@ -74,10 +68,18 @@ class Search extends PureComponent<SearchProps, SearchState> {
this.setState(update, () => this.searchAssets())
}
// public componentDidUpdate(prevProps: any, prevState: any) {
// if (prevState.category !== this.state.category) {
// this.searchAssets()
// }
// }
private searchAssets = async () => {
const { ocean } = this.context
const { offset, currentPage, search, category, license } = this.state
const queryValues: any = {}
if (search) {
queryValues.text = [search]
}
@ -87,6 +89,7 @@ class Search extends PureComponent<SearchProps, SearchState> {
if (license) {
queryValues.license = [license]
}
const searchQuery = {
offset,
page: currentPage,
@ -118,7 +121,7 @@ class Search extends PureComponent<SearchProps, SearchState> {
this.props.history.push({
pathname: this.props.location.pathname,
search: `?text=${this.state.searchTerm}&page=${toPage}`
search: `?text=${this.state.search}&page=${toPage}`
})
this.setState({ currentPage: toPage, isLoading: true }, () =>
@ -134,36 +137,12 @@ class Search extends PureComponent<SearchProps, SearchState> {
} as any)
}
private search = (event: ChangeEvent<HTMLInputElement>) => {
let searchUrl = '?'
public setCategory = (category: string) => {
this.setState({ category }, () => this.searchAssets())
}
if (this.state.search) {
searchUrl = `${searchUrl}text=${encodeURIComponent(
this.state.search
)}&`
}
if (this.state.category) {
searchUrl = `${searchUrl}categories=${encodeURIComponent(
this.state.category
)}&`
}
if (this.state.license) {
searchUrl = `${searchUrl}license=${encodeURIComponent(
this.state.license
)}&`
}
this.props.history.push({
pathname: this.props.location.pathname,
search: searchUrl
})
this.setState(
{
searchTerm: this.state.search,
currentPage: 1,
isLoading: true
},
() => this.searchAssets()
)
public setLicense = (license: string) => {
this.setState({ license }, () => this.searchAssets())
}
public renderResults = () =>
@ -191,23 +170,27 @@ class Search extends PureComponent<SearchProps, SearchState> {
<div className={styles.content}>
<Sidebar
search={this.state.search}
searchInput={this.state.searchInput}
inputChange={this.inputChange}
category={this.state.category}
license={this.state.license}
setCategory={this.setCategory}
setLicense={this.setLicense}
/>
<div className={styles.contentResults}>
<div>
{!this.state.isLoading && (
<h2 className={styles.resultsTitle}>
{totalResults} results for{' '}
<span>
{decodeURIComponent(
this.state.searchTerm ||
this.state.searchCategories
this.state.search ||
this.state.category
)}
</span>
</h2>
)}
{this.renderResults()}
<Pagination