148 lines
3.3 KiB
JavaScript
148 lines
3.3 KiB
JavaScript
import React, { PureComponent } from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import { connect } from 'react-redux';
|
|
import { createSelector } from 'reselect';
|
|
import { Button } from 'react-bootstrap';
|
|
|
|
import { ButtonSpacer } from '../../../../helperComponents';
|
|
import {
|
|
FrontEndForm,
|
|
BackEndForm
|
|
} from './Forms.jsx';
|
|
|
|
import { submittingSelector } from './redux';
|
|
|
|
import {
|
|
openChallengeModal,
|
|
|
|
openHelpModal,
|
|
chatRoomSelector,
|
|
guideURLSelector
|
|
} from '../../redux';
|
|
|
|
import {
|
|
signInLoadingSelector,
|
|
challengeSelector
|
|
} from '../../../../redux';
|
|
import {
|
|
simpleProject,
|
|
frontEndProject
|
|
} from '../../../../utils/challengeTypes';
|
|
|
|
const propTypes = {
|
|
guideUrl: PropTypes.string,
|
|
helpChatRoom: PropTypes.string.isRequired,
|
|
isFrontEnd: PropTypes.bool,
|
|
isSignedIn: PropTypes.bool,
|
|
isSimple: PropTypes.bool,
|
|
isSubmitting: PropTypes.bool,
|
|
openChallengeModal: PropTypes.func.isRequired,
|
|
openHelpModal: PropTypes.func.isRequired
|
|
};
|
|
const mapDispatchToProps = {
|
|
openChallengeModal,
|
|
openHelpModal
|
|
};
|
|
const mapStateToProps = createSelector(
|
|
challengeSelector,
|
|
signInLoadingSelector,
|
|
submittingSelector,
|
|
chatRoomSelector,
|
|
guideURLSelector,
|
|
(
|
|
{ challengeType = simpleProject },
|
|
showLoading,
|
|
isSubmitting,
|
|
helpChatRoom,
|
|
guideUrl
|
|
) => ({
|
|
guideUrl,
|
|
helpChatRoom,
|
|
isSignedIn: !showLoading,
|
|
isSubmitting,
|
|
isSimple: challengeType === simpleProject,
|
|
isFrontEnd: challengeType === frontEndProject
|
|
})
|
|
);
|
|
|
|
export class ToolPanel extends PureComponent {
|
|
renderSubmitButton(isSignedIn, openChallengeModal) {
|
|
const buttonCopy = isSignedIn ?
|
|
'Submit and go to my next challenge' :
|
|
"I've completed this challenge";
|
|
return (
|
|
<Button
|
|
block={ true }
|
|
bsStyle='primary'
|
|
className='btn-big'
|
|
onClick={ openChallengeModal }
|
|
>
|
|
{ buttonCopy } (ctrl + enter)
|
|
</Button>
|
|
);
|
|
}
|
|
|
|
render() {
|
|
const {
|
|
guideUrl,
|
|
helpChatRoom,
|
|
isFrontEnd,
|
|
isSimple,
|
|
isSignedIn,
|
|
isSubmitting,
|
|
openHelpModal,
|
|
openChallengeModal
|
|
} = this.props;
|
|
|
|
const FormElement = isFrontEnd ? FrontEndForm : BackEndForm;
|
|
return (
|
|
<div>
|
|
{
|
|
isSimple ?
|
|
this.renderSubmitButton(isSignedIn, openChallengeModal) :
|
|
<FormElement isSubmitting={ isSubmitting }/>
|
|
}
|
|
<ButtonSpacer />
|
|
<Button
|
|
block={ true }
|
|
bsStyle='primary'
|
|
className='btn-primary-ghost btn-big'
|
|
componentClass='a'
|
|
href={ `https://gitter.im/freecodecamp/${helpChatRoom}` }
|
|
target='_blank'
|
|
>
|
|
Help
|
|
</Button>
|
|
<ButtonSpacer />
|
|
<Button
|
|
block={ true }
|
|
bsStyle='primary'
|
|
className='btn-primary-ghost btn-big'
|
|
href={ guideUrl }
|
|
target='_blank'
|
|
>
|
|
Get a hint
|
|
</Button>
|
|
<ButtonSpacer />
|
|
<Button
|
|
block={ true }
|
|
bsStyle='primary'
|
|
className='btn-primary-ghost btn-big'
|
|
onClick={ openHelpModal }
|
|
>
|
|
Ask for help on the forum
|
|
</Button>
|
|
<ButtonSpacer />
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
ToolPanel.displayName = 'ProjectToolPanel';
|
|
ToolPanel.propTypes = propTypes;
|
|
|
|
export default connect(
|
|
mapStateToProps,
|
|
mapDispatchToProps
|
|
)(ToolPanel);
|