Migrate to react-router-dom (#45)

* Migrate to react-router-dom * Migrate to react-router-dom - part 2 * Address PR review comments Co-authored-by: Krithika Sundararajan <krithika.sundararajan@go-jek.com>
caraml-dev · Oct 25, 2022 · 8c50881 · 8c50881
1 parent 36549c8
commit 8c50881
Show file tree

Hide file tree

Showing 38 changed files with 517 additions and 440 deletions.
diff --git a/ui/craco.config.js b/ui/craco.config.js
@@ -43,6 +43,10 @@ module.exports = ({ }) => ({
                     filename: "remoteEntry.js",
                     shared: {
                         ...deps,
+                        "@emotion/react": {
+                            singleton: true,
+                            requiredVersion: deps["@emotion/react"]
+                        },
                         react: {
                             shareScope: "default",
                             singleton: true,
@@ -52,6 +56,10 @@ module.exports = ({ }) => ({
                             singleton: true,
                             requiredVersion: deps["react-dom"],
                         },
+                        "react-router-dom": {
+                            singleton: true,
+                            requiredVersion: deps["react-router-dom"]
+                        },
                         /* 
                         Without singleton declaration, 2 different versions of @gojek/mlp-ui dependency were loaded
                         which caused the parent app to crash due to different "global states" being used.

diff --git a/ui/package.json b/ui/package.json
@@ -7,15 +7,16 @@
     "@elastic/datemath": "5.0.3",
     "@elastic/eui": "66.0.0",
     "@emotion/react": "^11.9.0",
-    "@gojek/mlp-ui": "1.6.2",
-    "@reach/router": "1.3.4",
+    "@gojek/mlp-ui": "1.7.3",
     "@sentry/browser": "5.15.5",
     "json-bigint": "1.0.0",
     "lint-staged": "^11.1.2",
     "moment": "^2.29.4",
     "object-assign-deep": "^0.4.0",
+    "proper-url-join": "2.1.1",
     "react": "17.0.2",
     "react-dom": "17.0.2",
+    "react-router-dom": "^6.3.0",
     "react-scripts": "^5.0.1",
     "resize-observer-polyfill": "^1.5.1",
     "yup": "^0.29.1"
@@ -72,4 +73,4 @@
       "last 1 safari version"
     ]
   }
-}
+}
diff --git a/ui/src/App.js b/ui/src/App.js
@@ -6,52 +6,31 @@ import {
   ErrorBoundary,
   Login,
   MlpApiContextProvider,
-  PrivateRoute,
   Toast,
 } from "@gojek/mlp-ui";
-import { Redirect, Router } from "@reach/router";
+import { Route, Routes } from "react-router-dom";
 
 import { useConfig } from "config";
-import ExperimentsLandingPage from "experiments/ExperimentsLandingPage";
-import Home from "Home";
 import { PrivateLayout } from "PrivateLayout";
 import { EuiProvider } from "@elastic/eui";
+import AppRoutes from "AppRoutes";
 
 const App = () => {
-  const { apiConfig, appConfig, authConfig } = useConfig();
+  const { apiConfig, authConfig } = useConfig();
   return (
     <EuiProvider>
       <ErrorBoundary>
         <MlpApiContextProvider
           mlpApiUrl={apiConfig.mlpApiUrl}
           timeout={apiConfig.apiTimeout}>
           <AuthProvider clientId={authConfig.oauthClientId}>
-            <Router role="group">
-              <Login path="/login" />
-
-              <Redirect from="/" to={appConfig.homepage} noThrow />
-
-              <Redirect
-                from={`${appConfig.homepage}/projects/:projectId`}
-                to={`${appConfig.homepage}/projects/:projectId/experiments`}
-                noThrow
-              />
-
-              {/* HOME */}
-              <PrivateRoute
-                path={appConfig.homepage}
-                render={PrivateLayout(Home)}
-              />
-
-              {/* EXPERIMENTS */}
-              <PrivateRoute
-                path={`${appConfig.homepage}/projects/:projectId/experiments/*`}
-                render={PrivateLayout(ExperimentsLandingPage)}
-              />
-
-              {/* DEFAULT */}
-              <Page404 default />
-            </Router>
+            <Routes>
+              <Route path="/login" element={<Login />} />
+              <Route element={<PrivateLayout />}>
+                <Route path="/*" element={<AppRoutes />} />
+              </Route>
+              <Route path="/pages/404" element={<Page404 />} />
+            </Routes>
             <Toast />
           </AuthProvider>
         </MlpApiContextProvider>

diff --git a/ui/src/AppRoutes.js b/ui/src/AppRoutes.js
@@ -0,0 +1,24 @@
+import React from "react";
+import { Navigate, Route, Routes } from "react-router-dom";
+
+import { useConfig } from "config";
+import ExperimentsLandingPage from "experiments/ExperimentsLandingPage";
+import Home from "Home";
+
+const App = () => {
+  const { appConfig } = useConfig();
+  return (
+    <Routes>
+      <Route path={appConfig.homepage} />
+      <Route index element={<Home />} />
+      <Route path="projects/:projectId">
+        <Route index element={<Navigate to="experiments" replace={true} />} />
+        <Route path="experiments/*" element={<ExperimentsLandingPage />} />
+      </Route>
+      {/* DEFAULT */}
+      <Route path="*" element={<Navigate to="/pages/404" replace={true} />} />
+    </Routes>
+  );
+};
+
+export default App;
diff --git a/ui/src/PrivateLayout.js b/ui/src/PrivateLayout.js
@@ -3,34 +3,37 @@ import "PrivateLayout.scss";
 import React from "react";
 
 import {
+  ApplicationsContext,
   ApplicationsContextProvider,
-  CurrentProjectContextProvider,
   Header,
+  PrivateRoute,
   ProjectsContextProvider,
 } from "@gojek/mlp-ui";
-import { navigate } from "@reach/router";
+import urlJoin from "proper-url-join";
+import { Outlet, useNavigate } from "react-router-dom";
 
 import { useConfig } from "config";
 
-export const PrivateLayout = (Component) => {
+export const PrivateLayout = () => {
+  const navigate = useNavigate();
   const { appConfig } = useConfig();
-  return (props) => (
-    <ApplicationsContextProvider>
-      <ProjectsContextProvider>
-        <CurrentProjectContextProvider {...props}>
-          <Header
-            homeUrl={appConfig.homepage}
-            appIcon={appConfig.appIcon}
-            onProjectSelect={(projectId) =>
-              navigate(
-                `${appConfig.homepage}/projects/${projectId}/experiments`
-              )
-            }
-            docLinks={appConfig.docsUrl}
-          />
-          <Component {...props} />
-        </CurrentProjectContextProvider>
-      </ProjectsContextProvider>
-    </ApplicationsContextProvider>
+  return (
+    <PrivateRoute>
+      <ApplicationsContextProvider>
+        <ProjectsContextProvider>
+          <ApplicationsContext.Consumer>
+            {({ currentApp }) => (
+              <Header
+                homepage={appConfig.homepage}
+                onProjectSelect={pId =>
+                  navigate(urlJoin(currentApp?.href, "projects", pId, "experiments"))
+                }
+                docLinks={appConfig.docsUrl}
+              />)}
+          </ApplicationsContext.Consumer>
+          <Outlet />
+        </ProjectsContextProvider>
+      </ApplicationsContextProvider>
+    </PrivateRoute>
   );
 };
diff --git a/ui/src/bootstrap.js b/ui/src/bootstrap.js
@@ -2,6 +2,7 @@ import "assets/style.scss";
 
 import React from "react";
 import ReactDOM from "react-dom";
+import { BrowserRouter } from "react-router-dom";
 
 import * as Sentry from "@sentry/browser";
 
@@ -22,11 +23,15 @@ const SentryApp = ({ children }) => {
 };
 
 const XPUI = () => (
-  <ConfigProvider>
-    <SentryApp>
-      <App />
-    </SentryApp>
-  </ConfigProvider>
+  <React.StrictMode>
+    <ConfigProvider>
+      <SentryApp>
+        <BrowserRouter>
+          <App />
+        </BrowserRouter>
+      </SentryApp>
+    </ConfigProvider>
+  </React.StrictMode>
 );
 
 ReactDOM.render(XPUI(), document.getElementById("root"));

diff --git a/ui/src/components/page/LandingView.js b/ui/src/components/page/LandingView.js
@@ -10,8 +10,11 @@ import {
 } from "@elastic/eui";
 
 import ProjectContext from "providers/project/context";
+import { useNavigate, useParams } from "react-router-dom";
 
-const LandingView = ({ Component, name, projectId, ...props }) => {
+const LandingView = ({ Component, name }) => {
+  const { projectId } = useParams();
+  const { navigate } = useNavigate();
   const { isProjectOnboarded, isLoaded } = useContext(ProjectContext);
 
   return (
@@ -32,18 +35,18 @@ const LandingView = ({ Component, name, projectId, ...props }) => {
               <Fragment>
                 <EuiSpacer />
                 <EuiText>
-                This project has not been set up. Get started{" "}
-                <EuiLink onClick={() => props.navigate("./settings/create")}>
-                here
-                </EuiLink>
-                .
+                  This project has not been set up. Get started{" "}
+                  <EuiLink onClick={() => navigate("./settings/create")}>
+                    here
+                  </EuiLink>
+                  .
                 </EuiText>
               </Fragment>
             }
           />
         </EuiPageTemplate>
       ) : (
-        <Component projectId={projectId} {...props} />
+        <Component projectId={projectId} />
       )}
     </>
   );

diff --git a/ui/src/components/page/NavigationMenu.js b/ui/src/components/page/NavigationMenu.js
@@ -1,8 +1,10 @@
 import React, { useState } from "react";
 
 import { EuiButtonIcon, EuiContextMenu, EuiPopover } from "@elastic/eui";
+import { useNavigate } from "react-router-dom";
 
-export const NavigationMenu = ({ curPage, props }) => {
+export const NavigationMenu = ({ curPage }) => {
+  const navigate = useNavigate();
   const [isPopoverOpen, setPopover] = useState(false);
 
   const onButtonClick = () => {
@@ -17,22 +19,22 @@ export const NavigationMenu = ({ curPage, props }) => {
     {
       name: "Settings",
       icon: "gear",
-      onClick: () => props.navigate("../experiments/settings"),
+      onClick: () => navigate("../experiments/settings"),
     },
     {
       name: "Experiments",
       icon: "apmTrace",
-      onClick: () => props.navigate("../experiments"),
+      onClick: () => navigate("../experiments"),
     },
     {
       name: "Treatments",
       icon: "beaker",
-      onClick: () => props.navigate("../experiments/treatments"),
+      onClick: () => navigate("../experiments/treatments"),
     },
     {
       name: "Segments",
       icon: "package",
-      onClick: () => props.navigate("../experiments/segments"),
+      onClick: () => navigate("../experiments/segments"),
     },
   ];
   const contextRows = allRows.filter((e) => e.name.toLowerCase() !== curPage);