Port react-select@1 to @2

package.json

@@ -5,7 +5,7 @@
   "dependencies": {
     "ajv": "^6.5.1",
     "axios": "^0.18.0",
-    "leaflet": "^1.3.1",
+    "leaflet": "^1.3.2",
     "leaflet-draw": "^1.0.2",
     "lodash": "^4.17.10",
     "moment": "^2.22.2",
@@ -17,7 +17,7 @@
     "react-redux": "^5.0.7",
     "react-router-dom": "^4.3.1",
     "react-scripts": "1.1.4",
-    "react-select": "^1.2.1",
+    "react-select": "^2.0.0-beta.7",
     "redux": "^4.0.0",
     "redux-api-middleware": "^2.3.0",
     "redux-logger": "^3.0.6",

src/components/First.js

@@ -0,0 +1,65 @@
+import React, { Component } from 'react'
+import { components } from 'react-select'
+import AsyncSelect from 'react-select/lib/Async'
+
+
+const cbStopOptions = (inputValue, callback) => {
+  fetch(`https://api.goth.app/v1/stop/?search=${inputValue}`)
+    .then((response) => response.json())
+    .then((json) => {
+      callback(json.results.map(ele => Object.assign(ele, {
+        value: ele.id, label: ele.name
+      })))
+    })
+}
+
+const Option = (props) => {
+  const { stop_id, name, stop_desc } = props.data
+  return (
+    <components.Option {...props}>
+      <code>{stop_id}</code> {name}
+      {stop_desc.length > 0 && <small><br />{stop_desc}</small>}
+    </components.Option>
+  );
+};
+
+class First extends Component {
+
+  state = { inputValue: '' }
+
+  handleInputChange = (newValue) => {
+    console.log("inputChange", newValue)
+    const inputValue = newValue.replace(/\W/g, '')
+    this.setState({ inputValue })
+    return inputValue
+  }
+
+  render() {
+    return (
+      <div>
+        <br />
+        <br />
+        <br />
+      <AsyncSelect
+        cacheOptions={true}
+        defaultOptions
+        defaultValue={{value: '1', label: 'test'}}
+        loadOptions={cbStopOptions}
+        components={{ Option }}
+        onChange={(item, evt) => {
+          console.log('on change', item, evt)
+          if (evt.action === 'select-option') {
+            console.log('select something', item)
+            return Object.assign(item, {value: item.name})
+          }
+          console.log('?')
+          return item
+        }}
+        onInputChange={this.handleInputChange}
+         />
+      </div>
+  )
+  }
+}
+
+export default First

src/components/RouteForm.js

@@ -5,8 +5,13 @@ import { Redirect, Link } from 'react-router-dom'
 
 import Input from './parts/Input'
 import Select from './parts/Select'
-import { updateRoute, createRoute, deleteRoute } from '../actions/route';
+import {
+  getRoute, updateRoute,
+  createRoute, deleteRoute
+} from '../actions/route';
 import store from '../store'
+import { getItemFromList } from '../utils'
+import { RouteTypeChoices } from '../constants/choices'
 
 const StyledRouteForm = styled.div`
 padding: 1rem;
@@ -66,6 +71,13 @@ class RouteForm extends Component {
     this.setState({justSubmit: true})
   }
 
+  componentDidMount() {
+    const { routeId } = this.props.match.params
+    const { fetching, count } = this.props.route
+    if (routeId !== undefined && count === 0 && !fetching)
+      store.dispatch(getRoute(`route_id=${routeId}`))
+  }
+
   static getDerivedStateFromProps(props, state) {
     // if form is ready, then nothing else to do
     if (state.agency !== null || state.id !== null)
@@ -85,8 +97,11 @@ class RouteForm extends Component {
     } else if (routeId !== undefined && state.id === null) {
       // this is for editing route
       const ones = props.route.results.filter(ele => ele.route_id === routeId)
-      props.updateBreadcrumb({ agencyId, routeId })
-      return ones[0]
+      if (ones.length > 0) {
+        props.updateBreadcrumb({ agencyId, routeId })
+        return ones[0]
+      }
+      return null
     }
     return null
   }
@@ -132,18 +147,9 @@ class RouteForm extends Component {
           <Select
             label="Route Type"
             fieldName="route_type"
-            value={one.route_type || ''}
+            value={getItemFromList(one.route_type, RouteTypeChoices)}
             handleChange={this.handleChange}
-            choices={[
-              { value: '0', label: 'Tram, Light rail' },
-              { value: '1', label: 'Subway (within metro area)' },
-              { value: '2', label: 'Rail' },
-              { value: '3', label: 'Bus' },
-              { value: '4', label: 'Ferry' },
-              { value: '5', label: 'Cable car' },
-              { value: '6', label: 'Gondola' },
-              { value: '7', label: 'Funicular (steep inclines)' },
-            ]} />
+            choices={RouteTypeChoices} />
 
           <Input
               label="Route URL"

src/components/StopForm.js

@@ -10,6 +10,10 @@ import {
 } from '../actions'
 import { updateStop, createStop, deleteStop, getStop } from '../actions/stop'
 import store from '../store'
+import {
+  StopLocationTypes, StopWheelChairInfo
+} from '../constants/choices'
+import { getItemFromList } from '../utils'
 
 const StyledStopForm = styled.div`
 padding: 1rem;
@@ -194,13 +198,9 @@ class StopForm extends Component {
           <Select
             label="Location Type"
             fieldName="location_type"
-            value={one.location_type || '0'}
+            value={getItemFromList(one.location_type, StopLocationTypes)}
             handleChange={this.handleChange}
-            choices={[
-              { value: '0', label: 'Stop' },
-              { value: '1', label: 'Station' },
-              { value: '2', label: 'Station Entrance/Exit' },
-            ]} />
+            choices={StopLocationTypes} />
 
           <Input
             label="Timezone"
@@ -212,13 +212,9 @@ class StopForm extends Component {
           <Select
             label="Wheelchair"
             fieldName="wheelchair_boarding"
-            value={one.wheelchair_boarding || '0'}
+            value={getItemFromList(one.wheelchair_boarding, StopWheelChairInfo)}
             handleChange={this.handleChange}
-            choices={[
-              { value: '0', label: 'No information' },
-              { value: '1', label: 'Possible (partially or fully)' },
-              { value: '2', label: 'Not possible' },
-            ]} />
+            choices={StopWheelChairInfo} />
 
           {/* <Input
               label="Parent Station"

src/components/StopTimeForm.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react'
 import styled from 'styled-components'
-import Select from 'react-select'
+import AsyncSelect from 'react-select/lib/Async'
+import { components } from 'react-select'
 
 import Input from './parts/Input'
 import OurSelect from './parts/Select'
@@ -9,6 +10,10 @@ import {
 } from '../actions/stoptime'
 import store from '../store'
 import { API_URL } from '../constants/Api'
+import {
+  PickUpTypes, DropOffTypes, TimePointChoices
+} from '../constants/choices'
+import { getItemFromList } from '../utils'
 
 const StyleBox = styled.div`
 padding: 5px;
@@ -16,6 +21,17 @@ background: white;
 margin-bottom: 1rem;
 `
 
+const Option = (props) => {
+  console.log('option: ', props)
+  const { stop_id, name, stop_desc } = props.data
+  return (
+    <components.Option {...props}>
+      <code>{stop_id}</code> {name}
+      {stop_desc.length > 0 && <small><br />{stop_desc}</small>}
+    </components.Option>
+  )
+}
+
 class StopTimeForm extends Component {
 
   state = {
@@ -64,13 +80,14 @@ class StopTimeForm extends Component {
     return null
   }
 
-	getStops = (inputValue) => {
-    if (!inputValue) {
-			return Promise.resolve({ options: [] });
-    }
-		return fetch(`${API_URL}/stop/?search=${inputValue}`)
+	getStops = (inputValue, callback) => {
+    fetch(`${API_URL}/stop/?search=${inputValue}`)
       .then((response) => response.json())
-      .then((json) => ({ options: json.results }))
+      .then((json) => {
+        callback(json.results.map(ele => Object.assign(ele, {
+          value: ele.id, label: ele.name
+        })))
+      })
   }
 
   render() {
@@ -86,19 +103,22 @@ class StopTimeForm extends Component {
 
         <div className="field">
           <label className="label">Stop</label>
-          <Select.Async
-            value={this.state.stop}
-            labelKey="stop_id"
-            valueKey="id"
-            filterOptionunion={false}
+          <AsyncSelect
+            cacheOptions={true}
+            defaultOptions
+            defaultValue={item.stop && Object.assign(item.stop, {
+              label: item.stop.name})}
             loadOptions={this.getStops}
-            onChange={(data) => {
-              let evt = {
-                target: {
-                  name: 'stop',
-                  value: data,
-                }}
-              return this.handleChange(evt)
+            components={{ Option }}
+            onChange={(item, evt) => {
+              if (evt.action === 'select-option') {
+                let evt = {
+                  target: {
+                    name: 'stop',
+                    value: item,
+                  }}
+                this.handleChange(evt)
+              }
             }}
             />
         </div>
@@ -126,38 +146,25 @@ class StopTimeForm extends Component {
           label="Pickup Type"
           type="text"
           fieldName="pickup_type"
-          value={item.pickup_type || '0'}
+          value={getItemFromList(item.pickup_type, PickUpTypes, '0')}
           handleChange={this.handleChange}
-          choices={[
-            { value: '0', label: 'Regularly scheduled pickup' },
-            { value: '1', label: 'No pickup' },
-            { value: '2', label: 'Arrange pickup' },
-            { value: '3', label: 'Contact driver' },
-          ]} />
+          choices={PickUpTypes} />
 
         <OurSelect
           label="Drop off Type"
           type="text"
           fieldName="pickup_type"
-          value={item.pickup_type || '0'}
+          value={getItemFromList(item.drop_off_type, DropOffTypes, '0')}
           handleChange={this.handleChange}
-          choices={[
-            { value: '0', label: 'Regularly scheduled dropoff' },
-            { value: '1', label: 'No drop off' },
-            { value: '2', label: 'Arrange drop off' },
-            { value: '3', label: 'Contact driver' },
-          ]} />
+          choices={DropOffTypes} />
 
         <OurSelect
           label="Timepoint"
           type="text"
           fieldName="timepoint"
-          value={item.timepoint || '1'}
+          value={getItemFromList(item.timepoint, TimePointChoices, '1')}
           handleChange={this.handleChange}
-          choices={[
-            { value: '0', label: 'times are considered approximate.' },
-            { value: '1', label: 'times are considered exact.' },
-          ]} />
+          choices={TimePointChoices} />
 
         <div className="field is-grouped">
           <div className="control">

src/components/TripForm.js

@@ -12,6 +12,12 @@ import { getCalendar } from '../actions/calendar'
 import { getRoute } from '../actions'
 import { getStopTime } from '../actions/stoptime'
 import store from '../store'
+import {
+  DirectionChoices, WheelChairAccessibles,
+  BikeAllowanceChoices
+} from '../constants/choices'
+import { getItemFromList } from '../utils'
+
 
 const StyledTripForm = styled.div`
 padding: 1rem;
@@ -134,7 +140,7 @@ class TripForm extends Component {
               label="Service"
               type="text"
               fieldName="service"
-              value={one.service}
+              value={one.service && Object.assign(one.service, {label: one.service.service_id})}
               handleChange={this.handleChange}
               choices={calendar.results.map(ele => ({ value: ele.id, label: ele.service_id }))} />}
 
@@ -142,12 +148,9 @@ class TripForm extends Component {
               label="Direction ID"
               type="text"
               fieldName="direction_id"
-              value={one.direction_id || ''}
+              value={getItemFromList(one.direction_id, DirectionChoices)}
               handleChange={this.handleChange}
-              choices={[
-                { value: '0', label: 'outbound' },
-                { value: '1', label: 'inbound' },
-              ]} />
+              choices={DirectionChoices} />
 
           <HorizontalInput
               label="Block ID"
@@ -160,25 +163,17 @@ class TripForm extends Component {
               label="Wheelchair Accessible"
               type="text"
               fieldName="wheelchair_accessible"
-              value={one.wheelchair_accessible || '0'}
+              value={getItemFromList(one.wheelchair_accessible, WheelChairAccessibles, '0')}
               handleChange={this.handleChange}
-              choices={[
-                { value: '0', label: 'No information' },
-                { value: '1', label: 'Yes' },
-                { value: '2', label: 'Not possible' },
-              ]} />
+              choices={WheelChairAccessibles} />
 
           <HorizontalSelect
               label="Bike Allowance"
               type="text"
               fieldName="bike_allowed"
-              value={one.bike_allowed || '0'}
+              value={getItemFromList(one.bike_allowed, BikeAllowanceChoices, '0')}
               handleChange={this.handleChange}
-              choices={[
-                { value: '0', label: 'No information' },
-                { value: '1', label: 'Yes' },
-                { value: '2', label: 'Not possible' },
-              ]} />
+              choices={BikeAllowanceChoices} />
         </div>
         <div className="field is-grouped">
           <div className="control">

src/components/parts/HorizontalSelect.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import Select from 'react-select'
-import 'react-select/dist/react-select.css'
+// import 'react-select/dist/react-select.css'
 
 
 const HorizontalInput = (props) => (
@@ -11,11 +11,11 @@ const HorizontalInput = (props) => (
     <div className="field-body">
       <div className="field">
         <Select
-          className="control"
+          defaultOptions
+          classNamePrefix="control"
           name={props.fieldName}
           value={props.value}
           onChange={(data) => {
-            console.log('change', data)
             let evt = {
               target: {
                 name: props.fieldName,

src/components/parts/Select.js

@@ -1,13 +1,14 @@
 import React from 'react'
 import Select from 'react-select'
-import 'react-select/dist/react-select.css'
+// import 'react-select/dist/react-select.css'
 
 
 const NormalSelect = (props) => (
   <div className="field">
     <label className="label">{props.label}</label>
     <Select
-      className="control"
+      defaultOptions
+      classNamePrefix="control"
       name={props.fieldName}
       value={props.value}
       onChange={(data) => {

src/constants/choices.js

@@ -0,0 +1,60 @@
+
+export const RouteTypeChoices = [
+  { value: '0', label: 'Tram, Light rail' },
+  { value: '1', label: 'Subway (within metro area)' },
+  { value: '2', label: 'Rail' },
+  { value: '3', label: 'Bus' },
+  { value: '4', label: 'Ferry' },
+  { value: '5', label: 'Cable car' },
+  { value: '6', label: 'Gondola' },
+  { value: '7', label: 'Funicular (steep inclines)' },
+]
+
+export const StopLocationTypes = [
+  { value: '0', label: 'Stop' },
+  { value: '1', label: 'Station' },
+  { value: '2', label: 'Station Entrance/Exit' },
+]
+
+export const StopWheelChairInfo = [
+  { value: '0', label: 'No information' },
+  { value: '1', label: 'Possible (partially or fully)' },
+  { value: '2', label: 'Not possible' },
+]
+
+export const DropOffTypes = [
+  { value: '0', label: 'Regularly scheduled dropoff' },
+  { value: '1', label: 'No drop off' },
+  { value: '2', label: 'Arrange drop off' },
+  { value: '3', label: 'Contact driver' },
+]
+
+export const TimePointChoices = [
+  { value: '0', label: 'times are considered approximate.' },
+  { value: '1', label: 'times are considered exact.' },
+]
+
+export const PickUpTypes = [
+  { value: '0', label: 'Regularly scheduled pickup' },
+  { value: '1', label: 'No pickup' },
+  { value: '2', label: 'Arrange pickup' },
+  { value: '3', label: 'Contact driver' },
+]
+
+export const DirectionChoices = [
+  { value: '0', label: 'outbound' },
+  { value: '1', label: 'inbound' },
+]
+
+export const WheelChairAccessibles = [
+  { value: '0', label: 'No information' },
+  { value: '1', label: 'Yes' },
+  { value: '2', label: 'Not possible' },
+]
+
+export const BikeAllowanceChoices = [
+  { value: '0', label: 'No information' },
+  { value: '1', label: 'Yes' },
+  { value: '2', label: 'Not possible' },
+]
+

src/container/Geo.js

@@ -6,7 +6,7 @@ import {
   Map, TileLayer, CircleMarker, ZoomControl,
   FeatureGroup, GeoJSON, Marker } from 'react-leaflet'
 // import { EditControl } from 'react-leaflet-draw'
-import L from 'leaflet'
+import * as L from 'leaflet'
 
 import { loggedIn } from '../reducers/auth'
 import {

src/container/Main.js

@@ -4,6 +4,7 @@ import { Redirect, Route, Switch } from 'react-router-dom'
 
 import { loggedIn } from '../reducers/auth'
 import { getAgency } from '../actions'
+import First from '../components/First'
 import Nav from '../components/Nav'
 import Footer from '../components/Footer'
 import CalendarForm from '../components/CalendarForm'
@@ -50,6 +51,7 @@ class Main extends Component {
           <Route exact path={`${match.url}calendar/new`} component={CalendarForm} />
           <Route exact path={`${match.url}calendar/:serviceId`} component={CalendarForm} />
           <Route exact path={`${match.url}calendar`} component={CalendarList} />
+          <Route path={`${match.url}`} component={First} />
           </Switch>
         </div>
         <Footer />

src/reducers/agency.js

@@ -1,6 +1,7 @@
 import {
   AGENCY_CREATE, AGENCY_DELETE, AGENCY_UPDATE,
   AGENCY_REQUEST, AGENCY_SUCCESS, AGENCY_FAILURE,
+  GEO_POLYGON_RESET,
 } from '../constants/ActionTypes'
 
 
@@ -12,6 +13,12 @@ const agencyInitState = {
 }
 const agency = (state = agencyInitState, action) => {
   switch(action.type) {
+    // somehow search fetching stuck we need some way to reset that
+    case GEO_POLYGON_RESET:
+      return {
+        ...state,
+        fetching: false,
+      }
     case AGENCY_REQUEST:
       return {
         ...state,

src/utils/index.js

@@ -0,0 +1,13 @@
+
+export const getItemFromList = (targetValue, list, defaultValue) => {
+  if (!targetValue && defaultValue === undefined)
+    return ''
+  let f = list.filter(ele => ele.value === targetValue)
+  if (f.length > 0)
+    return f[0]
+  // default value
+  f = list.filter(ele => ele.value === defaultValue)
+  if (f.length > 0)
+    return f[0]
+  return ''
+}