fix: router typos (#252)

* fix route target path * add redirections for former urls * remove redirect to test in test env * add back the redirections * add @emotion/utils to dependencies * remove dependency of @emotion/utils * typo * add redirect for project setting page * refactor * move wdyr imports * refactor Co-authored-by: rot1024 <aayhrot@gmail.com>
reearth · Jun 23, 2022 · 19fcb69 · 19fcb69
1 parent 77a3ced
commit 19fcb69
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 22 deletions.
diff --git a/src/app.tsx b/src/app.tsx
@@ -1,5 +1,5 @@
 import React, { Suspense } from "react";
-import { BrowserRouter as Router, useRoutes, Navigate } from "react-router-dom";
+import { BrowserRouter as Router, useRoutes, Navigate, useParams } from "react-router-dom";
 
 import Loading from "@reearth/components/atoms/Loading";
 import NotificationBanner from "@reearth/components/organisms/Notification";
@@ -29,18 +29,8 @@ const Dashboard = React.lazy(() => import("@reearth/components/pages/Dashboard")
 const GraphQLPlayground = React.lazy(() => import("@reearth/components/pages/GraphQLPlayground"));
 const PluginEditor = React.lazy(() => import("./components/pages/PluginEditor"));
 
-const enableWhyDidYouRender = false;
-
-if (enableWhyDidYouRender && process.env.NODE_ENV === "development") {
-  // eslint-disable-next-line @typescript-eslint/no-var-requires
-  const whyDidYouRender = require("@welldone-software/why-did-you-render");
-  whyDidYouRender(React, {
-    trackAllPureComponents: true,
-  });
-}
-
 function AppRoutes() {
-  const routes = useRoutes([
+  return useRoutes([
     { path: "/", element: <RootPage /> },
     { path: "/login", element: <LoginPage /> },
     { path: "/signup", element: <SignupPage /> },
@@ -60,12 +50,12 @@ function AppRoutes() {
     { path: "/settings/projects/:projectId/plugins", element: <PluginSettings /> },
     { path: "/plugin-editor", element: <PluginEditor /> },
     { path: "/graphql", element: process.env.NODE_ENV !== "production" && <GraphQLPlayground /> },
+    ...redirects,
     { path: "*", element: <NotFound /> },
   ]);
-  return routes;
 }
 
-const App: React.FC = () => {
+export default function App() {
   return (
     <Auth0Provider>
       <GqlProvider>
@@ -82,10 +72,31 @@ const App: React.FC = () => {
       </GqlProvider>
     </Auth0Provider>
   );
-};
+}
 
 const StyledRouter = styled(Router)`
   height: 100%;
 `;
 
-export default App;
+// Redirections for breaking changes in URLs
+const redirects = [
+  ["/settings/workspace/:teamId", "/settings/workspaces/:teamId"],
+  ["/settings/workspace/:teamId/projects", "/settings/workspaces/:teamId/projects"],
+  ["/settings/workspace/:teamId/asset", "/settings/workspaces/:teamId/asset"],
+  ["/settings/project/:projectId", "/settings/projects/:projectId"],
+  ["/settings/project/:projectId/public", "/settings/projects/:projectId/public"],
+  ["/settings/project/:projectId/dataset", "/settings/projects/:projectId/dataset"],
+  ["/settings/project/:projectId/plugins", "/settings/projects/:projectId/plugins"],
+].map(([from, to]) => ({
+  path: from,
+  element: <Redirect to={to} />,
+}));
+
+function Redirect({ to }: { to: string }) {
+  const { teamId, projectId } = useParams();
+  return (
+    <Navigate
+      to={`${to.replace(":teamId", teamId ?? "").replace(":projectId", projectId ?? "")}`}
+    />
+  );
+}
diff --git a/src/components/molecules/Settings/Navigation/index.tsx b/src/components/molecules/Settings/Navigation/index.tsx
@@ -45,32 +45,32 @@ const Navigation: React.FC<Props> = ({ team, project }) => {
               name={team.name as string}>
               <NavigationItem
                 level={3}
-                to={`/settings/workspace/${team.id}/asset`}
+                to={`/settings/workspaces/${team.id}/asset`}
                 name={t("Assets")}
               />
             </NavigationItem>
           )}
         </NavigationItem>
         <Divider margin="0" />
-        <NavigationItem to={`/settings/workspace/${team?.id}/projects`} name={t("Project List")}>
+        <NavigationItem to={`/settings/workspaces/${team?.id}/projects`} name={t("Project List")}>
           {project && !project.isArchived && (
             <NavigationItem
               level={2}
               to={`/settings/projects/${project.id}`}
               name={project.name as string}>
               <NavigationItem
                 level={3}
-                to={`/settings/project/${project.id}/public`}
+                to={`/settings/projects/${project.id}/public`}
                 name={t("Public")}
               />
               <NavigationItem
                 level={3}
-                to={`/settings/project/${project.id}/dataset`}
+                to={`/settings/projects/${project.id}/dataset`}
                 name={t("Dataset")}
               />
               <NavigationItem
                 level={3}
-                to={`/settings/project/${project.id}/plugins`}
+                to={`/settings/projects/${project.id}/plugins`}
                 name={t("Plugins")}
               />
             </NavigationItem>

diff --git a/src/index.tsx b/src/index.tsx
@@ -7,6 +7,7 @@ import { createRoot } from "react-dom/client";
 import App from "./app";
 import loadConfig from "./config";
 import { initialize as initializeSentry } from "./sentry";
+import "./wdyr";
 
 window.React = React;
 window.ReactDOM = ReactDOM;

diff --git a/src/published.tsx b/src/published.tsx
@@ -4,6 +4,7 @@ import { createRoot } from "react-dom/client";
 
 import loadConfig from "./config";
 import App from "./publishedapp";
+import "./wdyr";
 
 loadConfig().finally(() => {
   const element = document.getElementById("root");

diff --git a/src/wdyr.ts b/src/wdyr.ts
@@ -2,7 +2,9 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 import React from "react";
 
-if (process.env.NODE_ENV === "development") {
+const enabled = false;
+
+if (process.env.NODE_ENV === "development" && enabled) {
   const whyDidYouRender = require("@welldone-software/why-did-you-render");
   whyDidYouRender(React, {
     trackAllPureComponents: true,