fix(client): Store backend form value on submit

client/src/templates/Challenges/backend/Show.js

@@ -4,6 +4,7 @@ import { Grid, Col, Row } from '@freecodecamp/react-bootstrap';
 import { createSelector } from 'reselect';
 import { reduxForm } from 'redux-form';
 import { graphql } from 'gatsby';
+import normalizeUrl from 'normalize-url';
 
 import {
   executeChallenge,
@@ -11,6 +12,7 @@ import {
   challengeTestsSelector,
   consoleOutputSelector,
   initTests,
+  updateBackendFormValues,
   updateChallengeMeta,
   updateProjectFormValues,
   backendNS
@@ -55,6 +57,7 @@ const propTypes = {
   output: PropTypes.string,
   tests: PropTypes.array,
   title: PropTypes.string,
+  updateBackendFormValues: PropTypes.func.isRequired,
   updateChallengeMeta: PropTypes.func.isRequired,
   updateProjectFormValues: PropTypes.func.isRequired,
   ...reduxFormPropTypes
@@ -79,6 +82,7 @@ const mapDispatchToActions = {
   challengeMounted,
   executeChallenge,
   initTests,
+  updateBackendFormValues,
   updateChallengeMeta,
   updateProjectFormValues
 };
@@ -96,6 +100,7 @@ export class BackEnd extends Component {
     super(props);
     this.state = {};
     this.updateDimensions = this.updateDimensions.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
   }
 
   componentDidMount() {
@@ -151,6 +156,13 @@ export class BackEnd extends Component {
     }
   }
 
+  handleSubmit(values) {
+    const { updateBackendFormValues, executeChallenge } = this.props;
+    values.solution = normalizeUrl(values.solution);
+    updateBackendFormValues(values);
+    executeChallenge();
+  }
+
   render() {
     const {
       data: {
@@ -174,6 +186,7 @@ export class BackEnd extends Component {
       ? 'Submit and go to my next challenge'
       : "I've completed this challenge";
     const blockNameTitle = `${blockName} - ${title}`;
+
     return (
       <LearnLayout>
         <Grid>
@@ -191,7 +204,7 @@ export class BackEnd extends Component {
                   formFields={formFields}
                   id={backendNS}
                   options={options}
-                  submit={executeChallenge}
+                  submit={this.handleSubmit}
                 />
               ) : (
                 <ProjectForm

client/src/templates/Challenges/redux/index.js

@@ -49,6 +49,7 @@ export const types = createTypes(
     'initTests',
     'initConsole',
     'initLogs',
+    'updateBackendFormValues',
     'updateConsole',
     'updateChallengeMeta',
     'updateFile',
@@ -125,6 +126,9 @@ export const updateTests = createAction(types.updateTests);
 
 export const initConsole = createAction(types.initConsole);
 export const initLogs = createAction(types.initLogs);
+export const updateBackendFormValues = createAction(
+  types.updateBackendFormValues
+);
 export const updateChallengeMeta = createAction(types.updateChallengeMeta);
 export const updateFile = createAction(types.updateFile);
 export const updateConsole = createAction(types.updateConsole);
@@ -171,7 +175,8 @@ export const isResetModalOpenSelector = state => state[ns].modal.reset;
 export const isBuildEnabledSelector = state => state[ns].isBuildEnabled;
 export const successMessageSelector = state => state[ns].successMessage;
 
-export const backendFormValuesSelector = state => state.form[backendNS] || {};
+export const backendFormValuesSelector = state =>
+  state[ns].backendFormValues || {};
 export const projectFormValuesSelector = state =>
   state[ns].projectFormValues || {};
 
@@ -187,7 +192,7 @@ export const challengeDataSelector = state => {
       files: challengeFilesSelector(state)
     };
   } else if (challengeType === challengeTypes.backend) {
-    const { solution: { value: url } = {} } = backendFormValuesSelector(state);
+    const { solution: url = {} } = backendFormValuesSelector(state);
     challengeData = {
       ...challengeData,
       url
@@ -306,6 +311,10 @@ export const reducer = handleActions(
       })),
       consoleOut: ''
     }),
+    [types.updateBackendFormValues]: (state, { payload }) => ({
+      ...state,
+      backendFormValues: payload
+    }),
     [types.updateProjectFormValues]: (state, { payload }) => ({
       ...state,
       projectFormValues: payload