From 7351967e710be1f5e10a7d573817d32c806d04eb Mon Sep 17 00:00:00 2001 From: Jernej Pregelj Date: Wed, 23 Jan 2019 17:39:34 +0100 Subject: [PATCH] search from home to search page --- package-lock.json | 76 +++++++++++++++++++++++--------- package.json | 2 + src/Routes.tsx | 4 +- config/ocean.ts => src/config.ts | 0 src/ocean.ts | 2 +- src/pages/About.module.scss | 16 +++++++ src/pages/About.tsx | 12 ++++- src/pages/Home.tsx | 39 ++++++++++++---- src/pages/List.tsx | 11 ----- src/pages/Search.tsx | 44 ++++++++++++++++++ 10 files changed, 161 insertions(+), 45 deletions(-) rename config/ocean.ts => src/config.ts (100%) create mode 100644 src/pages/About.module.scss delete mode 100644 src/pages/List.tsx create mode 100644 src/pages/Search.tsx diff --git a/package-lock.json b/package-lock.json index 0e05f62..80ad0da 100644 --- a/package-lock.json +++ b/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", - "resolved": "https://registry.npmjs.org/query-string/-/query-string-5.1.1.tgz", - "integrity": "sha512-gjWOsm2SoGlgLEdAGt7a6slVOk9mGiXmPFMqrEhLQ68rhQuBnpfs3+EmlvqKyxnCo9/PPlF+9MtY02S1aFg+Jw==", + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/query-string/-/query-string-6.2.0.tgz", + "integrity": "sha512-5wupExkIt8RYL4h/FE+WTg3JHk62e6fFPWtAZA9J5IWK1PfTfKkMS93HBUHcFpeYi9KsY5pFbh+ldvEyaz5MyA==", "requires": { "decode-uri-component": "^0.2.0", - "object-assign": "^4.1.0", - "strict-uri-encode": "^1.0.0" + "strict-uri-encode": "^2.0.0" } }, "querystring": { @@ -18684,9 +18689,9 @@ "dev": true }, "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=" + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz", + "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" - }, - "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-core-helpers": "1.0.0-beta.37", + "websocket": "git://github.com/frozeman/WebSocket-Node.git#6c72925e3f8aaaea8dc8450f97627e85263999f2" } }, "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", diff --git a/package.json b/package.json index 8df5627..1466cf1 100644 --- a/package.json +++ b/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", diff --git a/src/Routes.tsx b/src/Routes.tsx index c699449..1ac528a 100644 --- a/src/Routes.tsx +++ b/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 = () => ( - + diff --git a/config/ocean.ts b/src/config.ts similarity index 100% rename from config/ocean.ts rename to src/config.ts diff --git a/src/ocean.ts b/src/ocean.ts index 949b1e7..4fcc2b1 100644 --- a/src/ocean.ts +++ b/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}` diff --git a/src/pages/About.module.scss b/src/pages/About.module.scss new file mode 100644 index 0000000..6aeff00 --- /dev/null +++ b/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%; + } +} diff --git a/src/pages/About.tsx b/src/pages/About.tsx index 9788fa7..e353596 100644 --- a/src/pages/About.tsx +++ b/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 ( -
About
+
+ + + + + +
) } } diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index 7411298..ffe8919 100644 --- a/src/pages/Home.tsx +++ b/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? -// search input -> redirect to list +interface IState { + search?: string +} + +interface IProps { + history: any +} + +class Home extends Component { + + public state = { search: '' } -class Home extends Component { public render() { return (
Home
- - - +
+
+ + +
+
+
) } + + private inputChange = (event: ChangeEvent) => { + this.setState({ + [event.target.name]: event.target.value + }) + } + + private searchAssets = (event: FormEvent) => { + event.preventDefault() + this.props.history.push(`/search?q=${this.state.search}`) + } } export default Home diff --git a/src/pages/List.tsx b/src/pages/List.tsx deleted file mode 100644 index 5fd849d..0000000 --- a/src/pages/List.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import React, { Component } from 'react' - -class List extends Component { - public render() { - return ( -
List
- ) - } -} - -export default List diff --git a/src/pages/Search.tsx b/src/pages/Search.tsx new file mode 100644 index 0000000..2c7b214 --- /dev/null +++ b/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 +} + +interface IProps { + location: any, + history: any +} + +class Search extends Component { + + 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 ( +
+ kra +
+ ) + } +} + +export default Search