switch back to server search results

client/src/routes/Search/FilterItem.test.tsx

@@ -3,16 +3,16 @@ import { render, fireEvent } from '@testing-library/react'
 import FilterItem from './FilterItem'
 
 describe('FilterItem', () => {
-    const filterByCategory = jest.fn()
+    const setCategory = jest.fn()
-    const filterByLicense = jest.fn()
+    const setLicense = jest.fn()
 
     it('renders without crashing', () => {
         const { container } = render(
             <FilterItem
                 isActive={false}
                 filter={{ label: 'Category' }}
-                filterByCategory={filterByCategory}
+                setCategory={setCategory}
-                filterByLicense={filterByLicense}
+                setLicense={setLicense}
                 option="Hello"
             />
         )
@@ -24,13 +24,13 @@ describe('FilterItem', () => {
             <FilterItem
                 isActive
                 filter={{ label: 'Category' }}
-                filterByCategory={filterByCategory}
+                setCategory={setCategory}
-                filterByLicense={filterByLicense}
+                setLicense={setLicense}
                 option="Hello"
             />
         )
         fireEvent.click(getByText(/Hello/))
-        expect(filterByCategory).toHaveBeenCalled()
+        expect(setCategory).toHaveBeenCalled()
         fireEvent.click(getByTitle('Clear'))
     })
 
@@ -39,13 +39,13 @@ describe('FilterItem', () => {
             <FilterItem
                 isActive
                 filter={{ label: 'License' }}
-                filterByCategory={filterByCategory}
+                setCategory={setCategory}
-                filterByLicense={filterByLicense}
+                setLicense={setLicense}
                 option="Hello"
             />
         )
         fireEvent.click(getByText(/Hello/))
-        expect(filterByLicense).toHaveBeenCalled()
+        expect(setLicense).toHaveBeenCalled()
         fireEvent.click(getByTitle('Clear'))
     })
 })

client/src/routes/Search/FilterItem.tsx

