fix react-router breaking changes

frontend/src/components/navigation/org.js

@@ -16,7 +16,7 @@ const {
 } = ReactRedux;
 
 const {
-  Link,
+  NavLink
 } = ReactRouter;
 
 const {
@@ -110,7 +110,7 @@ const OrgNavigation = ({
 
     return (
       <NavLi key={to}>
-        <Link activeClassName='active' to={to}>
+        <NavLink activeClassName='active' to={to}>
           {
             ({
               isActive,
@@ -134,7 +134,7 @@ const OrgNavigation = ({
                 </NavigationLinkContainer>
               </a>
           }
-        </Link>
+        </NavLink>
       </NavLi>
     );
   });

frontend/src/components/section/index.js

@@ -18,7 +18,7 @@ const {
 } = ReactIntl;
 
 const {
-  Link
+  NavLink
 } = ReactRouter;
 
 const {
@@ -43,9 +43,9 @@ const Section = (props) => {
 
   const navLinks = links.map((link) => (
     <StyledHorizontalListItem key={link.name}>
-      <Link activeClassName='active' to={link.pathname}>
+      <NavLink activeClassName='active' to={link.pathname}>
         <FormattedMessage id={link.name} />
-      </Link>
+      </NavLink>
     </StyledHorizontalListItem>
   ));
 

frontend/src/containers/app.js

@@ -23,8 +23,8 @@ const {
 } = ReactRedux;
 
 const {
-  Miss,
-  Match
+  Switch,
+  Route
 } = ReactRouter;
 
 const {
@@ -80,19 +80,18 @@ const App = connect()(React.createClass({
   }
 }));
 
-module.exports = (props) => {
-  return (
-    <App {...props}>
-      <Header />
-
-      <Nav name="application-org-navigation">
-        <OrgNavigation />
-      </Nav>
-      <Article name="application-content">
-        <Match component={Home} pattern='/:org?/:section?' />
-        <Miss component={NotFound} />
-      </Article>
-      <Footer name="application-footer" />
-    </App>
-  );
-};
+module.exports = (props) => (
+  <App {...props}>
+    <Header />
+    <Nav name="application-org-navigation">
+      <OrgNavigation />
+    </Nav>
+    <Article name="application-content">
+      <Switch>
+        <Route component={Home} path='/:org?/:section?' />
+        <Route component={NotFound} />
+      </Switch>
+    </Article>
+    <Footer name="application-footer" />
+  </App>
+);

frontend/src/containers/home/index.js

@@ -14,8 +14,8 @@ const {
 } = ReactRedux;
 
 const {
-  Match,
-  Miss
+  Route,
+  Switch
 } = ReactRouter;
 
 const {
@@ -25,21 +25,24 @@ const {
 const Home = ({
   orgs = []
 }) => {
-
   const notFound = !orgs.length
     ? <NotFound />
     : Redirect(`/${orgs[0].id}`);
 
+
   return (
     <div>
       <Container>
-        <Match component={Org} pattern='/:org/:section?' />
-        <Miss component={notFound} />
+        <Switch>
+          <Route component={Org} path='/:org/:section?' />
+          <Route component={notFound} />
+        </Switch>
       </Container>
     </div>
   );
 };
 
+
 Home.propTypes = {
   orgs: React.PropTypes.arrayOf(PropTypes.org)
 };

frontend/src/containers/new-project/billing.js

@@ -58,10 +58,10 @@ Billing.propTypes = {
 };
 
 const mapStateToProps = (state, {
-  params = {}
+  match = {}
 }) => ({
   // TODO add cards - as above
-  org: orgByIdSelector(params.org)(state),
+  org: orgByIdSelector(match.params.org)(state),
   router: state.app.router
 });
 

frontend/src/containers/new-project/index.js

@@ -6,28 +6,26 @@ const Billing = require('@containers/new-project/billing');
 const NewBilling = require('@containers/new-project/new-billing');
 
 const {
-  Match
+  Switch,
+  Route
 } = ReactRouter;
 
-module.exports = () => {
-
-  return (
-    <div>
-      <Match
-        component={NewProject}
-        exactly
-        pattern='/:org/new-project'
-      />
-      <Match
-        component={Billing}
-        exactly
-        pattern='/:org/new-project/billing'
-      />
-      <Match
-        component={NewBilling}
-        exactly
-        pattern='/:org/new-project/new-billing'
-      />
-    </div>
-  );
-};
+module.exports = () => (
+  <Switch>
+    <Route
+      component={NewProject}
+      exact
+      path='/:org/new-project'
+    />
+    <Route
+      component={Billing}
+      exact
+      path='/:org/new-project/billing'
+    />
+    <Route
+      component={NewBilling}
+      exact
+      path='/:org/new-project/new-billing'
+    />
+  </Switch>
+);

frontend/src/containers/new-project/new-billing.js

@@ -52,10 +52,10 @@ NewBilling.propTypes = {
 };
 
 const mapStateToProps = (state, {
-  params = {}
+  match = {}
 }) => ({
   // TODO add cards - as above
-  org: orgByIdSelector(params.org)(state),
+  org: orgByIdSelector(match.params.org)(state),
   router: state.app.router
 });
 

frontend/src/containers/new-project/new-project.js

@@ -42,9 +42,9 @@ NewProject.propTypes = {
 // TODO we'll need to know whether there any cards
 // otherwise go to new billing straight away
 const mapStateToProps = (state, {
-  params = {}
+  match = {}
 }) => ({
-  org: orgByIdSelector(params.org)(state),
+  org: orgByIdSelector(match.params.org)(state),
   router: state.app.router
 });
 

frontend/src/containers/org/index.js

@@ -21,8 +21,8 @@ const {
 } = ReactRedux;
 
 const {
-  Match,
-  Miss
+  Switch,
+  Route
 } = ReactRouter;
 
 const {
@@ -41,30 +41,34 @@ const Org = ({
   }
 
   const missMatch = !sections.length ? null : (
-    <Miss component={Redirect(`/${org.id}/${sections[0]}`)} />
+    <Route
+      component={Redirect(`/${org.id}/${sections[0]}`)}
+      exact
+      path={`/${org.id}`}
+    />
   );
 
   const navMatches = sections.map((name) => (
-    <Match
+    <Route
       component={SectionComponents[name]}
       key={name}
-      pattern={`/:org/${name}`}
+      path={`/:org/${name}`}
     />
   ));
 
   navMatches.push(
-    <Match
+    <Route
       component={NewProject}
       key='new-project'
-      pattern={'/:org/new-project'}
+      path={'/:org/new-project'}
     />
   );
 
   return (
-    <div>
-      {navMatches}
+    <Switch>
       {missMatch}
-    </div>
+      {navMatches}
+    </Switch>
   );
 };
 
@@ -74,8 +78,8 @@ Org.propTypes = {
 };
 
 const mapStateToProps = (state, ownProps) => ({
-  org: orgByIdSelector(ownProps.params.org)(state),
-  sections: orgSectionsSelector(ownProps.params.org)(state)
+  org: orgByIdSelector(ownProps.match.params.org)(state),
+  sections: orgSectionsSelector(ownProps.match.params.org)(state)
 });
 
 module.exports = connect(mapStateToProps)(Org);

frontend/src/containers/org/people.js

@@ -35,11 +35,11 @@ const People = (props) => {
 };
 
 const mapStateToProps = (state, {
-  params = {}
+  match = {}
 }) => ({
-  people: peopleByOrgIdSelector(params.org)(state),
+  people: peopleByOrgIdSelector(match.params.org)(state),
   UI: orgUISelector(state),
-  parentIndex: orgIndexSelector(params.org)(state),
+  parentIndex: orgIndexSelector(match.params.org)(state),
   platformMembers: membersSelector(state)
 });
 

frontend/src/containers/org/projects.js

@@ -6,7 +6,8 @@ const Projects = require('@containers/projects');
 const Project = require('@containers/project');
 
 const {
-  Match
+  Switch,
+  Route
 } = ReactRouter;
 
 module.exports = () => {
@@ -17,16 +18,16 @@ module.exports = () => {
   );
 
   return (
-    <div>
-      <Match
+    <Switch>
+      <Route
         component={list}
-        exactly
-        pattern='/:org/projects'
+        exact
+        path='/:org/projects'
       />
-      <Match
+      <Route
         component={Project}
-        pattern='/:org/projects/:projectId/:section?'
+        path='/:org/projects/:projectId/:section?'
       />
-    </div>
+    </Switch>
   );
 };

frontend/src/containers/org/section.js

@@ -43,8 +43,8 @@ OrgSection.propTypes = {
 };
 
 const mapStateToProps = (state, ownProps) => ({
-  org: orgByIdSelector(ownProps.params.org)(state),
-  sections: orgSectionsSelector(ownProps.params.org)(state)
+  org: orgByIdSelector(ownProps.match.params.org)(state),
+  sections: orgSectionsSelector(ownProps.match.params.org)(state)
 });
 
 module.exports = connect(

frontend/src/containers/project/index.js

@@ -19,8 +19,8 @@ const {
 } = ReactRedux;
 
 const {
-  Match,
-  Miss
+  Switch,
+  Route
 } = ReactRouter;
 
 const {
@@ -35,22 +35,22 @@ const Project = ({
   sections = []
 }) => {
   const navMatches = sections.map((name) => (
-    <Match
+    <Route
       component={SectionComponents[name]}
       key={name}
-      pattern={`/:org/projects/:projectId/${name}`}
+      path={`/:org/projects/:projectId/${name}`}
     />
   ));
 
   const missMatch = !sections.length ? null : (
-    <Miss component={Redirect(`/${org.id}/projects/${project.id}/services`)} />
+    <Route component={Redirect(`/${org.id}/projects/${project.id}/services`)} />
   );
 
   return (
-    <div>
+    <Switch>
       {navMatches}
       {missMatch}
-    </div>
+    </Switch>
   );
 };
 
@@ -61,10 +61,10 @@ Project.propTypes = {
 };
 
 const mapStateToProps = (state, {
-  params = {}
+  match = {}
 }) => ({
-  org: orgByIdSelector(params.org)(state),
-  project: projectByIdSelector(params.projectId)(state),
+  org: orgByIdSelector(match.params.org)(state),
+  project: projectByIdSelector(match.params.projectId)(state),
   sections: projectSectionsSelector(state)
 });
 

frontend/src/containers/project/instances.js

@@ -47,9 +47,9 @@ Instances.propTypes = {
 };
 
 const mapStateToProps = (state, {
-  params = {}
+  match = {}
 }) => ({
-  instances: instancesByProjectIdSelector(params.projectId)(state)
+  instances: instancesByProjectIdSelector(match.params.projectId)(state)
 });
 
 const mapDispatchToProps = (dispatch) => ({

frontend/src/containers/project/section.js

@@ -57,10 +57,10 @@ ProjectSection.propTypes = {
 };
 
 const mapStateToProps = (state, {
-  params = {}
+  match = {}
 }) => ({
-  org: orgByIdSelector(params.org)(state),
-  project: projectByIdSelector(params.projectId)(state),
+  org: orgByIdSelector(match.params.org)(state),
+  project: projectByIdSelector(match.params.projectId)(state),
   sections: projectSectionsSelector(state)
 });
 

frontend/src/containers/project/services.js

@@ -6,7 +6,8 @@ const Services = require('@containers/services');
 const Service = require('@containers/service');
 
 const {
-  Match
+  Switch,
+  Route
 } = ReactRouter;
 
 module.exports = () => {
@@ -17,16 +18,16 @@ module.exports = () => {
   );
 
   return (
-    <div>
-      <Match
+    <Switch>
+      <Route
         component={list}
-        exactly
-        pattern='/:org/projects/:projectId/services'
+        exact
+        path='/:org/projects/:projectId/services'
       />
-      <Match
+      <Route
         component={Service}
-        pattern='/:org/projects/:projectId/services/:serviceId/:section?'
+        path='/:org/projects/:projectId/services/:serviceId/:section?'
       />
-    </div>
+    </Switch>
   );
 };

frontend/src/containers/projects/index.js

@@ -24,7 +24,7 @@ const {
 } = selectors;
 
 const {
-  Link
+  NavLink
 } = ReactRouter;
 
 const Projects = (props) => {
@@ -40,9 +40,12 @@ const Projects = (props) => {
 
   const _projects = projects.map((project) => (
     <li key={project.id}>
-      <Link activeClassName='active' to={`/${org.id}/projects/${project.id}`}>
+      <NavLink
+        activeClassName='active'
+        to={`/${org.id}/projects/${project.id}`}
+      >
         {project.name}
-      </Link>
+      </NavLink>
     </li>
   ));
 
@@ -75,10 +78,10 @@ Projects.propTypes = {
 };
 
 const mapStateToProps = (state, {
-  params = {}
+  match = {}
 }) => ({
-  org: orgByIdSelector(params.org)(state),
-  projects: projectsByOrgIdSelector(params.org)(state),
+  org: orgByIdSelector(match.params.org)(state),
+  projects: projectsByOrgIdSelector(match.params.org)(state),
   router: state.app.router
 });
 

frontend/src/containers/service/index.js

@@ -23,8 +23,8 @@ const {
 } = ReactRedux;
 
 const {
-  Match,
-  Miss
+  Switch,
+  Route
 } = ReactRouter;
 
 const {
@@ -78,22 +78,24 @@ const Service = ({
   }];
 
   const navMatches = sections.map((name) => (
-    <Match
+    <Route
       component={SectionComponents[name]}
       key={name}
-      pattern={`/:org/projects/:projectId/services/:serviceId/${name}`}
+      path={`/:org/projects/:projectId/services/:serviceId/${name}`}
     />
   ));
 
 
   const missMatch = !sections.length ? null : (
-    <Miss component={Redirect(redirectHref)} />
+    <Route component={Redirect(redirectHref)} />
   );
 
   return (
     <Section links={navLinks} name={nameLinks}>
-      {navMatches}
-      {missMatch}
+      <Switch>
+        {navMatches}
+        {missMatch}
+      </Switch>
     </Section>
   );
 };
@@ -106,12 +108,12 @@ Service.propTypes = {
 };
 
 const mapStateToProps = (state, {
-  params = {}
+  match = {}
 }) => ({
-  org: orgByIdSelector(params.org)(state),
-  project: projectByIdSelector(params.projectId)(state),
+  org: orgByIdSelector(match.params.org)(state),
+  project: projectByIdSelector(match.params.projectId)(state),
   sections: serviceSectionsSelector(state),
-  service: serviceByIdSelector(params.serviceId)(state)
+  service: serviceByIdSelector(match.params.serviceId)(state)
 });
 
 module.exports = connect(

frontend/src/containers/service/instances.js

@@ -46,9 +46,9 @@ Instances.propTypes = {
 };
 
 const mapStateToProps = (state, {
-  params = {}
+  match = {}
 }) => ({
-  instances: instancesByServiceIdSelector(params.serviceId)(state)
+  instances: instancesByServiceIdSelector(match.params.serviceId)(state)
 });
 
 const mapDispatchToProps = (dispatch) => ({

frontend/src/containers/service/metrics.js

@@ -20,11 +20,11 @@ const {
 } = actions;
 
 const mapStateToProps = (state, {
-  params = {}
+  match = {}
 }) => ({
-  datasets: metricsByServiceIdSelector(params.serviceId)(state),
+  datasets: metricsByServiceIdSelector(match.params.serviceId)(state),
   metricTypes: metricTypesSelector(state),
-  service: serviceByIdSelector(params.serviceId)(state)
+  service: serviceByIdSelector(match.params.serviceId)(state)
 });
 
 const mapDispatchToProps = (dispatch) => ({

frontend/src/containers/services/index.js

@@ -53,11 +53,11 @@ Services.propTypes = {
 };
 
 const mapStateToProps = (state, {
-  params = {}
+  match = {}
 }) => ({
-  org: orgByIdSelector(params.org)(state),
-  project: projectByIdSelector(params.projectId)(state),
-  services: servicesByProjectIdSelector(params.projectId)(state)
+  org: orgByIdSelector(match.params.org)(state),
+  project: projectByIdSelector(match.params.projectId)(state),
+  services: servicesByProjectIdSelector(match.params.projectId)(state)
 });
 
 module.exports = connect(

frontend/src/root.js

@@ -31,7 +31,7 @@ module.exports = () => {
       <Provider store={store}>
         <IntlProvider>
           <BrowserRouter>
-            {App}
+            <App />
           </BrowserRouter>
         </IntlProvider>
       </Provider>

frontend/src/state/reducers/index.js

@@ -8,6 +8,7 @@ module.exports = () => {
   return combineReducers({
     account: require('@state/reducers/account'),
     app: require('@state/reducers/app'),
+    datacenters: (state = {}) => state,
     form: require('redux-form').reducer,
     instances: require('@state/reducers/instances'),
     intl: require('@state/reducers/intl'),