mirror of
https://github.com/Xevion/rdap.git
synced 2025-12-10 12:08:14 -06:00
Prettier reformat
This commit is contained in:
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user