From bd27ed37b18838d068562131ef7a287b2db3c53b Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Fri, 2 Aug 2019 00:56:06 +0200 Subject: [PATCH] sidebar component splitup, active states, sidebar styling --- client/src/components/atoms/Button.tsx | 3 +- .../molecules/AssetTeaser.module.scss | 2 +- client/src/routes/Home/index.tsx | 2 +- client/src/routes/Search/Filters.module.scss | 50 ++++++++++ client/src/routes/Search/Filters.tsx | 99 +++++++++++++++++++ client/src/routes/Search/Sidebar.module.scss | 24 ----- client/src/routes/Search/Sidebar.tsx | 93 +++++++---------- client/src/routes/Search/index.tsx | 65 +++++------- 8 files changed, 214 insertions(+), 124 deletions(-) create mode 100644 client/src/routes/Search/Filters.module.scss create mode 100644 client/src/routes/Search/Filters.tsx diff --git a/client/src/components/atoms/Button.tsx b/client/src/components/atoms/Button.tsx index a192fca..eff023c 100644 --- a/client/src/components/atoms/Button.tsx +++ b/client/src/components/atoms/Button.tsx @@ -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 diff --git a/client/src/components/molecules/AssetTeaser.module.scss b/client/src/components/molecules/AssetTeaser.module.scss index 212ab2b..73644e7 100644 --- a/client/src/components/molecules/AssetTeaser.module.scss +++ b/client/src/components/molecules/AssetTeaser.module.scss @@ -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; diff --git a/client/src/routes/Home/index.tsx b/client/src/routes/Home/index.tsx index b55ffe3..7901225 100644 --- a/client/src/routes/Home/index.tsx +++ b/client/src/routes/Home/index.tsx @@ -58,7 +58,7 @@ class Home extends PureComponent {

Explore 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) => ( { + public render() { + const { category, license, setCategory, setLicense } = this.props + + return filters.map(filter => ( +
+

{filter.label}

+
    + {filter.items && + filter.items + .sort((a: string, b: string) => a.localeCompare(b)) // sort alphabetically + .map((option: string) => { + const isActive = + category === option || license === option + + return ( +
  • + + {isActive && ( + + )} +
    • + ) + })} +
+
+ )) + } +} diff --git a/client/src/routes/Search/Sidebar.module.scss b/client/src/routes/Search/Sidebar.module.scss index 463bf10..126c599 100644 --- a/client/src/routes/Search/Sidebar.module.scss +++ b/client/src/routes/Search/Sidebar.module.scss @@ -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; -} diff --git a/client/src/routes/Search/Sidebar.tsx b/client/src/routes/Search/Sidebar.tsx index 0b0d12c..1c55768 100644 --- a/client/src/routes/Search/Sidebar.tsx +++ b/client/src/routes/Search/Sidebar.tsx @@ -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 ( + + ) } diff --git a/client/src/routes/Search/index.tsx b/client/src/routes/Search/index.tsx index 62feeac..856ae2f 100644 --- a/client/src/routes/Search/index.tsx +++ b/client/src/routes/Search/index.tsx @@ -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 { totalPages: 1, currentPage: 1, isLoading: true, - searchTerm: '', - searchCategories: '', - searchLicense: '', search: '', + searchInput: '', category: '', license: '' } @@ -56,15 +53,12 @@ class Search extends PureComponent { 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 { 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 { if (license) { queryValues.license = [license] } + const searchQuery = { offset, page: currentPage, @@ -118,7 +121,7 @@ class Search extends PureComponent { 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 { } as any) } - private search = (event: ChangeEvent) => { - 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 {
-
+
{!this.state.isLoading && (

{totalResults} results for{' '} {decodeURIComponent( - this.state.searchTerm || - this.state.searchCategories + this.state.search || + this.state.category )}

)} + {this.renderResults()}