added comp_systems and modular instances frontend

src/Pages/DevicesPage/DevicesPage.tsx

@@ -3,8 +3,78 @@ import "./DevicesPage.css";
 import { PaginationContainer } from "Components/PaginationContainer/PaginationContainer";
 import { Alert } from "@mantine/core";
 import { Link } from "react-router";
+import { useDeviceStore } from "Stores/DeviceStore";
+import { useEffect, useState } from "react";
+import { useAuthenticationStore } from "Stores/AuthenticationStore";
+import { getMySystems } from "Api/QuantumBackend/MachineManagment";
+import MachinesListCard from "Components/ListCard/MachineListCard/MachinesListCard";
 
 function DevicesPage() {
+  const { devices, setDevices, setTotalDevices, totalDevices, removeDevice } =
+    useDeviceStore();
+  const [isLoading, setIsLoading] = useState(true);
+  const { profile } = useAuthenticationStore();
+  const [cur_page, set_cur_page] = useState<number>(1);
+  const [page_size, set_page_size] = useState<number>(256);
+
+  useEffect(() => {
+    setIsLoading(true);
+    if (profile) {
+      getMySystems({ page_num: cur_page })
+        .then((devices) => {
+          setDevices(devices.systems);
+          set_cur_page(devices.cur_page);
+          setTotalDevices(devices.total_systems);
+          set_page_size(devices.page_size);
+          setIsLoading(false);
+        })
+        .catch(() => setIsLoading(false));
+    }
+  }, [profile]);
+
+  useEffect(() => {
+    if (profile) {
+      if (devices && devices.length > 0 && devices.length > page_size) {
+        removeDevice(devices[devices.length - 1].system.id);
+      }
+      if (
+        devices &&
+        devices.length > 0 &&
+        cur_page > Math.ceil(totalDevices / page_size)
+      ) {
+        setIsLoading(true);
+        getMySystems({ page_num: Math.max(1, cur_page - 1) })
+          .then((devices) => {
+            setDevices(devices.systems);
+            set_cur_page(devices.cur_page);
+            setTotalDevices(devices.total_systems);
+            set_page_size(devices.page_size);
+            setIsLoading(false);
+            scroll({ top: 0 });
+          })
+          .catch(() => setIsLoading(false));
+        set_cur_page(Math.max(1, cur_page - 1));
+      }
+      if (
+        devices &&
+        devices.length > 0 &&
+        devices.length < Math.min(page_size, totalDevices) &&
+        cur_page != Math.ceil(totalDevices / page_size)
+      ) {
+        getMySystems({ page_num: cur_page })
+          .then((devices) => {
+            setDevices(devices.systems);
+            set_cur_page(devices.cur_page);
+            setTotalDevices(devices.total_systems);
+            set_page_size(devices.page_size);
+            setIsLoading(false);
+            scroll({ top: 0 });
+          })
+          .catch(() => setIsLoading(false));
+      }
+    }
+  }, [profile, devices]);
+
   return (
     <>
       <Helmet>
@@ -16,17 +86,33 @@ function DevicesPage() {
       </Helmet>
       <div className="DevicesPage">
         <PaginationContainer
-          numberOfPages={1}
-          isLoading={false}
-          activePage={1}
-          setPage={() => {}}
+          numberOfPages={Math.ceil(totalDevices / page_size)}
+          isLoading={isLoading}
+          activePage={cur_page}
+          setPage={(page) => {
+            getMySystems({ page_num: page })
+              .then((devices) => {
+                setDevices(devices.systems);
+                set_cur_page(devices.cur_page);
+                setTotalDevices(devices.total_systems);
+                set_page_size(devices.page_size);
+                setIsLoading(false);
+                scroll({ top: 0 });
+              })
+              .catch(() => setIsLoading(false));
+          }}
         >
-          <Alert title="Подключенные устройства не найдены" color="blue">
-            Для того, чтобы добавить устройство, простмотрите{" "}
-            <Link to={"documentaion"} className="invisible_link">
-              документацию
-            </Link>
-          </Alert>
+          {devices.length == 0 && !isLoading && (
+            <Alert title="Подключенные устройства не найдены" color="blue">
+              Для того, чтобы добавить устройство, простмотрите{" "}
+              <Link to={"documentaion"} className="invisible_link">
+                документацию
+              </Link>
+            </Alert>
+          )}
+          {devices.map((machine) => {
+            return <MachinesListCard {...machine} />;
+          })}
         </PaginationContainer>
       </div>
     </>