feat: 🎸 disables auto data revalidation on focus

This change disables auto data revalidation on focus and adds a manual refresh button. This will avoid losing values entered manually after clicking outside of the page. ✅ Closes: #6
fpbrault · Dec 19, 2021 · 23a235e · 23a235e · vercel · Dec 19, 2021
1 parent 7afede9
commit 23a235e
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 29 deletions.
diff --git a/components/Rewards.tsx b/components/Rewards.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable no-unused-vars */
 import React, { useCallback, useEffect, useMemo, useState } from "react";
-import useSWR from "swr";
+import useSWR, { mutate } from "swr";
 import { useGetData } from "../lib/useRequest";
 import RewardsTable from "./Table";
 import ReactPlaceholder from "react-placeholder";
@@ -108,7 +108,8 @@ const Rewards: React.FC = () => {
 
   const { data: account } = useSWR(
     publicKey.length === 56 ? "https://horizon.stellar.org/accounts/" + publicKey : null,
-    fetcher
+    fetcher,
+    { revalidateOnFocus: false }
   );
 
   const { data: assets, error } = useGetData("/api/assets");
@@ -119,7 +120,9 @@ const Rewards: React.FC = () => {
     return { assets: poolIds && poolIds };
   }, [rewards]);
 
-  const { data: pools } = useSWR(poolIds ? ["/api/pools", { pools: poolIds }] : null, fetcher2);
+  const { data: pools } = useSWR(poolIds ? ["/api/pools", { pools: poolIds }] : null, fetcher2, {
+    revalidateOnFocus: false
+  });
 
   const tableParams = useMemo(() => {
     return {
@@ -130,7 +133,9 @@ const Rewards: React.FC = () => {
     };
   }, [account, assets, pools, rewards]);
 
-  const { data: tableInfo } = useSWR(pools ? ["/api/table", tableParams] : null, fetcher3);
+  const { data: tableInfo } = useSWR(pools ? ["/api/table", tableParams] : null, fetcher3, {
+    revalidateOnFocus: false
+  });
 
   useEffect(() => {
     if (localStorage) {
@@ -151,6 +156,10 @@ const Rewards: React.FC = () => {
     localStorage.setItem("showDetails", JSON.stringify(showDetails));
   }
 
+  function handleRefreshData() {
+    mutate(poolIds ? ["/api/pools", { pools: poolIds }] : null, false);
+  }
+
   if (rewardsError || error) return <div>ERROR</div>;
 
   return (
@@ -176,16 +185,15 @@ const Rewards: React.FC = () => {
                       onChange={(event) => setPublicKey(event.currentTarget.value)}
                     />
                   </label>
-                  <label className="cursor-pointer label">
+                  {/*  <label className="cursor-pointer label">
                     <span className="label-text">Show Details</span>
                     <input
                       type="checkbox"
-                      disabled
                       checked={showDetails}
                       className="toggle toggle-primary"
                       onChange={(event) => handleShowDetails(event.currentTarget.checked)}
                     />
-                  </label>
+                  </label> */}
                   <label className="cursor-pointer label">
                     <span className="label-text">Dark Mode</span>
                     <input
@@ -198,13 +206,13 @@ const Rewards: React.FC = () => {
                     />
                   </label>
                 </div>
-                {/*        <button
-                className="py-2 btn btn-md btn-primary"
-                onClick={() => {
-                  handleRefreshData();
-                }}>
-                Refresh
-              </button> */}
+                <button
+                  className="py-2 btn btn-md btn-primary"
+                  onClick={() => {
+                    handleRefreshData();
+                  }}>
+                  Refresh
+                </button>
 
                 <div className="text-center break-words text-2xs">
                   <div className="">
@@ -223,21 +231,23 @@ const Rewards: React.FC = () => {
             <div className="flex justify-center pt-4 pb-8 mx-2">
               <ReactPlaceholder
                 showLoadingAnimation
-                className="w-3/4"
-                type="media"
+                className="max-w-6xl"
                 rows={30}
+                type="text"
                 ready={tableInfo && assets}>
-                {tableInfo && assets && (
-                  <RewardsTable
-                    data={tableInfo}
-                    aquaPrice={
-                      assets.assets.find(
-                        (asset: { id: string }) =>
-                          asset.id ===
-                          "AQUA-GBNZILSTVQZ4R7IKQDGHYGY2QXL5QOFJYQMXPKWRRM5PAV7Y4M67AQUA"
-                      ).price_USD
-                    }></RewardsTable>
-                )}
+                <>
+                  {tableInfo && assets && (
+                    <RewardsTable
+                      data={tableInfo}
+                      aquaPrice={
+                        assets.assets.find(
+                          (asset: { id: string }) =>
+                            asset.id ===
+                            "AQUA-GBNZILSTVQZ4R7IKQDGHYGY2QXL5QOFJYQMXPKWRRM5PAV7Y4M67AQUA"
+                        ).price_USD
+                      }></RewardsTable>
+                  )}{" "}
+                </>
               </ReactPlaceholder>
             </div>
           </div>

diff --git a/lib/useRequest.js b/lib/useRequest.js
@@ -9,7 +9,7 @@ export const useGetData = (path) => {
 
   const url = path;
 
-  const { data, error } = useSWR(url, fetcher);
+  const { data, error } = useSWR(url, fetcher, { revalidateOnFocus: false });
 
   return { data, error };
 };
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -5,7 +5,7 @@ import Layout from "../components/Layout";
 const Home: NextPage = () => {
   return (
     <Layout pageTitle="AMM AQUA Rewards viewer">
-      <div data-theme="stellar" className="bg-base-200">
+      <div className="bg-base-200">
         <Rewards />
       </div>
     </Layout>