Claude Sonnet 5
49beb45b3e
All checks were successful
CD / Build and push images (push) Successful in 1m59s
CI / Lint, typecheck, test (push) Successful in 1m38s
CI / Auth e2e pack (push) Successful in 1m48s
CI / Build container images (push) Has been skipped
CD / Deploy to Test (push) Successful in 8s
CD / Smoke tests against Test (push) Successful in 1m10s
CD / Promote to Int (push) Successful in 9s
GET /ponds/:id/pages lists a pond's pages ordered by the pond's persisted sidebarSort setting (alpha/created; manual arrives with #45). The sidebar consumes it to show the page list with an active-page highlight, an owner-only sort switch (persists via the existing PATCH /ponds/:id), and an inline "new page" flow. The top bar gains a pond switcher; a new /p/:pondSlug route gives it somewhere to land, redirecting to the pond's first page once loaded. Sidebar collapse gains a Ctrl/Cmd+\ shortcut and a slightly refined transition. Closes #26
47 lines
1.6 KiB
TypeScript
47 lines
1.6 KiB
TypeScript
import type { PageView, PondView } from '@dorfteich/shared';
|
|
import { useQuery } from '@tanstack/react-query';
|
|
import { useEffect } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { useNavigate, useParams } from 'react-router-dom';
|
|
|
|
import { FormError } from '../components/forms';
|
|
import { apiGet } from '../lib/api';
|
|
|
|
/**
|
|
* Landing route for a pond without a page open yet (`/p/:pondSlug`, e.g.
|
|
* from the pond switcher). Redirects to the first page per the pond's sort
|
|
* mode once loaded; an empty pond shows a hint pointing at the sidebar's
|
|
* "new page" button instead (issue #26).
|
|
*/
|
|
export function PondHomePage(): React.JSX.Element {
|
|
const { t } = useTranslation();
|
|
const navigate = useNavigate();
|
|
const { pondSlug = '' } = useParams<{ pondSlug: string }>();
|
|
|
|
const pond = useQuery({
|
|
queryKey: ['pond', pondSlug],
|
|
queryFn: () => apiGet<PondView>(`/ponds/${pondSlug}`),
|
|
});
|
|
const pages = useQuery({
|
|
queryKey: ['pages', pond.data?.id, pond.data?.settings.sidebarSort],
|
|
queryFn: () => apiGet<PageView[]>(`/ponds/${pond.data!.id}/pages`),
|
|
enabled: Boolean(pond.data),
|
|
});
|
|
|
|
useEffect(() => {
|
|
if (pages.data && pages.data.length > 0) {
|
|
navigate(`/p/${pondSlug}/${pages.data[0]!.slug}`, { replace: true });
|
|
}
|
|
}, [pages.data, pondSlug, navigate]);
|
|
|
|
if (pond.error || pages.error) return <FormError error={pond.error ?? pages.error} />;
|
|
if (!pond.data || !pages.data || pages.data.length > 0) return <></>;
|
|
|
|
return (
|
|
<div className="pond-home">
|
|
<h1>{pond.data.name}</h1>
|
|
<p>{t('pondHome.empty')}</p>
|
|
</div>
|
|
);
|
|
}
|