diff --git a/src/components/Peers/PeerCountryCell.tsx b/src/components/Peers/PeerCountryCell.tsx index 1edb332..48e8419 100644 --- a/src/components/Peers/PeerCountryCell.tsx +++ b/src/components/Peers/PeerCountryCell.tsx @@ -3,6 +3,7 @@ import { PeerPin } from "./types"; import { countriesCoordinates } from "./countries"; import { useQuery } from "@tanstack/react-query"; import "./PeerCountryCell.css"; +import { useEffect } from "react"; export type Props = { address: string; @@ -24,21 +25,12 @@ export function PeerCountryCell({ address, onPinAdd }: Props) { return fetch(import.meta.env.VITE_GEO_IP_URL + "/" + ip) .then((res) => res.json()) - .then((json) => { - const coordinate = countriesCoordinates.find( - (c) => c.iso === json.country - ); - - if (coordinate) { - onPinAdd({ - lat: parseFloat(coordinate.lat), - lng: parseFloat(coordinate.lng), - }); - } - - return coordinate; - }); + .then((json) => + countriesCoordinates.find((c) => c.iso === json.country) + ); }, + refetchOnMount: true, + queryKey: [address], // Enable only when the address exists @@ -56,6 +48,15 @@ export function PeerCountryCell({ address, onPinAdd }: Props) { refetchOnWindowFocus: false, }); + useEffect(() => { + if (data) { + onPinAdd({ + lat: parseFloat(data.lat), + lng: parseFloat(data.lng), + }); + } + }, [data]); + return (
diff --git a/src/routes/dashboard/peers.tsx b/src/routes/dashboard/peers.tsx index de64e21..491e867 100644 --- a/src/routes/dashboard/peers.tsx +++ b/src/routes/dashboard/peers.tsx @@ -9,6 +9,8 @@ import { useCallback, useState } from "react"; import { PeerPin } from "../../components/Peers/types"; import "./peers.css"; import { CodexSdk } from "../../sdk/codex"; +import { ErrorBoundary } from "@sentry/react"; +import { ErrorPlaceholder } from "../../components/ErrorPlaceholder/ErrorPlaceholder"; // This function accepts the same arguments as DottedMap in the example above. const mapJsonString = getMapJSON({ height: 60, grid: "diagonal" }); @@ -102,5 +104,12 @@ const Peers = () => { }; export const Route = createFileRoute("/dashboard/peers")({ - component: Peers, + component: () => ( + ( + + )}> + + + ), });