Prototype commit

src/components/Domain.tsx

@@ -0,0 +1,46 @@
+import React, {Fragment, FunctionComponent, ReactNode} from "react";
+import {DomainType} from "./DomainType";
+import {rdapStatusInfo} from "../constants";
+
+export type DomainProps = {
+    data: DomainType;
+};
+
+const Domain: FunctionComponent<DomainProps> = ({data}: DomainProps) => {
+    const properties: [string | ReactNode, string | ReactNode][] = [];
+
+    if (data.unicodeName) {
+        properties.push(["Name", data.unicodeName]);
+        properties.push(["ASCII Name", data.ldhName]);
+    } else {
+        properties.push(["Name", data.ldhName])
+    }
+
+    if (data.handle) properties.push(["Handle", data.handle]);
+    // if (data.events) properties.push
+    if (data.status) properties.push([
+        "Status",
+        data.status.map((statusKey, index) =>
+            <span title={rdapStatusInfo[statusKey]!} key={index}>
+            {statusKey}
+        </span>)
+    ])
+
+    return <div className="card">
+        <div className="card-header">{data.name} ({data.handle})</div>
+        <div className="card-body">
+            <dl>
+                {
+                    properties.map(([name, value], index) => {
+                            return <Fragment key={index}>
+                                <dt>{name}:</dt>
+                                <dd className="mt-2 mb-2 ml-6">{value}</dd>
+                            </Fragment>
+                        }
+                    )}
+            </dl>
+        </div>
+    </div>
+}
+
+export default Domain;

src/components/DomainType.tsx

@@ -0,0 +1,62 @@
+import type {FunctionComponent} from "react";
+import {useMemo} from "react";
+import Domain from "./Domain";
+
+export type Link = {
+    value: string;
+    rel: string;
+    href: string;
+    type: string
+}
+export type ObjectTypes = 'domain' | 'nameserver' | 'entity' | 'autnum' | 'ip network';
+
+export type DomainType = {
+    objectClassName: 'domain';
+    handle: string;
+    unicodeName: string;
+    ldhName: string;
+    links: Link[];
+    nameservers: NameserverType[];
+    entities: EntityType[];
+    status: string[]
+}
+
+export type NameserverType = {
+    objectClassName: 'nameserver';
+};
+export type EntityType = {
+    objectClassName: 'entity';
+};
+export type AutnumType = {
+    objectClassName: 'autnum';
+};
+export type IpNetworkType = {
+    objectClassName: 'ip network';
+};
+
+export type ObjectProps = {
+    data: DomainType | NameserverType | EntityType | AutnumType | IpNetworkType;
+};
+
+const GenericObject: FunctionComponent<ObjectProps> = ({data}: ObjectProps) => {
+    switch (data.objectClassName) {
+        case "domain":
+            return <Domain data={data}/>
+        case "autnum":
+        case "entity":
+        case "ip network":
+        case "nameserver":
+        default:
+            return <div className="card my-2">
+                <div className="card-header">Not implemented</div>
+            </div>
+    }
+
+    // const title: string = (data.unicodeName ?? data.ldhName ?? data.handle)?.toUpperCase() ?? "Response";
+    // return <div className="card">
+    //     <div className="card-header">{title}</div>
+    //     {objectFragment}
+    // </div>
+}
+
+export default GenericObject;

src/components/Events.tsx

@@ -0,0 +1,9 @@
+import {FunctionComponent} from "react";
+
+export type Event = {
+    eventAction: string;
+    eventDate: string;
+}
+const Events: FunctionComponent<EventsProps> = () => {
+
+}