-
Notifications
You must be signed in to change notification settings - Fork 9
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
simplify flex layout and use inline styles
- Loading branch information
1 parent
fb8a624
commit eeda113
Showing
4 changed files
with
61 additions
and
147 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,98 +1,66 @@ | ||
| import React, { Component } from 'react'; | ||
| import './App.css'; | ||
| // reactivesearch components | ||
| import { | ||
| ReactiveBase, | ||
| CategorySearch, | ||
| SingleRange, | ||
| ResultCard | ||
| } from '@appbaseio/reactivesearch'; | ||
| // For layouts, you can use a layout system of your choice | ||
| import { Flex, Box } from 'reflexbox'; | ||
| import { ReactiveBase, CategorySearch, SingleRange, ResultCard } from '@appbaseio/reactivesearch'; | ||
|
|
||
| class App extends Component { | ||
|
|
||
| // takes one hit response from query and returns it | ||
| // in the ResultCard format to render UI view. | ||
| onData({ _source: res }) { | ||
| const result = { | ||
| image: "https://www.enterprise.com/content/dam/global-vehicle-images/cars/FORD_FOCU_2012-1.png", | ||
| title: res.name, | ||
| desc: res.brand + " " + "★".repeat(res.rating), | ||
| url: "#" | ||
| }; | ||
| return result; | ||
| } | ||
|
|
||
| render() { | ||
| return ( | ||
| <ReactiveBase | ||
| app="car-store" | ||
| credentials="cf7QByt5e:d2d60548-82a9-43cc-8b40-93cbbe75c34c"> | ||
| <Flex column={false} className="flex-wrapper"> | ||
| <Flex column w={[1, 1, 1/3]} wrap> | ||
| <Box m={2} pt={3}> | ||
| <CategorySearch | ||
| componentId="SearchSensor" | ||
| dataField="name" | ||
| categoryField="brand.raw" | ||
| placeholder="Search Cars" | ||
| /> | ||
| </Box> | ||
| <Box m={2} pt={2}> | ||
| <SingleRange | ||
| componentId="RatingsSensor" | ||
| dataField="rating" | ||
| title="RatingsFilter" | ||
| data={ | ||
| [{ start: 4, end: 5, label: "4 stars and up" }, | ||
| { start: 3, end: 5, label: "3 stars and up" }, | ||
| { start: 2, end: 5, label: "2 stars and up" }, | ||
| { start: 1, end: 5, label: "> 1 stars" }] | ||
| } | ||
| defaultSelected={"4 stars and up"} | ||
| /> | ||
| </Box> | ||
| </Flex> | ||
| <Flex w={[1, 1, 2/3]} wrap> | ||
| <ResultCard | ||
| innerClass={{ | ||
| "resultstats": "resultstats" | ||
| }} | ||
| className="results" | ||
| componentId="SearchResult" | ||
| dataField="name" | ||
| title="Results" | ||
| from={0} | ||
| size={6} | ||
| pagination | ||
| onData={this.onData} | ||
| sortOptions={[ | ||
| { | ||
| label: "Lowest Price First", | ||
| dataField: "price", | ||
| sortBy: "asc" | ||
| }, | ||
| { | ||
| label: "Highest Price First", | ||
| dataField: "price", | ||
| sortBy: "desc" | ||
| }, | ||
| { | ||
| label: "Most rated", | ||
| dataField: "rating", | ||
| sortBy: "desc" | ||
| } | ||
| ]} | ||
| react={{ | ||
| and: ["SearchSensor", "RatingsSensor"] | ||
| }} | ||
| /> | ||
| </Flex> | ||
| </Flex> | ||
| </ReactiveBase> | ||
| ); | ||
| } | ||
| render() { | ||
| return ( | ||
| <ReactiveBase | ||
| app="car-store" | ||
| credentials="cf7QByt5e:d2d60548-82a9-43cc-8b40-93cbbe75c34c"> | ||
| <div style={{ display: "flex", "flex-direction": "row" }}> | ||
| <div style={{ display: "flex", "flex-direction": "column", "width": "40%" }}> | ||
| <CategorySearch | ||
| componentId="searchbox" | ||
| dataField="name" | ||
| categoryField="brand.raw" | ||
| placeholder="Search for cars" | ||
| style={{ | ||
| padding: "5px", | ||
| "margin-top": "10px" | ||
| }} | ||
| /> | ||
| <SingleRange | ||
| componentId="ratingsfilter" | ||
| title="Filter by ratings" | ||
| dataField="rating" | ||
| data={[ | ||
| {"start": "4", "end": "5", "label": "4 stars and up"}, | ||
| {"start": "3", "end": "5", "label": "3 stars and up"}, | ||
| {"start": "2", "end": "5", "label": "2 stars and up"}, | ||
| {"start": "1", "end": "5", "label": "see all ratings"}, | ||
| ]} | ||
| defaultSelected="4 stars and up" | ||
| style={{ | ||
| padding: "5px", | ||
| "margin-top": "10px" | ||
| }} | ||
| /> | ||
| </div> | ||
| <ResultCard | ||
| componentId="result" | ||
| title="Results" | ||
| from={0} | ||
| size={6} | ||
| pagination={true} | ||
| react={{ | ||
| and: ["searchbox", "ratingsfilter"] | ||
| }} | ||
| onData={({_source: res}) => { | ||
| return { | ||
| image: "https://www.enterprise.com/content/dam/global-vehicle-images/cars/FORD_FOCU_2012-1.png", | ||
| title: res.name, | ||
| desc: res.brand + " " + "★".repeat(res.rating) | ||
| } | ||
| }} | ||
| style={{ | ||
| "width": "60%", | ||
| "text-align": "center" | ||
| }} | ||
| /> | ||
| </div> | ||
| </ReactiveBase> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| export default App; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters