Prettier reformat

This commit is contained in:
2023-05-20 21:29:27 -05:00
parent d9285647c2
commit 6e27447a99
18 changed files with 628 additions and 493 deletions

View File

@@ -1,30 +1,36 @@
import type {FunctionComponent} from "react";
import {useBoolean} from "usehooks-ts";
import {format, formatDistanceToNow} from "date-fns";
import type { FunctionComponent } from "react";
import { useBoolean } from "usehooks-ts";
import { format, formatDistanceToNow } from "date-fns";
type DynamicDateProps = {
value: Date | number;
absoluteFormat?: string;
}
value: Date | number;
absoluteFormat?: string;
};
/**
* A component for a toggleable switch between the absolute & human-relative date.
* @param value The date to be displayed, the Date value, or
* @param absoluteFormat Optional - the date-fns format string to use for the absolute date rendering.
*/
const DynamicDate: FunctionComponent<DynamicDateProps> = ({value, absoluteFormat}) => {
const {value: showAbsolute, toggle: toggleFormat} = useBoolean(true);
const DynamicDate: FunctionComponent<DynamicDateProps> = ({
value,
absoluteFormat,
}) => {
const { value: showAbsolute, toggle: toggleFormat } = useBoolean(true);
const date = new Date(value);
return (
<button onClick={toggleFormat}>
<span title={date.toISOString()}>
{showAbsolute
? format(date, absoluteFormat ?? "LLL do, y HH:mm:ss")
: formatDistanceToNow(date, {includeSeconds: true, addSuffix: true})}
</span>
</button>
)
}
const date = new Date(value);
return (
<button onClick={toggleFormat}>
<span title={date.toISOString()}>
{showAbsolute
? format(date, absoluteFormat ?? "LLL do, y HH:mm:ss")
: formatDistanceToNow(date, {
includeSeconds: true,
addSuffix: true,
})}
</span>
</button>
);
};
export default DynamicDate;
export default DynamicDate;

View File

@@ -1,19 +1,26 @@
import type {FunctionComponent, ReactFragment, ReactNode} from "react";
import type { FunctionComponent, ReactFragment, ReactNode } from "react";
import React from "react";
import {classNames} from "@/helpers";
import { classNames } from "@/helpers";
type PropertyProps = {
title: string | ReactNode | ReactFragment;
children: string | ReactNode | ReactFragment;
titleClass?: string;
valueClass?: string;
title: string | ReactNode | ReactFragment;
children: string | ReactNode | ReactFragment;
titleClass?: string;
valueClass?: string;
};
const Property: FunctionComponent<PropertyProps> = ({title, children, titleClass, valueClass}) => {
return <>
<dt className={titleClass}>{title}:</dt>
<dd className={classNames("mt-2 mb-2 ml-6", valueClass)}>{children}</dd>
const Property: FunctionComponent<PropertyProps> = ({
title,
children,
titleClass,
valueClass,
}) => {
return (
<>
<dt className={titleClass}>{title}:</dt>
<dd className={classNames("mt-2 mb-2 ml-6", valueClass)}>{children}</dd>
</>
}
);
};
export default Property;
export default Property;

View File

@@ -1,42 +1,45 @@
import type {FunctionComponent} from "react";
import type { FunctionComponent } from "react";
import React from "react";
import {rdapStatusInfo} from "@/constants";
import type {Domain} from "@/types";
import Events from "@/components/lookup/Events"
import { rdapStatusInfo } from "@/constants";
import type { Domain } from "@/types";
import Events from "@/components/lookup/Events";
import Property from "@/components/common/Property";
export type DomainProps = {
data: Domain;
data: Domain;
};
const DomainCard: FunctionComponent<DomainProps> = ({data}: DomainProps) => {
return <div className="card">
<div className="card-header">{data.ldhName ?? data.unicodeName} ({data.handle})</div>
<div className="card-body">
<dl>
{data.unicodeName != undefined ? <Property title="Unicode Name">
{data.unicodeName}
</Property> : null}
<Property title={data.unicodeName != undefined ? "LHD Name" : "Name"}>
{data.ldhName}
</Property>
<Property title="Handle">
{data.handle}
</Property>
<Property title="Events">
<Events key={0} data={data.events}/>
</Property>
<Property title="Status">
<ul key={2} className="list-disc">
{data.status.map((statusKey, index) =>
<li key={index}>
<span title={rdapStatusInfo[statusKey]}>{statusKey}</span>
</li>)}
</ul>
</Property>
</dl>
</div>
const DomainCard: FunctionComponent<DomainProps> = ({ data }: DomainProps) => {
return (
<div className="card">
<div className="card-header">
{data.ldhName ?? data.unicodeName} ({data.handle})
</div>
<div className="card-body">
<dl>
{data.unicodeName != undefined ? (
<Property title="Unicode Name">{data.unicodeName}</Property>
) : null}
<Property title={data.unicodeName != undefined ? "LHD Name" : "Name"}>
{data.ldhName}
</Property>
<Property title="Handle">{data.handle}</Property>
<Property title="Events">
<Events key={0} data={data.events} />
</Property>
<Property title="Status">
<ul key={2} className="list-disc">
{data.status.map((statusKey, index) => (
<li key={index}>
<span title={rdapStatusInfo[statusKey]}>{statusKey}</span>
</li>
))}
</ul>
</Property>
</dl>
</div>
</div>
}
);
};
export default DomainCard;
export default DomainCard;

View File

@@ -1,25 +1,27 @@
import type {FunctionComponent} from "react";
import type {Event} from "@/types";
import {Fragment} from "react";
import type { FunctionComponent } from "react";
import type { Event } from "@/types";
import { Fragment } from "react";
import DynamicDate from "@/components/common/DynamicDate";
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>
<DynamicDate value={new Date(eventDate)}/>
{eventActor != null ? ` (by ${eventActor})` : null}
</dd>
</Fragment>
})}
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>
<DynamicDate value={new Date(eventDate)} />
{eventActor != null ? ` (by ${eventActor})` : null}
</dd>
</Fragment>
);
})}
</dl>
}
);
};
export default Events;
export default Events;

View File

@@ -1,34 +1,46 @@
import type {FunctionComponent} from "react";
import type { FunctionComponent } from "react";
import DomainCard from "@/components/lookup/DomainCard";
import type {Domain, AutonomousNumber, Entity, Nameserver, IpNetwork} from "@/types";
import type {
Domain,
AutonomousNumber,
Entity,
Nameserver,
IpNetwork,
} from "@/types";
export type ParsedGeneric = Domain | Nameserver | Entity | AutonomousNumber | IpNetwork;
export type ParsedGeneric =
| Domain
| Nameserver
| Entity
| AutonomousNumber
| IpNetwork;
export type ObjectProps = {
data: ParsedGeneric;
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. (
<pre>{data.objectClassName ?? "null"}</pre>
)
</div>
</div>
}
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. (<pre>{data.objectClassName ?? "null"}</pre>)
</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>
}
// 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;
export default Generic;