diff --git a/app/src/ui/layouts/AppShell/Breadcrumbs2.tsx b/app/src/ui/layouts/AppShell/Breadcrumbs2.tsx index b495b43..2b7c562 100644 --- a/app/src/ui/layouts/AppShell/Breadcrumbs2.tsx +++ b/app/src/ui/layouts/AppShell/Breadcrumbs2.tsx @@ -4,6 +4,7 @@ import { Link, useLocation } from "wouter"; import { IconButton } from "../../components/buttons/IconButton"; import { Dropdown } from "../../components/overlay/Dropdown"; import { useEvent } from "../../hooks/use-event"; +import { useNavigate } from "ui/lib/routes"; type Breadcrumb = { label: string | Element; @@ -17,26 +18,11 @@ export type Breadcrumbs2Props = { }; export const Breadcrumbs2 = ({ path: _path, backTo, onBack }: Breadcrumbs2Props) => { - const [_, navigate] = useLocation(); - const location = window.location.pathname; + const [, , _goBack] = useNavigate(); const path = Array.isArray(_path) ? _path : [_path]; - const loc = location.split("/").filter((v) => v !== ""); const hasBack = path.length > 1; - const goBack = onBack - ? onBack - : useEvent(() => { - if (backTo) { - navigate(backTo, { replace: true }); - return; - } else if (_path.length > 0 && _path[0]?.href) { - navigate(_path[0].href, { replace: true }); - return; - } - - const href = loc.slice(0, path.length + 1).join("/"); - navigate(`~/${href}`, { replace: true }); - }); + const goBack = onBack ? onBack : () => _goBack({ fallback: backTo }); const crumbs = useMemo( () => diff --git a/app/src/ui/lib/routes.ts b/app/src/ui/lib/routes.ts index b94e550..42b896b 100644 --- a/app/src/ui/lib/routes.ts +++ b/app/src/ui/lib/routes.ts @@ -102,13 +102,29 @@ export function useNavigate() { } const _url = options?.absolute ? `~/${basepath}${url}`.replace(/\/+/g, "/") : url; + const state = { + ...options?.state, + referrer: location, + }; + navigate(options?.query ? withQuery(_url, options?.query) : _url, { replace: options?.replace, - state: options?.state, + state, }); }); }, location, + (opts?: { fallback?: string }) => { + const state = window.history.state; + if (state?.referrer) { + //window.history.replaceState(state, "", state.referrer); + navigate(state.referrer, { replace: true }); + } else if (opts?.fallback) { + navigate(opts.fallback, { replace: true }); + } else { + window.history.back(); + } + }, ] as const; } diff --git a/app/src/ui/routes/data/data.$entity.$id.tsx b/app/src/ui/routes/data/data.$entity.$id.tsx index 978573a..e531452 100644 --- a/app/src/ui/routes/data/data.$entity.$id.tsx +++ b/app/src/ui/routes/data/data.$entity.$id.tsx @@ -31,7 +31,7 @@ function DataEntityUpdateImpl({ params }) { const entityId = params.id as PrimaryFieldType; const [error, setError] = useState(null); - const [navigate] = useNavigate(); + const [navigate, _, _goBack] = useNavigate(); useBrowserTitle(["Data", entity.label, `#${entityId}`]); const targetRelations = relations.listableRelationsOf(entity); @@ -52,9 +52,8 @@ function DataEntityUpdateImpl({ params }) { }, ); - function goBack() { - window.history.go(-1); - } + const backHref = routes.data.entity.list(entity.name); + const goBack = () => _goBack({ fallback: backHref }); async function onSubmitted(changeSet?: EntityData) { //return; @@ -162,10 +161,8 @@ function DataEntityUpdateImpl({ params }) { className="pl-3" > {$q.isLoading ? ( diff --git a/app/src/ui/routes/data/data.$entity.create.tsx b/app/src/ui/routes/data/data.$entity.create.tsx index bb83eaf..07b2bb5 100644 --- a/app/src/ui/routes/data/data.$entity.create.tsx +++ b/app/src/ui/routes/data/data.$entity.create.tsx @@ -8,13 +8,14 @@ import { useBrowserTitle } from "ui/hooks/use-browser-title"; import { useSearch } from "ui/hooks/use-search"; import * as AppShell from "ui/layouts/AppShell/AppShell"; import { Breadcrumbs2 } from "ui/layouts/AppShell/Breadcrumbs2"; -import { routes } from "ui/lib/routes"; +import { routes, useNavigate } from "ui/lib/routes"; import { EntityForm } from "ui/modules/data/components/EntityForm"; import { useEntityForm } from "ui/modules/data/hooks/useEntityForm"; import { s } from "core/object/schema"; export function DataEntityCreate({ params }) { const { $data } = useBkndData(); + const [navigate, _, _goBack] = useNavigate(); const entity = $data.entity(params.entity as string); if (!entity) { return ; @@ -30,9 +31,8 @@ export function DataEntityCreate({ params }) { // @todo: use entity schema for prefilling const search = useSearch(s.object({}), {}); - function goBack() { - window.history.go(-1); - } + const backHref = routes.data.entity.list(entity.name); + const goBack = () => _goBack({ fallback: backHref }); async function onSubmitted(changeSet?: EntityData) { console.log("create:changeSet", changeSet); @@ -80,12 +80,7 @@ export function DataEntityCreate({ params }) { } > - + {error && (