Merge pull request #14 from MoralisWeb3/moralis-scan-ep06

Moralis scan ep06

moralis-scan/README.md

@@ -12,6 +12,8 @@
 
 [Part 5 - I Cloned Etherscan in 5 hours - Routing](https://youtu.be/LFsj0-_tw0Y)
 
+[Part 6 - I Cloned Etherscan in 5 hours - Pagination Hook](https://youtu.be/_2V4peyS0Ns)
+
 # Getting Started with Create React App
 
 This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).

moralis-scan/src/App.js

@@ -11,8 +11,7 @@ Moralis.serverURL = process.env.REACT_APP_MORALIS_SERVER_URL;
 
 function App() {
   return (
-    <div className="App">
-      <h1>Moralis Scan</h1>
+    <div className="container">
       <Router>
         <Header />
         <Switch>

moralis-scan/src/components/Search.jsx

@@ -14,7 +14,7 @@ export default function Search() {
     params: {address}, // query params
     onSuccess: () => history.push(`/address/${address}`),
   }), [address, history]);
-  const {loading} = useMoralisCloudQuery("watchEthAddress", watchParams);
+  const {loading} = useMoralisCloudQuery("searchEthAddress", watchParams);
 
   const submitSearch = async (e) => {
     e.preventDefault();

moralis-scan/src/components/TransResults.jsx

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react'
 import { processTransaction } from '../queries/transactions';
-import { useMoralisCloudQuery } from '../hooks/cloudQuery';
 import { useParams } from 'react-router';
+import { usePagination } from '../hooks/pagination';
 
 const cols = [
   { colName: "Txn Hash", key: "hash" },
@@ -16,10 +16,9 @@ const cols = [
 export default function TransResults() {
   const {address: userAddress} = useParams();
   const options = useMemo(()=> ({
-    params: { userAddress },
     postProcess: processTransaction,
-  }), [userAddress]);
-  const { data: results, error, loading } = useMoralisCloudQuery("getTransactions", options);
+  }), []);
+  const { results, error, loading } = usePagination("getTransactions", userAddress, options);
 
   if (!results) {
     return null;

moralis-scan/src/hooks/cloudQuery.js

@@ -2,6 +2,8 @@ import Moralis from "moralis";
 import { useEffect, useState } from "react";
 
 const defaultCloudQueryOptions = {
+  includesCount: false,
+  countName: "count",
   params: {},
   postProcess: (r) => r.attributes,
   onSuccess: () => {},
@@ -20,12 +22,24 @@ export function useMoralisCloudQuery(
   useEffect(() => {
     if (methodName) {
       setState((v) => ({ ...v, loading: true }));
+      console.log("useMoralisCloudQuery:: methodName:", methodName," options:", options);
       Moralis.Cloud.run(methodName, options.params)
         .then((data) => {
+          console.log("useMoralisCloudQuery:: data:", data);
           if (data) {
-            const output = options.postProcess
-              ? data.map(options.postProcess)
-              : data;
+            let output = {};
+            if (options.includesCount) {
+              output.results = options.postProcess
+                ? data.results.map(options.postProcess)
+                : data.results;
+              output[options.countName] = data[options.countName];
+            } else {
+              output = options.postProcess
+                ? data.map(options.postProcess)
+                : data;
+            }
+            console.log("useMoralisCloudQuery:: output:", output);
+
             setState({ data: output, error: null, loading: false });
           } else {
             setState({ data: null, error: null, loading: false });

moralis-scan/src/hooks/pagination.js

@@ -0,0 +1,69 @@
+import { useEffect, useMemo, useState } from "react";
+import { useMoralisCloudQuery } from "./cloudQuery";
+
+const defaultPaginationOptions = {
+  postProcess: (r) => r.attributes, // function to apply to each result (result) => result
+};
+
+export const usePagination = (methodName, userAddress, options = defaultPaginationOptions) => {
+  const [pageSize, setPageSize] = useState(10);
+  const [currPage, setCurrPage] = useState(1);
+  const [totalPages, setTotalPages] = useState(1);
+  const [numResults, setNumResults] = useState(0);
+
+  const queryOptions = useMemo(()=> ({
+    includesCount: true,
+    countName: "count",
+    params: {
+      userAddress,
+      pageSize,
+      pageNum: currPage,
+    },
+    postProcess: options.postProcess,
+  }), [userAddress, pageSize, currPage, options.postProcess])
+  const { data, error, loading } = useMoralisCloudQuery(methodName, queryOptions);
+
+  useEffect(() => {
+    if (data) {
+      setNumResults(data.count || 0);
+      const n = Math.ceil(data.count / pageSize);
+      setTotalPages(n);
+    } else {
+      setNumResults(0);
+      setTotalPages(1);
+    }
+  }, [data, pageSize]);
+
+  const nextPage = () => {
+    if (currPage >= totalPages) {
+      // already at the last page
+      return;
+    }
+    const nextPage = currPage + 1;
+    setCurrPage(nextPage);
+  };
+
+  const prevPage = () => {
+    if (currPage <= 1) {
+      // already at the first page
+      return;
+    }
+    const nextPage = currPage - 1;
+    setCurrPage(nextPage);
+  };
+
+  return {
+    pageSize,
+    setPageSize,
+    totalPages,
+    currPage,
+    setCurrPage,
+    nextPage,
+    prevPage,
+    results: data?.results || [],
+    numResults,
+    loading,
+    error,
+  };
+
+}