define Docker

docker-compose.yml

@@ -0,0 +1,12 @@
+services:
+  client:
+    container_name: client
+    build:
+      context: ./frontend_reactjs
+      dockerfile: Dockerfile
+    volumes:
+      - ./frontend_reactjs:/app
+      - /app/node_modules
+    ports:
+      - 5173:5173
+    restart: always

frontend_reactjs/Dockerfile

@@ -0,0 +1,13 @@
+FROM node:lts-alpine
+
+WORKDIR /app
+
+COPY package*.json ./
+
+RUN npm install
+
+COPY . .
+
+EXPOSE 5173
+
+CMD ["npm", "run", "dev"]

frontend_reactjs/src/components/ServersView.tsx

@@ -39,7 +39,9 @@ export default function ServersView() {
 
     const serversColumns: GridColDef[] = [
         //{ field: 'id', headerName: 'ID', type: "number" },
-        { field: 'name', headerName: 'Название', type: "string", editable: true },
+        {
+            field: 'name', headerName: 'Название', type: "string", editable: true,
+        },
         {
             field: 'region_id',
             editable: true,

frontend_reactjs/src/components/modals/CreateFromGridColModal.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+function CreateFromGridColModal() {
+    return (
+        <div>CreateFromGridColModal</div>
+    )
+}
+
+export default CreateFromGridColModal

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>
     )
 }

frontend_reactjs/vite.config.js

@@ -4,6 +4,10 @@ import { VitePWA } from "vite-plugin-pwa";
 import { nodePolyfills } from 'vite-plugin-node-polyfills';
 // https://vitejs.dev/config/
 export default defineConfig({
+    server: {
+        host: "0.0.0.0",
+        port: 5173
+    },
     plugins: [
         nodePolyfills(),
         react(),

frontend_reactjs/vite.config.ts

@@ -5,6 +5,10 @@ import { nodePolyfills } from 'vite-plugin-node-polyfills'
 
 // https://vitejs.dev/config/
 export default defineConfig({
+  server: {
+    host: "0.0.0.0",
+    port: 5173
+  },
   plugins: [
     nodePolyfills(),
     react(),