Add URL hash routing for direct project links
All checks were successful
ci/woodpecker/push/build Pipeline was successful
All checks were successful
ci/woodpecker/push/build Pipeline was successful
Opening #/project/123 navigates directly to the project page. Back button and project selection update the hash accordingly. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -180,23 +180,43 @@ function ProjectPage({
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function parseHash(): { view: "list" | "project"; projectId: number | null } {
|
||||||
|
const hash = window.location.hash;
|
||||||
|
const match = hash.match(/^#\/project\/(\d+)$/);
|
||||||
|
if (match) return { view: "project", projectId: Number(match[1]) };
|
||||||
|
return { view: "list", projectId: null };
|
||||||
|
}
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
const [view, setView] = useState<"list" | "project">("list");
|
const [view, setView] = useState<"list" | "project">(parseHash().view);
|
||||||
const [projectId, setProjectId] = useState<number | null>(null);
|
const [projectId, setProjectId] = useState<number | null>(parseHash().projectId);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const onHashChange = () => {
|
||||||
|
const state = parseHash();
|
||||||
|
setView(state.view);
|
||||||
|
setProjectId(state.projectId);
|
||||||
|
};
|
||||||
|
window.addEventListener("hashchange", onHashChange);
|
||||||
|
return () => window.removeEventListener("hashchange", onHashChange);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const navigate = (id: number | null) => {
|
||||||
|
if (id !== null) {
|
||||||
|
window.location.hash = `#/project/${id}`;
|
||||||
|
} else {
|
||||||
|
window.location.hash = "";
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="app">
|
<div className="app">
|
||||||
{view === "list" ? (
|
{view === "list" ? (
|
||||||
<ProjectList
|
<ProjectList onSelect={(id) => navigate(id)} />
|
||||||
onSelect={(id) => {
|
|
||||||
setProjectId(id);
|
|
||||||
setView("project");
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
) : (
|
) : (
|
||||||
<ProjectPage
|
<ProjectPage
|
||||||
projectId={projectId!}
|
projectId={projectId!}
|
||||||
onBack={() => setView("list")}
|
onBack={() => navigate(null)}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user