osmarks/gotosocial
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

[bugfix/frontend] turn DateTimeMinute and DateTimeSecond into proper components (#4911)

Browse Source 
Fixes https://codeberg.org/superseriousbusiness/gotosocial/issues/4906 by turning `DateTimeMinute` and `DateTimeSecond` into proper memoized components instead of functions that return jsx elements.

Reviewed-on: https://codeberg.org/superseriousbusiness/gotosocial/pulls/4911
This commit is contained in:
tobi
2026-06-29 11:41:48 +02:00
committed by tobi
parent 867ce73d07
commit 60b693f9c7
18 changed files with 52 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/source/settings/components/datetime.tsx
+26 -20
View File
@@ -28,17 +28,20 @@ import React, { useMemo } from "react";
* @param iso8601
* @returns
*/
export function DateTimeMinute(iso8601: string | undefined): React.JSX.Element {
return useMemo(() => {
if (!iso8601) {
return <>unknown / never</>;
export function DateTimeMinute({iso8601}: {iso8601: string | undefined}) {
const set = !(!iso8601);
const v = useMemo(() => {
if (!set) {
return "unknown / never";
}
return (
<time dateTime={iso8601}>
{dtMinuteFormat.format(new Date(iso8601))}
</time>
);
}, [iso8601]);
return dtMinuteFormat.format(new Date(iso8601));
}, [set, iso8601]);
return (
<>
{ iso8601 ? <time dateTime={iso8601}>{v}</time> : <>{v}</> }
</>
);
}
const dtMinuteFormat = new Intl.DateTimeFormat(undefined, {
@@ -55,17 +58,20 @@ const dtMinuteFormat = new Intl.DateTimeFormat(undefined, {
* @param iso8601
* @returns
*/
export function DateTimeSecond(iso8601: string | undefined): React.JSX.Element {
return useMemo(() => {
if (!iso8601) {
return <>unknown / never</>;
export function DateTimeSecond({iso8601}: {iso8601: string | undefined}) {
const set = !(!iso8601);
const v = useMemo(() => {
if (!set) {
return "unknown / never";
}
return (
<time dateTime={iso8601}>
{dtSecondFormat.format(new Date(iso8601))}
</time>
);
}, [iso8601]);
return dtSecondFormat.format(new Date(iso8601));
}, [set, iso8601]);
return (
<>
{ iso8601 ? <time dateTime={iso8601}>{v}</time> : <>{v}</> }
</>
);
}
const dtSecondFormat = new Intl.DateTimeFormat(undefined, {
web/source/settings/components/relaydetailform.tsx
+1 -1
View File
@@ -70,7 +70,7 @@ export default function RelayDetailForm({
</div>
<div className="info-list-entry">
<dt>Created at:</dt>
<dd>{DateTimeMinute(conn.created_at)}</dd>
<dd><DateTimeMinute iso8601={conn.created_at}/></dd>
</div>
{
conn.account_id &&
web/source/settings/views/admin/http-header-permissions/detail.tsx
+1 -1
View File
@@ -138,7 +138,7 @@ function PermDeets({
</div>
<div className="info-list-entry">
<dt>Created</dt>
<dd>{DateTimeMinute(perm.created_at)}</dd>
<dd><DateTimeMinute iso8601={perm.created_at}/></dd>
</div>
<div className="info-list-entry">
<dt>Created By</dt>
web/source/settings/views/admin/instances/detail/index.tsx
+3 -3
View File
@@ -72,11 +72,11 @@ function InstanceDetailForm({ data: instance }: { data: AdminInstance }) {
<div className="info-list-entry">
<dt>First seen:</dt>
<dd>{DateTimeMinute(instance.first_seen)}</dd>
<dd><DateTimeMinute iso8601={instance.first_seen}/></dd>
</div>
<div className="info-list-entry">
<dt>Latest successful delivery:</dt>
<dd>{DateTimeMinute(instance.latest_successful_delivery)}</dd>
<dd><DateTimeMinute iso8601={instance.latest_successful_delivery}/></dd>
</div>
</dl>
<InstanceDeliveryErrors data={instance} />
@@ -122,7 +122,7 @@ function InstanceDeliveryErrors({ data: instance }: { data: AdminInstance }): Re
{ instance.delivery_errors.map((err, i) => {
return (
<div className="info-list-entry" key={i}>
<dt>{DateTimeSecond(err.time)}</dt>
<dt><DateTimeSecond iso8601={err.time}/></dt>
<dd>{err.error}</dd>
</div>
);
web/source/settings/views/admin/instances/search/index.tsx
+2 -2
View File
@@ -199,12 +199,12 @@ function InstanceListEntry({ instance, linkTo, backLocation }: InstanceEntryProp
<div className="info-list-entry">
<dt>First seen:</dt>
<dd className="text-cutoff">{DateTimeMinute(instance.first_seen)}</dd>
<dd className="text-cutoff"><DateTimeMinute iso8601={instance.first_seen}/></dd>
</div>
<div className="info-list-entry">
<dt>Latest successful delivery:</dt>
<dd className="text-cutoff">{DateTimeMinute(instance.latest_successful_delivery)}</dd>
<dd className="text-cutoff"><DateTimeMinute iso8601={instance.latest_successful_delivery}/></dd>
</div>
{ deliveryErrors &&
web/source/settings/views/moderation/accounts/detail/index.tsx
+2 -2
View File
@@ -121,11 +121,11 @@ function GeneralAccountDetails({ adminAcct } : { adminAcct: AdminAccount }) {
</div>
<div className="info-list-entry">
<dt>Created</dt>
<dd>{DateTimeMinute(adminAcct.created_at)}</dd>
<dd><DateTimeMinute iso8601={adminAcct.created_at}/></dd>
</div>
<div className="info-list-entry">
<dt>Last posted</dt>
<dd>{DateTimeMinute(adminAcct.account.last_status_at)}</dd>
<dd><DateTimeMinute iso8601={adminAcct.account.last_status_at}/></dd>
</div>
<div className="info-list-entry">
<dt>Suspended</dt>
web/source/settings/views/moderation/domain-limits/detail.tsx
+1 -1
View File
@@ -103,7 +103,7 @@ function DomainLimitDetails({ limit }: { limit: DomainLimit }) {
<dl className="info-list">
<div className="info-list-entry">
<dt>Created</dt>
<dd>{DateTimeMinute(limit.created_at)}</dd>
<dd><DateTimeMinute iso8601={limit.created_at}/></dd>
</div>
<div className="info-list-entry">
<dt>Created By</dt>
web/source/settings/views/moderation/domain-permissions/detail.tsx
+1 -1
View File
@@ -141,7 +141,7 @@ function DomainPermDetails({
<dl className="info-list">
<div className="info-list-entry">
<dt>Created</dt>
<dd>{DateTimeMinute(perm.created_at)}</dd>
<dd><DateTimeMinute iso8601={perm.created_at}/></dd>
</div>
<div className="info-list-entry">
<dt>Created By</dt>
web/source/settings/views/moderation/domain-permissions/drafts/detail.tsx
+1 -1
View File
@@ -76,7 +76,7 @@ export default function DomainPermissionDraftDetail() {
<dl className="info-list">
<div className="info-list-entry">
<dt>Created</dt>
<dd>{DateTimeMinute(permDraft.created_at)}</dd>
<dd><DateTimeMinute iso8601={permDraft.created_at}/></dd>
</div>
<div className="info-list-entry">
<dt>Created By</dt>
web/source/settings/views/moderation/domain-permissions/excludes/detail.tsx
+1 -1
View File
@@ -63,7 +63,7 @@ export default function DomainPermissionExcludeDetail() {
<dl className="info-list">
<div className="info-list-entry">
<dt>Created</dt>
<dd>{DateTimeMinute(permExclude.created_at)}</dd>
<dd><DateTimeMinute iso8601={permExclude.created_at}/></dd>
</div>
<div className="info-list-entry">
<dt>Created By</dt>
web/source/settings/views/moderation/domain-permissions/subscriptions/detail.tsx
+3 -3
View File
@@ -91,7 +91,7 @@ function DomainPermSubDetails({ permSub }: { permSub: DomainPermissionSubscripti
</div>
<div className="info-list-entry">
<dt>Created</dt>
<dd>{DateTimeMinute(permSub.created_at)}</dd>
<dd><DateTimeMinute iso8601={permSub.created_at}/></dd>
</div>
<div className="info-list-entry">
<dt>Created By</dt>
@@ -105,11 +105,11 @@ function DomainPermSubDetails({ permSub }: { permSub: DomainPermissionSubscripti
</div>
<div className="info-list-entry">
<dt>Last fetch attempt:</dt>
<dd>{DateTimeSecond(permSub.fetched_at)}</dd>
<dd><DateTimeSecond iso8601={permSub.fetched_at}/></dd>
</div>
<div className="info-list-entry">
<dt>Last successful fetch:</dt>
<dd>{DateTimeSecond(permSub.successfully_fetched_at)}</dd>
<dd><DateTimeSecond iso8601={permSub.successfully_fetched_at}/></dd>
</div>
<div className="info-list-entry">
<dt>Discovered {permSub.permission_type}s:</dt>
web/source/settings/views/moderation/reports/detail.tsx
+2 -2
View File
@@ -140,7 +140,7 @@ function ReportBasicInfo({ report, baseUrl, location }: ReportSectionProps) {
<div className="info-list-entry">
<dt>Created</dt>
<dd>{DateTimeMinute(report.created_at)}</dd>
<dd><DateTimeMinute iso8601={report.created_at}/></dd>
</div>
<div className="info-list-entry">
@@ -179,7 +179,7 @@ function ReportHistory({ report, baseUrl, location }: ReportSectionProps) {
<div className="info-list-entry">
<dt>Handled</dt>
<dd>{DateTimeMinute(report.action_taken_at)}</dd>
<dd><DateTimeMinute iso8601={report.action_taken_at}/></dd>
</div>
<div className="info-list-entry">
web/source/settings/views/moderation/reports/search.tsx
+1 -1
View File
@@ -261,7 +261,7 @@ function ReportListEntry({ report, linkTo, backLocation }: ReportEntryProps) {
<div className="info-list-entry">
<dt>Created:</dt>
<dd className="text-cutoff">{DateTimeMinute(report.created_at)}</dd>
<dd className="text-cutoff"><DateTimeMinute iso8601={report.created_at}/></dd>
</div>
</dl>
</span>
web/source/settings/views/user/account/twofactor.tsx
+1 -1
View File
@@ -263,7 +263,7 @@ function DisableForm({ twoFactorEnabledAt }: { twoFactorEnabledAt: string }) {
<TwoFactorHeader
blurb={
<p>
Two-factor auth is enabled for your account, since <b>{DateTimeMinute(twoFactorEnabledAt)}</b>.
Two-factor auth is enabled for your account, since <b><DateTimeMinute iso8601={twoFactorEnabledAt}/></b>.
<br/>To disable 2FA, supply your password for verification and click "Disable 2FA".
</p>
}
web/source/settings/views/user/applications/detail.tsx
+1 -1
View File
@@ -81,7 +81,7 @@ function AppBasicInfo({ app }: { app: App }) {
<div className="info-list-entry">
<dt>Created:</dt>
<dd>{DateTimeMinute(app.created_at)}</dd>
<dd><DateTimeMinute iso8601={app.created_at}/></dd>
</div>
<div className="info-list-entry">
web/source/settings/views/user/applications/search.tsx
+1 -1
View File
@@ -181,7 +181,7 @@ function ApplicationListEntry({ app, linkTo, backLocation }: ApplicationListEntr
<div className="info-list-entry">
<dt>Created:</dt>
<dd className="text-cutoff">{DateTimeMinute(app.created_at)}</dd>
<dd className="text-cutoff"><DateTimeMinute iso8601={app.created_at}/></dd>
</div>
<div className="info-list-entry">
web/source/settings/views/user/tokens/detail.tsx
+2 -2
View File
@@ -78,11 +78,11 @@ function TokenDetailForm({ data: tokenInfo }: { data: TokenInfo, backLocation: s
</div>
<div className="info-list-entry">
<dt>Last used:</dt>
<dd>{DateTimeMinute(tokenInfo.last_used)}</dd>
<dd><DateTimeMinute iso8601={tokenInfo.last_used}/></dd>
</div>
<div className="info-list-entry">
<dt>Created:</dt>
<dd>{DateTimeMinute(tokenInfo.created_at)}</dd>
<dd><DateTimeMinute iso8601={tokenInfo.created_at}/></dd>
</div>
</dl>
<form onSubmit={submit}>
web/source/settings/views/user/tokens/search.tsx
+2 -2
View File
@@ -194,11 +194,11 @@ function TokenInfoListEntry({ tokenInfo }: TokenInfoListEntryProps) {
</div>
<div className="info-list-entry">
<dt>Last used:</dt>
<dd className="text-cutoff">{DateTimeMinute(tokenInfo.last_used)}</dd>
<dd className="text-cutoff"><DateTimeMinute iso8601={tokenInfo.last_used}/></dd>
</div>
<div className="info-list-entry">
<dt>Created:</dt>
<dd className="text-cutoff">{DateTimeMinute(tokenInfo.created_at)}</dd>
<dd className="text-cutoff"><DateTimeMinute iso8601={tokenInfo.created_at}/></dd>
</div>
</dl>
<div className="action-buttons">