useQuery for Status page

frontend/pages/status/index.js

@@ -30,18 +30,12 @@ const Status = () => {
   };
 
   const {
-    apiServerStatus,
+    apiServerStatusCache,
-    apiServerData,
+    ethereumClusterServerStatusCache,
-    crawlersServerStatus,
+    gethStatusCache,
-    crawlersServerData,
+    crawlersStatusCache,
-    gethStatus,
+    dbServerStatusCache,
-    gethData,
+    latestBlockDBStatusCache,
-    crawlersStatus,
-    crawlersData,
-    dbServerStatus,
-    dbServerData,
-    latestBlockDBStatus,
-    latestBlockDBData,
   } = useStatus();
 
   const [background, setBackground] = useState("background720");
@@ -63,13 +57,6 @@ const Status = () => {
   ]);
 
   useEffect(() => {
-    apiServerStatus();
-    crawlersServerStatus();
-    crawlersStatus();
-    gethStatus();
-    dbServerStatus();
-    latestBlockDBStatus();
-
     assets[
       "background720"
     ] = `${AWS_ASSETS_PATH}/product-background-720x405.png`;
@@ -175,12 +162,14 @@ const Status = () => {
             <Spacer />
             <Text
               color={
-                apiServerData?.data?.status == "ok"
+                !apiServerStatusCache.isLoading &&
+                apiServerStatusCache?.data?.status == "ok"
                   ? healthyStatusColor
                   : downStatusColor
               }
             >
-              {apiServerData?.data?.status == "ok"
+              {!apiServerStatusCache.isLoading &&
+              apiServerStatusCache?.data?.status == "ok"
                 ? healthyStatusText
                 : downStatusText}
             </Text>
@@ -191,12 +180,14 @@ const Status = () => {
             <Spacer />
             <Text
               color={
-                crawlersServerData?.data?.status == "ok"
+                !ethereumClusterServerStatusCache.isLoading &&
+                ethereumClusterServerStatusCache?.data?.status == "ok"
                   ? healthyStatusColor
                   : downStatusColor
               }
             >
-              {crawlersServerData?.data?.status == "ok"
+              {!ethereumClusterServerStatusCache.isLoading &&
+              ethereumClusterServerStatusCache?.data
                 ? healthyStatusText
                 : downStatusText}
             </Text>
@@ -205,15 +196,21 @@ const Status = () => {
             <Text>Latest block in Geth</Text>
             <Spacer />
             <Text>
-              {gethData?.data?.current_block ? gethData.data.current_block : 0}
+              {!gethStatusCache.isLoading &&
+              gethStatusCache?.data?.current_block
+                ? gethStatusCache.data.current_block
+                : 0}
             </Text>
           </Flex>
           <Flex mb={3}>
             <Text>Txpool latest record ts</Text>
             <Spacer />
             <Text>
-              {crawlersData?.data?.ethereum_txpool_timestamp
+              {!crawlersStatusCache.isLoading &&
-                ? shortTimestamp(crawlersData?.data?.ethereum_txpool_timestamp)
+              crawlersStatusCache?.data?.ethereum_txpool_timestamp
+                ? shortTimestamp(
+                    crawlersStatusCache?.data?.ethereum_txpool_timestamp
+                  )
                 : downStatusText}
             </Text>
           </Flex>
@@ -221,9 +218,10 @@ const Status = () => {
             <Text>Trending latest record ts</Text>
             <Spacer />
             <Text>
-              {crawlersData?.data?.ethereum_trending_timestamp
+              {!crawlersStatusCache.isLoading &&
+              crawlersStatusCache?.data?.ethereum_trending_timestamp
                 ? shortTimestamp(
-                    crawlersData?.data?.ethereum_trending_timestamp
+                    crawlersStatusCache?.data?.ethereum_trending_timestamp
                   )
                 : downStatusText}
             </Text>
@@ -234,12 +232,14 @@ const Status = () => {
             <Spacer />
             <Text
               color={
-                dbServerData?.data?.status == "ok"
+                !dbServerStatusCache.isLoading &&
+                dbServerStatusCache?.data?.status == "ok"
                   ? healthyStatusColor
                   : downStatusColor
               }
             >
-              {dbServerData?.data?.status == "ok"
+              {!dbServerStatusCache.isLoading &&
+              dbServerStatusCache?.data?.status == "ok"
                 ? healthyStatusText
                 : downStatusText}
             </Text>
@@ -248,8 +248,9 @@ const Status = () => {
             <Text>Latest block in Database</Text>
             <Spacer />
             <Text>
-              {latestBlockDBData?.data?.block_number
+              {!latestBlockDBStatusCache.isLoading &&
-                ? latestBlockDBData.data.block_number
+              latestBlockDBStatusCache?.data?.block_number
+                ? latestBlockDBStatusCache.data.block_number
                 : 0}
             </Text>
           </Flex>

frontend/src/core/hooks/useStatus.js

@@ -1,90 +1,67 @@
-import { useMutation } from "react-query";
+import { useQuery } from "react-query";
-import { useToast } from "./";
+import { queryCacheProps } from "./hookCommon";
-import { AuthService } from "../../core/services";
+import { StatusService } from "../../core/services";
 
 const useStatus = () => {
-  const toast = useToast();
+  const getAPIServerStatus = async () => {
+    const response = await StatusService.apiServerStatus();
+    return response.data;
+  };
+  const getEthereumClusterServerStatus = async () => {
+    const response = await StatusService.ethereumClusterServerStatus();
+    return response.data;
+  };
+  const getGethStatus = async () => {
+    const response = await StatusService.gethStatus();
+    return response.data;
+  };
+  const getCrawlersStatus = async () => {
+    const response = await StatusService.crawlersStatus();
+    return response.data;
+  };
+  const getDBServerStatus = async () => {
+    const response = await StatusService.dbServerStatus();
+    return response.data;
+  };
+  const getLatestBlockDBStatus = async () => {
+    const response = await StatusService.latestBlockDBStatus();
+    return response.data;
+  };
 
-  const { mutate: apiServerStatus, data: apiServerData } = useMutation(
+  const apiServerStatusCache = useQuery("apiServer", getAPIServerStatus, {
-    AuthService.apiServerStatus,
+    ...queryCacheProps,
-    {
-      onError: (error) => {
-        // toast(error, "error");
-      },
-      onSuccess: () => {
-        // toast("Status received", "success");
-      },
-    }
-  );
-
-  const { mutate: crawlersServerStatus, data: crawlersServerData } =
-    useMutation(AuthService.crawlersServerStatus, {
-      onError: (error) => {
-        // toast(error, "error");
-      },
-      onSuccess: () => {
-        // toast("Status received", "success");
-      },
   });
-  const { mutate: gethStatus, data: gethData } = useMutation(
+  const ethereumClusterServerStatusCache = useQuery(
-    AuthService.gethStatus,
+    "ethereumClusterServer",
+    getEthereumClusterServerStatus,
     {
-      onError: (error) => {
+      ...queryCacheProps,
-        // toast(error, "error");
-      },
-      onSuccess: () => {
-        // toast("Status received", "success");
-      },
     }
   );
-  const { mutate: crawlersStatus, data: crawlersData } = useMutation(
+  const gethStatusCache = useQuery("geth", getGethStatus, {
-    AuthService.crawlersStatus,
+    ...queryCacheProps,
+  });
+  const crawlersStatusCache = useQuery("crawlers", getCrawlersStatus, {
+    ...queryCacheProps,
+  });
+  const dbServerStatusCache = useQuery("dbServer", getDBServerStatus, {
+    ...queryCacheProps,
+  });
+  const latestBlockDBStatusCache = useQuery(
+    "latestBlockDB",
+    getLatestBlockDBStatus,
     {
-      onError: (error) => {
+      ...queryCacheProps,
-        // toast(error, "error");
-      },
-      onSuccess: () => {
-        // toast("Status received", "success");
-      },
-    }
-  );
-
-  const { mutate: dbServerStatus, data: dbServerData } = useMutation(
-    AuthService.dbServerStatus,
-    {
-      onError: (error) => {
-        // toast(error, "error");
-      },
-      onSuccess: () => {
-        // toast("Status received", "success");
-      },
-    }
-  );
-  const { mutate: latestBlockDBStatus, data: latestBlockDBData } = useMutation(
-    AuthService.latestBlockDBStatus,
-    {
-      onError: (error) => {
-        // toast(error, "error");
-      },
-      onSuccess: () => {
-        // toast("Status received", "success");
-      },
     }
   );
 
   return {
-    apiServerStatus,
+    apiServerStatusCache,
-    apiServerData,
+    ethereumClusterServerStatusCache,
-    crawlersServerStatus,
+    gethStatusCache,
-    crawlersServerData,
+    crawlersStatusCache,
-    gethStatus,
+    dbServerStatusCache,
-    gethData,
+    latestBlockDBStatusCache,
-    crawlersStatus,
-    crawlersData,
-    dbServerStatus,
-    dbServerData,
-    latestBlockDBStatus,
-    latestBlockDBData,
   };
 };
 

frontend/src/core/services/auth.service.js

@@ -1,8 +1,6 @@
 import { http } from "../utils";
 
 const API_URL = process.env.NEXT_PUBLIC_MOONSTREAM_API_URL;
-const DB_URL = process.env.NEXT_PUBLIC_MOONSTREAM_DB_URL;
-const CRAWLERS_URL = process.env.NEXT_PUBLIC_MOONSTREAM_ETHEREUM_CLUSTER_URL;
 export const AUTH_URL = `${API_URL}/users`;
 
 export const login = ({ username, password, token_note }) => {
@@ -103,45 +101,3 @@ export const revokeToken = (token) => {
     url: `${AUTH_URL}/revoke/${token}`,
   });
 };
-
-export const apiServerStatus = () => {
-  return http({
-    method: "GET",
-    url: `${API_URL}/ping`,
-  });
-};
-
-export const crawlersServerStatus = () => {
-  return http({
-    method: "GET",
-    url: `${CRAWLERS_URL}/ping`,
-  });
-};
-
-export const gethStatus = () => {
-  return http({
-    method: "GET",
-    url: `${CRAWLERS_URL}/status`,
-  });
-};
-
-export const crawlersStatus = () => {
-  return http({
-    method: "GET",
-    url: `${API_URL}/status`,
-  });
-};
-
-export const dbServerStatus = () => {
-  return http({
-    method: "GET",
-    url: `${DB_URL}/ping`,
-  });
-};
-
-export const latestBlockDBStatus = () => {
-  return http({
-    method: "GET",
-    url: `${DB_URL}/block/latest`,
-  });
-};

frontend/src/core/services/index.js

@@ -6,6 +6,7 @@ import * as GroupService from "./group.service";
 import * as PreferencesService from "./preferences.service";
 import * as HumbugService from "./humbug.service";
 import * as InvitesService from "./invites.service";
+import * as StatusService from "./status.service";
 import * as SubscriptionsService from "./subscriptions.service";
 import * as StreamService from "./stream.service";
 import * as TxInfoService from "./txinfo.service";
@@ -18,6 +19,7 @@ export {
   PreferencesService,
   HumbugService,
   InvitesService,
+  StatusService,
   SubscriptionsService,
   StreamService,
   TxInfoService,

frontend/src/core/services/status.service.js

@@ -0,0 +1,48 @@
+import { http } from "../utils";
+
+const API_URL = process.env.NEXT_PUBLIC_MOONSTREAM_API_URL;
+const DB_URL = process.env.NEXT_PUBLIC_MOONSTREAM_DB_URL;
+const ETHEREUM_CLUSTER_URL =
+  process.env.NEXT_PUBLIC_MOONSTREAM_ETHEREUM_CLUSTER_URL;
+
+export const apiServerStatus = () => {
+  return http({
+    method: "GET",
+    url: `${API_URL}/ping`,
+  });
+};
+
+export const ethereumClusterServerStatus = () => {
+  return http({
+    method: "GET",
+    url: `${ETHEREUM_CLUSTER_URL}/ping`,
+  });
+};
+
+export const gethStatus = () => {
+  return http({
+    method: "GET",
+    url: `${ETHEREUM_CLUSTER_URL}/status`,
+  });
+};
+
+export const crawlersStatus = () => {
+  return http({
+    method: "GET",
+    url: `${API_URL}/status`,
+  });
+};
+
+export const dbServerStatus = () => {
+  return http({
+    method: "GET",
+    url: `${DB_URL}/ping`,
+  });
+};
+
+export const latestBlockDBStatus = () => {
+  return http({
+    method: "GET",
+    url: `${DB_URL}/block/latest`,
+  });
+};