scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-23 15:47:53 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

split account nav into its own component

Browse source
This commit is contained in:
Ben Wheeler 2018-08-12 13:09:29 -04:00
parent d1a1af1447
commit 796ad7b152
2 changed files with 119 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

101
src/components/navigation/www/accountnav.jsx Normal file
View file

@ -0,0 +1,101 @@
const classNames = require('classnames');
const FormattedMessage = require('react-intl').FormattedMessage;
const injectIntl = require('react-intl').injectIntl;
const PropTypes = require('prop-types');
const React = require('react');
const Avatar = require('../../avatar/avatar.jsx');
const Dropdown = require('../../dropdown/dropdown.jsx');
require('./navigation.scss');
const AccountNav = ({
classroomId,
isEducator,
isOpen,
isStudent,
profileUrl,
thumbnailUrl,
username,
onClick,
onClickLogout,
onClose
}) => (
<React.Fragment>
<a
className={classNames({
'user-info': true,
'open': isOpen
})}
href="#"
onClick={onClick}
>
<Avatar
alt=""
src={thumbnailUrl}
/>
<span className="profile-name">
{username}
</span>
</a>
<Dropdown
as="ul"
className={process.env.SCRATCH_ENV}
isOpen={isOpen}
onRequestClose={onClose}
>
<li>
<a href={profileUrl}>
<FormattedMessage id="general.profile" />
</a>
</li>
<li>
<a href="/mystuff/">
<FormattedMessage id="general.myStuff" />
</a>
</li>
{isEducator ? [
<li key="my-classes-li">
<a href="/educators/classes/">
<FormattedMessage id="general.myClasses" />
</a>
</li>
] : []}
{isStudent ? [
<li key="my-class-li">
<a href={`/classes/${classroomId}/`}>
<FormattedMessage id="general.myClass" />
</a>
</li>
] : []}
<li>
<a href="/accounts/settings/">
<FormattedMessage id="general.accountSettings" />
</a>
</li>
<li className="divider">
<a
href="#"
onClick={onClickLogout}
>
<FormattedMessage id="navigation.signOut" />
</a>
</li>
</Dropdown>
</React.Fragment>
);
AccountNav.propTypes = {
classroomId: PropTypes.string,
isEducator: PropTypes.bool,
isOpen: PropTypes.bool,
isStudent: PropTypes.bool,
onClick: PropTypes.func,
onClickLogout: PropTypes.func,
onClose: PropTypes.func,
profileUrl: PropTypes.string,
thumbnailUrl: PropTypes.string,
username: PropTypes.string
};
module.exports = injectIntl(AccountNav);

79
src/components/navigation/www/navigation.jsx
View file

@ -11,7 +11,6 @@ const messageCountActions = require('../../../redux/message-count.js');
const sessionActions = require('../../../redux/session.js'); const sessionActions = require('../../../redux/session.js');
const api = require('../../../lib/api'); const api = require('../../../lib/api');
const Avatar = require('../../avatar/avatar.jsx');
const Button = require('../../forms/button.jsx'); const Button = require('../../forms/button.jsx');
const Dropdown = require('../../dropdown/dropdown.jsx'); const Dropdown = require('../../dropdown/dropdown.jsx');
const Form = require('../../forms/form.jsx'); const Form = require('../../forms/form.jsx');
@ -21,6 +20,7 @@ const Login = require('../../login/login.jsx');
const Modal = require('../../modal/base/modal.jsx'); const Modal = require('../../modal/base/modal.jsx');
const NavigationBox = require('../base/navigation.jsx'); const NavigationBox = require('../base/navigation.jsx');
const Registration = require('../../registration/registration.jsx'); const Registration = require('../../registration/registration.jsx');
const AccountNav = require('./accountnav.jsx');
require('./navigation.scss'); require('./navigation.scss');
@ -268,66 +268,18 @@ class Navigation extends React.Component {
className="link right account-nav" className="link right account-nav"
key="account-nav" key="account-nav"
> >
<a <AccountNav
className={classNames({ classroomId={this.props.session.session.user.classroomId}
'user-info': true, isEducator={this.props.permissions.educator}
'open': this.state.accountNavOpen
})}
href="#"
onClick={this.handleAccountNavClick}
>
<Avatar
alt=""
src={this.props.session.session.user.thumbnailUrl}
/>
<span className="profile-name">
{this.props.session.session.user.username}
</span>
</a>
<Dropdown
as="ul"
className={process.env.SCRATCH_ENV}
isOpen={this.state.accountNavOpen} isOpen={this.state.accountNavOpen}
onRequestClose={this.handleCloseAccountNav} isStudent={this.props.permissions.student}
> profileUrl={this.getProfileUrl()}
<li> thumbnailUrl={this.props.session.session.user.thumbnailUrl}
<a href={this.getProfileUrl()}> username={this.props.session.session.user.username}
<FormattedMessage id="general.profile" /> onClick={this.handleAccountNavClick}
</a> onClickLogout={this.handleLogOut}
</li> onClose={this.handleCloseAccountNav}
<li> />
<a href="/mystuff/">
<FormattedMessage id="general.myStuff" />
</a>
</li>
{this.props.permissions.educator ? [
<li key="my-classes-li">
<a href="/educators/classes/">
<FormattedMessage id="general.myClasses" />
</a>
</li>
] : []}
{this.props.permissions.student ? [
<li key="my-class-li">
<a href={`/classes/${this.props.session.session.user.classroomId}/`}>
<FormattedMessage id="general.myClass" />
</a>
</li>
] : []}
<li>
<a href="/accounts/settings/">
<FormattedMessage id="general.accountSettings" />
</a>
</li>
<li className="divider">
<a
href="#"
onClick={this.handleLogOut}
>
<FormattedMessage id="navigation.signOut" />
</a>
</li>
</Dropdown>
</li> </li>
] : [ ] : [
<li <li
@ -437,6 +389,11 @@ const mapStateToProps = state => ({
searchTerm: state.navigation searchTerm: state.navigation
}); });
const ConnectedNavigation = connect(mapStateToProps)(Navigation); const mapDispatchToProps = () => ({});
const ConnectedNavigation = connect(
mapStateToProps,
mapDispatchToProps
)(Navigation);
module.exports = injectIntl(ConnectedNavigation); module.exports = injectIntl(ConnectedNavigation);