Hook

useCFTrace.ts

import React from 'react';
import { useSessionStorage } from '@mantine/hooks';

export interface CFTrace {
  status: string;
  country: string;
  countryCode: string;
  region: string;
  regionName: string;
  city: string;
  zip: string;
  lat: number;
  lon: number;
  timeZone: string;
  isp: string;
  org: string;
  as: string;
  query: string;
}

export default function useCFTrace(): CFTrace | undefined {
  const [cfTrace, setCfTrace] = useSessionStorage<CFTrace | undefined>({
    key: 'ip-api-trace',
    defaultValue: undefined,
    getInitialValueInEffect: false,
  });

  React.useEffect(() => {
    if (!cfTrace) {
      const fetchData = async () => {
        const response = await fetch('http://ip-api.com/json/');

        if (!response.ok) {
          const error = new Error('An error occurred while fetching the data.');
          throw error;
        }

        const jsonData = (await response.json()) as CFTrace;

        setCfTrace(() => jsonData);
      };

      fetchData()
        // eslint-disable-next-line no-console
        .catch(console.error);
    }
  }, [cfTrace, setCfTrace]);

  return cfTrace;
}