define Docker

frontend_reactjs/src/pages/ApiTest.tsx

@@ -1,10 +1,52 @@
-import { Box } from "@mui/material"
+import { Box, Button } from "@mui/material"
+import { useCities } from "../hooks/swrHooks"
+import { useEffect, useState } from "react"
+import { useDebounce } from "@uidotdev/usehooks"
+import { DataGrid, GridColDef } from "@mui/x-data-grid"
+import axiosInstance from "../http/axiosInstance"
+import { BASE_URL } from "../constants"
 
 
 export default function ApiTest() {
+    const limit = 10
+
+    const [paginationModel, setPaginationModel] = useState({
+        page: 1,
+        pageSize: limit
+    })
+
+    const [rowCount, setRowCount] = useState(0)
+
+    const fetchCount = async () => {
+        await axiosInstance.get(`/general/cities_count`, {
+            baseURL: BASE_URL.fuel
+        }).then(response => {
+            setRowCount(response.data)
+        })
+    }
+
+    const { cities, isLoading } = useCities(paginationModel.pageSize, paginationModel.page)
+
+    useEffect(() => {
+        fetchCount()
+    }, [])
+
+    const citiesColumns: GridColDef[] = [
+        { field: 'id' },
+        { field: 'name' },
+    ]
+
     return (
         <Box sx={{ display: 'flex', flexDirection: 'column', gap: '16px', height: '100%' }}>
-
+            <DataGrid
+                rows={cities || []}
+                columns={citiesColumns}
+                paginationMode='server'
+                rowCount={rowCount}
+                loading={isLoading}
+                paginationModel={paginationModel}
+                onPaginationModelChange={setPaginationModel}
+            />
         </Box>
     )
 }