search partially working

client/src/routes/Search/Filters.tsx

@@ -34,7 +34,7 @@ const filters = [
     { label: labelLicense, items: optionsLicense }
 ]
 
-export default class Sidebar extends PureComponent<{
+export default class Filters extends PureComponent<{
     category: string
     license: string
     setCategory(category: string): void
@@ -81,9 +81,9 @@ export default class Sidebar extends PureComponent<{
                                                 className={styles.cancel}
                                                 title="Clear"
                                                 onClick={() =>
-                                                    alert(
-                                                        'TODO: Implement clearing'
-                                                    )
+                                                    filter.label === 'Category'
+                                                        ? setCategory('')
+                                                        : setLicense('')
                                                 }
                                             >
                                                 &times;

client/src/routes/Search/Sidebar.tsx

@@ -4,7 +4,7 @@ import Filters from './Filters'
 import styles from './Sidebar.module.scss'
 
 export default function Sidebar({
-    searchInput,
+    search,
     inputChange,
     category,
     license,
@@ -12,7 +12,6 @@ export default function Sidebar({
     setLicense
 }: {
     search: string
-    searchInput: string
     inputChange: any
     category: string
     license: string
@@ -23,10 +22,10 @@ export default function Sidebar({
         <aside className={styles.sidebar}>
             <Input
                 type="search"
-                name="searchInput"
+                name="search"
                 label="Search"
                 placeholder="e.g. shapes of plants"
-                value={searchInput}
+                value={search}
                 onChange={inputChange}
                 // group={
                 //     <Button primary onClick={search}>

client/src/routes/Search/index.tsx

@@ -26,7 +26,6 @@ interface SearchState {
     currentPage: number
     isLoading: boolean
     search: string
-    searchInput: string
     category: string
     license: string
 }
@@ -42,7 +41,6 @@ class Search extends PureComponent<SearchProps, SearchState> {
         currentPage: 1,
         isLoading: true,
         search: '',
-        searchInput: '',
         category: '',
         license: ''
     }
@@ -68,27 +66,33 @@ 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
 
+        let urlString = '?'
         const queryValues: any = {}
-
         if (search) {
             queryValues.text = [search]
+            urlString += `text=${search}&`
         }
         if (category) {
             queryValues.categories = [category]
+            urlString += `categories=${category}&`
         }
         if (license) {
             queryValues.license = [license]
+            urlString += `license=${license}&`
         }
+        if (currentPage !== 1) {
+            urlString += `page=${currentPage}&`
+        }
+
+        // update url
+        this.props.history.push({
+            pathname: this.props.location.pathname,
+            search: urlString
+        })
 
         const searchQuery = {
             offset,
@@ -119,11 +123,6 @@ class Search extends PureComponent<SearchProps, SearchState> {
         // react-pagination starts counting at 0, we start at 1
         const toPage = data.selected + 1
 
-        this.props.history.push({
-            pathname: this.props.location.pathname,
-            search: `?text=${this.state.search}&page=${toPage}`
-        })
-
         this.setState({ currentPage: toPage, isLoading: true }, () =>
             this.searchAssets()
         )
@@ -134,7 +133,9 @@ class Search extends PureComponent<SearchProps, SearchState> {
     ) => {
         this.setState({
             [event.currentTarget.name]: event.currentTarget.value
-        } as any)
+        } as any, () => {
+            this.searchAssets()
+        })
     }
 
     public setCategory = (category: string) => {
@@ -170,7 +171,6 @@ 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}