search from home to search page

package-lock.json

@@ -1097,6 +1097,12 @@
       "integrity": "sha512-eqz8c/0kwNi/OEHQfvIuJVLTst3in0e7uTKeuY+WL/zfKn0xVujOTp42bS/vUUokhK5P2BppLd9JXMOMHcgbjA==",
       "dev": true
     },
+    "@types/query-string": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/@types/query-string/-/query-string-6.2.0.tgz",
+      "integrity": "sha512-dnYqKg7eZ+t7ZhCuBtwLxjqON8yXr27hiu3zXfPqxfJSbWUZNwwISE0BJUxghlcKsk4lZSp7bdFSJBJVNWBfmA==",
+      "dev": true
+    },
     "@types/react": {
       "version": "16.7.20",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-16.7.20.tgz",
@@ -16064,13 +16070,12 @@
       "integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA=="
     },
     "query-string": {
-      "version": "5.1.1",
+      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/query-string/-/query-string-5.1.1.tgz",
+      "resolved": "https://registry.npmjs.org/query-string/-/query-string-6.2.0.tgz",
-      "integrity": "sha512-gjWOsm2SoGlgLEdAGt7a6slVOk9mGiXmPFMqrEhLQ68rhQuBnpfs3+EmlvqKyxnCo9/PPlF+9MtY02S1aFg+Jw==",
+      "integrity": "sha512-5wupExkIt8RYL4h/FE+WTg3JHk62e6fFPWtAZA9J5IWK1PfTfKkMS93HBUHcFpeYi9KsY5pFbh+ldvEyaz5MyA==",
       "requires": {
         "decode-uri-component": "^0.2.0",
-        "object-assign": "^4.1.0",
+        "strict-uri-encode": "^2.0.0"
-        "strict-uri-encode": "^1.0.0"
       }
     },
     "querystring": {
@@ -18684,9 +18689,9 @@
       "dev": true
     },
     "strict-uri-encode": {
-      "version": "1.1.0",
+      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz",
-      "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM="
+      "integrity": "sha1-ucczDHBChi9rFC3CdLvMWGbONUY="
     },
     "string-length": {
       "version": "2.0.0",
@@ -19874,6 +19879,14 @@
       "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=",
       "dev": true
     },
+    "typedarray-to-buffer": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz",
+      "integrity": "sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==",
+      "requires": {
+        "is-typedarray": "^1.0.0"
+      }
+    },
     "typescript": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.2.4.tgz",
@@ -20843,19 +20856,8 @@
       "integrity": "sha512-8p6ZLv+1JYa5Vs8oBn33Nn3VGFBbF+wVfO+b78RJS1Qf1uIOzjFVDk3XwYDD7rlz9G5BKpxhaQw+6EGQ7L02aw==",
       "requires": {
         "underscore": "1.8.3",
-        "web3-core-helpers": "1.0.0-beta.37"
+        "web3-core-helpers": "1.0.0-beta.37",
-      },
+        "websocket": "git://github.com/frozeman/WebSocket-Node.git#6c72925e3f8aaaea8dc8450f97627e85263999f2"
-      "dependencies": {
-        "websocket": {
-          "version": "git://github.com/frozeman/WebSocket-Node.git#6c72925e3f8aaaea8dc8450f97627e85263999f2",
-          "from": "git://github.com/frozeman/WebSocket-Node.git#6c72925e3f8aaaea8dc8450f97627e85263999f2",
-          "requires": {
-            "debug": "^2.2.0",
-            "nan": "^2.3.3",
-            "typedarray-to-buffer": "^3.1.2",
-            "yaeti": "^0.0.6"
-          }
-        }
       }
     },
     "web3-shh": {
@@ -21571,6 +21573,16 @@
         }
       }
     },
+    "websocket": {
+      "version": "git://github.com/frozeman/WebSocket-Node.git#6c72925e3f8aaaea8dc8450f97627e85263999f2",
+      "from": "git://github.com/frozeman/WebSocket-Node.git#browserifyCompatible",
+      "requires": {
+        "debug": "^2.2.0",
+        "nan": "^2.3.3",
+        "typedarray-to-buffer": "^3.1.2",
+        "yaeti": "^0.0.6"
+      }
+    },
     "websocket-driver": {
       "version": "0.7.0",
       "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.0.tgz",
@@ -21971,6 +21983,23 @@
         "timed-out": "^4.0.1",
         "url-set-query": "^1.0.0",
         "xhr": "^2.0.4"
+      },
+      "dependencies": {
+        "query-string": {
+          "version": "5.1.1",
+          "resolved": "https://registry.npmjs.org/query-string/-/query-string-5.1.1.tgz",
+          "integrity": "sha512-gjWOsm2SoGlgLEdAGt7a6slVOk9mGiXmPFMqrEhLQ68rhQuBnpfs3+EmlvqKyxnCo9/PPlF+9MtY02S1aFg+Jw==",
+          "requires": {
+            "decode-uri-component": "^0.2.0",
+            "object-assign": "^4.1.0",
+            "strict-uri-encode": "^1.0.0"
+          }
+        },
+        "strict-uri-encode": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz",
+          "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM="
+        }
       }
     },
     "xhr-request-promise": {
@@ -22023,6 +22052,11 @@
       "integrity": "sha1-bRX7qITAhnnA136I53WegR4H+kE=",
       "dev": true
     },
