forked from VinokurovVE/tests
103 lines
3.9 KiB
TypeScript
103 lines
3.9 KiB
TypeScript
import { Autocomplete, Box, Button, CircularProgress, Paper, TextField, Typography } from "@mui/material"
|
|
import { useBoilers, useCities, useRegions, useServers } from "../hooks/swrHooks"
|
|
import { Fragment, useEffect, useState } from "react"
|
|
import { IRegion } from "../interfaces/fuel"
|
|
import { DataGrid, GridColDef } from "@mui/x-data-grid"
|
|
|
|
export default function ApiTest() {
|
|
const [open, setOpen] = useState(false)
|
|
const [options, setOptions] = useState<any>([])
|
|
const [search, setSearch] = useState<any>(null)
|
|
const [debouncedSearch, setDebouncedSearch] = useState("")
|
|
const [selectedOption, setSelectedOption] = useState<IRegion | null>(null)
|
|
const { regions, isLoading } = useRegions(10, 1, debouncedSearch)
|
|
|
|
useEffect(() => {
|
|
const handler = setTimeout(() => {
|
|
setDebouncedSearch(search)
|
|
}, 500)
|
|
|
|
return () => {
|
|
clearTimeout(handler)
|
|
}
|
|
}, [search])
|
|
|
|
useEffect(() => {
|
|
if (regions) {
|
|
setOptions([...regions])
|
|
}
|
|
}, [regions])
|
|
|
|
const handleInputChange = (event: any, value: any) => {
|
|
setSearch(value)
|
|
}
|
|
|
|
const handleOptionChange = (event: any, value: any) => {
|
|
setSelectedOption(value)
|
|
}
|
|
|
|
//const { boilers } = useBoilers(10, 1)
|
|
//const { cities } = useCities(10, 1)
|
|
const { servers, isLoading: serversLoading } = useServers(selectedOption?.id, 0, 10)
|
|
|
|
const serversColumns: GridColDef[] = [
|
|
{ field: 'id', headerName: 'ID', type: "number" },
|
|
{ field: 'name', headerName: 'Название', type: "string" },
|
|
]
|
|
|
|
return (
|
|
<Box sx={{ display: 'flex', flexDirection: 'column', gap: '16px', height: '100%' }}>
|
|
<Paper elevation={1}>
|
|
<Box sx={{ display: 'flex', flexDirection: 'column', gap: '16px', height: '100%', p: '16px'}}>
|
|
<Typography variant='h6' fontWeight='600'>
|
|
Get servers
|
|
</Typography>
|
|
|
|
<Autocomplete
|
|
open={open}
|
|
onOpen={() => {
|
|
setOpen(true)
|
|
}}
|
|
onClose={() => {
|
|
setOpen(false)
|
|
}}
|
|
onInputChange={handleInputChange}
|
|
onChange={handleOptionChange}
|
|
filterOptions={(x) => x}
|
|
isOptionEqualToValue={(option: any, value: any) => option.name === value.name}
|
|
getOptionLabel={(option: any) => option.name ? option.name : ""}
|
|
options={options}
|
|
loading={isLoading}
|
|
value={selectedOption}
|
|
renderInput={(params) => (
|
|
<TextField
|
|
{...params}
|
|
label="Район"
|
|
InputProps={{
|
|
...params.InputProps,
|
|
endAdornment: (
|
|
<Fragment>
|
|
{isLoading ? <CircularProgress color="inherit" size={20} /> : null}
|
|
{params.InputProps.endAdornment}
|
|
</Fragment>
|
|
)
|
|
}}
|
|
/>
|
|
)}
|
|
/>
|
|
|
|
{serversLoading ?
|
|
<CircularProgress />
|
|
:
|
|
servers &&
|
|
<DataGrid
|
|
rowSelection={false}
|
|
rows={servers}
|
|
columns={serversColumns}
|
|
/>
|
|
}
|
|
</Box>
|
|
</Paper>
|
|
</Box>
|
|
)
|
|
} |