Change /models to /simulations/:id

Author: pinkwah

frontend/src/App.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import styled from "styled-components";
-import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
+import { BrowserRouter as Router, Navigate, Route, Routes } from "react-router-dom";
 import TopBar from "./components/TopBar";
 import Dashboard from "./pages/Home";
 import SimulationList from "./pages/SimulationList";
@@ -45,7 +45,8 @@ const routes: Record<string, React.FC> = {
     "/project/:projectId": SimulationList,
     "/project/:projectId/input": Models,
     "/project/:projectId/simulation/:simulationId": SimulationResult,
-    "/models": Models,
+    "/models": () => <Navigate to="/simulations" replace />,
+    "/simulations/:simulationId?": Models,
     "/labresults": LabResults,
     "/help": HelpPage,
 };

frontend/src/pages/Models.tsx

@@ -15,17 +15,21 @@ import Step from "@/components/Step";
 import { MainContainer } from "@/components/styles";
 import CenteredImage from "@/components/CenteredImage";
 import noModelImage from "@/assets/no-model-light.svg";
+import { useNavigate, useParams } from "react-router-dom";
 
 const Models: React.FC = () => {
     const [currentModel, setCurrentModel] = useState<ModelConfig | undefined>(undefined);
     const { models } = useAvailableModels();
+    const { simulationId } = useParams<{ simulationId?: string }>();
+    const navigate = useNavigate();
 
-    const { data: simulationId, mutate: setModelInput } = useMutation({
+    const { mutate: setModelInput } = useMutation({
         mutationFn: startSimulation,
+        onSuccess: (data) => navigate(`/simulations/${data}`),
     });
 
     const { data: simulationResults, isLoading } = useQuery({
-        queryKey: ["simulation", startSimulation],
+        queryKey: ["simulation", simulationId],
         queryFn: () => getResultForSimulation(simulationId!),
         enabled: simulationId !== undefined,
     });