Merge pull request #13945 from canonical/WD-8304-remove-react-routing

WD-8304 remove react router
canonical · Jun 12, 2024 · cc29fa8 · cc29fa8
2 parents db3d19d + bef59da
commit cc29fa8
Show file tree

Hide file tree

Showing 8 changed files with 40 additions and 54 deletions.
diff --git a/package.json b/package.json
@@ -106,7 +106,6 @@
     "react-dom": "17.0.2",
     "react-google-recaptcha": "2.1.0",
     "react-query": "3.34.7",
-    "react-router-dom": "^6.8.0",
     "react-useportal": "1.0.16",
     "sass": "1.45.2",
     "smartquotes": "2.3.2",

diff --git a/static/js/src/advantage/credentials/app.tsx b/static/js/src/advantage/credentials/app.tsx
@@ -4,7 +4,6 @@ import * as Sentry from "@sentry/react";
 import { QueryClient, QueryClientProvider } from "react-query";
 import { Integrations } from "@sentry/tracing";
 import { ReactQueryDevtools } from "react-query/devtools";
-import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import CredManage from "./components/CredManage";
 
 const oneHour = 1000 * 60 * 60;
@@ -34,11 +33,7 @@ function App() {
   return (
     <Sentry.ErrorBoundary>
       <QueryClientProvider client={queryClient}>
-        <Router basename="/credentials/shop">
-          <Routes>
-            <Route path="/manage" element={<CredManage />} />
-          </Routes>
-        </Router>
+        <CredManage />
         <ReactQueryDevtools initialIsOpen={false} />
       </QueryClientProvider>
     </Sentry.ErrorBoundary>

diff --git a/static/js/src/advantage/credentials/utils/utils.ts b/static/js/src/advantage/credentials/utils/utils.ts
diff --git a/templates/credentials/shop/index.html b/templates/credentials/shop/index.html
@@ -157,18 +157,6 @@ <h5 id="exam-price" class="u-align--right" style="padding-right: 1rem">
       totalPrice.innerText = `${price.currency}${price.discountPrice || price.originalPrice}`
     }
 
-    document.getElementsByName("exam-radio").forEach(function(e) {
-      e.addEventListener("click", function() {
-        updateOrderTotal(parseInt(e.value));
-      });
-    });
-
-    document.getElementsByName("exam-radio--small").forEach(function(e) {
-      e.addEventListener("click", function() {
-        updateOrderTotal(parseInt(e.value));
-      });
-    });
-
     const handleSubmit = () => {
       event.preventDefault();
       const index = document.querySelector('input[name="exam-radio"]:checked').value;
@@ -183,5 +171,17 @@ <h5 id="exam-price" class="u-align--right" style="padding-right: 1rem">
       );
       location.href = "/account/checkout";
     };
+
+    document.getElementsByName("exam-radio").forEach(function(e) {
+      e.addEventListener("click", function() {
+        updateOrderTotal(parseInt(e.value));
+      });
+    });
+
+    document.getElementsByName("exam-radio--small").forEach(function(e) {
+      e.addEventListener("click", function() {
+        updateOrderTotal(parseInt(e.value));
+      });
+    });
   </script>
 {% endblock %}
diff --git a/templates/credentials/shop/manage.html b/templates/credentials/shop/manage.html
@@ -0,0 +1,15 @@
+{% extends "credentials/base_cred.html" %}
+
+{% block title %}Canonical Certification{% endblock %}
+
+{% block meta_description %}
+  The Canonical Ubuntu Essentials exams certify knowledge and verify skills in general Linux,
+  Ubuntu Desktop, and Ubuntu Server topics.
+{% endblock meta_description %}
+
+{% block content %}
+  <div id="react-root"></div>
+  <script src="{{ versioned_static('js/dist/credEnterprisePurchasing.js') }}"
+          type="module"
+          defer></script>
+{% endblock %}
diff --git a/webapp/app.py b/webapp/app.py
@@ -74,6 +74,7 @@
     cred_schedule,
     cred_self_study,
     cred_shop,
+    cred_manage_shop,
     cred_shop_thank_you,
     cred_shop_webhook_responses,
     cred_shop_keys,
@@ -883,6 +884,9 @@ def takeovers_index():
     methods=["GET", "POST"],
 )
 app.add_url_rule("/credentials/shop/", view_func=cred_shop)
+app.add_url_rule(
+    "/credentials/shop/manage/", view_func=cred_manage_shop, methods=["GET"]
+)
 app.add_url_rule("/credentials/shop/<p>", view_func=cred_shop)
 app.add_url_rule("/credentials/shop/keys", view_func=cred_shop_keys)
 app.add_url_rule(

diff --git a/webapp/shop/cred/views.py b/webapp/shop/cred/views.py
@@ -874,6 +874,14 @@ def cred_shop(**kwargs):
     )
 
 
+@shop_decorator(area="cube", permission="user", response="html")
+@canonical_staff()
+def cred_manage_shop(**kwargs):
+    return flask.render_template(
+        "credentials/shop/manage.html",
+    )
+
+
 @shop_decorator(area="cube", permission="user", response="html")
 @canonical_staff()
 def cred_shop_thank_you(**kwargs):

diff --git a/yarn.lock b/yarn.lock
@@ -1393,11 +1393,6 @@
     redux-thunk "^2.4.1"
     reselect "^4.1.5"
 
-"@remix-run/[email protected]":
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.3.1.tgz#3bb0b6ddc0a276e8dc1138d08f63035e4e23e8bf"
-  integrity sha512-+eun1Wtf72RNRSqgU7qM2AMX/oHp+dnx7BHk1qhK5ZHzdHTUU4LA1mGG1vT+jMc8sbhG3orvsfOmryjzx2PzQw==
-
 "@sentry/[email protected]":
   version "6.11.0"
   resolved "https://registry.npmjs.org/@sentry/browser/-/browser-6.11.0.tgz"
@@ -6631,21 +6626,6 @@ [email protected]:
     broadcast-channel "^3.4.1"
     match-sorter "^6.0.2"
 
-react-router-dom@^6.8.0:
-  version "6.8.0"
-  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.8.0.tgz#5e5f4c4b15fdec3965d2ad9d7460d0c61971e744"
-  integrity sha512-hQouduSTywGJndE86CXJ2h7YEy4HYC6C/uh19etM+79FfQ6cFFFHnHyDlzO4Pq0eBUI96E4qVE5yUjA00yJZGQ==
-  dependencies:
-    "@remix-run/router" "1.3.1"
-    react-router "6.8.0"
-
-[email protected]:
-  version "6.8.0"
-  resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.8.0.tgz#dd61fd1ec44daa2cceaef8e6baa00f99a01a650f"
-  integrity sha512-760bk7y3QwabduExtudhWbd88IBbuD1YfwzpuDUAlJUJ7laIIcqhMvdhSVh1Fur1PE8cGl84L0dxhR3/gvHF7A==
-  dependencies:
-    "@remix-run/router" "1.3.1"
-
 react-shallow-renderer@^16.13.1:
   version "16.14.1"
   resolved "https://registry.npmjs.org/react-shallow-renderer/-/react-shallow-renderer-16.14.1.tgz"