klevze/SkinbaseNova
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Make profile formatting hydration-safe

Browse Source
This commit is contained in:
test
2026-08-30 09:28:07 +02:00
parent 5db36cb29f
commit 71972afb87
9 changed files with 44 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/components/profile/tabs/TabAbout.jsx
+11 -11
View File
@@ -2,6 +2,7 @@ import React from 'react'
import { usePage } from '@inertiajs/react'
import CreatorJourneySection from '../CreatorJourneySection'
import { shinyFlagUrl } from '../../../utils/flagUrl'
import { formatProfileDate, formatProfileNumber } from '../../../lib/profileFormatters'
const SOCIAL_ICONS = {
twitter: { icon: 'fa-brands fa-x-twitter', label: 'X / Twitter', hoverClass: 'hover:border-slate-300/30 hover:text-slate-100 hover:bg-white/[0.08]' },
@@ -66,7 +67,7 @@ function getContentTypeIcon(label) {
}
function formatNumber(value) {
return Number(value ?? 0).toLocaleString()
return formatProfileNumber(value)
}
function formatRelativeDate(value) {
@@ -79,7 +80,7 @@ function formatRelativeDate(value) {
const now = new Date()
const diffSeconds = Math.round((date.getTime() - now.getTime()) / 1000)
const absSeconds = Math.abs(diffSeconds)
const formatter = new Intl.RelativeTimeFormat('en', { numeric: 'auto' })
const formatter = new Intl.RelativeTimeFormat('en-US', { numeric: 'auto' })
if (absSeconds < 3600) {
return formatter.format(Math.round(diffSeconds / 60), 'minute')
@@ -110,7 +111,7 @@ function formatShortDate(value) {
const date = new Date(value)
if (Number.isNaN(date.getTime())) return null
return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })
return formatProfileDate(date, { month: 'short', day: 'numeric', year: 'numeric' })
} catch {
return null
}
@@ -131,7 +132,7 @@ function formatContributionDate(value) {
const date = new Date(value)
if (Number.isNaN(date.getTime())) return null
return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })
return formatProfileDate(date, { month: 'short', day: 'numeric', year: 'numeric' })
} catch {
return null
}
@@ -237,14 +238,13 @@ export default function TabAbout({ user, profile, stats, achievements, worldRewa
const flagUrl = shinyFlagUrl(profile?.country_code, props?.cdn?.files_url)
const joinDate = user.created_at
? new Date(user.created_at).toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' })
? formatProfileDate(user.created_at, { month: 'long', day: 'numeric', year: 'numeric' })
: null
const lastVisit = user.last_visit_at
? (() => {
try {
const d = new Date(user.last_visit_at)
return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })
return formatProfileDate(user.last_visit_at, { month: 'short', day: 'numeric', year: 'numeric' })
} catch { return null }
})()
: null
@@ -254,7 +254,7 @@ export default function TabAbout({ user, profile, stats, achievements, worldRewa
const birthDate = profile?.birthdate
? (() => {
try {
return new Date(profile.birthdate).toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' })
return formatProfileDate(profile.birthdate, { month: 'long', day: 'numeric', year: 'numeric' })
} catch { return null }
})()
: null
@@ -381,9 +381,9 @@ export default function TabAbout({ user, profile, stats, achievements, worldRewa
{entry.group?.headline ? <p className="mt-1 text-sm text-slate-400">{truncateText(entry.group.headline, 100)}</p> : null}
{entry.summary ? <p className="mt-3 text-sm text-slate-300">{entry.summary}</p> : null}
<div className="mt-3 flex flex-wrap gap-3 text-xs text-slate-500">
<span>{Number(entry.counts?.credited_artworks || 0).toLocaleString()} credited artworks</span>
<span>{Number(entry.counts?.releases || 0).toLocaleString()} releases</span>
<span>{Number(entry.counts?.projects || 0).toLocaleString()} projects</span>
<span>{formatProfileNumber(entry.counts?.credited_artworks || 0)} credited artworks</span>
<span>{formatProfileNumber(entry.counts?.releases || 0)} releases</span>
<span>{formatProfileNumber(entry.counts?.projects || 0)} projects</span>
{entry.joined_at ? <span>Joined {formatContributionDate(entry.joined_at)}</span> : null}
</div>
{Array.isArray(entry.role_labels) && entry.role_labels.length > 0 ? (