types#IP TypeScript Examples

allIps: IP[] = Array.from({ length: 3 }).map((_, idx) => ({
  ...baseIP,
  traits: {
    ...baseIP.traits,
    ipAddress: Array.from({ length: 4 })
      .map((_) => idx + 1)
      .join("."),
  },
}))

renderMocked = (ips: IP[]) => {
  return render(
    <IPMenu
      ips={ips}
      onSetCurrentIp={setCurrentMock}
      onRemoveIp={removeMock}
      onToggleIpVisible={toggleVisibleMock}
    />
  );
}

it("builds location comma-separated", () => {
  const ip: IP = {
    ...baseIP,
    country: { names: { en: "Orangeland" } },
    city: { names: { en: "City" } },
    continent: { names: { en: "Antarctica" } },
  };
  const { getByText } = render(<Tooltip ip={ip} />);
  expect(getByText("City, Orangeland, Antarctica")).toBeInTheDocument();
});

it("ignores empty location values", () => {
  const ip: IP = {
    ...baseIP,
    country: { names: { en: "" } },
    city: { names: { en: "City" } },
    continent: { names: { en: "Antarctica" } },
  };
  const { getByText } = render(<Tooltip ip={ip} />);
  expect(getByText("City, Antarctica")).toBeInTheDocument();
});

it("ignores undefined location values", () => {
  const ip: IP = {
    ...baseIP,
    country: { names: { en: undefined! } },
    city: { names: { en: undefined! } },
    continent: { names: { en: undefined! } },
  };
  const { queryByText } = render(<Tooltip ip={ip} />);
  expect(queryByText("Location")).not.toBeInTheDocument();
});

it("builds ip/cidr from adderss and network", () => {
  const ip: IP = {
    ...baseIP,
    traits: {
      ...baseIP.traits,
      ipAddress: "1.2.3.4",
      network: "0.0.0.0/19",
    },
  };
  const { getByText } = render(<Tooltip ip={ip} />);
  expect(getByText("1.2.3.4/19")).toBeInTheDocument();
});

it("handles empty network cidr", () => {
  const ip: IP = {
    ...baseIP,
    traits: {
      ...baseIP.traits,
      ipAddress: "1.2.3.4",
      network: "",
    },
  };
  const { getByText } = render(<Tooltip ip={ip} />);
  expect(getByText("1.2.3.4")).toBeInTheDocument();
});

it("handles no network info", () => {
  const ip: IP = {
    ...baseIP,
    traits: {
      ...baseIP.traits,
      ipAddress: "",
      network: "",
    },
  };
  const { queryByText } = render(<Tooltip ip={ip} />);
  expect(queryByText("Address")).not.toBeInTheDocument();
});

it("adds accuracy radius in km if available", () => {
  const ip: IP = {
    ...baseIP,
    location: {
      ...baseIP.location,
      accuracyRadius: 42,
    },
  };
  const { getByText } = render(<Tooltip ip={ip} />);
  expect(getByText("42km")).toBeInTheDocument();
});

it("excludes accuracy radius if unavailable", () => {
  const { accuracyRadius, ...rest } = baseIP.location;
  const ip: IP = {
    ...baseIP,
    location: {
      ...baseIP.location,
      accuracyRadius: undefined!,
    },
  };
  const { queryByText } = render(<Tooltip ip={ip} />);
  expect(queryByText("Accuracy")).not.toBeInTheDocument();
});

it("adds time zone if available", () => {
  const ip: IP = {
    ...baseIP,
    location: {
      ...baseIP.location,
      timeZone: "sometimezonedata",
    },
  };
  const { getByText } = render(<Tooltip ip={ip} />);
  expect(getByText("Time Zone")).toBeInTheDocument();
  expect(getByText("sometimezonedata")).toBeInTheDocument();
});

it("excludes accuracy radius if unavailable", () => {
  const { accuracyRadius, ...rest } = baseIP.location;
  const ip: IP = {
    ...baseIP,
    location: {
      ...baseIP.location,
      timeZone: undefined!,
    },
  };
  const { queryByText } = render(<Tooltip ip={ip} />);
  expect(queryByText("Time Zone")).not.toBeInTheDocument();
});

baseIP: IP = {
  continent: {
    code: "EU",
    geonameId: 6255148,
    names: {
      en: "Europe",
    },
  },
  country: {
    geonameId: 3017382,
    isInEuropeanUnion: true,
    isoCode: "FR",
    names: {
      en: "France",
    },
  },
  traits: {
    isAnonymous: false,
    isAnonymousProxy: false,
    isAnonymousVpn: false,
    isHostingProvider: false,
    isLegitimateProxy: false,
    isPublicProxy: false,
    isResidentialProxy: false,
    isSatelliteProvider: false,
    isTorExitNode: false,
    ipAddress: "2.2.2.2",
    network: "2.2.0.0/18",
  },
  city: {},
  location: {
    accuracyRadius: 500,
    latitude: 48.8582,
    longitude: 2.3387,
    timeZone: "Europe/Paris",
  },
}

