Merge pull request #10 from Nek/feat/routing-through-plugin-api

feat/routing-through-plugin-api

plugins/circleci/src/components/Store/Store.tsx

@@ -13,14 +13,10 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React from 'react';
-import { Route, Switch } from 'react-router';
+import React, { FC } from 'react';
 import { Provider, useDispatch } from 'react-redux';
-import { BuildsPage } from './pages/BuildsPage';
-import { DetailedViewPage } from './pages/DetailedViewPage';
-import { SettingsPage } from './pages/SettingsPage';
 
-import store, { Dispatch } from './state/store';
+import store, { Dispatch } from '../../state/store';
 
 const RehydrateSettings = () => {
   const dispatch: Dispatch = useDispatch();
@@ -30,17 +26,20 @@ const RehydrateSettings = () => {
   }, []);
   return null;
 };
-export const App = () => {
+
+export const Store: FC = ({ children }) => {
   return (
     <Provider store={store}>
-      <>
+      <div>
         <RehydrateSettings />
-        <Switch>
-          <Route path="/circleci" component={BuildsPage} exact />
-          <Route path="/circleci/settings" component={SettingsPage} />
-          <Route path="/circleci/build/:buildId" component={DetailedViewPage} />
-        </Switch>
-      </>
+        {children}
+      </div>
     </Provider>
   );
 };
+
+export const withStore = (Component: React.ComponentType<any>) => () => (
+  <Store>
+    <Component />
+  </Store>
+);

plugins/circleci/src/components/Store/index.ts

@@ -0,0 +1 @@
+export * from './Store';

plugins/circleci/src/pages/BuildsPage/BuildsPage.tsx

@@ -19,8 +19,9 @@ 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';
 
-export const BuildsPage: FC<{}> = () => (
+const BuildsPage: FC<{}> = () => (
   <Layout>
     <Content>
       <PluginHeader title="All builds" />
@@ -32,3 +33,5 @@ export const BuildsPage: FC<{}> = () => (
     </Content>
   </Layout>
 );
+
+export default withStore(BuildsPage);

plugins/circleci/src/pages/BuildsPage/index.ts

@@ -13,4 +13,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export * from './BuildsPage';
+export { default as BuildsPage } from './BuildsPage';

plugins/circleci/src/pages/DetailedViewPage/DetailedViewPage.tsx

@@ -24,6 +24,7 @@ import { PluginHeader } from '../../components/PluginHeader';
 import { ActionOutput } from './lib/ActionOutput/ActionOutput';
 import { Layout } from '../../components/Layout';
 import { Dispatch, iRootState } from '../../state/store';
+import { withStore } from '../../components/Store';
 
 const BuildName: FC<{ build: BuildWithSteps | null }> = ({ build }) => (
   <>
@@ -86,7 +87,8 @@ const pickClassName = (
 
   return classes.neutral;
 };
-export const DetailedViewPage: FC<{}> = () => {
+
+const DetailedViewPage: FC<{}> = () => {
   const { buildId = '' } = useParams();
   const classes = useStyles();
   const dispatch: Dispatch = useDispatch();
@@ -151,3 +153,5 @@ const ActionsList: FC<{ actions: BuildStepAction[]; name: string }> = ({
     </>
   );
 };
+
+export default withStore(DetailedViewPage);

plugins/circleci/src/pages/DetailedViewPage/index.ts

@@ -13,4 +13,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export * from './DetailedViewPage';
+export { default as DetailedViewPage } from './DetailedViewPage';

plugins/circleci/src/pages/SettingsPage/SettingsPage.tsx

@@ -30,8 +30,9 @@ import { Layout } from '../../components/Layout';
 import { PluginHeader } from '../../components/PluginHeader';
 import { SettingsState } from '../../state/models/settings';
 import { iRootState, Dispatch } from '../../state/store';
+import { withStore } from '../../components/Store';
 
-export const SettingsPage = () => {
+const SettingsPage = () => {
   const {
     token: tokenFromStore,
     owner: ownerFromStore,
@@ -89,7 +90,7 @@ export const SettingsPage = () => {
                     value={token}
                     fullWidth
                     variant="outlined"
-                    onChange={e => setToken(e.target.value)}
+                    onChange={(e) => setToken(e.target.value)}
                   />
                 </ListItem>
                 <ListItem>
@@ -99,7 +100,7 @@ export const SettingsPage = () => {
                     label="Owner"
                     variant="outlined"
                     value={owner}
-                    onChange={e => setOwner(e.target.value)}
+                    onChange={(e) => setOwner(e.target.value)}
                   />
                 </ListItem>
                 <ListItem>
@@ -109,7 +110,7 @@ export const SettingsPage = () => {
                     fullWidth
                     variant="outlined"
                     value={repo}
-                    onChange={e => setRepo(e.target.value)}
+                    onChange={(e) => setRepo(e.target.value)}
                   />
                 </ListItem>
                 <ListItem>
@@ -144,3 +145,5 @@ export const SettingsPage = () => {
     </Layout>
   );
 };
+
+export default withStore(SettingsPage);

plugins/circleci/src/pages/SettingsPage/index.ts

@@ -13,4 +13,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export * from './SettingsPage';
+export { default as SettingsPage } from './SettingsPage';

plugins/circleci/src/plugin.ts

@@ -14,11 +14,15 @@
  * limitations under the License.
  */
 import { createPlugin } from '@backstage/core';
-import { App } from './App';
+import { BuildsPage } from './pages/BuildsPage';
+import { SettingsPage } from './pages/SettingsPage';
+import { DetailedViewPage } from './pages/DetailedViewPage';
 
 export const plugin = createPlugin({
   id: 'circleci',
   register({ router }) {
-    router.registerRoute('/circleci', App, { exact: false });
+    router.registerRoute('/circleci', BuildsPage);
+    router.registerRoute('/circleci/settings', SettingsPage);
+    router.registerRoute('/circleci/build/:buildId', DetailedViewPage);
   },
 });