infinite scroller base

components/common/MyInfiniteScroller.tsx

@@ -0,0 +1,15 @@
+import InfiniteScroll from "react-infinite-scroller";
+
+interface Props {}
+
+const MyInfiniteScroller: React.FC<Props> = ({}) => {
+  return (
+    <InfiniteScroll
+      pageStart={1}
+      loadMore={(page) => setBuildsToShow(page * 10)}
+      hasMore={buildsToShow < data.searchForBuilds.length}
+    ></InfiniteScroll>
+  );
+};
+
+export default MyInfiniteScroller;

package-lock.json

@@ -3292,6 +3292,15 @@
         "csstype": "^3.0.2"
       }
     },
+    "@types/react-infinite-scroller": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@types/react-infinite-scroller/-/react-infinite-scroller-1.2.1.tgz",
+      "integrity": "sha512-64bpbqdSgtmy1zSZ2AQoFzguwZO7TyKjqJRTEnfNMCAQbnrX90kz+rYufZyY9CmzhwpXMwRO8xR9fMQnbYUkgQ==",
+      "dev": true,
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/sinonjs__fake-timers": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/@types/sinonjs__fake-timers/-/sinonjs__fake-timers-6.0.2.tgz",
@@ -9130,6 +9139,14 @@
         }
       }
     },
+    "react-infinite-scroller": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/react-infinite-scroller/-/react-infinite-scroller-1.2.4.tgz",
+      "integrity": "sha512-/oOa0QhZjXPqaD6sictN2edFMsd3kkMiE19Vcz5JDgHpzEJVqYcmq+V3mkwO88087kvKGe1URNksHEOt839Ubw==",
+      "requires": {
+        "prop-types": "^15.5.8"
+      }
+    },
     "react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",

package.json

@@ -38,6 +38,7 @@
     "react-hook-form": "^6.11.3",
     "react-hotkeys-hook": "^2.4.0",
     "react-icons": "^3.11.0",
+    "react-infinite-scroller": "^1.2.4",
     "react-markdown": "^5.0.2",
     "react-string-replace": "^0.4.4",
     "swr": "^0.3.9",
@@ -50,6 +51,7 @@
     "@types/next-auth": "^3.1.15",
     "@types/node": "^14.14.7",
     "@types/react": "^16.9.56",
+    "@types/react-infinite-scroller": "^1.2.1",
     "cypress": "^5.6.0",
     "prettier": "^2.1.2",
     "ts-node": "^9.0.0",