Skip to content

Commit

Permalink
refactor(web): routing (#447)
Browse files Browse the repository at this point in the history
  • Loading branch information
KaWaite committed May 26, 2023
1 parent 75b7bb9 commit ca72168
Show file tree
Hide file tree
Showing 2 changed files with 105 additions and 97 deletions.
101 changes: 4 additions & 97 deletions web/src/app.tsx
@@ -1,37 +1,13 @@
import React, { Suspense } from "react";
import { BrowserRouter as Router, Navigate, useParams, Routes, Route } from "react-router-dom";
import { Suspense } from "react";

import Loading from "@reearth/classic/components/atoms/Loading";
import NotificationBanner from "@reearth/classic/components/organisms/Notification";
import LoginPage from "@reearth/classic/components/pages/Authentication/LoginPage";
import PasswordResetPage from "@reearth/classic/components/pages/Authentication/PasswordReset";
import SignupPage from "@reearth/classic/components/pages/Authentication/SignupPage";
import NotFound from "@reearth/classic/components/pages/NotFound";
import AccountSettings from "@reearth/classic/components/pages/Settings/Account";
import ProjectSettings from "@reearth/classic/components/pages/Settings/Project";
import DatasetSettings from "@reearth/classic/components/pages/Settings/Project/Dataset";
import PluginSettings from "@reearth/classic/components/pages/Settings/Project/Plugin";
import PublicSettings from "@reearth/classic/components/pages/Settings/Project/Public";
import SettingsProjectList from "@reearth/classic/components/pages/Settings/ProjectList";
import WorkspaceSettings from "@reearth/classic/components/pages/Settings/Workspace";
import AssetSettings from "@reearth/classic/components/pages/Settings/Workspace/Asset";
import WorkspaceList from "@reearth/classic/components/pages/Settings/WorkspaceList";
import { Provider as I18nProvider } from "@reearth/services/i18n";

import RootPage from "./classic/components/pages/Authentication/RootPage";
import Preview from "./classic/components/pages/Preview";
import { Provider as Auth0Provider } from "./services/auth";
import { Provider as GqlProvider } from "./services/gql";
import { Provider as ThemeProvider, styled } from "./services/theme";

const BetaEditor = React.lazy(() => import("@reearth/beta/pages/Editor"));

const EarthEditor = React.lazy(() => import("@reearth/classic/components/pages/EarthEditor"));
const Dashboard = React.lazy(() => import("@reearth/classic/components/pages/Dashboard"));
const GraphQLPlayground = React.lazy(
() => import("@reearth/classic/components/pages/GraphQLPlayground"),
);
const PluginEditor = React.lazy(() => import("./classic/components/pages/PluginEditor"));
import { AppRoutes } from "./services/routing";
import { Provider as ThemeProvider } from "./services/theme";

export default function App() {
return (
Expand All @@ -41,80 +17,11 @@ export default function App() {
<I18nProvider>
<Suspense fallback={<Loading />}>
<NotificationBanner />
<StyledRouter>
<Routes>
<Route path="/" element={<RootPage />} />
<Route path="/login" element={<LoginPage />} />
<Route path="/signup" element={<SignupPage />} />
<Route path="/password-reset" element={<PasswordResetPage />} />
<Route path="/dashboard/:workspaceId" element={<Dashboard />} />
{/* classic routes - start */}
<Route path="/edit/:sceneId" element={<EarthEditor />} />
<Route path="/edit/:sceneId/preview" element={<Preview />} />
<Route path="/plugin-editor" element={<PluginEditor />} />
{/* classic routes - end */}
<Route path="/scene/:sceneId" element={<BetaEditor />}>
<Route path="story" element={<BetaEditor />} />
<Route path="widgets" element={<BetaEditor />} />
<Route path="publish" element={<BetaEditor />} />
</Route>
<Route path="settings" element={<Navigate to="/settings/account" />} />
<Route path="/settings/account" element={<AccountSettings />} />
<Route path="/settings/workspaces" element={<WorkspaceList />} />
<Route path="/settings/workspaces/:workspaceId" element={<WorkspaceSettings />} />
<Route
path="/settings/workspaces/:workspaceId/projects"
element={<SettingsProjectList />}
/>
<Route
path="/settings/workspaces/:workspaceId/asset"
element={<AssetSettings />}
/>
<Route path="/settings/projects/:projectId" element={<ProjectSettings />} />
<Route path="/settings/projects/:projectId/public" element={<PublicSettings />} />
<Route
path="/settings/projects/:projectId/dataset"
element={<DatasetSettings />}
/>
<Route
path="/settings/projects/:projectId/plugins"
element={<PluginSettings />}
/>
<Route path="/graphql" element={<GraphQLPlayground />} />
{...redirects.map(([from, to]) => (
<Route key={from} path={from} element={<Redirect to={to} />} />
))}
<Route path="*" element={<NotFound />} />
</Routes>
</StyledRouter>
<AppRoutes />
</Suspense>
</I18nProvider>
</ThemeProvider>
</GqlProvider>
</Auth0Provider>
);
}

const StyledRouter = styled(Router)`
height: 100%;
`;

// Redirections for breaking changes in URLs
const redirects = [
["/settings/workspace/:workspaceId", "/settings/workspaces/:workspaceId"],
["/settings/workspace/:workspaceId/projects", "/settings/workspaces/:workspaceId/projects"],
["/settings/workspace/:workspaceId/asset", "/settings/workspaces/:workspaceId/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"],
];

function Redirect({ to }: { to: string }) {
const { teamId, projectId } = useParams();
return (
<Navigate
to={`${to.replace(":teamId", teamId ?? "").replace(":projectId", projectId ?? "")}`}
/>
);
}
101 changes: 101 additions & 0 deletions web/src/services/routing/index.tsx
@@ -0,0 +1,101 @@
import { lazy } from "react";
import { BrowserRouter as Router, Navigate, Route, Routes, useParams } from "react-router-dom";

import LoginPage from "@reearth/classic/components/pages/Authentication/LoginPage";
import PasswordResetPage from "@reearth/classic/components/pages/Authentication/PasswordReset";
import SignupPage from "@reearth/classic/components/pages/Authentication/SignupPage";
import NotFound from "@reearth/classic/components/pages/NotFound";
import AccountSettings from "@reearth/classic/components/pages/Settings/Account";
import ProjectSettings from "@reearth/classic/components/pages/Settings/Project";
import DatasetSettings from "@reearth/classic/components/pages/Settings/Project/Dataset";
import PluginSettings from "@reearth/classic/components/pages/Settings/Project/Plugin";
import PublicSettings from "@reearth/classic/components/pages/Settings/Project/Public";
import SettingsProjectList from "@reearth/classic/components/pages/Settings/ProjectList";
import WorkspaceSettings from "@reearth/classic/components/pages/Settings/Workspace";
import AssetSettings from "@reearth/classic/components/pages/Settings/Workspace/Asset";
import WorkspaceList from "@reearth/classic/components/pages/Settings/WorkspaceList";
import { styled } from "@reearth/services/theme";

import RootPage from "../../classic/components/pages/Authentication/RootPage";
import Preview from "../../classic/components/pages/Preview";

const BetaEditor = lazy(() => import("@reearth/beta/pages/Editor"));

const EarthEditor = lazy(() => import("@reearth/classic/components/pages/EarthEditor"));
const Dashboard = lazy(() => import("@reearth/classic/components/pages/Dashboard"));
const GraphQLPlayground = lazy(() => import("@reearth/classic/components/pages/GraphQLPlayground"));
const PluginEditor = lazy(() => import("../../classic/components/pages/PluginEditor"));

export const AppRoutes = () => {
return (
<StyledRouter>
<Routes>
<Route index={true} element={<RootPage />} />
<Route path="login" element={<LoginPage />} />
<Route path="signup" element={<SignupPage />} />
<Route path="password-reset" element={<PasswordResetPage />} />
<Route path="dashboard/:workspaceId" element={<Dashboard />} />
{/* classic routes - start */}
<Route path="edit/:sceneId">
<Route index={true} element={<EarthEditor />} />
<Route path="preview" element={<Preview />} />
</Route>
<Route path="plugin-editor" element={<PluginEditor />} />
{/* classic routes - end */}
<Route path="scene/:sceneId" element={<BetaEditor />}>
<Route path="story" element={<BetaEditor />} />
<Route path="widgets" element={<BetaEditor />} />
<Route path="publish" element={<BetaEditor />} />
</Route>
<Route path="settings">
<Route index={true} element={<Navigate to="/settings/account" />} />
<Route path="account" element={<AccountSettings />} />
<Route path="workspaces">
<Route index={true} element={<WorkspaceList />} />
<Route path=":workspaceId">
<Route index={true} element={<WorkspaceSettings />} />
<Route path="projects" element={<SettingsProjectList />} />
<Route path="asset" element={<AssetSettings />} />
</Route>
</Route>
<Route path="projects/:projectId">
<Route index={true} element={<ProjectSettings />} />
<Route path="public" element={<PublicSettings />} />
<Route path="dataset" element={<DatasetSettings />} />
<Route path="plugins" element={<PluginSettings />} />
</Route>
<Route path="*" element={<Navigate to="/settings/account" />} />
</Route>
<Route path="graphql" element={<GraphQLPlayground />} />
{...redirects.map(([from, to]) => (
<Route key={from} path={from} element={<Redirect to={to} />} />
))}
<Route path="*" element={<NotFound />} />
</Routes>
</StyledRouter>
);
};

const StyledRouter = styled(Router)`
height: 100%;
`;

// Redirections for breaking changes in URLs
const redirects = [
["/settings/workspace/:workspaceId", "/settings/workspaces/:workspaceId"],
["/settings/workspace/:workspaceId/projects", "/settings/workspaces/:workspaceId/projects"],
["/settings/workspace/:workspaceId/asset", "/settings/workspaces/:workspaceId/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"],
];

function Redirect({ to }: { to: string }) {
const { teamId, projectId } = useParams();
return (
<Navigate
to={`${to.replace(":teamId", teamId ?? "").replace(":projectId", projectId ?? "")}`}
/>
);
}

0 comments on commit ca72168

Please sign in to comment.