diff --git a/package-lock.json b/package-lock.json index 5d37b69..a2b5e18 100644 --- a/package-lock.json +++ b/package-lock.json @@ -23,6 +23,7 @@ "react-redux": "^8.1.3", "react-router-dom": "^6.18.0", "react-toastify": "^9.1.3", + "react-virtuoso": "^4.6.2", "reactjs-popup": "^2.0.6", "styled-components": "^6.1.1" }, @@ -3895,6 +3896,18 @@ "react-dom": ">=16.6.0" } }, + "node_modules/react-virtuoso": { + "version": "4.6.2", + "resolved": "https://registry.npmjs.org/react-virtuoso/-/react-virtuoso-4.6.2.tgz", + "integrity": "sha512-vvlqvzPif+MvBrJ09+hJJrVY0xJK9yran+A+/1iwY78k0YCVKsyoNPqoLxOxzYPggspNBNXqUXEcvckN29OxyQ==", + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "react": ">=16 || >=17 || >= 18", + "react-dom": ">=16 || >=17 || >= 18" + } + }, "node_modules/reactjs-popup": { "version": "2.0.6", "resolved": "https://registry.npmjs.org/reactjs-popup/-/reactjs-popup-2.0.6.tgz", diff --git a/package.json b/package.json index 389aa1a..2bd2909 100644 --- a/package.json +++ b/package.json @@ -25,6 +25,7 @@ "react-redux": "^8.1.3", "react-router-dom": "^6.18.0", "react-toastify": "^9.1.3", + "react-virtuoso": "^4.6.2", "reactjs-popup": "^2.0.6", "styled-components": "^6.1.1" }, diff --git a/src/Pages/EquipmentInstancesListPage/EquipmentInstancesListPage.tsx b/src/Pages/EquipmentInstancesListPage/EquipmentInstancesListPage.tsx index 432b58a..b333d71 100644 --- a/src/Pages/EquipmentInstancesListPage/EquipmentInstancesListPage.tsx +++ b/src/Pages/EquipmentInstancesListPage/EquipmentInstancesListPage.tsx @@ -65,79 +65,75 @@ export default function EquipmentInstancesListPage() { width: "100%", minHeight: "100%", minWidth: "100%", - flexWrap: "wrap", }} > -
-
- Results Found:{" "}
- {
- equipment_instances?.data?.filter((equipment) =>
- filter !== null
- ? // If filter is not null, we filter if it matches any criteria
- equipment.equipment_name
- .toLowerCase()
- .includes(filter.toLowerCase()) ||
- equipment.category
- .toLowerCase()
- .includes(filter.toLowerCase()) ||
- equipment.last_updated
- .toLowerCase()
- .includes(filter?.toLowerCase()) ||
- equipment.status.toLowerCase() == filter.toLowerCase()
- : // If filter keyword is null then we just pass through everything as if we did not filter at all
- true
- ).length
- }
-