Use paginate and add index numbers

2025-07-05 02:35:09 +02:00 · 2022-04-22 11:36:19 +02:00 · 2022-04-22 11:36:19 +02:00 · 9f7a50d576
commit 9f7a50d576
parent dc18713749
3 changed files with 105 additions and 81 deletions
--- a/src/components/OrchDelegatorViewer.js
+++ b/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) => {
-                    return (
-                      <div className="flexContainer forceWrap" key={"delegator" + idx}>
-                        <div className="rowAlignLeft">
-                          <Address address={delObj.id} seed={"delegator" + idx + delObj.id} />
+                  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>
-                        <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>
    )
--- a/src/components/WinnerMonth.js
+++ b/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';
--- a/src/components/eventViewer.js
+++ b/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,57 +419,27 @@ const EventViewer = (obj) => {
      console.log("bork");
    }

-
-    if (unfiltered < obj.maxAmount) {
-      unfiltered++;
-      if (prevBlock === thisEvent.blockNumber) {
-        eventList.push(<EventButton
-          key={thisEvent.transactionHash + unfiltered}
-          seed={thisEvent.transactionHash + unfiltered}
-          eventObj={thisEvent}
-          type={latestType}
-          setSearchTerm={obj.setSearchTerm}
-        />);
-      } else {
-        prevBlock = thisEvent.blockNumber;
-        eventList.push(<EventButton
-          key={thisEvent.transactionHash + unfiltered}
-          seed={thisEvent.transactionHash + unfiltered}
-          eventObj={thisEvent}
-          type={latestType}
-          isFirstOfBlock={prevBlock}
-          time={thisEvent.blockTime}
-          setSearchTerm={obj.setSearchTerm}
-        />);
-      }
+    unfiltered++;
+    if (prevBlock === thisEvent.blockNumber) {
+      eventList.push(<EventButton
+        key={thisEvent.transactionHash + unfiltered}
+        seed={thisEvent.transactionHash + unfiltered}
+        eventObj={thisEvent}
+        type={latestType}
+        setSearchTerm={obj.setSearchTerm}
+      />);
+    } else {
+      prevBlock = thisEvent.blockNumber;
+      eventList.push(<EventButton
+        key={thisEvent.transactionHash + unfiltered}
+        seed={thisEvent.transactionHash + unfiltered}
+        eventObj={thisEvent}
+        type={latestType}
+        isFirstOfBlock={prevBlock}
+        time={thisEvent.blockTime}
+        setSearchTerm={obj.setSearchTerm}
+      />);
    }
-    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;
@ -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"
-              hideScrollbars={false} onEndScroll={updateOnScroll} ref={listInnerRef}>
-              <div className="overflow-content" style={{ cursor: 'grab', paddingTop: 0 }}>
+            <ScrollContainer activationDistance={1} className="overflow-container" hideScrollbars={false} style={{ width: '100%' }}>
+              <div className="overflow-content" style={{ cursor: 'grab', padding: 0 }}>
                <div className={obj.forceVertical ? "flexContainer forceWrap" : "flexContainer"} >
                  <div className="verticalDivider" />
-                  {eventList}
-                  <div className="verticalDivider" />
-                  {showMoreButton}
+                  {
+                    eventList.map((delObj, idx) => {
+                      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>