Autorefresh

config/config.ts_TEMPLATE

@@ -33,6 +33,12 @@ interface Config {
     threshold: number;
   };
 
+  // Configuration specifically for the frontend site
+  frontend: {
+    // How often to autrefresh, in seconds. Set to null to disable
+    autoRefreshInterval: number | null;
+  };
+
   // Donation configuration, right now only supports lnd
   donation?: {
     // Backend type, currently only supports lnd
@@ -74,6 +80,10 @@ const config: Config = {
     threshold: 1845,
   },
 
+  frontend: {
+    autoRefreshInterval: 120,
+  },
+
   // donation: {
   //   type: "lnd",
   //   data: {

frontend/app.tsx

@@ -6,10 +6,12 @@ import store, { useStoreActions } from "./state/index.ts";
 function StoreStarter({ Page, pageProps }: { Page: ComponentType<any>; pageProps: any }) {
   const [gotBlocks, setGotBlocks] = useState(false);
   const getBlocks = useStoreActions((store) => store.getBlocks);
+  const autoRefresh = useStoreActions((store) => store.autoRefresh);
 
   useEffect(() => {
     (async () => {
       await getBlocks();
+      autoRefresh();
       setGotBlocks(true);
     })();
   }, []);

frontend/state/index.ts

@@ -6,6 +6,7 @@ import config from "../back/config/config.ts";
 export interface IStoreModel {
   getBlocks: Thunk<IStoreModel>;
   setBlocks: Action<IStoreModel, IBlock[]>;
+  autoRefresh: Thunk<IStoreModel>;
   blocks: IBlock[];
 }
 
@@ -50,6 +51,24 @@ export const model: IStoreModel = {
     }
   }),
 
+  autoRefresh: thunk((actions) => {
+    if (!config.frontend.autoRefreshInterval) {
+      return;
+    }
+
+    setInterval(async () => {
+      try {
+        console.log("Fetching blocks");
+        const result = await fetch("/blocks");
+        const json = (await result.json()) as IBlock[];
+        console.log(json);
+        actions.setBlocks(json);
+      } catch (error) {
+        console.log("Couldn't fetch /blocks", error.message);
+      }
+    }, config.frontend.autoRefreshInterval * 1000);
+  }),
+
   setBlocks: action((state, payload) => {
     state.blocks = payload;
   }),