fix(web): synchronize the selected product (#1334)

* The product context offers a function to select the product.
* The product is synchronized right after being selected.
* It prevents a wrong redirection to the product selection page.

web/package/agama-web-ui.changes

@@ -1,3 +1,9 @@
+-------------------------------------------------------------------
+Fri Jun 14 05:34:52 UTC 2024 - Imobach Gonzalez Sosa <[email protected]>
+
+- Do not redirect to the products selection page again after
+  selecting a product (gh#openSUSE/agama#1334).
+
 -------------------------------------------------------------------
 Thu Jun 13 10:52:22 UTC 2024 - David Diaz <[email protected]>
 

web/src/components/product/ProductSelectionPage.jsx

@@ -33,7 +33,6 @@ import styles from '@patternfly/react-styles/css/utilities/Text/text';
 import { _ } from "~/i18n";
 import { Page } from "~/components/core";
 import { Loading, Center } from "~/components/layout";
-import { useInstallerClient } from "~/context/installer";
 import { useProduct } from "~/context/product";
 
 const Label = ({ children }) => (
@@ -44,17 +43,14 @@ const Label = ({ children }) => (
 
 function ProductSelectionPage() {
   const navigate = useNavigate();
-  const { manager, product } = useInstallerClient();
-  const { products, selectedProduct } = useProduct();
+  const { products, selectedProduct, selectProduct } = useProduct();
   const [nextProduct, setNextProduct] = useState(selectedProduct);
 
   const onSubmit = async (e) => {
     e.preventDefault();
 
     if (nextProduct) {
-      // TODO: handle errors
-      await product.select(nextProduct.id);
-      manager.startProbing();
+      await selectProduct(nextProduct.id);
     }
 
     navigate("/");

web/src/context/product.jsx

@@ -65,7 +65,13 @@ function ProductProvider({ children }) {
     return client.product.onRegistrationChange(setRegistration);
   }, [client, setRegistration]);
 
-  const value = { products, selectedId, registration };
+  const selectProduct = async (id) => {
+    await client.product.select(id);
+    client.manager.startProbing();
+    setSelectedId(id);
+  };
+
+  const value = { products, selectedId, registration, selectProduct };
   return <ProductContext.Provider value={value}>{children}</ProductContext.Provider>;
 }