diff --git a/explorer/src/api/index.ts b/explorer/src/api/index.ts index 328eb5f4bd..37e68b8096 100644 --- a/explorer/src/api/index.ts +++ b/explorer/src/api/index.ts @@ -94,17 +94,6 @@ export class Api { return res.json(); }; - // static fetchGatewayByID = async (id: string): Promise => { - // const response = await fetch(`${GATEWAYS_API}/${id}`); - - // // when the mixnode is not found, returned undefined - // if (response.status === 404) { - // return undefined; - // } - - // return response.json(); - // }; - static fetchGatewayUptimeStoryById = async (id: string): Promise => (await fetch(`${UPTIME_STORY_API_GATEWAY}/${id}/history`)).json(); diff --git a/explorer/src/components/DetailTable.tsx b/explorer/src/components/DetailTable.tsx index b7d30a0e39..1e74c5cff6 100644 --- a/explorer/src/components/DetailTable.tsx +++ b/explorer/src/components/DetailTable.tsx @@ -6,7 +6,7 @@ import { CopyToClipboard } from '@nymproject/react/clipboard/CopyToClipboard'; import { Box } from '@mui/system'; import { cellStyles } from './Universal-DataGrid'; import { currencyToString } from '../utils/currency'; -import { GatewayEnridedRowType } from './Gateways'; +import { GatewayEnrichedRowType } from './Gateways'; import { MixnodeRowType } from './MixNodes'; export type ColumnsType = { @@ -46,7 +46,7 @@ function formatCellValues(val: string | number, field: string) { export const DetailTable: React.FC<{ tableName: string; columnsData: ColumnsType[]; - rows: MixnodeRowType[] | GatewayEnridedRowType[]; + rows: MixnodeRowType[] | GatewayEnrichedRowType[]; }> = ({ tableName, columnsData, rows }: UniversalTableProps) => { const theme = useTheme(); return ( diff --git a/explorer/src/components/Gateways.ts b/explorer/src/components/Gateways.ts index cecc2bd697..eba43bae6c 100644 --- a/explorer/src/components/Gateways.ts +++ b/explorer/src/components/Gateways.ts @@ -9,7 +9,7 @@ export type GatewayRowType = { location: string; }; -export type GatewayEnridedRowType = GatewayRowType & { +export type GatewayEnrichedRowType = GatewayRowType & { routing_score: string; avg_uptime: string; clients_port: number; @@ -32,7 +32,7 @@ export function gatewayToGridRow(arrayOfGateways: GatewayResponse): GatewayRowTy export function gatewayEnrichedToGridRow( gateway: GatewayResponseItem, report: GatewayReportResponse, -): GatewayEnridedRowType { +): GatewayEnrichedRowType { return { id: gateway.owner, owner: gateway.owner, diff --git a/explorer/src/context/gateway.tsx b/explorer/src/context/gateway.tsx index 88c9f3b4c3..b66d57fe8b 100644 --- a/explorer/src/context/gateway.tsx +++ b/explorer/src/context/gateway.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import { ApiState, GatewayReportResponse, UptimeStoryResponse } from '../typeDefs/explorer-api'; import { Api } from '../api'; +import { useApiState } from './hooks'; /** * This context provides the state for a single gateway by identity key. @@ -59,47 +60,3 @@ export const GatewayContextProvider: React.FC = ({ return {children}; }; - -/** - * Custom hook to get data from the API by passing an id to a delegate method that fetches the data asynchronously - * @param id The id to fetch - * @param fn Delegate the fetching to this method (must take `(id: string)` as a parameter) - * @param errorMessage A static error message, to use when no dynamic error message is returned - */ -function useApiState( - id: string, - fn: (id: string) => Promise, - errorMessage: string, -): [ApiState | undefined, () => Promise>, () => void] { - // stores the state - const [value, setValue] = React.useState | undefined>(); - - // clear the value - const clearValueFn = () => setValue(undefined); - - // this provides a method to trigger the delegate to fetch data - const wrappedFetchFn = React.useCallback(async () => { - try { - // keep previous state and set to loading - setValue((prevState) => ({ ...prevState, isLoading: true })); - - // delegate to user function to get data and set if successful - const data = await fn(id); - const newValue: ApiState = { - isLoading: false, - data, - }; - setValue(newValue); - return newValue; - } catch (error) { - // return the caught error or create a new error with the static error message - const newValue: ApiState = { - error: error instanceof Error ? error : new Error(errorMessage), - isLoading: false, - }; - setValue(newValue); - return newValue; - } - }, [setValue, fn]); - return [value || { isLoading: true }, wrappedFetchFn, clearValueFn]; -} diff --git a/explorer/src/context/hooks.ts b/explorer/src/context/hooks.ts index f891a31ca3..8133ae0fd7 100644 --- a/explorer/src/context/hooks.ts +++ b/explorer/src/context/hooks.ts @@ -1,30 +1,46 @@ import * as React from 'react'; import { ApiState } from '../typeDefs/explorer-api'; -type WrappedApiFn = () => Promise>; - +/** + * Custom hook to get data from the API by passing an id to a delegate method that fetches the data asynchronously + * @param id The id to fetch + * @param fn Delegate the fetching to this method (must take `(id: string)` as a parameter) + * @param errorMessage A static error message, to use when no dynamic error message is returned + */ export const useApiState = ( - // eslint-disable-next-line @typescript-eslint/ban-types - fn: Function, + id: string, + fn: (argId: string) => Promise, errorMessage: string, -): [ApiState, WrappedApiFn] => { - const [value, setValue] = React.useState>(); - const wrappedFn = React.useCallback(async () => { +): [ApiState | undefined, () => Promise>, () => void] => { + // stores the state + const [value, setValue] = React.useState | undefined>(); + + // clear the value + const clearValueFn = () => setValue(undefined); + + // this provides a method to trigger the delegate to fetch data + const wrappedFetchFn = React.useCallback(async () => { try { + // keep previous state and set to loading setValue((prevState) => ({ ...prevState, isLoading: true })); - const data = await fn(); - setValue({ + + // delegate to user function to get data and set if successful + const data = await fn(id); + const newValue: ApiState = { isLoading: false, data, - }); - return data; + }; + setValue(newValue); + return newValue; } catch (error) { - setValue({ + // return the caught error or create a new error with the static error message + const newValue: ApiState = { error: error instanceof Error ? error : new Error(errorMessage), isLoading: false, - }); - return undefined; + }; + setValue(newValue); + return newValue; } }, [setValue, fn]); - return [value || { isLoading: true }, wrappedFn]; + return [value || { isLoading: true }, wrappedFetchFn, clearValueFn]; }; diff --git a/explorer/src/context/mixnode.tsx b/explorer/src/context/mixnode.tsx index 6259b8c00d..a17366645c 100644 --- a/explorer/src/context/mixnode.tsx +++ b/explorer/src/context/mixnode.tsx @@ -11,6 +11,7 @@ import { UptimeStoryResponse, } from '../typeDefs/explorer-api'; import { Api } from '../api'; +import { useApiState } from './hooks'; import { mixNodeResponseItemToMixnodeRowType, MixnodeRowType } from '../components/MixNodes'; /** @@ -153,47 +154,3 @@ export const MixnodeContextProvider: React.FC = ({ return {children}; }; - -/** - * Custom hook to get data from the API by passing an id to a delegate method that fetches the data asynchronously - * @param id The id to fetch - * @param fn Delegate the fetching to this method (must take `(id: string)` as a parameter) - * @param errorMessage A static error message, to use when no dynamic error message is returned - */ -function useApiState( - id: string, - fn: (argId: string) => Promise, - errorMessage: string, -): [ApiState | undefined, () => Promise>, () => void] { - // stores the state - const [value, setValue] = React.useState | undefined>(); - - // clear the value - const clearValueFn = () => setValue(undefined); - - // this provides a method to trigger the delegate to fetch data - const wrappedFetchFn = React.useCallback(async () => { - try { - // keep previous state and set to loading - setValue((prevState) => ({ ...prevState, isLoading: true })); - - // delegate to user function to get data and set if successful - const data = await fn(id); - const newValue: ApiState = { - isLoading: false, - data, - }; - setValue(newValue); - return newValue; - } catch (error) { - // return the caught error or create a new error with the static error message - const newValue: ApiState = { - error: error instanceof Error ? error : new Error(errorMessage), - isLoading: false, - }; - setValue(newValue); - return newValue; - } - }, [setValue, fn]); - return [value || { isLoading: true }, wrappedFetchFn, clearValueFn]; -} diff --git a/explorer/src/pages/GatewayDetail/index.tsx b/explorer/src/pages/GatewayDetail/index.tsx index 930775c500..9656cfe05d 100644 --- a/explorer/src/pages/GatewayDetail/index.tsx +++ b/explorer/src/pages/GatewayDetail/index.tsx @@ -3,7 +3,7 @@ import { Alert, AlertTitle, Box, CircularProgress, Grid, Typography } from '@mui import { useParams } from 'react-router-dom'; import { GatewayResponseItem } from '../../typeDefs/explorer-api'; import { ColumnsType, DetailTable } from '../../components/DetailTable'; -import { gatewayEnrichedToGridRow, GatewayEnridedRowType } from '../../components/Gateways'; +import { gatewayEnrichedToGridRow, GatewayEnrichedRowType } from '../../components/Gateways'; import { ComponentError } from '../../components/ComponentError'; import { ContentCard } from '../../components/ContentCard'; import { TwoColSmallTable } from '../../components/TwoColSmallTable'; @@ -31,14 +31,15 @@ const columns: ColumnsType[] = [ title: 'Routing Score', flex: 1, headerAlign: 'left', - tooltipInfo: 'Estimated reward per epoch for this profit margin if your node is selected in the active set.', + tooltipInfo: + 'Routing score is relative to that of the network. Each time a gateway is tested, the test packets have to go through the full path of the network (gateway + 3 nodes). If a node in the path drop packets it will affect the score of the gateway and other nodes in the test.', }, { field: 'avg_uptime', title: 'Avg. Score', flex: 1, headerAlign: 'left', - tooltipInfo: 'Estimated reward per epoch for this profit margin if your node is selected in the active set.', + tooltipInfo: 'Is the average routing score in the last 24 hours', }, { field: 'host', @@ -66,7 +67,7 @@ const columns: ColumnsType[] = [ const PageGatewayDetailsWithState: React.FC<{ selectedGateway: GatewayResponseItem | undefined }> = ({ selectedGateway, }) => { - const [enrichGateway, setEnrichGateway] = React.useState(); + const [enrichGateway, setEnrichGateway] = React.useState(); const [status, setStatus] = React.useState(); const { uptimeReport, uptimeStory } = useGatewayContext(); diff --git a/explorer/src/typeDefs/explorer-api.ts b/explorer/src/typeDefs/explorer-api.ts index b1d74e33ab..5e2b7b38ae 100644 --- a/explorer/src/typeDefs/explorer-api.ts +++ b/explorer/src/typeDefs/explorer-api.ts @@ -1,7 +1,5 @@ /* eslint-disable camelcase */ -import { UseButtonParameters } from "@mui/base"; - export interface ClientConfig { url: string; version: string;