From 34e021ff596ee67226a6f51dd2d202556c45b5e8 Mon Sep 17 00:00:00 2001
From: Ivan Shmidt <bahoc47@gmail.com>
Date: Thu, 14 May 2020 14:32:58 +0200
Subject: [PATCH] feat: routing

---
 plugins/circleci/src/components/App.tsx       | 20 +++++++++++++++++++
 .../circleci/src/components/Store/Store.tsx   |  9 ++-------
 .../src/pages/BuildsPage/BuildsPage.tsx       |  3 +--
 .../DetailedViewPage/DetailedViewPage.tsx     |  3 +--
 .../src/pages/SettingsPage/SettingsPage.tsx   |  3 +--
 plugins/circleci/src/plugin.ts                |  8 ++------
 6 files changed, 27 insertions(+), 19 deletions(-)
 create mode 100644 plugins/circleci/src/components/App.tsx

diff --git a/plugins/circleci/src/components/App.tsx b/plugins/circleci/src/components/App.tsx
new file mode 100644
index 0000000000..68a02b70be
--- /dev/null
+++ b/plugins/circleci/src/components/App.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { Switch, Route } from 'react-router';
+import { BuildsPage } from '../pages/BuildsPage';
+import { SettingsPage } from '../pages/SettingsPage';
+import { DetailedViewPage } from '../pages/DetailedViewPage';
+import { Store } from './Store';
+
+export const App = () => (
+  <Store>
+    <Switch>
+      <Route path="/circleci" exact component={BuildsPage} />
+      <Route path="/circleci/settings" exact component={SettingsPage} />
+      <Route
+        path="/circleci/build/:buildId"
+        exact
+        component={DetailedViewPage}
+      />
+    </Switch>
+  </Store>
+);
diff --git a/plugins/circleci/src/components/Store/Store.tsx b/plugins/circleci/src/components/Store/Store.tsx
index 6692ef9468..f6df1897a0 100644
--- a/plugins/circleci/src/components/Store/Store.tsx
+++ b/plugins/circleci/src/components/Store/Store.tsx
@@ -97,15 +97,10 @@ const reducer: Reducer<State, Action> = (state, action) => {
 
 export const Store: FC = ({ children }) => {
   const [state, dispatch] = useReducer(reducer, initialState);
+
   return (
     <AppContext.Provider value={[state, dispatch]}>
-      <div>{children}</div>
+      <>{children}</>
     </AppContext.Provider>
   );
 };
-
-export const withStore = (Component: React.ComponentType<any>) => () => (
-  <Store>
-    <Component />
-  </Store>
-);
diff --git a/plugins/circleci/src/pages/BuildsPage/BuildsPage.tsx b/plugins/circleci/src/pages/BuildsPage/BuildsPage.tsx
index 700aa1288e..01593ebf4d 100644
--- a/plugins/circleci/src/pages/BuildsPage/BuildsPage.tsx
+++ b/plugins/circleci/src/pages/BuildsPage/BuildsPage.tsx
@@ -19,7 +19,6 @@ import { Grid } from '@material-ui/core';
 import { Builds } from './lib/Builds';
 import { Layout } from '../../components/Layout';
 import { PluginHeader } from '../../components/PluginHeader';
-import { withStore } from '../../components/Store';
 
 const BuildsPage: FC<{}> = () => (
   <Layout>
@@ -34,4 +33,4 @@ const BuildsPage: FC<{}> = () => (
   </Layout>
 );
 
-export default withStore(BuildsPage);
+export default BuildsPage;
diff --git a/plugins/circleci/src/pages/DetailedViewPage/DetailedViewPage.tsx b/plugins/circleci/src/pages/DetailedViewPage/DetailedViewPage.tsx
index f77b4ff5e7..19509b32d1 100644
--- a/plugins/circleci/src/pages/DetailedViewPage/DetailedViewPage.tsx
+++ b/plugins/circleci/src/pages/DetailedViewPage/DetailedViewPage.tsx
@@ -22,7 +22,6 @@ import { makeStyles } from '@material-ui/core/styles';
 import { PluginHeader } from '../../components/PluginHeader';
 import { ActionOutput } from './lib/ActionOutput/ActionOutput';
 import { Layout } from '../../components/Layout';
-import { withStore } from '../../components/Store';
 import { useBuildWithSteps } from './hooks';
 
 const BuildName: FC<{ build: BuildWithSteps | null }> = ({ build }) => (
@@ -144,4 +143,4 @@ const ActionsList: FC<{ actions: BuildStepAction[]; name: string }> = ({
   );
 };
 
-export default withStore(DetailedViewPage);
+export default DetailedViewPage;
diff --git a/plugins/circleci/src/pages/SettingsPage/SettingsPage.tsx b/plugins/circleci/src/pages/SettingsPage/SettingsPage.tsx
index 6b23207b50..76f37b955b 100644
--- a/plugins/circleci/src/pages/SettingsPage/SettingsPage.tsx
+++ b/plugins/circleci/src/pages/SettingsPage/SettingsPage.tsx
@@ -27,7 +27,6 @@ import { Alert } from '@material-ui/lab';
 import { InfoCard, Content } from '@backstage/core';
 import { Layout } from '../../components/Layout';
 import { PluginHeader } from '../../components/PluginHeader';
-import { withStore } from '../../components/Store';
 import { useSettings } from './settings';
 
 const SettingsPage = () => {
@@ -137,4 +136,4 @@ const SettingsPage = () => {
   );
 };
 
-export default withStore(SettingsPage);
+export default SettingsPage;
diff --git a/plugins/circleci/src/plugin.ts b/plugins/circleci/src/plugin.ts
index fb42c53835..77a223a162 100644
--- a/plugins/circleci/src/plugin.ts
+++ b/plugins/circleci/src/plugin.ts
@@ -14,15 +14,11 @@
  * limitations under the License.
  */
 import { createPlugin } from '@backstage/core';
-import { BuildsPage } from './pages/BuildsPage';
-import { SettingsPage } from './pages/SettingsPage';
-import { DetailedViewPage } from './pages/DetailedViewPage';
+import { App } from './components/App';
 
 export const plugin = createPlugin({
   id: 'circleci',
   register({ router }) {
-    router.registerRoute('/circleci', BuildsPage);
-    router.registerRoute('/circleci/settings', SettingsPage);
-    router.registerRoute('/circleci/build/:buildId', DetailedViewPage);
+    router.registerRoute('/circleci', App, { exact: false });
   },
 });