feat: routing

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>
+);

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>
-);

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;

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;

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;

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 });
   },
 });