Drop trainvel backend, this is now a frontend-only app
This commit is contained in:
46
src/AutocompleteStation.jsx
Normal file
46
src/AutocompleteStation.jsx
Normal file
@ -0,0 +1,46 @@
|
||||
import {Autocomplete, TextField} from "@mui/material";
|
||||
import {useRef, useState} from "react";
|
||||
|
||||
function AutocompleteStation(params) {
|
||||
const [options, setOptions] = useState([])
|
||||
const previousController = useRef()
|
||||
|
||||
function onInputChange(event, value) {
|
||||
if (!value) {
|
||||
setOptions([])
|
||||
return
|
||||
}
|
||||
|
||||
if (previousController.current)
|
||||
previousController.current.abort()
|
||||
|
||||
const controller = new AbortController()
|
||||
const signal = controller.signal
|
||||
previousController.current = controller
|
||||
fetch("/api/core/station/?search=" + value, {signal})
|
||||
.then(response => response.json())
|
||||
.then(data => data.results)
|
||||
.then(setOptions)
|
||||
.catch()
|
||||
}
|
||||
|
||||
return <>
|
||||
<Autocomplete
|
||||
id="stop"
|
||||
options={options}
|
||||
onInputChange={onInputChange}
|
||||
filterOptions={(x) => x}
|
||||
getOptionKey={option => option.id}
|
||||
getOptionLabel={option => option.name}
|
||||
groupBy={option => getOptionGroup(option)}
|
||||
isOptionEqualToValue={(option, value) => option.id === value.id}
|
||||
renderInput={(params) => <TextField {...params} label="Arrêt" />}
|
||||
{...params} />
|
||||
</>
|
||||
}
|
||||
|
||||
function getOptionGroup(option) {
|
||||
return option.country
|
||||
}
|
||||
|
||||
export default AutocompleteStation;
|
Reference in New Issue
Block a user