Skip to content

Commit 51aac16

Browse files
siddharthlatestsiddharthlatest
committed
init
0 parents  commit 51aac16

File tree

6 files changed

+172
-0
lines changed

6 files changed

+172
-0
lines changed

‎.gitignore‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
# See https://help.github.com/ignore-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
6+
# testing
7+
/coverage
8+
9+
# production
10+
/build
11+
12+
# misc
13+
.DS_Store
14+
.env.local
15+
.env.development.local
16+
.env.test.local
17+
.env.production.local
18+
19+
npm-debug.log*
20+
yarn-debug.log*
21+
yarn-error.log*
22+
23+
*.swp

‎README.md‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
### Reactivesearch Starter App
2+
3+
This project was bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app).
4+
5+
Step-by-step guide available at [ReactiveSearch Quickstart Doc](https://opensource.appbase.io/reactive-manual/getting-started/reactivesearch.html).
6+
7+
### Develop
8+
9+
```
10+
yarn && yarn start
11+
```
12+
13+
should open something like this
14+
15+
![](https://i.imgur.com/Zgp5lGk.png)
16+
17+
18+
### Configure
19+
20+
The ReactiveSearch components code resides in `src/App.js` file. For building this app, we use:
21+
22+
1. [appbase.io](https://appbase.io) for the backend, any Elasticsearch cluster/index should work.
23+
2. Flex based layout system from [reflexbox](https://github.com/jxnblk/reflexbox), you can use Materialize's or Bootstrap's grid, or roll your own layout - the ReactiveSearch components are layout agnostic.
24+
3. The following components:
25+
- **ReactiveBase** - ReactiveBase is the provider component that connects the UI with the backend app.
26+
- **CategorySearch** - CategorySearch component provides a search box UI with categorized suggestions.
27+
- **SingleRange** - SingleRange component is used for displaying the star ratings.
28+
- **ResultCard** - ResultCard component is used for displaying the **hits** as a card layout.

‎favicon.ico‎

3.78 KB
Binary file not shown.

‎index.html‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6+
<meta name="theme-color" content="#000000">
7+
<!--
8+
manifest.json provides metadata used when your web app is added to the
9+
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
10+
-->
11+
<link rel="manifest" href="manifest.json">
12+
<link rel="shortcut icon" href="favicon.ico">
13+
<!--
14+
Notice the use of %PUBLIC_URL% in the tags above.
15+
It will be replaced with the URL of the `public` folder during the build.
16+
Only files inside the `public` folder can be referenced from the HTML.
17+
18+
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
19+
work correctly both with client-side routing and a non-root public URL.
20+
Learn how to configure a non-root public URL by running `npm run build`.
21+
-->
22+
<title>ReactiveSearch App</title>
23+
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.38/browser.min.js"></script>
24+
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.development.js"></script>
25+
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.development.js"></script>
26+
<script src="https://rawgit.com/appbaseio/reactivesearch/dev/packages/web/umd/reactivesearch.js"></script>
27+
</head>
28+
<body>
29+
<noscript>
30+
You need to enable JavaScript to run this app.
31+
</noscript>
32+
<div id="root"></div>
33+
<script type="text/babel" data-presets="react" src="src/App.js"></script>
34+
<!--
35+
This HTML file is a template.
36+
If you open it directly in the browser, you will see an empty page.
37+
38+
You can add webfonts, meta tags, or analytics to this file.
39+
The build step will place the bundled scripts into the <body> tag.
40+
41+
To begin the development, run `npm start` or `yarn start`.
42+
To create a production bundle, use `npm run build` or `yarn build`.
43+
-->
44+
</body>
45+
</html>

‎src/App.js‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
const { ReactiveBase, CategorySearch, SingleRange, ResultCard } = ReactiveSearch;
2+
3+
class App extends React.Component {
4+
render() {
5+
return (
6+
<ReactiveBase
7+
app="car-store"
8+
credentials="cf7QByt5e:d2d60548-82a9-43cc-8b40-93cbbe75c34c">
9+
<div style={{ display: "flex", "flexDirection": "row" }}>
10+
<div style={{ display: "flex", "flexDirection": "column", "width": "40%" }}>
11+
<CategorySearch
12+
componentId="searchbox"
13+
dataField="name"
14+
categoryField="brand.raw"
15+
placeholder="Search for cars"
16+
style={{
17+
padding: "5px",
18+
"marginTop": "10px"
19+
}}
20+
/>
21+
<SingleRange
22+
componentId="ratingsfilter"
23+
title="Filter by ratings"
24+
dataField="rating"
25+
data={[
26+
{"start": "4", "end": "5", "label": "4 stars and up"},
27+
{"start": "3", "end": "5", "label": "3 stars and up"},
28+
{"start": "2", "end": "5", "label": "2 stars and up"},
29+
{"start": "1", "end": "5", "label": "see all ratings"},
30+
]}
31+
defaultSelected="4 stars and up"
32+
style={{
33+
padding: "5px",
34+
"marginTop": "10px"
35+
}}
36+
/>
37+
</div>
38+
<ResultCard
39+
componentId="result"
40+
title="Results"
41+
from={0}
42+
size={6}
43+
pagination={true}
44+
react={{
45+
and: ["searchbox", "ratingsfilter"]
46+
}}
47+
onData={(res) => {
48+
return {
49+
image: "https://www.enterprise.com/content/dam/global-vehicle-images/cars/FORD_FOCU_2012-1.png",
50+
title: res.name,
51+
desc: res.brand + " " + "★".repeat(res.rating)
52+
}
53+
}}
54+
style={{
55+
"width": "60%",
56+
"textAlign": "center"
57+
}}
58+
/>
59+
</div>
60+
</ReactiveBase>
61+
);
62+
}
63+
}
64+
65+
ReactDOM.render(
66+
<App></App>,
67+
document.getElementById('root')
68+
);

‎src/App.test.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import React from 'react';
2+
import ReactDOM from 'react-dom';
3+
import App from './App';
4+
5+
it('renders without crashing', () => {
6+
const div = document.createElement('div');
7+
ReactDOM.render(<App />, div);
8+
});

0 commit comments

Comments
 (0)