simplify flex layout and use inline styles

Author: siddharthlatest

package.json

@@ -8,8 +8,7 @@
   "dependencies": {
     "@appbaseio/reactivesearch": "^2.0.0-alpha-05",
     "react": "^16.2.0",
-    "react-dom": "^16.2.0",
-    "reflexbox": "^3.0.0-0"
+    "react-dom": "^16.2.0"
   },
   "scripts": {
     "start": "react-scripts start",

src/App.css

@@ -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;

src/App.js

@@ -5472,12 +5472,6 @@ redux@^3.7.2:
     loose-envify "^1.1.0"
     symbol-observable "^1.0.3"
 
-reflexbox@^3.0.0-0:
-  version "3.0.0-0"
-  resolved "https://registry.yarnpkg.com/reflexbox/-/reflexbox-3.0.0-0.tgz#ffc1669be396823a61f74b2d6cd501a7eda1f3c2"
-  dependencies:
-    prop-types "^15.5.10"
-
 regenerate@^1.2.1:
   version "1.3.3"
   resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.3.3.tgz#0c336d3980553d755c39b586ae3b20aa49c82b7f"