From 55e86ead027168b85438975af4090e87a9f7cd11 Mon Sep 17 00:00:00 2001
From: dhrubesh-makeen <dhrubesh@makeen.io>
Date: Sat, 24 Apr 2021 03:51:31 +0530
Subject: [PATCH] moves routing to a single place

---
 frontend/src/modules/App.tsx              |  81 -----------------
 frontend/src/modules/AppWrapper.tsx       | 104 +++++++++++++++-------
 frontend/src/modules/Nav/SideNav.tsx      |   5 +-
 frontend/src/modules/Nav/TopNav/index.tsx |   6 ++
 frontend/src/pages.ts                     |  28 ++++++
 5 files changed, 112 insertions(+), 112 deletions(-)
 delete mode 100644 frontend/src/modules/App.tsx
 create mode 100644 frontend/src/pages.ts

diff --git a/frontend/src/modules/App.tsx b/frontend/src/modules/App.tsx
deleted file mode 100644
index d2828d9f10..0000000000
--- a/frontend/src/modules/App.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-import React, { Suspense } from "react";
-import { Layout, Spin } from "antd";
-import { useThemeSwitcher } from "react-css-theme-switcher";
-
-import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
-
-import SideNav from "./Nav/SideNav";
-import TopNav from "./Nav/TopNav";
-
-const { Content, Footer } = Layout;
-
-const ServiceMetrics = React.lazy(
-	() => import("Src/modules/metrics/ServiceMetricsDef"),
-);
-const ServiceMap = React.lazy(
-	() => import("Src/modules/Servicemap/ServiceMap"),
-);
-const TraceDetail = React.lazy(() => import("Src/modules/Traces/TraceDetail"));
-const TraceGraph = React.lazy(() => import("Src/modules/Traces/TraceGraphDef"));
-const UsageExplorer = React.lazy(
-	() => import("Src/modules/Usage/UsageExplorerDef"),
-);
-const ServicesTable = React.lazy(
-	() => import("Src/modules/metrics/ServicesTableDef"),
-);
-const Signup = React.lazy(() => import("Src/modules/Auth/Signup"));
-const SettingsPage = React.lazy(
-	() => import("Src/modules/Settings/settingsPage"),
-);
-
-const IntstrumentationPage = React.lazy(
-	() => import("Src/modules/add-instrumentation/instrumentationPage"),
-);
-//PNOTE
-//React. lazy currently only supports default exports. If the module you want to import uses named exports, you can create an intermediate module that reexports it as the default. This ensures that tree shaking keeps working and that you don't pull in unused components.
-
-const App = () => {
-	const { status } = useThemeSwitcher();
-
-	if (status === "loading") {
-		return null;
-	}
-
-	return (
-		<Router basename="/">
-			<Layout style={{ minHeight: "100vh" }}>
-				<SideNav />
-				<Layout className="site-layout">
-					<Content style={{ margin: "0 16px" }}>
-						<TopNav />
-
-						{/* <Divider /> */}
-
-						<Suspense fallback={<Spin size="large" />}>
-							<Switch>
-								<Route path="/application/:servicename" component={ServiceMetrics} />
-								<Route path="/service-map" component={ServiceMap} />
-								<Route path="/traces" exact component={TraceDetail} />
-								<Route path="/traces/:id" component={TraceGraph} />
-								<Route path="/settings" exact component={SettingsPage} />
-								<Route
-									path="/add-instrumentation"
-									exact
-									component={IntstrumentationPage}
-								/>
-								<Route path="/usage-explorer" component={UsageExplorer} />
-								<Route path="/" component={ServicesTable} />
-								<Route path="/application" exact component={ServicesTable} />
-							</Switch>
-						</Suspense>
-					</Content>
-					<Footer style={{ textAlign: "center", fontSize: 10 }}>
-						SigNoz Inc. ©2020{" "}
-					</Footer>
-				</Layout>
-			</Layout>
-		</Router>
-	);
-};
-
-export default App;
diff --git a/frontend/src/modules/AppWrapper.tsx b/frontend/src/modules/AppWrapper.tsx
index ca75872572..935b7dc010 100644
--- a/frontend/src/modules/AppWrapper.tsx
+++ b/frontend/src/modules/AppWrapper.tsx
@@ -1,36 +1,80 @@
 import React, { Suspense } from "react";
