57 lines
1.9 KiB
TypeScript
57 lines
1.9 KiB
TypeScript
/**
|
|
* Main App component.
|
|
*/
|
|
|
|
import React, { useRef } from "react";
|
|
import { Navigate, Route, Routes, useLocation } from "react-router-dom";
|
|
import { CSSTransition, SwitchTransition } from "react-transition-group";
|
|
|
|
import { Toaster } from "@/components/ui/sonner";
|
|
import { OnboardingGate } from "./components/OnboardingGate";
|
|
import { OrchestratorPage } from "./pages/OrchestratorPage";
|
|
import { SettingsPage } from "./pages/SettingsPage";
|
|
import { UkVisaJobsPage } from "./pages/UkVisaJobsPage";
|
|
import { VisaSponsorsPage } from "./pages/VisaSponsorsPage";
|
|
|
|
export const App: React.FC = () => {
|
|
const location = useLocation();
|
|
const nodeRef = useRef<HTMLDivElement>(null);
|
|
|
|
// Determine a stable key for transitions to avoid unnecessary unmounts when switching sub-tabs
|
|
const pageKey = React.useMemo(() => {
|
|
const firstSegment = location.pathname.split("/")[1] || "ready";
|
|
if (["ready", "discovered", "applied", "all"].includes(firstSegment)) {
|
|
return "orchestrator";
|
|
}
|
|
return firstSegment;
|
|
}, [location.pathname]);
|
|
|
|
return (
|
|
<>
|
|
<OnboardingGate />
|
|
<SwitchTransition mode="out-in">
|
|
<CSSTransition
|
|
key={pageKey}
|
|
nodeRef={nodeRef}
|
|
timeout={100}
|
|
classNames="page"
|
|
unmountOnExit
|
|
>
|
|
<div ref={nodeRef}>
|
|
<Routes location={location}>
|
|
<Route path="/" element={<Navigate to="/ready" replace />} />
|
|
<Route path="/settings" element={<SettingsPage />} />
|
|
<Route path="/ukvisajobs" element={<UkVisaJobsPage />} />
|
|
<Route path="/visa-sponsors" element={<VisaSponsorsPage />} />
|
|
<Route path="/:tab" element={<OrchestratorPage />} />
|
|
<Route path="/:tab/:jobId" element={<OrchestratorPage />} />
|
|
</Routes>
|
|
</div>
|
|
</CSSTransition>
|
|
</SwitchTransition>
|
|
|
|
<Toaster position="bottom-right" richColors closeButton />
|
|
</>
|
|
);
|
|
};
|