@@ -5,15 +5,15 @@ import styles from './FilterItem.module.scss'
 export default function FilterItem({
     isActive,
     filter,
-    filterByCategory,
+    setCategory,
-    filterByLicense,
+    setLicense,
     option
 }: {
     isActive: boolean
     filter: any
     option: string
-    filterByCategory(category: string): void
+    setCategory(category: string): void
-    filterByLicense(license: string): void
+    setLicense(license: string): void
 }) {
     return (
         <li className={isActive ? styles.active : styles.item}>
@@ -22,8 +22,8 @@ export default function FilterItem({
                 className={styles.option}
                 onClick={() =>
                     filter.label === 'Category'
-                        ? filterByCategory(option)
+                        ? setCategory(option)
-                        : filterByLicense(option)
+                        : setLicense(option)
                 }
             >
                 {option}{' '}
@@ -35,8 +35,8 @@ export default function FilterItem({
                     title="Clear"
                     onClick={() =>
                         filter.label === 'Category'
-                            ? filterByCategory('')
+                            ? setCategory('')
-                            : filterByLicense('')
+                            : setLicense('')
                     }
                 >
                     &times;

client/src/routes/Search/Results.tsx

@@ -6,14 +6,12 @@ import Pagination from '../../components/molecules/Pagination'
 import styles from './Results.module.scss'
 
 export default function Results({
-    title,
     results,
     totalResults,
     totalPages,
     currentPage,
     handlePageClick
 }: {
-    title: string
     results: any[]
     totalResults: number
     totalPages: number
@@ -23,7 +21,7 @@ export default function Results({
     return results && results.length ? (
         <>
             <h2 className={styles.resultsTitle}>
-                {totalResults} results for <span>{title}</span>
+                {totalResults} {totalResults === 1 ? 'result' : 'results'}
             </h2>
             <div className={styles.results}>
                 {results.map((asset: any) => (

client/src/routes/Search/Sidebar.tsx

@@ -43,14 +43,14 @@ export default function Sidebar({
     category,
     license,
     results,
-    filterByCategory,
+    setCategory,
-    filterByLicense
+    setLicense
 }: {
     category: string
     license: string
     results: any[]
-    filterByCategory(category: string): void
+    setCategory(category: string): void
-    filterByLicense(license: string): void
+    setLicense(license: string): void
 }) {
     const { filterCategories, filterLicenses } = getFilterMetadata(results)
 
@@ -80,8 +80,8 @@ export default function Sidebar({
                                             key={shortid.generate()}
                                             isActive={isActive}
                                             filter={filter}
-                                            filterByCategory={filterByCategory}
+                                            setCategory={setCategory}
-                                            filterByLicense={filterByLicense}
+                                            setLicense={setLicense}
                                             option={option}
                                         />
                                     )

client/src/routes/Search/index.tsx

@@ -6,6 +6,7 @@ import Spinner from '../../components/atoms/Spinner'
 import Route from '../../components/templates/Route'
 import { User } from '../../context'
 import Content from '../../components/atoms/Content'
+import Button from '../../components/atoms/Button'
 import Input from '../../components/atoms/Form/Input'
 import withTracker from '../../hoc/withTracker'
 import Sidebar from './Sidebar'
@@ -19,7 +20,6 @@ interface SearchProps {
 
 interface SearchState {
     results: any[]
-    resultsFiltered: any[]
     totalResults: number
     offset: number
     totalPages: number
@@ -37,7 +37,6 @@ class Search extends PureComponent<SearchProps, SearchState> {
 
     public state = {
         results: [],
-        resultsFiltered: [],
         totalResults: 0,
         offset: 25,
         totalPages: 1,
@@ -69,7 +68,9 @@ class Search extends PureComponent<SearchProps, SearchState> {
         this.setState(update, () => this.searchAssets())
     }
 
-    private searchAssets = async () => {
+    private searchAssets = async (event?: any) => {
+        event && event.preventDefault()
+
         const { ocean } = this.context
         const { offset, currentPage, search, category, license } = this.state
 
@@ -112,7 +113,6 @@ class Search extends PureComponent<SearchProps, SearchState> {
             const search = await ocean.assets.query(searchQuery)
             this.setState({
                 results: search.results,
-                resultsFiltered: search.results,
                 totalResults: search.totalResults,
                 totalPages: search.totalPages,
                 isLoading: false
@@ -132,63 +132,15 @@ class Search extends PureComponent<SearchProps, SearchState> {
         )
     }
 
-    private inputChange = (
+    private inputChange = (event: ChangeEvent<HTMLInputElement>) => {
-        event: ChangeEvent<HTMLInputElement> | ChangeEvent<HTMLSelectElement>
+        if (this.state.search !== event.target.value)
-    ) => {
+            this.setState({ search: event.target.value })
-        this.setState(
-            {
-                [event.currentTarget.name]: event.currentTarget.value
-            } as any,
-            () => {
-                this.pendingSearch()
-            }
-        )
-    }
-
-    private pendingSearch = () => {
-        this.setState({ isLoading: true })
-        if (this.timeout) {
-            clearTimeout(this.timeout)
-        }
-        this.timeout = setTimeout(this.executeSearch, 500)
-    }
-
-    private executeSearch = () => {
-        this.timeout = false
-        this.searchAssets()
     }
 
     public setCategory = (category: string) => {
         this.setState({ category, isLoading: true }, () => this.searchAssets())
     }
 
-    public filterByCategory = (category: string) => {
-        const resultsFiltered: any[] = this.state.results.filter(
-            (asset: DDO) => {
-                const { metadata } = asset.findServiceByType('Metadata')
-                const { categories } = metadata.base
-                if (!categories) return true
-
-                return category === '' ? true : categories.includes(category)
-            }
-        )
-
-        this.setState({ resultsFiltered, category })
-    }
-
-    public filterByLicense = (name: string) => {
-        const resultsFiltered: any[] = this.state.results.filter(
-            (asset: any) => {
-                const { metadata } = asset.findServiceByType('Metadata')
-                const { license } = metadata.base
-
-                return name === '' ? true : license === name
-            }
-        )
-
-        this.setState({ resultsFiltered, license: name })
-    }
-
     public setLicense = (license: string) => {
         this.setState({ license, isLoading: true }, () => this.searchAssets())
     }
@@ -201,7 +153,6 @@ class Search extends PureComponent<SearchProps, SearchState> {
             search,
             category,
             license,
-            resultsFiltered,
             totalPages,
             currentPage
         } = this.state
@@ -209,19 +160,21 @@ class Search extends PureComponent<SearchProps, SearchState> {
         return (
             <Route title="Search">
                 <Content>
-                    <Input
+                    <form onSubmit={this.searchAssets}>
-                        type="search"
+                        <Input
-                        name="search"
+                            type="search"
-                        label=""
+                            name="search"
-                        placeholder="e.g. shapes of plants"
+                            label=""
-                        value={search}
+                            placeholder="e.g. shapes of plants"
-                        onChange={this.inputChange}
+                            value={search}
-                        // group={
+                            onChange={this.inputChange}
-                        //     <Button primary onClick={this.executeSearch}>
+                            group={
-                        //         Search
+                                <Button primary onClick={this.searchAssets}>
-                        //     </Button>
+                                    Search
-                        // }
+                                </Button>
-                    />
+                            }
+                        />
+                    </form>
                 </Content>
                 <Content wide>
                     <div className={styles.content}>
@@ -230,10 +183,7 @@ class Search extends PureComponent<SearchProps, SearchState> {
                                 <Spinner message="Searching..." />
                             ) : (
                                 <Results
-                                    title={decodeURIComponent(
+                                    results={results}
-                                        search || category
-                                    )}
-                                    results={resultsFiltered}
                                     totalResults={totalResults}
                                     totalPages={totalPages}
                                     currentPage={currentPage}
@@ -246,8 +196,8 @@ class Search extends PureComponent<SearchProps, SearchState> {
                             category={category}
                             license={license}
                             results={results}
-                            filterByCategory={this.filterByCategory}
+                            setCategory={this.setCategory}
-                            filterByLicense={this.filterByLicense}
+                            setLicense={this.setLicense}
                         />
                     </div>
                 </Content>