julienfroidefond/stripstream-librarian
1
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects Releases Wiki Activity

fix: pass explicit locale to date formatting to prevent hydration mismatch
All checks were successful
Deploy with Docker Compose / deploy (push) Successful in 41s
Details

Browse Source 
Server and client could use different default locales for
toLocaleDateString/toLocaleString, causing React hydration errors.
Pass the user locale explicitly in JobsList and SettingsPage.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Julien Froidefond
2026-03-21 13:36:35 +01:00
parent caa9922ff9
commit be5c3f7a34
2 changed files with 3 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
apps/backoffice/app/components/JobsList.tsx
View File

@@ -57,13 +57,13 @@ function getDateParts(dateStr: string): { mins: number; hours: number; useDate:
} }
export function JobsList({ initialJobs, libraries, highlightJobId }: JobsListProps) { export function JobsList({ initialJobs, libraries, highlightJobId }: JobsListProps) {
const { t } = useTranslation(); const { t, locale } = useTranslation();
const [jobs, setJobs] = useState(initialJobs); const [jobs, setJobs] = useState(initialJobs);
const formatDate = (dateStr: string): string => { const formatDate = (dateStr: string): string => {
const parts = getDateParts(dateStr); const parts = getDateParts(dateStr);
if (parts.useDate) { if (parts.useDate) {
return parts.date.toLocaleDateString(); return parts.date.toLocaleDateString(locale);
} }
if (parts.mins < 1) return t("time.justNow"); if (parts.mins < 1) return t("time.justNow");
if (parts.hours > 0) return t("time.hoursAgo", { count: parts.hours }); if (parts.hours > 0) return t("time.hoursAgo", { count: parts.hours });

2
apps/backoffice/app/settings/SettingsPage.tsx
View File

@@ -734,7 +734,7 @@ export default function SettingsPage({ initialSettings, initialCacheStats, initi
> >
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<span className="text-sm font-medium text-foreground"> <span className="text-sm font-medium text-foreground">
{new Date(r.created_at).toLocaleString()} {new Date(r.created_at).toLocaleString(locale)}
</span> </span>
<span className="text-xs text-muted-foreground truncate ml-2" title={r.komga_url}> <span className="text-xs text-muted-foreground truncate ml-2" title={r.komga_url}>
{r.komga_url} {r.komga_url}