import { type NextPage } from "next"; import Head from "next/head"; import { useState, useEffect, useCallback } from "react"; import { useRouter } from "next/router"; import RdapObjectRouter from "@/rdap/components/RdapObjectRouter"; import type { MetaParsedGeneric } from "@/rdap/hooks/useLookup"; import useLookup from "@/rdap/hooks/useLookup"; import LookupInput from "@/rdap/components/LookupInput"; import ErrorCard from "@/components/ErrorCard"; import { ThemeToggle } from "@/components/ThemeToggle"; import { Maybe } from "true-myth"; import { Flex, Container, Section, Text, Link, IconButton } from "@radix-ui/themes"; import { GitHubLogoIcon } from "@radix-ui/react-icons"; import { OverlayScrollbarsComponent } from "overlayscrollbars-react"; import { serializeQueryToUrl, deserializeUrlToQuery, buildShareableUrl } from "@/lib/urls"; import type { TargetType } from "@/rdap/schemas"; const Index: NextPage = () => { const router = useRouter(); const [response, setResponse] = useState>(Maybe.nothing()); const [isLoading, setLoading] = useState(false); // URL update handler for useLookup hook const handleUrlUpdate = useCallback( (target: string, manuallySelectedType: TargetType | null) => { const queryString = serializeQueryToUrl(target, manuallySelectedType); // Use shallow routing to update URL without page reload router.push(queryString, undefined, { shallow: true }); }, [router] ); const { error, target, setTarget, setTargetType, submit, currentType, manualType, tldValidation, } = useLookup(undefined, handleUrlUpdate); // Parse URL parameters on mount and auto-execute query if present useEffect(() => { // Only run once on mount, when router is ready if (!router.isReady) return; const searchParams = new URLSearchParams(router.asPath.split("?")[1] || ""); const queryState = deserializeUrlToQuery(searchParams); if (queryState) { // Set the target and type from URL setTarget(queryState.query); if (queryState.type) { setTargetType(queryState.type); } // Auto-execute the query setLoading(true); submit({ target: queryState.query, requestJSContact: true, followReferral: true, }) .then(setResponse) .catch((e) => { console.error("Error executing query from URL:", e); setResponse(Maybe.nothing()); }) .finally(() => setLoading(false)); } // eslint-disable-next-line react-hooks/exhaustive-deps }, [router.isReady]); // Only run when router becomes ready return ( <> rdap.xevion.dev
{ setTarget(target); setTargetType(targetType); }} onSubmit={async function (props) { try { setLoading(true); setResponse(await submit(props)); setLoading(false); } catch (e) { console.error(e); setResponse(Maybe.nothing()); setLoading(false); } }} /> {error != null ? ( ) : null} {response.isJust ? ( ) : null}
); }; export default Index;