diff --git a/src/components/First.js b/src/components/First.js index ab270ee..5015f7d 100644 --- a/src/components/First.js +++ b/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 ( - - {stop_id} {name} - {stop_desc.length > 0 &&
{stop_desc}
} -
- ); -}; class First extends Component { @@ -39,24 +16,9 @@ class First extends Component {


+

GoTH first page

+

- { - 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} - />
) } diff --git a/src/components/StopTimeForm.js b/src/components/StopTimeForm.js index ca56be2..e558999 100644 --- a/src/components/StopTimeForm.js +++ b/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 { diff --git a/src/utils/ApiClient.js b/src/utils/ApiClient.js index 0dc1381..8bf1039 100644 --- a/src/utils/ApiClient.js +++ b/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 = () => {