[step-6] Add material-ui and reorganiaze app

Special hack for onTouchTap warning
see mui/material-ui#4670

create-react-app/package.json

@@ -5,15 +5,17 @@
   "dependencies": {
     "axios": "^0.16.2",
     "leaflet": "^1.0.3",
+    "material-ui": "^0.18.3",
     "osmtogeojson": "^3.0.0-beta.2",
     "react": "^16.1.1",
     "react-dom": "^16.1.1",
-    "react-scripts": "1.0.17"
+    "react-scripts": "1.0.17",
+    "react-tap-event-plugin": "^3.0.2"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "test": "react-scripts test --env=jsdom",
+    "test": "react-scripts test --env=jsdom --coverage",
     "eject": "react-scripts eject"
   }
 }

create-react-app/src/App.js

@@ -1,37 +1,39 @@
 import React from 'react';
-import HelloWorld from './components/HelloWorld/';
 import Nominatim from './components/Nominatim/';
-import OverpassResults from './components/OverpassResults/';
 
 import nominatimService from './services/nominatim';
 import overpassService from './services/overpass';
 
 import Map from './components/Map/';
+import RefreshIndicator from 'material-ui/RefreshIndicator';
 
 import './App.css';
 
+import injectTapEventPlugin from 'react-tap-event-plugin';
+injectTapEventPlugin();
+
 class App extends React.Component {
   state = {
     search: 'Toulouse',
     markers: [],
     geojson: undefined,
-    loading: true,
+    loading: 'hide',
     bbox: undefined
   };
   inputUncontrolled = {};
 
   componentWillMount() {
-    this.getNominatimData(this.state.value);
+    this.getNominatimData(this.state.search);
   }
   handleChange = (e) => {
-    this.setState({ value: e.target.value });
+    this.setState({ search: e.target.value });
   }
   handleInput = (input) => {
     this.inputUncontrolled = input;
   }
   handleSubmitControlled = (e) => {
     e.preventDefault();
-    this.getNominatimData(this.state.value);
+    this.getNominatimData(this.state.search);
   }
   handleSubmitUncontrolled = (e) => {
     e.preventDefault();
@@ -45,21 +47,19 @@ class App extends React.Component {
       .then((markers) => this.setState({markers: markers}));
   }
   getGeoJSONData() {
-    this.setState({ loading: true });
+    this.setState({ loading: 'loading' });
     overpassService.getOverpassData(this.state.bbox)
       .then((geojson) => {
         this.setState({
           geojson: geojson,
-          loading: false
+          loading: 'hide'
         })
       });
   }
 
   render() {
     return (
       <div className="App">
-        <HelloWorld name="World !" />
-        Nominatim
         <Nominatim
           handleSubmitControlled={this.handleSubmitControlled}
           handleSubmitUncontrolled={this.handleSubmitUncontrolled}
@@ -69,17 +69,29 @@ class App extends React.Component {
           data={this.state.markers}
         />
 
-        OverpassResults
-        <OverpassResults
-          geojson={this.state.geojson}
-        />
-
         <Map
           id="map"
           markers={this.state.markers}
           geojson={this.state.geojson}
           changeBBox={this.handleChangeBBox}
         />
+
+        <RefreshIndicator
+          size={50}
+          left={70}
+          top={0}
+          loadingColor="#FF9800"
+          status={this.state.loading}
+          style={{
+            display: 'inline-block',
+            position: 'absolute',
+            zIndex: 10000,
+            top: '1rem',
+            right: '1rem',
+            left: 'unset',
+            transform: 'unset'
+          }}
+        />
       </div>
     );
   }

create-react-app/src/components/Map/index.js

@@ -38,7 +38,8 @@ class Map extends React.Component {
   }
 
   displayGeoJSON(geojson) {
-    // this.geojson.removeFrom(this.map);
+    if (typeof this.geojson === L.GeoJSON)
+      this.geojson.removeFrom(this.map);
     this.geojson = L.geoJSON(geojson).addTo(this.map);
   }
 

create-react-app/src/components/Map/style.css

@@ -1,3 +1,3 @@
 div[id^=map] {
-  height: 300px;
+  height: 100vh;
 }

create-react-app/src/components/Nominatim/NominatimForm/index.js

@@ -1,11 +1,22 @@
 import React from 'react';
+import RaisedButton from 'material-ui/RaisedButton';
+import TextField from 'material-ui/TextField';
 
 function NominatimForm(props) {
   return (
     <form className="NominatimForm">
-      <label htmlFor="search">Search</label>
-      <input type="text" id="search" onChange={props.handleChange} value={props.inputValue}/>
-      <input type="submit" onClick={props.handleSubmit} value="Search"/>
+      <TextField
+        type="text"
+        id="search-controlled"
+        onChange={props.handleChange}
+        value={props.inputValue}
+      />
+      <RaisedButton
+        label="Search"
+        type="submit"
+        onClick={props.handleSubmit}
+        primary={true}
+      />
     </form>
   );
 }

create-react-app/src/components/Nominatim/NominatimFormUncontrolled/index.js

@@ -1,15 +1,23 @@
 import React from 'react';
+import RaisedButton from 'material-ui/RaisedButton';
+import TextField from 'material-ui/TextField';
 
 class NominatimFormUncontrolled extends React.Component {
   render() {
     return (
       <form className="NominatimFormUncontrolled">
-        <label htmlFor="search">Search</label>
-        <input type="text"
+        <TextField
+          type="text"
+          id="search"
           defaultValue={this.props.inputValue}
           ref={(input) => this.props.handleInput(input) }
         />
-        <input type="submit" onClick={this.props.handleSubmit} value="Search Uncontrolled"/>
+        <RaisedButton
+          label="Search"
+          type="submit"
+          onClick={this.props.handleSubmit}
+          primary={true}
+        />
       </form>
     );
   }

create-react-app/src/components/Nominatim/index.js

@@ -1,8 +1,11 @@
 import React from 'react';
 
+import {Card, CardTitle, CardText} from 'material-ui/Card';
+
 import NominatimForm from './NominatimForm';
 import NominatimFormUncontrolled from './NominatimFormUncontrolled';
-import NominatimResults from './NominatimResults';
+
+import './style.css';
 
 function Nominatim({
   handleSubmitControlled,
@@ -13,19 +16,33 @@ function Nominatim({
   data
 }) {
   return (
-    <div className="Nominatim">
-      <NominatimForm
-        handleSubmit={handleSubmitControlled}
-        handleChange={handleChange}
-        inputValue={inputValue}
-      />
-      <NominatimFormUncontrolled
-        handleSubmit={handleSubmitUncontrolled}
-        inputValue={inputValue}
-        handleInput={handleInput}
-      />
-      <NominatimResults data={data} />
-    </div>
+    <Card className="Nominatim" style={{
+      position: 'absolute',
+      top: 0,
+      botto: 0,
+      margin: 12,
+      width: '400px',
+      zIndex: 10000
+    }}>
+      <CardTitle
+        title="Rechercher une adresse"
+        titleStyle={{fontSize: 16}}
+        titleColor="#006064" />
+      <CardText>
+        Form controlled
+        <NominatimForm
+          handleSubmit={handleSubmitControlled}
+          handleChange={handleChange}
+          inputValue={inputValue}
+        />
+        Form uncontrolled
+        <NominatimFormUncontrolled
+          handleSubmit={handleSubmitUncontrolled}
+          inputValue={inputValue}
+          handleInput={handleInput}
+        />
+      </CardText>
+    </Card>
   );
 }
 

create-react-app/src/components/Nominatim/style.css

@@ -0,0 +1,3 @@
+.Nominatim {
+  z-index: 1000;
+}

create-react-app/src/index.js

@@ -1,8 +1,15 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import './index.css';
+import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
+
 import App from './App';
 import registerServiceWorker from './registerServiceWorker';
 
-ReactDOM.render(<App />, document.getElementById('root'));
+import './index.css';
+
+ReactDOM.render(
+    <MuiThemeProvider>
+        <App />
+    </MuiThemeProvider>
+, document.getElementById('root'));
 registerServiceWorker();