-import { Spin } from "antd";
-import { Route, Switch, Redirect } from "react-router-dom";
-import Signup from "./Auth/Signup";
-const App = React.lazy(() => import("Src/modules/App"));
+import { Layout, Spin } from "antd";
+import { useThemeSwitcher } from "react-css-theme-switcher";
+
+import {
+	BrowserRouter as Router,
+	Route,
+	Switch,
+	Redirect,
+} from "react-router-dom";
+
+import SideNav from "./Nav/SideNav";
+import TopNav from "./Nav/TopNav";
+import {
+	ServiceMetrics,
+	ServiceMap,
+	TraceDetail,
+	TraceGraph,
+	UsageExplorer,
+	ServicesTable,
+	Signup,
+	SettingsPage,
+	IntstrumentationPage,
+} from "Src/pages";
+
+const { Content, Footer } = Layout;
+
+const App = () => {
+	const { status } = useThemeSwitcher();
+
+	if (status === "loading") {
+		return null;
+	}
 
-const AppWrapper = () => {
 	return (
-		<Suspense fallback={<Spin size="large" />}>
-			<Switch>
-				<Route path="/application" exact component={App} />
-				<Route path="/application/:servicename" component={App} />
-				<Route path="/service-map" component={App} />
-				<Route path="/traces" exact component={App} />
-				<Route path="/traces/:id" component={App} />
-				<Route path="/usage-explorer" component={App} />
-				<Route path="/settings" component={App} />
-				<Route path="/add-instrumentation" component={App} />
-				<Route path="/signup" component={Signup} />
-				<Route
-					path="/"
-					exact
-					render={() => {
-						return localStorage.getItem("isLoggedIn") === "yes" ? (
-							<Redirect to="/application" />
-						) : (
-							<Redirect to="/signup" />
-						);
-					}}
-				/>
-			</Switch>
-		</Suspense>
+		<Router basename="/">
+			<Layout style={{ minHeight: "100vh" }}>
+				<SideNav />
+				<Layout className="site-layout">
+					<Content style={{ margin: "0 16px" }}>
+						<TopNav />
+						<Suspense fallback={<Spin size="large" />}>
+							<Switch>
+								<Route path="/signup" component={Signup} />
+								<Route path="/application/:servicename" component={ServiceMetrics} />
+								<Route path="/service-map" component={ServiceMap} />
+								<Route path="/traces" exact component={TraceDetail} />
+								<Route path="/traces/:id" component={TraceGraph} />
+								<Route path="/settings" exact component={SettingsPage} />
+								<Route
+									path="/add-instrumentation"
+									exact
+									component={IntstrumentationPage}
+								/>
+								<Route path="/usage-explorer" component={UsageExplorer} />
+								<Route path="/application" exact component={ServicesTable} />
+								<Route
+									path="/"
+									exact
+									render={() => {
+										return localStorage.getItem("isLoggedIn") === "yes" ? (
+											<Redirect to="/application" />
+										) : (
+											<Redirect to="/signup" />
+										);
+									}}
+								/>
+							</Switch>
+						</Suspense>
+					</Content>
+					<Footer style={{ textAlign: "center", fontSize: 10 }}>
+						SigNoz Inc. ©2020{" "}
+					</Footer>
+				</Layout>
+			</Layout>
+		</Router>
 	);
 };
 
-export default AppWrapper;
+export default App;
diff --git a/frontend/src/modules/Nav/SideNav.tsx b/frontend/src/modules/Nav/SideNav.tsx
index 2fbafa4015..d3f67284d1 100644
--- a/frontend/src/modules/Nav/SideNav.tsx
+++ b/frontend/src/modules/Nav/SideNav.tsx
@@ -2,6 +2,7 @@ import React, { useState } from "react";
 import { Layout, Menu, Switch as ToggleButton } from "antd";
 import { NavLink } from "react-router-dom";
 import { useThemeSwitcher } from "react-css-theme-switcher";
+import { useHistory } from "react-router-dom";
 
 import {
 	LineChartOutlined,
@@ -17,7 +18,9 @@ const { Sider } = Layout;
 const SideNav = () => {
 	const { switcher, currentTheme, status, themes } = useThemeSwitcher();
 	const [collapsed, setCollapsed] = useState<boolean>(false);
-	if (status === "loading") {
+	const history = useHistory();
+
+	if (status === "loading" || history.location.pathname === "/signup") {
 		return null;
 	}
 	const toggleTheme = (isChecked: boolean) => {
diff --git a/frontend/src/modules/Nav/TopNav/index.tsx b/frontend/src/modules/Nav/TopNav/index.tsx
index 82b64ae66a..20be5c10cc 100644
--- a/frontend/src/modules/Nav/TopNav/index.tsx
+++ b/frontend/src/modules/Nav/TopNav/index.tsx
@@ -1,10 +1,16 @@
 import React, { useState } from "react";
 import { Row, Col } from "antd";
+import { useHistory } from "react-router-dom";
 
 import DateTimeSelector from "./DateTimeSelector";
 import ShowBreadcrumbs from "./ShowBreadcrumbs";
 
 const TopNav = () => {
+	const history = useHistory();
+
+	if (history.location.pathname === "/signup") {
+		return null;
+	}
 	return (
 		<Row>
 			<Col span={16}>
diff --git a/frontend/src/pages.ts b/frontend/src/pages.ts
new file mode 100644
index 0000000000..803214d585
--- /dev/null
+++ b/frontend/src/pages.ts
@@ -0,0 +1,28 @@
+import React from "react";
+
+export const ServiceMetrics = React.lazy(
+	() => import("Src/modules/metrics/ServiceMetricsDef"),
+);
+export const ServiceMap = React.lazy(
+	() => import("Src/modules/Servicemap/ServiceMap"),
+);
+export const TraceDetail = React.lazy(
+	() => import("Src/modules/Traces/TraceDetail"),
+);
+export const TraceGraph = React.lazy(
+	() => import("Src/modules/Traces/TraceGraphDef"),
+);
+export const UsageExplorer = React.lazy(
+	() => import("Src/modules/Usage/UsageExplorerDef"),
+);
+export const ServicesTable = React.lazy(
+	() => import("Src/modules/metrics/ServicesTableDef"),
+);
+export const Signup = React.lazy(() => import("Src/modules/Auth/Signup"));
+export const SettingsPage = React.lazy(
+	() => import("Src/modules/Settings/settingsPage"),
+);
+
+export const IntstrumentationPage = React.lazy(
+	() => import("Src/modules/add-instrumentation/instrumentationPage"),
+);