Add pages to stats

src/components/WinnerMonth.js

@@ -6,6 +6,7 @@ import {
   getOrchestratorScores
 } from "../actions/livepeer";
 import Ticket from "../components/TicketViewer";
+import { Pagination } from "@mantine/core";
 
 const claimColour = "rgba(25, 158, 29, 0.4)";
 const stakeColour = "rgba(25, 158, 147, 0.4)";
@@ -18,9 +19,16 @@ const activationColour = "rgba(154, 158, 25, 0.4)";
 const ticketTransferColour = "rgba(88, 91, 42, 0.3)";
 const greyColour = "rgba(122, 128, 127, 0.4)";
 
+const itemsPerPage = 6;
+
 const WinnerMonth = (obj) => {
   const livepeer = useSelector((state) => state.livepeerstate);
   const [thisScores, setThisScores] = useState(null);
+  const [activePage, setPage] = useState(1);
+  const [activeGraph, setGraph] = useState(1);
+
+  let totalGraphs = 0;
+
 
   useEffect(() => {
     const setScore = async () => {
@@ -119,6 +127,8 @@ const WinnerMonth = (obj) => {
       });
     }
 
+    totalGraphs++;
+
     stakeObj = <div className="stroke">
       <h4>Stake Distribution</h4>
       <VictoryPie padding={0} data={pieList} x="address" y="sum"
@@ -199,6 +209,8 @@ const WinnerMonth = (obj) => {
       });
     }
 
+    totalGraphs++;
+
     earningsObj = <div className="stroke">
       <h4>Earnings Distribution</h4>
       <VictoryPie padding={{ top: 20, bottom: 20, left: 120, right: 120 }} data={pieList} x="address" y="sum"
@@ -277,6 +289,8 @@ const WinnerMonth = (obj) => {
       });
     }
 
+    totalGraphs++;
+
     broadcasterObj = <div className="stroke">
       <h4>Broadcaster Payments</h4>
       <VictoryPie padding={{ top: 20, bottom: 20, left: 120, right: 120 }} data={pieList} x="address" y="sum"
@@ -389,6 +403,23 @@ const WinnerMonth = (obj) => {
     }
   }
 
+  const totalPages = (sortedList.length + (itemsPerPage - (sortedList.length % itemsPerPage))) / itemsPerPage;
+  let renderStake = false;
+  let renderEarnings = false;
+  let renderBread = false;
+  let graphIndex = 1;
+  if (activeGraph == graphIndex && totalGraphs && stakeObj) {
+    renderStake = true;
+  }
+  graphIndex++;
+  if (activeGraph == graphIndex && totalGraphs && earningsObj) {
+    renderEarnings = true;
+  }
+  graphIndex++;
+  if (activeGraph == graphIndex && totalGraphs && broadcasterObj) {
+    renderBread = true;
+  }
+
   return (
     <div className="stroke" key={obj.seed + "strok"}>
       {obj.data.reactivationCount ?
@@ -510,12 +541,19 @@ const WinnerMonth = (obj) => {
         </div> : null
       }<div className="halfVerticalDivider" />
       <div className="verticalDivider" />
-      {stakeObj}
+      {renderStake ? stakeObj : null}
-      {earningsObj}
+      {renderEarnings ? earningsObj : null}
-      {broadcasterObj}
+      {renderBread ? broadcasterObj : null}
+      <div className="row" style={{ marginTop: '1em', marginBottom: '1em' }}>
+        {totalGraphs > 1 ?
+          <Pagination page={activeGraph} onChange={setGraph} total={totalGraphs} siblings={1} initialPage={1} />
+          : null}
+      </div>
       <div className="flexContainer forceWrap">
         {
           sortedList.map(function (orch, i) {
+            const tmp = i - ((activePage - 1) * itemsPerPage);
+            if (tmp >= 0 && tmp < itemsPerPage) {
               let thisCommission = null;
               let thisStake = null;
               let thisEarnings = null;
@@ -555,8 +593,15 @@ const WinnerMonth = (obj) => {
                   <div className="verticalDivider" />
                 </div>
               )
+            }
+            return null;
           })
         }
+        <div className="row" style={{ marginTop: '1em', marginBottom: '1em' }}>
+          {totalPages > 1 ?
+            <Pagination page={activePage} onChange={setPage} total={totalPages} boundaries={2} siblings={2} initialPage={1} />
+            : null}
+        </div>
       </div>
       <div className="verticalDivider" />
     </div>