Add better Domain/Events/Status rendering, implement zod schema parsing & handling

src/components/DomainCard.tsx

@@ -1,13 +1,14 @@
 import type {FunctionComponent, ReactNode} from "react";
 import React, {Fragment} from "react";
-import type {DomainType} from "@/components/DomainType";
 import {rdapStatusInfo} from "@/constants";
+import type {Domain} from "@/responses";
+import Events from "@/components/Events"
 
 export type DomainProps = {
-    data: DomainType;
+    data: Domain;
 };
 
-const Domain: FunctionComponent<DomainProps> = ({data}: DomainProps) => {
+const DomainCard: FunctionComponent<DomainProps> = ({data}: DomainProps) => {
     const properties: [string | ReactNode, string | ReactNode][] = [];
 
     if (data.unicodeName) {
@@ -17,18 +18,20 @@ const Domain: FunctionComponent<DomainProps> = ({data}: DomainProps) => {
         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>)
-    ])
+    properties.push(["Handle", data.handle]);
+    properties.push(["Events", <Events key={0} data={data.events} />])
 
+    properties.push([
+        "Status",
+        <ul key={2} className="list-disc">
+            {data.status.map((statusKey, index) =>
+                <li title={rdapStatusInfo[statusKey]} key={index}>
+                    {statusKey}
+                </li>)}
+        </ul>
+    ])
     return <div className="card">
-        <div className="card-header">{data.name} ({data.handle})</div>
+        <div className="card-header">{data.ldhName ?? data.unicodeName} ({data.handle})</div>
         <div className="card-body">
             <dl>
                 {
@@ -44,4 +47,4 @@ const Domain: FunctionComponent<DomainProps> = ({data}: DomainProps) => {
     </div>
 }
 
-export default Domain;
+export default DomainCard;

src/components/DomainType.tsx

@@ -1,61 +0,0 @@
-import type {FunctionComponent} from "react";
-import Domain from "@/components/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

@@ -1,9 +1,26 @@
 import type {FunctionComponent} from "react";
+import type {Event} from "@/responses";
+import {Fragment} from "react";
 
-export type Event = {
-    eventAction: string;
-    eventDate: string;
+export type EventsProps = {
+    data: Event[];
+}
+const Events: FunctionComponent<EventsProps> = ({data}) => {
+    return <dl>
+        {data.map(({eventAction, eventDate, eventActor}, index) => {
+            return <Fragment key={index}>
+                <dt className="font-weight-bolder">
+                    {eventAction}:
+                </dt>
+                <dd>
+                    <span
+                        title={eventDate.toString()}>{eventDate.toString()}
+                    </span>
+                    {eventActor != null ? `(by ${eventActor})` : null}
+                </dd>
+            </Fragment>
+        })}
+    </dl>
 }
-const Events: FunctionComponent<EventsProps> = () => {
 
-}
+export default Events;

src/components/Generic.tsx

@@ -0,0 +1,31 @@
+import type {FunctionComponent} from "react";
+import DomainCard from "@/components/DomainCard";
+import type {Domain, AutonomousNumber, Entity, Nameserver, IpNetwork} from "@/responses";
+
+export type ParsedGeneric = Domain | Nameserver | Entity | AutonomousNumber | IpNetwork;
+export type ObjectProps = {
+    data: ParsedGeneric;
+};
+
+const Generic: FunctionComponent<ObjectProps> = ({data}: ObjectProps) => {
+    switch (data.objectClassName) {
+        case "domain":
+            return <DomainCard 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 Generic;