Rewrite index with useLookup hook, add react-ogp

This commit is contained in:
Xevion
2023-02-20 00:10:38 -06:00
parent ffc690edce
commit 063397625c
3 changed files with 114 additions and 0 deletions

View File

@@ -17,6 +17,7 @@
"react": "18.2.0",
"react-dom": "18.2.0",
"react-hook-form": "^7.42.1",
"react-ogp": "^0.0.3",
"sass": "^1.57.1",
"usehooks-ts": "^2.9.1",
"zod": "^3.20.2"

108
src/pages/index.tsx Normal file
View File

@@ -0,0 +1,108 @@
import {type NextPage} from "next";
import Head from "next/head";
import {useRef, useState} from "react";
import Generic, {type ParsedGeneric} from "@/components/Generic";
import useLookup from "@/hooks/useLookup";
import {onPromise} from "@/helpers";
import {OGP} from "react-ogp";
const Index: NextPage = () => {
const {error, setTarget, submit, currentType} = useLookup();
const inputRef = useRef<HTMLInputElement>();
const [response, setResponse] = useState<ParsedGeneric | null>();
return (
<>
<Head>
<title>rdap.xevion.dev</title>
<OGP
url="https://rdap.xevion.dev"
title="RDAP | by Xevion.dev"
description="A custom, private RDAP lookup client built by Xevion."
siteName="rdap.xevion.dev"
type="website"
/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="shortcut icon" href="/shortcut-icon.svg"/>
<meta name="keywords" content="xevion, rdap, whois, rdap, domain name, dns, ip address"/>
</Head>
<>
<style jsx>{`
dd {
margin: 0.5em 0 1em 2em;
}
.card {
margin-bottom: 1em;
}
dl {
margin: 0;
}
.rdap-status-code, .rdap-event-time {
border-bottom: 1px dashed silver;
}
#object {
text-transform: lowercase;
}
#spinner-msg {
height: 2em;
display: inline-block;
margin: -0.25em 0 0 0;
padding: 0.25em 0 0 0;
}
`}</style>
<nav className="navbar navbar-expand-lg navbar-dark shadow-sm">
<span className="text-white" style={{fontSize: 'larger'}}>
<a className="navbar-brand" href="#">rdap.xevion.dev</a>
</span>
</nav>
<div className="container py-12 mx-auto max-w-screen-lg">
<form onSubmit={onPromise(async function (e) {
e.preventDefault()
const r = await submit();
setResponse(() => r ?? null);
})} className="form-inline">
<div className="col p-0">
<div className="input-group">
<input
onChange={(e) => setTarget(e.currentTarget.value)}
className="form-control bg-zinc-800 focus:bg-zinc-700 focus:border-zinc-600 border-zinc-700 text-zinc-200"
type="text"
/>
</div>
</div>
</form>
<div className="container p-0 italic text-[#aaa]" style={{fontSize: "small"}}>
<div className="col pt-3 pb-1">
Options:&nbsp;
<label htmlFor="request-jscontact">
<input name="request-jscontact" id="request-jscontact" type="checkbox"/>
Request JSContact
</label>
&nbsp;
<label htmlFor="follow-referral">
<input name="follow-referral" id="follow-referral" type="checkbox"/>
Follow referral to registrar&apos;s RDAP record
</label>
</div>
</div>
<div>
{error}
</div>
<div id="output-div">
{response != null ? <Generic data={response}/> : null}
</div>
</div>
</>
</>
);
};
export default Index;

View File

@@ -2067,6 +2067,11 @@ react-is@^16.13.1:
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
react-ogp@^0.0.3:
version "0.0.3"
resolved "https://registry.yarnpkg.com/react-ogp/-/react-ogp-0.0.3.tgz#f3d49ff49e593576778f6a11824a4ccb2d8b427d"
integrity sha512-+m5my7G6dxzN79e1e/M5VV2MmM2sXrTqs+hfL8sFHsjWn4PMv3P8eD/aMSHPibvp6BYsiFCeWMMSzcqUCIQr9w==
react@18.2.0:
version "18.2.0"
resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"