Spearhead/joyent-portal
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

fix react-router breaking changes

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/components/navigation/org.js
View File

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

6
frontend/src/components/section/index.js
View File

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

35
frontend/src/containers/app.js
View File

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

13
frontend/src/containers/home/index.js
View File

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

4
frontend/src/containers/new-project/billing.js
View File

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

44
frontend/src/containers/new-project/index.js
View File

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

4
frontend/src/containers/new-project/new-billing.js
View File

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

4
frontend/src/containers/new-project/new-project.js
View File

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

28
frontend/src/containers/org/index.js
View File

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

6
frontend/src/containers/org/people.js
View File

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

17
frontend/src/containers/org/projects.js
View File

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

4
frontend/src/containers/org/section.js
View File

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

20
frontend/src/containers/project/index.js
View File

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

4
frontend/src/containers/project/instances.js
View File

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

6
frontend/src/containers/project/section.js
View File

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

17
frontend/src/containers/project/services.js
View File

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

15
frontend/src/containers/projects/index.js
View File

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

24
frontend/src/containers/service/index.js
View File

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

4
frontend/src/containers/service/instances.js
View File

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

6
frontend/src/containers/service/metrics.js
View File

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

8
frontend/src/containers/services/index.js
View File

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

2
frontend/src/root.js
View File

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

1
frontend/src/state/reducers/index.js
View File

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