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 ? (
resources/js/components/profile/tabs/TabFollowers.jsx
+3 -9
View File
@@ -1,17 +1,11 @@
import React from 'react'
import { formatProfileDate, formatProfileNumber } from '../../../lib/profileFormatters'
function formatFollowedAt(value) {
if (!value) return null
try {
const date = new Date(value)
if (Number.isNaN(date.getTime())) return null
return date.toLocaleDateString(undefined, {
year: 'numeric',
month: 'short',
day: 'numeric',
})
return formatProfileDate(value, { year: 'numeric', month: 'short', day: 'numeric' })
} catch {
return null
}
@@ -36,7 +30,7 @@ export default function TabFollowers({ listing, username, followerCount }) {
<i className="fa-solid fa-users text-sky-400 fa-fw" />
Followers
<span className="rounded bg-white/5 px-1.5 py-0.5 text-[10px] font-medium normal-case tracking-normal text-slate-400">
{total.toLocaleString()}
{formatProfileNumber(total)}
</span>
</h2>
resources/js/components/profile/tabs/TabStats.jsx
+4 -3
View File
@@ -1,4 +1,5 @@
import React from 'react'
import { formatProfileNumber } from '../../../lib/profileFormatters'
function KpiCard({ icon, label, value, color = 'text-sky-400' }) {
return (
@@ -7,7 +8,7 @@ function KpiCard({ icon, label, value, color = 'text-sky-400' }) {
<i className={`fa-solid ${icon} text-xl`} />
</div>
<div>
<p className="text-2xl font-bold text-white tabular-nums">{Number(value ?? 0).toLocaleString()}</p>
<p className="text-2xl font-bold text-white tabular-nums">{formatProfileNumber(value)}</p>
<p className="text-xs text-slate-500 mt-0.5 uppercase tracking-wider">{label}</p>
</div>
</div>
@@ -71,7 +72,7 @@ export default function TabStats({ stats, followerCount, followAnalytics }) {
</div>
<div className="text-right">
<div className="text-xs uppercase tracking-widest text-slate-500">Weighted Score</div>
<div className="mt-1 text-2xl font-bold text-white tabular-nums">{Number(medalTotals?.score_total ?? 0).toLocaleString()}</div>
<div className="mt-1 text-2xl font-bold text-white tabular-nums">{formatProfileNumber(medalTotals?.score_total ?? 0)}</div>
</div>
</div>
<div className="mt-4 grid grid-cols-2 gap-3 md:grid-cols-4">
@@ -83,7 +84,7 @@ export default function TabStats({ stats, followerCount, followAnalytics }) {
].map((item) => (
<div key={item.label} className="rounded-2xl border border-white/10 bg-black/15 px-4 py-4">
<div className="text-[11px] uppercase tracking-widest text-slate-500">{item.label}</div>
<div className={`mt-2 text-2xl font-semibold tabular-nums ${item.color}`}>{Number(item.value).toLocaleString()}</div>
<div className={`mt-2 text-2xl font-semibold tabular-nums ${item.color}`}>{formatProfileNumber(item.value)}</div>
</div>
))}
</div>