Map: React.FC<Props> = (props) => {
  const { selectedIP, onSetSelectedIp, allIPs } = props;

  const [viewport, setViewport] = useState<ViewState>(defaultMapState);
  const [hovered, setHovered] = useState<PickInfo<IP>>();

  const onViewportChanged = (viewport: ViewState) => {
    setViewport(viewport);
  };

  useEffect(() => {
    if (!(selectedIP?.location.latitude && selectedIP.location.longitude)) {
      setViewport(defaultMapState);
    } else {
      const { latitude, longitude, accuracyRadius } = selectedIP.location;
      setViewport((current) => ({
        ...current,
        latitude: latitude,
        longitude: longitude,
        zoom: getZoom(accuracyRadius),
        transitionDuration: 1500,
        transitionInterpolator: new FlyToInterpolator(),
      }));
    }
  }, [selectedIP]);

  const visibleIPs = useMemo(() => allIPs.filter((ip) => !ip.hidden), [allIPs]);

  const iconPointLayer = new IconLayer<IP>({
    id: "all-ips",
    data: visibleIPs,
    pickable: true,
    iconAtlas: iconAtlas,
    iconMapping: ICON_MAPPING,
    sizeScale: 15,
    getPosition: (ip) => [ip.location.longitude, ip.location.latitude],
    getSize: () => 3,
    getColor: (ip) => getColor(ip.location.accuracyRadius),
    getIcon: () => "marker",
    onHover: (info: PickInfo<IP>) => setHovered(info),
    onClick: (info: PickInfo<IP>) => {
      info.object && onSetSelectedIp(info.object);
    },
  });

  const radiusLayer = new ScatterplotLayer<IP>({
    id: "confidence-radius",
    data: hovered?.object ? [hovered.object] : [],
    pickable: false,
    radiusUnits: "meters",
    getPosition: (ip) => [ip.location.longitude, ip.location.latitude],
    getLineColor: () => [255, 0, 0],
    getFillColor: (ip) => getColor(ip.location.accuracyRadius, true),
    getRadius: (ip) => ip.location.accuracyRadius * 1000,
  });

  return (
    <MapGL
      {...viewport}
      width="100%"
      height="100%"
      maxPitch={0}
      onViewportChange={onViewportChanged}
      mapboxApiAccessToken={process.env.REACT_APP_MAPBOX_TOKEN}
      doubleClickZoom={false}
      disableTokenWarning
    >
      <DeckGL viewState={viewport} layers={[radiusLayer, iconPointLayer]}>
        {hovered?.object && (
          <Tooltip
            ip={hovered.object}
            style={{ left: hovered.x, top: hovered.y }}
          />
        )}
      </DeckGL>
    </MapGL>
  );
}

Home: React.FC = () => {
  const [currentIp, setCurrentIp] = useState<IP>();
  const [allIps, setAllIps] = usePersistentState<IP[]>("allIps", []);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");
  const [menuExpanded, setMenuExpanded] = useState(true);

  const onSearchIP = async (ip: string) => {
    setLoading(true);
    setError("");
    setAllIps((existing) => existing.filter((e) => e.traits.ipAddress !== ip));
    const params = new URLSearchParams({ ip });
    try {
      const ip = await request<IP>(`${endpoint}?${params}`);
      if (!(ip.location.latitude && ip.location.longitude)) {
        throw new Error("Unable to locate IP");
      }
      setCurrentIp(ip);
      setAllIps((allIps) => [ip, ...allIps]);
      setLoading(false);
    } catch (e) {
      setError(e.message);
      setLoading(false);
    }
  };

  const onRemoveIp = useCallback(
    (ip: IP) => {
      setAllIps((existing) =>
        existing.filter(
          (exist) => exist.traits.ipAddress !== ip.traits.ipAddress
        )
      );
    },
    [setAllIps]
  );

  const onToggleIpVisible = useCallback(
    (ip: IP) => {
      setAllIps((existing) =>
        existing.map((e) => ({
          ...e,
          hidden:
            e.traits.ipAddress === ip.traits.ipAddress ? !e.hidden : e.hidden,
        }))
      );
    },
    [setAllIps]
  );

  const onSetCurrentIP = useCallback(
    (ip: IP) => {
      if (window.matchMedia("(max-width: 450px)").matches) {
        setMenuExpanded(false);
      }
      setCurrentIp(ip);
    },
    [setCurrentIp]
  );

  return (
    <Wrapper>
      {loading && <Loading />}
      <CollapsableDialog
        title="IP Locate"
        collapsed={!!currentIp && allIps.length > 0}
        menuExpanded={menuExpanded}
        setMenuExpanded={setMenuExpanded}
      >
        {error && <ErrorMsg>{error}</ErrorMsg>}
        <IPForm onSubmit={(ip) => onSearchIP(ip)} />
        <IPMenu
          ips={allIps}
          onRemoveIp={onRemoveIp}
          onSetCurrentIp={onSetCurrentIP}
          onToggleIpVisible={onToggleIpVisible}
        />
      </CollapsableDialog>
      <Map
        selectedIP={currentIp}
        onSetSelectedIp={onSetCurrentIP}
        allIPs={allIps}
      />
    </Wrapper>
  );
}