Merge pull request #7238 from p12tic/www-fix-navigate-console-errors

www: Fix navigate() before page load finishes
buildbot · Dec 4, 2023 · ce7ea0a · ce7ea0a
2 parents e7e4854 + 774d95b
commit ce7ea0a
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 9 deletions.
diff --git a/www/react-base/src/views/BuildRequestView/BuildRequestView.tsx b/www/react-base/src/views/BuildRequestView/BuildRequestView.tsx
@@ -17,7 +17,7 @@
 
 import {observer} from "mobx-react";
 import {FaSpinner, FaStop} from "react-icons/fa";
-import {Fragment, useState} from "react";
+import {Fragment, useEffect, useState} from "react";
 import {buildbotSetupPlugin} from "buildbot-plugin-support";
 import {
   Build,
@@ -112,10 +112,12 @@ export const BuildRequestView = observer(() => {
     {caption: buildRequestId.toString(), route: `/buildrequests/${buildRequestId}`},
   ]));
 
-  if (buildsQuery.array.length > 0 && redirectToBuild) {
-    const build = buildsQuery.getNthOrNull(0);
-    navigate(`/builders/${build?.builderid}/builds/${build?.number}`);
-  }
+  useEffect(() => {
+    if (buildsQuery.array.length > 0 && redirectToBuild) {
+      const build = buildsQuery.getNthOrNull(0);
+      navigate(`/builders/${build?.builderid}/builds/${build?.number}`);
+    }
+  }, [buildsQuery.array.length > 0]);
 
   const cancelBuildRequest = () => {
     if (isCancelling) {

diff --git a/www/react-base/src/views/BuildView/BuildView.tsx b/www/react-base/src/views/BuildView/BuildView.tsx
@@ -19,7 +19,7 @@ import './BuildView.scss';
 import {observer} from "mobx-react";
 import {FaSpinner} from "react-icons/fa";
 import {AlertNotification} from "../../components/AlertNotification/AlertNotification";
-import {useState} from "react";
+import {useEffect, useState} from "react";
 import {Link, useNavigate, useParams} from "react-router-dom";
 import {buildbotSetupPlugin} from "buildbot-plugin-support";
 import {
@@ -180,9 +180,11 @@ const BuildView = observer(() => {
   const worker = workersQuery.getNthOrNull(0);
   const project = projectsQuery.getNthOrNull(0);
 
-  if (buildsQuery.resolved && build === null) {
-    navigate(`/builders/${builderid}`);
-  }
+  useEffect(() => {
+    if (buildsQuery.resolved && build === null) {
+      navigate(`/builders/${builderid}`);
+    }
+  }, [buildsQuery.resolved, build === null]);
 
   const responsibleUsers = computed(() => getResponsibleUsers(propertiesQuery, changesQuery)).get();
   /*