Merge pull request #15 from MoralisWeb3/moralis-scan-ep07

Moralis scan ep07
MoralisWeb3 · Apr 17, 2021 · abaf470 · abaf470
2 parents ef76eae + e136661
commit abaf470
Show file tree

Hide file tree

Showing 5 changed files with 81 additions and 13 deletions.
diff --git a/moralis-scan/README.md b/moralis-scan/README.md
@@ -14,6 +14,8 @@
 
 [Part 6 - I Cloned Etherscan in 5 hours - Pagination Hook](https://youtu.be/_2V4peyS0Ns)
 
+[Part 7 - I Cloned Etherscan in 5 hours - Pagination Component](https://youtu.be/3x5eQdZo9i0)
+
 # Getting Started with Create React App
 
 This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).

diff --git a/moralis-scan/src/App.js b/moralis-scan/src/App.js
@@ -2,9 +2,9 @@ import Moralis from "moralis";
 import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
 
 import "./App.css";
-import TransResults from "./components/TransResults";
 import Home from "./components/Home";
 import Header from "./Header";
+import Transactions from "./components/Transactions";
 
 Moralis.initialize(process.env.REACT_APP_MORALIS_APPLICATION_ID);
 Moralis.serverURL = process.env.REACT_APP_MORALIS_SERVER_URL;
@@ -15,7 +15,7 @@ function App() {
       <Router>
         <Header />
         <Switch>
-          <Route path="/address/:address" component={TransResults} />
+          <Route path="/address/:address" component={Transactions} />
           <Route exact path="/"component={Home} />
         </Switch>
       </Router>

diff --git a/moralis-scan/src/components/Paginator.jsx b/moralis-scan/src/components/Paginator.jsx
@@ -0,0 +1,50 @@
+import React, { createContext, useContext } from 'react'
+import { usePagination } from '../hooks/pagination';
+
+export const ResultContext = createContext({results: []});
+export const  useResultContext = () => useContext(ResultContext);
+
+export default function Paginator({methodName, userAddress, options, children}) {
+  const {
+    // pageSize,
+    // setPageSize,
+    totalPages,
+    setCurrPage,
+    currPage,
+    nextPage,
+    prevPage,
+    results,
+    numResults,
+  } = usePagination(methodName, userAddress, options);
+
+  return (
+    <div>
+      <div className="d-flex justify-content-between align-items-start mb-2">
+        <span>A total of {numResults} transactions found</span>
+        <div>
+          <button className="btn btn-info ms-1" onClick={() => setCurrPage(1)}>
+            First
+          </button>
+          <button className="btn btn-info ms-1" onClick={prevPage}>
+            {"<"}
+          </button>
+          <span className="btn btn-info ms-1">
+            Page {currPage} of {totalPages}
+          </span>
+          <button className="btn btn-info ms-1" onClick={nextPage}>
+            {">"}
+          </button>
+          <button
+            className="btn btn-info ms-1"
+            onClick={() => setCurrPage(totalPages)}
+          >
+            Last
+          </button>
+        </div>
+      </div>
+      <ResultContext.Provider value={{ results }}>
+        {children}
+      </ResultContext.Provider>
+    </div>
+  );
+}
diff --git a/moralis-scan/src/components/TransResults.jsx b/moralis-scan/src/components/TransResults.jsx
@@ -1,7 +1,4 @@
-import React, { useMemo } from 'react'
-import { processTransaction } from '../queries/transactions';
-import { useParams } from 'react-router';
-import { usePagination } from '../hooks/pagination';
+import { useResultContext } from "./Paginator";
 
 const cols = [
   { colName: "Txn Hash", key: "hash" },
@@ -14,16 +11,11 @@ const cols = [
 ];
 
 export default function TransResults() {
-  const {address: userAddress} = useParams();
-  const options = useMemo(()=> ({
-    postProcess: processTransaction,
-  }), []);
-  const { results, error, loading } = usePagination("getTransactions", userAddress, options);
-
+  const { results } = useResultContext();
   if (!results) {
     return null;
   }
-  
+
   return (
     <div>
       <table className="table">

diff --git a/moralis-scan/src/components/Transactions.jsx b/moralis-scan/src/components/Transactions.jsx
@@ -0,0 +1,24 @@
+import React from 'react'
+import { useParams } from 'react-router';
+import { processTransaction } from '../queries/transactions';
+import Paginator from './Paginator';
+import TransResults from './TransResults';
+
+export default function Transactions() {
+  const {address } = useParams();
+  if (!address) {
+    return null;
+  }
+
+  return (
+    <div>
+      <Paginator
+        userAddress={address}
+        methodName="getTransactions"
+        options={{ postProcess: processTransaction }}
+      >
+        <TransResults />
+      </Paginator>
+    </div>
+  );
+}