Testing: fetch servers by region

frontend_reactjs/src/pages/ApiTest.tsx

@@ -1,21 +1,103 @@
-import { useEffect, useState } from "react"
-import { Button, Typography } from "@mui/material"
-import { useServers } from "../hooks/swrHooks"
+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 [state, setState] = useState<any>(null)
+    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)
 
-    const { servers } = useServers(32, 0, 10)
+    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 (
-        <>
-            <Typography>
-                <Button onClick={() => {
-                    
-                }}>
-                    {servers && JSON.stringify(servers)}
-                </Button>
-            </Typography>
-        </>
+        <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>
     )
 }