Fix/backend completion (#16699)

* chore(props): Sort props

* fix(backend): Fix backend completion flow

* fix(backend): Create and use backend form values selector

common/app/routes/Challenges/redux/completion-epic.js

@@ -2,6 +2,7 @@ import { Observable } from 'rx';
 import { ofType } from 'redux-epic';
 
 import {
+  backendFormValuesSelector,
   challengeMetaSelector,
   moveToNextChallenge,
   submitChallengeComplete,
@@ -97,7 +98,7 @@ function submitSimpleChallenge(type, state) {
   );
 }
 
-function submitBackendChallenge(type, state, { solution }) {
+function submitBackendChallenge(type, state) {
   const tests = testsSelector(state);
   if (
     type === types.checkChallenge &&
@@ -114,9 +115,13 @@ function submitBackendChallenge(type, state, { solution }) {
       })
     );
     */
+    return Observable.empty();
+  }
+  if (type === types.submitChallenge.toString()) {
     const { id } = challengeSelector(state);
     const { username } = userSelector(state);
     const csrfToken = csrfSelector(state);
+    const { solution } = backendFormValuesSelector(state);
     const challengeInfo = { id, solution };
     return postChallenge(
       '/backend-challenge-completed',

common/app/routes/Challenges/redux/index.js

@@ -9,6 +9,7 @@ import {
 } from 'berkeleys-redux-utils';
 import { createSelector } from 'reselect';
 import noop from 'lodash/noop';
+import { getValues } from 'redux-form';
 
 import modalEpic from './modal-epic';
 import completionEpic from './completion-epic.js';
@@ -202,10 +203,7 @@ export const isCodeLockedSelector = state => getNS(state).isCodeLocked;
 export const isJSEnabledSelector = state => getNS(state).isJSEnabled;
 export const chatRoomSelector = state => getNS(state).helpChatRoom;
 export const challengeModalSelector =
-  state => (
-    getNS(state).isChallengeModalOpen &&
-    challengeSelector(state).type !== 'backend'
-  );
+  state => getNS(state).isChallengeModalOpen;
 
 export const helpModalSelector = state => getNS(state).isHelpOpen;
 export const guideURLSelector = state =>
@@ -253,6 +251,9 @@ export const challengeTypeSelector = state =>
 export const challengeTemplateSelector = state =>
   challengeSelector(state).template || null;
 
+export const backendFormValuesSelector = state =>
+  getValues(state.form.BackEndChallenge);
+
 export default combineReducers(
   handleActions(
     () => ({

common/app/routes/Challenges/utils/build.js

@@ -1,10 +1,13 @@
 import { Observable } from 'rx';
-import { getValues } from 'redux-form';
 import identity from 'lodash/identity';
 
 import { fetchScript } from './fetch-and-cache.js';
 import throwers from '../rechallenge/throwers';
-import { challengeTemplateSelector, challengeRequiredSelector } from '../redux';
+import {
+  backendFormValuesSelector,
+  challengeTemplateSelector,
+  challengeRequiredSelector
+} from '../redux';
 import {
   applyTransformers,
   proxyLoggerTransformer
@@ -53,7 +56,7 @@ export function buildFromFiles(state, shouldProxyConsole) {
 }
 
 export function buildBackendChallenge(state) {
-  const { solution: url } = getValues(state.form.BackEndChallenge);
+  const { solution: url } = backendFormValuesSelector(state);
   return Observable.combineLatest(
     fetchScript(frameRunner),
     fetchScript(jQuery)

common/app/routes/Challenges/views/backend/Back-End.jsx

@@ -102,15 +102,15 @@ export class BackEnd extends PureComponent {
 
   render() {
     const {
-      title,
       description,
-      tests,
+      executeChallenge,
       output,
+      tests,
+      title,
       // provided by redux-form
       fields: { solution },
-      submitting,
       handleSubmit,
-      executeChallenge
+      submitting
     } = this.props;
 
     const buttonCopy = submitting ?