soeren/fotospiel-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve guest help routing and loading
Some checks failed
linter / quality (push) Has been cancelled
Details
tests / ci (push) Has been cancelled
Details
tests / ui (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Codex Agent
2026-01-14 09:00:12 +01:00
parent 3a78c4f2c0
commit 03c7b20cae
8 changed files with 177 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
resources/js/guest/pages/HelpArticlePage.tsx
View File

@@ -1,7 +1,7 @@
import React from 'react';
import { Link, useParams } from 'react-router-dom';
import { Button } from '@/components/ui/button';
import { Loader2 } from 'lucide-react';
import { ArrowLeft, Loader2 } from 'lucide-react';
import { Page } from './_util';
import { useLocale } from '../i18n/LocaleContext';
import { useTranslation } from '../i18n/useTranslation';
@@ -37,7 +37,9 @@ export default function HelpArticlePage() {
loadArticle();
}, [loadArticle]);
const title = article?.title ?? t('help.article.unavailable');
const title = state === 'loading'
? t('help.article.loadingTitle')
: (article?.title ?? t('help.article.unavailable'));
return (
<Page title={title}>
@@ -48,17 +50,30 @@ export default function HelpArticlePage() {
refreshingLabel={t('common.refreshing')}
>
<div className="mb-4">
<Button variant="ghost" size="sm" asChild>
<Button variant="outline" size="sm" className="rounded-full border-border/60 bg-background/70 px-3" asChild>
<Link to={basePath}>
{t('help.article.back')}
<span className="inline-flex items-center gap-2">
<ArrowLeft className="h-4 w-4" aria-hidden />
{t('help.article.back')}
</span>
</Link>
</Button>
</div>
{state === 'loading' && (
<div className="flex items-center gap-2 text-sm text-muted-foreground">
<Loader2 className="h-4 w-4 animate-spin" />
{t('common.actions.loading')}
<div className="rounded-2xl border border-border/60 bg-card/70 p-5">
<div className="flex items-center gap-3 text-sm text-muted-foreground">
<Loader2 className="h-4 w-4 animate-spin" />
<div>
<div className="font-medium text-foreground">{t('help.article.loadingTitle')}</div>
<div className="text-xs text-muted-foreground">{t('help.article.loadingDescription')}</div>
</div>
</div>
<div className="mt-4 space-y-2 animate-pulse">
<div className="h-3 w-2/3 rounded-full bg-muted/60" />
<div className="h-3 w-5/6 rounded-full bg-muted/60" />
<div className="h-3 w-1/2 rounded-full bg-muted/60" />
</div>
</div>
)}
@@ -77,11 +92,6 @@ export default function HelpArticlePage() {
{article.updated_at && (
<div>{t('help.article.updated', { date: formatDate(article.updated_at, locale) })}</div>
)}
<Button variant="ghost" size="sm" asChild>
<Link to={basePath}>
← {t('help.article.back')}
</Link>
</Button>
</div>
<div className="overflow-x-auto">
<div

21
resources/js/guest/pages/HelpCenterPage.tsx
View File

@@ -18,6 +18,7 @@ export default function HelpCenterPage() {
const [query, setQuery] = React.useState('');
const [state, setState] = React.useState<'idle' | 'loading' | 'ready' | 'error'>('loading');
const [servedFromCache, setServedFromCache] = React.useState(false);
const [isOnline, setIsOnline] = React.useState(() => (typeof navigator !== 'undefined' ? navigator.onLine : true));
const basePath = params.token ? `/e/${encodeURIComponent(params.token)}/help` : '/help';
const loadArticles = React.useCallback(async (forceRefresh = false) => {
@@ -37,6 +38,24 @@ export default function HelpCenterPage() {
loadArticles();
}, [loadArticles]);
React.useEffect(() => {
if (typeof window === 'undefined') {
return;
}
const handleOnline = () => setIsOnline(true);
const handleOffline = () => setIsOnline(false);
window.addEventListener('online', handleOnline);
window.addEventListener('offline', handleOffline);
return () => {
window.removeEventListener('online', handleOnline);
window.removeEventListener('offline', handleOffline);
};
}, []);
const showOfflineBadge = servedFromCache && !isOnline;
const filteredArticles = React.useMemo(() => {
if (!query.trim()) {
return articles;
@@ -85,7 +104,7 @@ export default function HelpCenterPage() {
)}
</Button>
</div>
{servedFromCache && (
{showOfflineBadge && (
<div className="flex items-center gap-2 rounded-lg bg-amber-50/70 px-3 py-2 text-xs text-amber-900 dark:bg-amber-400/10 dark:text-amber-200">
<Badge variant="secondary" className="bg-amber-200/80 text-amber-900 dark:bg-amber-500/40 dark:text-amber-100">
{t('help.center.offlineBadge')}

49
resources/js/guest/pages/__tests__/HelpArticlePage.test.tsx Normal file
View File

@@ -0,0 +1,49 @@
import React from 'react';
import { describe, expect, it, vi } from 'vitest';
import { render, screen, waitFor } from '@testing-library/react';
import { MemoryRouter, Route, Routes } from 'react-router-dom';
import HelpArticlePage from '../HelpArticlePage';
import type { HelpArticleDetail } from '../../services/helpApi';
vi.mock('../../i18n/LocaleContext', () => ({
useLocale: () => ({ locale: 'de' }),
}));
vi.mock('../../i18n/useTranslation', () => ({
useTranslation: () => ({
t: (key: string) => key,
}),
}));
vi.mock('../../services/helpApi', () => ({
getHelpArticle: vi.fn(),
}));
const { getHelpArticle } = await import('../../services/helpApi');
describe('HelpArticlePage', () => {
it('renders a single back button after loading', async () => {
const article: HelpArticleDetail = {
slug: 'gallery-and-sharing',
title: 'Galerie & Teilen',
summary: 'Kurzfassung',
body_html: '<p>Inhalt</p>',
};
(getHelpArticle as ReturnType<typeof vi.fn>).mockResolvedValue({ article, servedFromCache: false });
render(
<MemoryRouter initialEntries={['/e/demo/help/gallery-and-sharing']}>
<Routes>
<Route path="/e/:token/help/:slug" element={<HelpArticlePage />} />
</Routes>
</MemoryRouter>,
);
await waitFor(() => {
expect(screen.getByText('Galerie & Teilen')).toBeInTheDocument();
});
expect(screen.getAllByText('help.article.back')).toHaveLength(1);
});
});