Tweak ApiClient to be more extensible

src/components/First.js

@@ -1,27 +1,4 @@
 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 {
 
@@ -39,24 +16,9 @@ class First extends Component {
       <div>
         <br />
         <br />
+        <h1>GoTH first page</h1>
+        <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>
   )
   }

src/components/StopTimeForm.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react'
 import styled from 'styled-components'
 import AsyncSelect from 'react-select/lib/Async'
 import { components } from 'react-select'
+import { CancelToken } from 'axios'
 
 import Input from './parts/Input'
 import OurSelect from './parts/Select'
@@ -9,11 +10,11 @@ import {
   updateStopTime, createStopTime, deleteStopTime
 } from '../actions/stoptime'
 import store from '../store'
-import { API_URL } from '../constants/Api'
 import {
   PickUpTypes, DropOffTypes, TimePointChoices
 } from '../constants/choices'
 import { getItemFromList } from '../utils'
+import { apiClient } from '../utils/ApiClient'
 
 const StyleBox = styled.div`
 padding: 5px;
@@ -32,8 +33,10 @@ const Option = (props) => {
   )
 }
 
+
 class StopTimeForm extends Component {
 
+  cancel = null
   state = {
     editMode: false,
     trip: null,
@@ -81,10 +84,16 @@ class StopTimeForm extends Component {
   }
 
 	getStops = (inputValue, callback) => {
-    fetch(`${API_URL}/stop/?search=${inputValue}`)
-      .then((response) => response.json())
-      .then((json) => {
-        callback(json.results.map(ele => Object.assign(ele, {
+    const that = this
+    const cancelToken = new CancelToken(function executor(c) {
+      // An executor function receives a cancel function as a parameter
+      if (that.cancel)
+        that.cancel()
+      that.cancel = c
+    })
+    apiClient(`/stop/?search=${inputValue}`, { cancelToken })
+      .then((resp) => {
+        callback(resp.data.results.map(ele => Object.assign(ele, {
           value: ele.id, label: ele.name
         })))
       })
@@ -153,7 +162,7 @@ class StopTimeForm extends Component {
         <OurSelect
           label="Drop off Type"
           type="text"
-          fieldName="pickup_type"
+          fieldName="drop_off_type"
           value={getItemFromList(item.drop_off_type, DropOffTypes, '0')}
           handleChange={this.handleChange}
           choices={DropOffTypes} />

src/utils/ApiClient.js

@@ -2,13 +2,13 @@ import axios from 'axios'
 import store from '../store'
 import { URL, API_PREFIX } from '../constants/Api'
 
-export const apiClient = function(url) {
+export const apiClient = function(url, extra) {
   const token = store.getState().auth.token
-  const params = {
-    baseURL: `${URL}${API_PREFIX}${url}`,
+  const params = Object.assign({
+    url: `${URL}${API_PREFIX}${url}`,
     headers: {'Authorization': 'Bearer ' + token}
-  }
-  return axios.get(params)
+  }, extra || {})
+  return axios.request(params)
 }
 
 export const RSAAHeaders = () => {