Feature(chat): Add help chat logic

common/app/redux/actions.js

@@ -54,8 +54,9 @@ export const createErrorObservable = error => Observable.just({
 
 // drawers
 export const toggleMapDrawer = createAction(types.toggleMapDrawer);
-export const toggleWikiDrawer = createAction(types.toggleWikiDrawer);
-
-// chat
 export const toggleMainChat = createAction(types.toggleMainChat);
+export const toggleHelpChat = createAction(types.toggleHelpChat);
+export const openHelpChat = createAction(types.openHelpChat);
+export const closeHelpChat = createAction(types.closeHelpChat);
+
 export const toggleNightMode = createAction(types.toggleNightMode);

common/app/redux/reducer.js

@@ -9,7 +9,8 @@ const initialState = {
   csrfToken: '',
   windowHeight: 0,
   navHeight: 0,
-  isMainChatOpen: false
+  isMainChatOpen: false,
+  isHelpChatOpen: false
 };
 
 export default handleActions(
@@ -50,6 +51,18 @@ export default handleActions(
       ...state,
       isMainChatOpen: !state.isMainChatOpen
     }),
+    [types.toggleHelpChat]: state => ({
+      ...state,
+      isHelpChatOpen: !state.isHelpChatOpen
+    }),
+    [types.openHelpChat]: state => ({
+      ...state,
+      isHelpChatOpen: true
+    }),
+    [types.closeHelpChat]: state => ({
+      ...state,
+      isHelpChatOpen: false
+    }),
     [types.delayedRedirect]: (state, { payload }) => ({
       ...state,
       delayedRedirect: payload

common/app/redux/types.js

@@ -29,8 +29,12 @@ export default createTypes([
   'toggleMapDrawer',
   'toggleWikiDrawer',
 
-  // main chat
+  // chat
   'openMainChat',
   'closeMainChat',
-  'toggleMainChat'
+  'toggleMainChat',
+
+  'openHelpChat',
+  'closeHelpChat',
+  'toggleHelpChat'
 ], 'app');

common/app/routes/challenges/components/classic/Side-Panel.jsx

@@ -2,7 +2,6 @@ import React, { PropTypes } from 'react';
 import ReactDom from 'react-dom';
 import { createSelector } from 'reselect';
 import { connect } from 'react-redux';
-
 import PureComponent from 'react-pure-render/component';
 import { Col, Row } from 'react-bootstrap';
 
@@ -12,8 +11,14 @@ import ToolPanel from './Tool-Panel.jsx';
 import { challengeSelector } from '../../redux/selectors';
 import { updateHint, executeChallenge } from '../../redux/actions';
 import { makeToast } from '../../../../toasts/redux/actions';
+import { toggleHelpChat } from '../../../../redux/actions';
 
-const bindableActions = { makeToast, executeChallenge, updateHint };
+const bindableActions = {
+  makeToast,
+  executeChallenge,
+  updateHint,
+  toggleHelpChat
+};
 const mapStateToProps = createSelector(
   challengeSelector,
   state => state.app.windowHeight,
@@ -53,7 +58,8 @@ export class SidePanel extends PureComponent {
     output: PropTypes.string,
     hints: PropTypes.string,
     updateHint: PropTypes.func,
-    makeToast: PropTypes.func
+    makeToast: PropTypes.func,
+    toggleHelpChat: PropTypes.func
   };
 
   renderDescription(description = [ 'Happy Coding!' ], descriptionRegex) {
@@ -92,7 +98,8 @@ export class SidePanel extends PureComponent {
       hint,
       executeChallenge,
       updateHint,
-      makeToast
+      makeToast,
+      toggleHelpChat
     } = this.props;
     const style = {
       overflowX: 'hidden',
@@ -124,6 +131,7 @@ export class SidePanel extends PureComponent {
           executeChallenge={ executeChallenge }
           hint={ hint }
           makeToast={ makeToast }
+          toggleHelpChat={ toggleHelpChat }
           updateHint={ updateHint }
         />
         <Output output={ output }/>

common/app/routes/challenges/components/classic/Tool-Panel.jsx

@@ -13,7 +13,8 @@ export default class ToolPanel extends PureComponent {
   static propTypes = {
     executeChallenge: PropTypes.func,
     updateHint: PropTypes.func,
-    hint: PropTypes.string
+    hint: PropTypes.string,
+    toggleHelpChat: PropTypes.func
   };
 
   makeHint() {
@@ -50,7 +51,11 @@ export default class ToolPanel extends PureComponent {
   }
 
   render() {
-    const { hint, executeChallenge } = this.props;
+    const {
+      hint,
+      executeChallenge,
+      toggleHelpChat
+    } = this.props;
     return (
       <div>
         { this.renderHint(hint, this.makeHint) }
@@ -79,6 +84,7 @@ export default class ToolPanel extends PureComponent {
             bsSize='large'
             bsStyle='primary'
             componentClass='label'
+            onClick={ toggleHelpChat }
             >
             Help
           </Button>

common/app/routes/challenges/components/project/Tool-Panel.jsx

@@ -15,7 +15,12 @@ import {
   simpleProject,
   frontEndProject
 } from '../../../../utils/challengeTypes';
+import { toggleHelpChat } from '../../../../redux/actions';
 
+const bindableActions = {
+  submitChallenge,
+  toggleHelpChat
+};
 const mapStateToProps = createSelector(
   challengeSelector,
   state => state.app.isSignedIn,
@@ -37,7 +42,8 @@ export class ToolPanel extends PureComponent {
     isSignedIn: PropTypes.bool,
     isSimple: PropTypes.bool,
     isFrontEnd: PropTypes.bool,
-    isSubmitting: PropTypes.bool
+    isSubmitting: PropTypes.bool,
+    toggleHelpChat: PropTypes.func
   };
 
   renderSubmitButton(isSignedIn, submitChallenge) {
@@ -62,7 +68,8 @@ export class ToolPanel extends PureComponent {
       isSimple,
       isSignedIn,
       isSubmitting,
-      submitChallenge
+      submitChallenge,
+      toggleHelpChat
     } = this.props;
 
     const FormElement = isFrontEnd ? FrontEndForm : BackEndForm;
@@ -79,6 +86,7 @@ export class ToolPanel extends PureComponent {
             bsStyle='primary'
             className='btn-primary-ghost btn-big'
             componentClass='div'
+            onClick={ toggleHelpChat }
             >
             Help
           </Button>
@@ -97,5 +105,5 @@ export class ToolPanel extends PureComponent {
 
 export default connect(
   mapStateToProps,
-  { submitChallenge }
+  bindableActions
 )(ToolPanel);

common/app/routes/challenges/redux/reducer.js

@@ -42,6 +42,7 @@ const initialUiState = {
 const initialState = {
   id: '',
   challenge: '',
+  helpChatRoom: 'Help',
   // old code storage key
   legacyKey: '',
   files: {},
@@ -68,6 +69,7 @@ const mainReducer = handleActions(
       challenge: challenge.dashedName,
       key: getFileKey(challenge),
       tests: createTests(challenge),
+      helpChatRoom: challenge.helpRoom || 'Help',
       numOfHints: Array.isArray(challenge.hints) ? challenge.hints.length : 0
     }),
     [types.updateTests]: (state, { payload: tests }) => ({