Use paginate and add index numbers

src/components/OrchDelegatorViewer.js

@@ -1,13 +1,43 @@
-import React from "react";
+import React, { useState, useEffect } from 'react';
 import ScrollContainer from "react-indiana-drag-scroll";
 import Address from "./OrchAddressViewer";
+import { Pagination } from "@mantine/core";
+
+const itemsPerPage = 10;
 
 const OrchDelegatorViewer = (obj) => {
+  const [activePage, setPage] = useState(1);
   let delegators = obj.delegators;
+  let sortedList = [];
   if (delegators && delegators.length) {
+    let tmpCopy = [...delegators];
+    while (tmpCopy.length) {
+      let ticketIdx2 = tmpCopy.length - 1;
+      let largestIdx = 0;
+      let largestValue = 0;
+
+      // Find current O with most ticket wins in Eth
+      while (ticketIdx2 >= 0) {
+        const currentOrch = tmpCopy[ticketIdx2];
+        let thisVal = currentOrch.bondedAmount;
+
+        if (thisVal > largestValue) {
+          largestIdx = ticketIdx2;
+          largestValue = thisVal;
+        }
+        ticketIdx2 -= 1;
+      }
+      // Push current biggest list
+      sortedList.push(tmpCopy[largestIdx]);
+      // Remove from list
+      tmpCopy.splice(largestIdx, 1);
+    }
+
+    const totalPages = (delegators.length + (itemsPerPage - (delegators.length % itemsPerPage))) / itemsPerPage;
+
     return (
       <div className="row">
-        <div className="strokeSmollLeft fullMargin">
+        <div className="strokeSmollLeft fullMargin" style={{ paddingBottom: 0, marginBottom: 0 }}>
           <div className="row">
             <h3>{delegators.length} Current Delegators</h3>
           </div>
@@ -15,22 +45,36 @@ const OrchDelegatorViewer = (obj) => {
             <ScrollContainer className="overflow-container" hideScrollbars={false} style={{}}>
               <div className="overflow-content" style={{ cursor: 'grab', maxHeight: '300px' }}>
                 {
-                  delegators.map((delObj, idx) => {
+                  sortedList.map((delObj, idx) => {
+                    const tmp = idx - ((activePage - 1) * itemsPerPage);
+                    if (tmp >= 0 && tmp < itemsPerPage) {
                       return (
                         <div className="flexContainer forceWrap" key={"delegator" + idx}>
+                          <div className="rowAlignLeft">
+                            <div className="strokeSmollLeft" style={{ marginLeft: '0.2em', whiteSpace: 'nowrap' }} >
+                              <h3>{idx}</h3>
+                            </div>
                             <div className="rowAlignLeft">
                               <Address address={delObj.id} seed={"delegator" + idx + delObj.id} />
                             </div>
+                          </div>
                           <div className="rowAlignRight">
                             <p className="darkText">{parseFloat(delObj.bondedAmount).toFixed(2)} LPT since round {delObj.startRound}</p>
                           </div>
                         </div>
                       )
+                    }
+                    return null;
                   })
                 }
               </div>
             </ScrollContainer>
           </div>
+          <div className="row" style={{ marginTop: '1em', marginBottom: '1em' }}>
+            {totalPages > 1 ?
+              <Pagination page={activePage} onChange={setPage} total={totalPages} siblings={1} initialPage={1} />
+              : null}
+          </div>
         </div>
       </div>
     )

src/components/WinnerMonth.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect } from 'react';
 import { useSelector } from 'react-redux';
 import { VictoryPie } from 'victory';
 import Winner from '../components/WinnerStat';

src/components/eventViewer.js

@@ -1,6 +1,7 @@
 import React, { useState, useRef } from "react";
 import EventButton from "./eventButton";
 import ScrollContainer from 'react-indiana-drag-scroll';
+import { Pagination } from "@mantine/core";
 import Filter from './filterComponent';
 
 const thresholdStaking = 0.001;
@@ -18,8 +19,10 @@ const ticketTransferColour = "rgba(88, 91, 42, 0.3)";
 const greyColour = "rgba(122, 128, 127, 0.4)";
 
 const defaultIncrementMaxShown = 50;
+const itemsPerPage = 10;
 
 const EventViewer = (obj) => {
+  const [activePage, setPage] = useState(1);
   const listInnerRef = useRef();
   const [filterActivated, setFilterActivated] = useState(true);
   const [rewardActivated, setRewardActivated] = useState(true);
@@ -55,18 +58,6 @@ const EventViewer = (obj) => {
   let unbondActivatedColour;
   unbondActivatedColour = unbondActivated ? unbondColour : greyColour;
 
-  const updateOnScroll = () => {
-    if (unfiltered == 0) {
-      return;
-    }
-    if (listInnerRef.current) {
-      const { scrollTop, scrollHeight, clientHeight } = listInnerRef.current.container.current;
-      if (scrollTop + clientHeight === scrollHeight) {
-        obj.setMaxAmount(obj.maxAmount + defaultIncrementMaxShown);
-      }
-    }
-  }
-
   let eventList = [];
   let thisEvent = {};
   let updateEventsIdx = obj.updateEvents.length - 1;
@@ -428,8 +419,6 @@ const EventViewer = (obj) => {
       console.log("bork");
     }
 
-
-    if (unfiltered < obj.maxAmount) {
     unfiltered++;
     if (prevBlock === thisEvent.blockNumber) {
       eventList.push(<EventButton
@@ -452,34 +441,6 @@ const EventViewer = (obj) => {
       />);
     }
   }
-    else {
-      hidden++;
-    }
-  }
-
-  let showMoreButton;
-  if (hidden == 0) {
-    showMoreButton =
-      <div className="row">
-        <div className="strokeSmollLeft" style={{ width: '100%' }}>
-          <p className="row buttonPadding" style={{ borderRadius: "1.2em", backgroundColor: greyColour, maxWidth: '600px' }}>
-            ☑️ Reached end of results
-          </p>
-        </div>
-      </div>
-  } else {
-    showMoreButton =
-      <div className="row">
-        <div className="strokeSmollLeft" style={{ width: '100%' }}>
-          <button className="row nonHomeButton buttonPadding" style={{ borderRadius: "1.2em", backgroundColor: greyColour, maxWidth: '600px' }}
-            onClick={() => {
-              obj.setMaxAmount(obj.maxAmount + defaultIncrementMaxShown);
-            }}>
-            <h3>🔄 Show More</h3>
-          </button>
-        </div>
-      </div>
-  }
 
   let filterBit;
   if (obj.showFilter) {
@@ -499,14 +460,30 @@ const EventViewer = (obj) => {
       <div className="row" style={{ width: '100%', height: '100%' }}>
         <div className="stroke roundedOpaque onlyVerticalScroll" style={{ width: '40vw', minWidth: '400px', height: 'calc( 100vh - 50px - 2em)', marginTop: '2em' }}>
           <div className="content-wrapper" style={{ width: '100%' }}>
-            <ScrollContainer activationDistance={1} className="overflow-container"
+            <ScrollContainer activationDistance={1} className="overflow-container" hideScrollbars={false} style={{ width: '100%' }}>
-              hideScrollbars={false} onEndScroll={updateOnScroll} ref={listInnerRef}>
+              <div className="overflow-content" style={{ cursor: 'grab', padding: 0 }}>
-              <div className="overflow-content" style={{ cursor: 'grab', paddingTop: 0 }}>
                 <div className={obj.forceVertical ? "flexContainer forceWrap" : "flexContainer"} >
                   <div className="verticalDivider" />
-                  {eventList}
+                  {
-                  <div className="verticalDivider" />
+                    eventList.map((delObj, idx) => {
-                  {showMoreButton}
+                      const tmp = idx - ((activePage - 1) * itemsPerPage);
+                      if (tmp >= 0 && tmp < itemsPerPage) {
+                        return (
+                          <div className="flexContainer forceWrap" style={{ marginLeft: '0.2em', marginRight: '0.2em', width: '100%' }} key={"ticket-" + idx}>
+                            <div className="rowAlignLeft">
+                              <div className="strokeSmollLeft showNeverOnMobile" style={{ marginLeft: '0.2em', marginRight: '0.2em', whiteSpace: 'nowrap' }} >
+                                <h3>{idx}</h3>
+                              </div>
+                              <div className="row">
+                                {delObj}
+                              </div>
+                            </div>
+                          </div>
+                        )
+                      }
+                      return null;
+                    })
+                  }
                   <div className="verticalDivider" />
                 </div>
               </div>
@@ -555,6 +532,9 @@ const EventViewer = (obj) => {
               </button>
             </div>
           </div>
+          <div className="row" style={{ marginTop: '1em', marginBottom: '1em', justifyContent: 'space-evenly', display: "flex" }}>
+            <Pagination page={activePage} onChange={setPage} total={(limitShown + (itemsPerPage - (limitShown % itemsPerPage))) / itemsPerPage} siblings={3} initialPage={1} />
+          </div>
         </div>
       </div>
     </div>