rename /setup route to /settings, fix hooks violation crash on settings page
All checks were successful
Build and Push Docker Image / build (push) Successful in 16s
All checks were successful
Build and Push Docker Image / build (push) Successful in 16s
useState was called after conditional return (React hooks rules violation), causing the settings page to crash. moved all hooks to top level. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -110,8 +110,18 @@ function ConnSection({
|
|||||||
export function SetupPage() {
|
export function SetupPage() {
|
||||||
const [data, setData] = useState<SetupData | null>(null);
|
const [data, setData] = useState<SetupData | null>(null);
|
||||||
const [clearStatus, setClearStatus] = useState('');
|
const [clearStatus, setClearStatus] = useState('');
|
||||||
|
const [mappings, setMappings] = useState<[string, string][]>([['', '']]);
|
||||||
|
const [mappingSaved, setMappingSaved] = useState('');
|
||||||
|
const [mappingsLoaded, setMappingsLoaded] = useState(false);
|
||||||
|
|
||||||
const load = () => api.get<SetupData>('/api/setup').then(setData);
|
const load = () => api.get<SetupData>('/api/setup').then((d) => {
|
||||||
|
setData(d);
|
||||||
|
if (!mappingsLoaded) {
|
||||||
|
const pm: [string, string][] = JSON.parse(d.config.path_mappings ?? '[]');
|
||||||
|
setMappings(pm.length > 0 ? pm : [['', '']]);
|
||||||
|
setMappingsLoaded(true);
|
||||||
|
}
|
||||||
|
});
|
||||||
useEffect(() => { load(); }, []);
|
useEffect(() => { load(); }, []);
|
||||||
|
|
||||||
if (!data) return <div className="text-gray-400 py-8 text-center">Loading…</div>;
|
if (!data) return <div className="text-gray-400 py-8 text-center">Loading…</div>;
|
||||||
@@ -127,10 +137,6 @@ export function SetupPage() {
|
|||||||
const saveSonarr = (url: string, apiKey: string) =>
|
const saveSonarr = (url: string, apiKey: string) =>
|
||||||
api.post('/api/setup/sonarr', { url, api_key: apiKey });
|
api.post('/api/setup/sonarr', { url, api_key: apiKey });
|
||||||
|
|
||||||
const pathMappings: [string, string][] = JSON.parse(cfg.path_mappings ?? '[]');
|
|
||||||
const [mappings, setMappings] = useState<[string, string][]>(pathMappings.length > 0 ? pathMappings : [['', '']]);
|
|
||||||
const [mappingSaved, setMappingSaved] = useState('');
|
|
||||||
|
|
||||||
const saveMappings = async () => {
|
const saveMappings = async () => {
|
||||||
const valid = mappings.filter(([f, t]) => f.trim() && t.trim());
|
const valid = mappings.filter(([f, t]) => f.trim() && t.trim());
|
||||||
await api.post('/api/setup/path-mappings', { mappings: valid });
|
await api.post('/api/setup/path-mappings', { mappings: valid });
|
||||||
|
|||||||
@@ -54,7 +54,7 @@ function RootLayout() {
|
|||||||
<NavLink to="/execute">Execute</NavLink>
|
<NavLink to="/execute">Execute</NavLink>
|
||||||
<div className="flex-1" />
|
<div className="flex-1" />
|
||||||
<NavLink to="/nodes">Nodes</NavLink>
|
<NavLink to="/nodes">Nodes</NavLink>
|
||||||
<NavLink to="/setup">Settings</NavLink>
|
<NavLink to="/settings">Settings</NavLink>
|
||||||
</nav>
|
</nav>
|
||||||
<main className="max-w-[1600px] mx-auto px-5 pt-4 pb-12">
|
<main className="max-w-[1600px] mx-auto px-5 pt-4 pb-12">
|
||||||
<Outlet />
|
<Outlet />
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
import { createFileRoute } from '@tanstack/react-router';
|
import { createFileRoute } from '@tanstack/react-router';
|
||||||
import { SetupPage } from '~/features/setup/SetupPage';
|
import { SetupPage } from '~/features/setup/SetupPage';
|
||||||
|
|
||||||
export const Route = createFileRoute('/setup')({
|
export const Route = createFileRoute('/settings')({
|
||||||
component: SetupPage,
|
component: SetupPage,
|
||||||
});
|
});
|
||||||
Reference in New Issue
Block a user