fix react-router breaking changes

This commit is contained in:
Sérgio Ramos 2017-02-06 18:27:10 +00:00
parent 0c5276f108
commit 809729d981
23 changed files with 145 additions and 133 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -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(

View File

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

View File

@ -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) => ({

View File

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

View File

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

View File

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

View File

@ -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(

View File

@ -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) => ({

View File

@ -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) => ({

View File

@ -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(

View File

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

View File

@ -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'),