128 lines
2.5 KiB
JavaScript
128 lines
2.5 KiB
JavaScript
const paramCase = require('param-case');
|
|
const React = require('react');
|
|
const ReactIntl = require('react-intl');
|
|
const ReactRedux = require('react-redux');
|
|
const ReactRouter = require('react-router');
|
|
const Styled = require('styled-components');
|
|
|
|
const Container = require('@ui/components/container');
|
|
const Dashboard = require('@containers/dashboard');
|
|
const fns = require('@ui/shared/functions');
|
|
const Org = require('@containers/org');
|
|
|
|
const {
|
|
FormattedMessage
|
|
} = ReactIntl;
|
|
|
|
const {
|
|
connect
|
|
} = ReactRedux;
|
|
|
|
const {
|
|
Link,
|
|
Match
|
|
} = ReactRouter;
|
|
|
|
const {
|
|
default: styled
|
|
} = Styled;
|
|
|
|
const {
|
|
remcalc
|
|
} = fns;
|
|
|
|
const StyledNav = styled.div`
|
|
background-color: #f2f2f2;
|
|
`;
|
|
|
|
const StyledUl = styled.ul`
|
|
list-style-type: none;
|
|
`;
|
|
|
|
const StyledLi = styled.li`
|
|
display: inline-block;
|
|
margin-right: ${remcalc(10)};
|
|
padding-top: ${remcalc(10)};
|
|
padding-bottom: ${remcalc(10)};
|
|
|
|
& a.active {
|
|
cursor: default;
|
|
color: #373A3C;
|
|
text-decoration: none;
|
|
}
|
|
`;
|
|
|
|
const Home = ({
|
|
orgs = [],
|
|
pathname = '/'
|
|
}) => {
|
|
const parent = pathname.replace(/\/$/, '');
|
|
const links = orgs.map((org) => `${parent}/${paramCase(org.name)}`);
|
|
|
|
const isDashboardActive = (location) => {
|
|
return !links.some((link) => location.pathname.indexOf(link) >= 0);
|
|
};
|
|
|
|
const navLinks = orgs.map(({
|
|
name
|
|
}) => {
|
|
const to = `${parent}/${paramCase(name)}`;
|
|
|
|
return (
|
|
<StyledLi key={to}>
|
|
<Link
|
|
activeClassName='active'
|
|
to={to}
|
|
>
|
|
{name}
|
|
</Link>
|
|
</StyledLi>
|
|
);
|
|
});
|
|
|
|
return (
|
|
<div>
|
|
<StyledNav>
|
|
<Container>
|
|
<StyledUl>
|
|
<StyledLi key={pathname}>
|
|
<Link
|
|
activeClassName='active'
|
|
isActive={isDashboardActive}
|
|
to={pathname}
|
|
>
|
|
<FormattedMessage id='your-dashboard' />
|
|
</Link>
|
|
</StyledLi>
|
|
{navLinks}
|
|
</StyledUl>
|
|
</Container>
|
|
</StyledNav>
|
|
<Container>
|
|
<Match
|
|
exactly
|
|
pattern={parent}
|
|
render={Dashboard}
|
|
/>
|
|
<Match
|
|
component={Org}
|
|
pattern={`${parent}/:org`}
|
|
/>
|
|
</Container>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
Home.propTypes = {
|
|
orgs: React.PropTypes.arrayOf(React.PropTypes.shape({
|
|
name: React.PropTypes.string
|
|
})),
|
|
pathname: React.PropTypes.string
|
|
};
|
|
|
|
const mapStateToProps = (state) => ({
|
|
orgs: state.session.data.orgs
|
|
});
|
|
|
|
module.exports = connect(mapStateToProps)(Home);
|