sidebar component splitup, active states, sidebar styling

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

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;

client/src/routes/Home/index.tsx

@@ -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}

client/src/routes/Search/Filters.module.scss

@@ -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;
+}

client/src/routes/Search/Filters.tsx

@@ -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>
+        ))
+    }
+}

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;
-}

client/src/routes/Search/Sidebar.tsx

@@ -1,65 +1,46 @@
-import React, { PureComponent } from 'react'
+import React from 'react'
-import Button from '../../components/atoms/Button'
 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
-}> {
+    setCategory(category: string): void
-    public render() {
+    setLicense(license: string): void
-        const { search, inputChange, category, license } = this.props
+}) {
-        const { steps }: any = data
-
     return (
         <aside className={styles.sidebar}>
             <Input
                 type="search"
-                    name="search"
+                name="searchInput"
                 label="Search"
                 placeholder="e.g. shapes of plants"
-                    value={search}
+                value={searchInput}
                 onChange={inputChange}
-                    group={
+                // group={
-                        <Button primary onClick={search}>
+                //     <Button primary onClick={search}>
-                            Search
+                //         Search
-                        </Button>
+                //     </Button>
-                    }
+                // }
             />
 
-                <div className={styles.filter}>
+            <Filters
-                    <h3 className={styles.filterTitle}>Categories</h3>
+                category={category}
-                    <ul>
+                license={license}
-                        {steps[1].fields.categories.options.map(
+                setCategory={setCategory}
-                            (category: string) => (
+                setLicense={setLicense}
-                                <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>
     )
 }
-}

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<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>) => {
+    public setCategory = (category: string) => {
-        let searchUrl = '?'
+        this.setState({ category }, () => this.searchAssets())
+    }
 
-        if (this.state.search) {
+    public setLicense = (license: string) => {
-            searchUrl = `${searchUrl}text=${encodeURIComponent(
+        this.setState({ license }, () => this.searchAssets())
-                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 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.search ||
-                                                this.state.searchCategories
+                                                this.state.category
                                         )}
                                     </span>
                                 </h2>
                             )}
+
                             {this.renderResults()}
 
                             <Pagination