From 433207f8e4ef8a45947ab334dcf90aa6085b000c Mon Sep 17 00:00:00 2001
From: Keannu Bernasol <noehbernasol0@gmail.com>
Date: Sat, 6 Jan 2024 20:47:26 +0800
Subject: [PATCH] Fix search bar in equipment instance list page

---
 package-lock.json                             |  13 ++
 package.json                                  |   1 +
 .../EquipmentInstancesListPage.tsx            | 130 +++++++++---------
 3 files changed, 77 insertions(+), 67 deletions(-)

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",
         }}
       >
-        <div style={{ alignSelf: "flex-start", paddingLeft: "32px" }}>
-          <div
+        <div
+          style={{
+            ...styles.flex_row,
+            ...{ alignItems: "center", justifySelf: "flex-start" },
+          }}
+        >
+          <SearchIcon
             style={{
-              ...styles.flex_row,
-              ...{ alignItems: "center", justifySelf: "flex-start" },
+              height: 32,
+              width: 32,
+              fill: colors.font_dark,
+              marginLeft: "1rem",
+              marginRight: "1rem",
+            }}
+          />
+          <Autocomplete
+            sx={{
+              display: "inline-block",
+              "& input": {
+                width: "256x",
+                bgcolor: "background.paper",
+                color: (theme) =>
+                  theme.palette.getContrastText(theme.palette.background.paper),
+              },
+            }}
+            value={filter}
+            onChange={(_event, newValue) => {
+              setFilter(newValue);
+            }}
+            freeSolo
+            id="custom-input-demo"
+            options={["Available", "Broken", "Glassware", "Miscellaneous"]}
+            renderInput={(params) => (
+              <div ref={params.InputProps.ref}>
+                <input type="text" {...params.inputProps} />
+              </div>
+            )}
+          />
+          <p
+            style={{
+              ...styles.text_M,
+              ...styles.text_dark,
+              ...{ marginLeft: "4px" },
             }}
           >
-            <SearchIcon
-              style={{
-                height: 32,
-                width: 32,
-                fill: colors.font_dark,
-                marginLeft: "1rem",
-                marginRight: "1rem",
-              }}
-            />
-            <Autocomplete
-              sx={{
-                display: "inline-block",
-                "& input": {
-                  width: "256x",
-                  bgcolor: "background.paper",
-                  color: (theme) =>
-                    theme.palette.getContrastText(
-                      theme.palette.background.paper
-                    ),
-                },
-              }}
-              value={filter}
-              onChange={(_event, newValue) => {
-                setFilter(newValue);
-              }}
-              freeSolo
-              id="custom-input-demo"
-              options={["Available", "Broken", "Glassware", "Miscellaneous"]}
-              renderInput={(params) => (
-                <div ref={params.InputProps.ref}>
-                  <input type="text" {...params.inputProps} />
-                </div>
-              )}
-            />
-            <p
-              style={{
-                ...styles.text_M,
-                ...styles.text_dark,
-                ...{ marginLeft: "4px" },
-              }}
-            >
-              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
-              }
-            </p>
-          </div>
+            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
+            }
+          </p>
         </div>
+        <div style={{ alignSelf: "flex-start", paddingLeft: "32px" }}></div>
         <TableContainer
           style={{ width: "90%", overflowY: "scroll", marginTop: "2rem" }}
           component={Paper}