Get table from new source

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",

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 (
-    <BrowserRouter basename={import.meta.env.BASE_URL}>
+    <QueryClientProvider client={queryClient}>
-      <Routes>
+      <BrowserRouter basename={import.meta.env.BASE_URL}>
-        <Route path="/" element={<MapPage />} />
+        <Routes>
-        <Route path="/signin" element={<LoginPage />} />
+          <Route path="/" element={<MapPage />} />
-        <Route path="/verify-user" element={<VerifyRegistrationPage />} />
+          <Route path="/signin" element={<LoginPage />} />
-        <Route path="/register" element={<RegisterPage />} />
+          <Route path="/verify-user" element={<VerifyRegistrationPage />} />
-      </Routes>
+          <Route path="/register" element={<RegisterPage />} />
-    </BrowserRouter>
+        </Routes>
+      </BrowserRouter>
+    </QueryClientProvider>
   );
 }
 

src/modules/Table/Table.css

@@ -2,7 +2,7 @@
   padding: 0 !important;
 }
 
-.ant-table-body {
+.ant-table {
   @apply max-w-[100vw];
 }
 

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: "Прогноз",
+    title: "Категория",
-    dataIndex: "predict",
+    dataIndex: "category",
-    key: "predict",
+    key: "category",
+    width: "120px",
+    ellipsis: true,
   },
   {
-    title: "Факт",
+    title: "Прогноз",
-    dataIndex: "fact",
+    dataIndex: "prediction",
-    key: "fact",
+    key: "prediction",
+    width: "120px",
+    ellipsis: true,
   },
   {
     title: "Зрелость",
     dataIndex: "age",
     key: "age",
-  },
+    width: "120px",
-];
+    ellipsis: true,
-
-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,
   },
   {
-    id: "4",
+    title: "План",
-    category: "Жилой дом",
+    dataIndex: "plan",
-    status: "Работающий",
+    key: "plan",
-    predict: 80,
+    width: "120px",
-    fact: 50,
+    ellipsis: true,
-    age: 6,
   },
   {
-    id: "5",
+    title: "Факт",
-    category: "МФЦ",
+    dataIndex: "fact",
-    status: "Не работает",
+    key: "fact",
-    predict: 100,
+    width: "120px",
-    fact: undefined,
+    ellipsis: true,
-    age: 0,
-  },
-  {
-    id: "6",
-    category: "Библиотека",
-    status: "На рассмотрении",
-    predict: 80,
-    fact: undefined,
-    age: 0,
   },
   {
-    id: "7",
+    title: "Дельта",
-    category: "Жилой дом",
+    dataIndex: "delta",
-    status: "Работающий",
+    key: "delta",
-    predict: 80,
+    width: "120px",
-    fact: 50,
+    ellipsis: true,
-    age: 6,
   },
   {
-    id: "8",
+    title: "АО",
-    category: "МФЦ",
+    dataIndex: "okrug",
-    status: "Не работает",
+    key: "okrug",
-    predict: 100,
+    width: "120px",
-    fact: undefined,
+    ellipsis: true,
-    age: 0,
   },
   {
-    id: "9",
+    title: "Район",
-    category: "Библиотека",
+    dataIndex: "rayon",
-    status: "На рассмотрении",
+    key: "rayon",
-    predict: 80,
+    width: "120px",
-    fact: undefined,
+    ellipsis: true,
-    age: 0,
   },
 ];
 
 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: <Empty description="Нет данных" /> }}
             // loading={isLoading}
             pagination={false}
-            dataSource={data}
+            dataSource={data?.results}
             columns={columns}
             rowKey="id"
             scroll={SCROLL}

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"