diff --git a/package.json b/package.json index 56979f3..542fcb6 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,7 @@ "dependencies": { "@ant-design/icons": "^5.0.1", "@nanostores/react": "^0.4.1", + "@tanstack/react-query": "^4.24.9", "@turf/bbox": "^6.5.0", "@turf/helpers": "^6.5.0", "@watergis/maplibre-gl-export": "^1.3.7", diff --git a/src/App.jsx b/src/App.jsx index e98fd69..3fc884d 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -4,17 +4,22 @@ import { LoginPage } from "./pages/Login"; import { VerifyRegistrationPage } from "./pages/VerifyRegistration"; import { RegisterPage } from "./pages/Register"; import { MapPage } from "./pages/Map"; +import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; + +const queryClient = new QueryClient(); function App() { return ( - - - } /> - } /> - } /> - } /> - - + + + + } /> + } /> + } /> + } /> + + + ); } diff --git a/src/modules/Table/Table.css b/src/modules/Table/Table.css index 21019a9..80bd866 100644 --- a/src/modules/Table/Table.css +++ b/src/modules/Table/Table.css @@ -2,7 +2,7 @@ padding: 0 !important; } -.ant-table-body { +.ant-table { @apply max-w-[100vw]; } diff --git a/src/modules/Table/Table.jsx b/src/modules/Table/Table.jsx index 9ebfcac..fa272de 100644 --- a/src/modules/Table/Table.jsx +++ b/src/modules/Table/Table.jsx @@ -1,112 +1,82 @@ import React, { useRef } from "react"; import { Collapse, Empty, Table as AntdTable } from "antd"; import "./Table.css"; +import { useQuery } from "@tanstack/react-query"; +import { api } from "../../api"; const columns = [ - { - title: "Категория", - dataIndex: "category", - key: "category", - }, { title: "Статус", dataIndex: "status", key: "status", + width: "120px", + ellipsis: true, }, { - title: "Прогноз", - dataIndex: "predict", - key: "predict", + title: "Категория", + dataIndex: "category", + key: "category", + width: "120px", + ellipsis: true, }, { - title: "Факт", - dataIndex: "fact", - key: "fact", + title: "Прогноз", + dataIndex: "prediction", + key: "prediction", + width: "120px", + ellipsis: true, }, { title: "Зрелость", dataIndex: "age", key: "age", - }, -]; - -const data = [ - { - id: "1", - category: "Жилой дом", - status: "Работающий", - predict: 80, - fact: 50, - age: 6, - }, - { - id: "2", - category: "МФЦ", - status: "Не работает", - predict: 100, - fact: undefined, - age: 0, - }, - { - id: "3", - category: "Библиотека", - status: "На рассмотрении", - predict: 80, - fact: undefined, - age: 0, + width: "120px", + ellipsis: true, }, { - id: "4", - category: "Жилой дом", - status: "Работающий", - predict: 80, - fact: 50, - age: 6, + title: "План", + dataIndex: "plan", + key: "plan", + width: "120px", + ellipsis: true, }, { - id: "5", - category: "МФЦ", - status: "Не работает", - predict: 100, - fact: undefined, - age: 0, - }, - { - id: "6", - category: "Библиотека", - status: "На рассмотрении", - predict: 80, - fact: undefined, - age: 0, + title: "Факт", + dataIndex: "fact", + key: "fact", + width: "120px", + ellipsis: true, }, { - id: "7", - category: "Жилой дом", - status: "Работающий", - predict: 80, - fact: 50, - age: 6, + title: "Дельта", + dataIndex: "delta", + key: "delta", + width: "120px", + ellipsis: true, }, { - id: "8", - category: "МФЦ", - status: "Не работает", - predict: 100, - fact: undefined, - age: 0, + title: "АО", + dataIndex: "okrug", + key: "okrug", + width: "120px", + ellipsis: true, }, { - id: "9", - category: "Библиотека", - status: "На рассмотрении", - predict: 80, - fact: undefined, - age: 0, + title: "Район", + dataIndex: "rayon", + key: "rayon", + width: "120px", + ellipsis: true, }, ]; export const Table = React.memo(({ height = 200 }) => { const tableRef = useRef(null); + const { data } = useQuery(["table"], async () => { + const { data } = await api.get("/api/placement_points?page_size=20"); + + return data; + }); const SCROLL = { y: `${height}px`, @@ -125,7 +95,7 @@ export const Table = React.memo(({ height = 200 }) => { locale={{ emptyText: }} // loading={isLoading} pagination={false} - dataSource={data} + dataSource={data?.results} columns={columns} rowKey="id" scroll={SCROLL} diff --git a/yarn.lock b/yarn.lock index a32b3c5..cf5bdd1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -534,6 +534,19 @@ "@svgr/hast-util-to-babel-ast" "^6.5.1" svg-parser "^2.0.4" +"@tanstack/query-core@4.24.9": + version "4.24.9" + resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-4.24.9.tgz#52a5981d46f48e85630bcf5a645318e405493ce1" + integrity sha512-pZQ2NpdaHzx8gPPkAPh06d6zRkjfonUzILSYBXrdHDapP2eaBbGsx5L4/dMF+fyAglFzQZdDDzZgAykbM20QVw== + +"@tanstack/react-query@^4.24.9": + version "4.24.9" + resolved "https://registry.yarnpkg.com/@tanstack/react-query/-/react-query-4.24.9.tgz#8ec7e22dd3a858e174a90e81d20c85908f2ea653" + integrity sha512-6WLwUT9mrngIinRtcZjrWOUENOuLbWvQpKmU6DZCo2iPQVA+qvv3Ji90Amme4AkUyWQ8ZSSRTnAFq8V2tj2ACg== + dependencies: + "@tanstack/query-core" "4.24.9" + use-sync-external-store "^1.2.0" + "@turf/bbox@^6.5.0": version "6.5.0" resolved "https://registry.yarnpkg.com/@turf/bbox/-/bbox-6.5.0.tgz#bec30a744019eae420dac9ea46fb75caa44d8dc5"