+    "yaeti": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/yaeti/-/yaeti-0.0.6.tgz",
+      "integrity": "sha1-8m9ITXJoTPQr7ft2lwqhYI+/lXc="
+    },
     "yallist": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",

package.json

@@ -16,6 +16,7 @@
   },
   "dependencies": {
     "@oceanprotocol/squid": "^0.2.7",
+    "query-string": "^6.2.0",
     "react": "^16.7.0",
     "react-dom": "^16.7.0",
     "react-router-dom": "^4.3.1",
@@ -24,6 +25,7 @@
   "devDependencies": {
     "@types/jest": "23.3.12",
     "@types/node": "10.12.18",
+    "@types/query-string": "^6.2.0",
     "@types/react": "16.7.20",
     "@types/react-dom": "16.0.11",
     "@types/react-router-dom": "^4.3.1",

src/Routes.tsx

@@ -4,7 +4,7 @@ import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
 import About from './pages/About'
 import Details from './pages/Details'
 import Home from './pages/Home'
-import List from './pages/List'
+import Search from './pages/Search'
 import NotFound from './pages/NotFound'
 import Publish from './pages/Publish'
 
@@ -14,7 +14,7 @@ const Routes = () => (
             <Route exact={true} component={Home} path="/" />
             <Route component={About} path="/about" />
             <Route component={Publish} path="/publish" />
-            <Route component={List} path="/list" />
+            <Route component={Search} path="/search" />
             <Route component={Details} path="/asset/:did" />
             <Route component={NotFound} />
         </Switch>

src/ocean.ts

@@ -22,7 +22,7 @@ import {
     secretStoreScheme,
     threshold,
     verbose
-} from '../config/ocean'
+} from './config'
 
 export async function provideOcean() {
     const nodeUri = `${nodeScheme}://${nodeHost}:${nodePort}`

src/pages/About.module.scss

@@ -0,0 +1,16 @@
+@import '../styles/variables';
+
+.about {
+    background: $brand-black;
+    color: $brand-white;
+    min-height: calc(100vh - #{$page-frame} * 2);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-wrap: wrap;
+
+    > div {
+        text-align: center;
+        width: 100%;
+    }
+}

src/pages/About.tsx

@@ -1,9 +1,19 @@
 import React, { Component } from 'react'
+import Button from '../components/atoms/Button'
+import styles from './About.module.scss'
 
 class About extends Component {
     public render() {
         return (
-            <div>About</div>
+            <div className={styles.about}>
+
+                <Button>I am a button</Button>
+                <Button primary={true}>I am a primary button</Button>
+                <Button href="https://hello.com">
+                    I am a link disguised as a button
+                </Button>
+
+            </div>
         )
     }
 }

src/pages/Home.tsx

@@ -1,24 +1,45 @@
-import React, { Component } from 'react'
+import React, { ChangeEvent, Component, FormEvent } from 'react'
 import Button from '../components/atoms/Button'
 import styles from './Home.module.scss'
 
-// retrieve by tag? category?
+interface IState {
-// search input -> redirect to list
+    search?: string
+}
+
+interface IProps {
+    history: any
+}
+
+class Home extends Component<IProps, IState> {
+
+    public state = { search: '' }
 
-class Home extends Component {
     public render() {
         return (
             <div className={styles.home}>
                 <div>Home</div>
 
-                <Button>I am a button</Button>
+                <div>
-                <Button primary={true}>I am a primary button</Button>
+                    <form onSubmit={this.searchAssets}>
-                <Button href="https://hello.com">
+                        <input type="text" name="search" value={this.state.search} onChange={this.inputChange} />
-                    I am a link disguised as a button
+                        <Button>Search</Button>
-                </Button>
+                    </form>
+                </div>
+
             </div>
         )
     }
+
+    private inputChange = (event: ChangeEvent<HTMLInputElement>) => {
+        this.setState({
+            [event.target.name]: event.target.value
+        })
+    }
+
+    private searchAssets = (event: FormEvent<HTMLFormElement>) => {
+        event.preventDefault()
+        this.props.history.push(`/search?q=${this.state.search}`)
+    }
 }
 
 export default Home

src/pages/List.tsx

@@ -1,11 +0,0 @@
-import React, { Component } from 'react'
-
-class List extends Component {
-    public render() {
-        return (
-            <div>List</div>
-        )
-    }
-}
-
-export default List

src/pages/Search.tsx

@@ -0,0 +1,44 @@
+import React, { Component } from 'react'
+import { provideOcean } from '../ocean'
+import queryString from 'query-string'
+
+interface IState {
+    results?: Array<any>
+}
+
+interface IProps {
+    location: any,
+    history: any
+}
+
+class Search extends Component<IProps, IState>  {
+
+    public state = { results: [] }
+
+    async componentDidMount() {
+      // temporary ocean init and asset retrieval
+      const { ocean } = await provideOcean()
+      const searchParams = queryString.parse(this.props.location.search)
+      const queryRequest: any = {
+          offset: 100,
+          page: 0,
+          query: {
+              $text: {
+                  $search: searchParams.q
+              }
+          }
+      }
+      const assets = await ocean.searchAssets(queryRequest)
+      this.setState({results:assets})
+    }
+
+    public render() {
+        return (
+            <div>
+                kra
+            </div>
+        )
+    }
+}
+
+export default Search