fix(client): add relevant placeholder to link submission (#38411)

client/src/templates/Challenges/projects/SolutionForm.js

@@ -5,13 +5,14 @@ import { Form } from '../../../components/formHelpers';
 
 const propTypes = {
   isFrontEnd: PropTypes.bool,
+  isProject: PropTypes.bool,
   isSubmitting: PropTypes.bool,
   onSubmit: PropTypes.func.isRequired,
-  updateProjectForm: PropTypes.func.isRequired
+  updateSolutionForm: PropTypes.func.isRequired
 };
 
-const frontEndFields = ['solution'];
+const challengeFields = ['solution'];
-const backEndFields = ['solution', 'githubLink'];
+const backEndProjectFields = ['solution', 'githubLink'];
 
 const options = {
   types: {
@@ -21,38 +22,39 @@ const options = {
   required: ['solution']
 };
 
-export class ProjectForm extends Component {
+export class SolutionForm extends Component {
   constructor(props) {
     super(props);
     this.handleSubmit = this.handleSubmit.bind(this);
   }
   componentDidMount() {
-    this.props.updateProjectForm({});
+    this.props.updateSolutionForm({});
   }
   handleSubmit(values) {
-    this.props.updateProjectForm(values);
+    this.props.updateSolutionForm(values);
     this.props.onSubmit();
   }
   render() {
-    const { isSubmitting, isFrontEnd } = this.props;
+    const { isSubmitting, isFrontEnd, isProject } = this.props;
     const buttonCopy = isSubmitting
       ? 'Submit and go to my next challenge'
       : "I've completed this challenge";
     return (
       <Form
         buttonText={`${buttonCopy}`}
-        formFields={isFrontEnd ? frontEndFields : backEndFields}
+        formFields={
+          isProject && !isFrontEnd ? backEndProjectFields : challengeFields
+        }
         id={isFrontEnd ? 'front-end-form' : 'back-end-form'}
         options={{
           ...options,
           placeholders: {
             solution:
-              'Link to solution, ex: ' +
+              'Link, ex: ' +
               (isFrontEnd
                 ? 'https://codepen.io/camperbot/full/oNvPqqo'
                 : 'https://camperbot.glitch.me'),
-            githubLink:
+            githubLink: 'ex: https://github.com/camperbot/hello'
-              'Link to GitHub repo, ex: https://github.com/camperbot/hello'
           }
         }}
         submit={this.handleSubmit}
@@ -61,6 +63,6 @@ export class ProjectForm extends Component {
   }
 }
 
-ProjectForm.propTypes = propTypes;
+SolutionForm.propTypes = propTypes;
 
-export default ProjectForm;
+export default SolutionForm;

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

@@ -15,8 +15,7 @@ import {
   initTests,
   updateBackendFormValues,
   updateChallengeMeta,
-  updateProjectFormValues,
+  updateSolutionFormValues
-  backendNS
 } from '../../redux';
 import { getGuideUrl } from '../../utils';
 
@@ -28,16 +27,14 @@ import Output from '../../components/Output';
 import CompletionModal from '../../components/CompletionModal';
 import HelpModal from '../../components/HelpModal';
 import ProjectToolPanel from '../Tool-Panel';
-import ProjectForm from '../ProjectForm';
+import SolutionForm from '../SolutionForm';
-import { Form } from '../../../../components/formHelpers';
 import Spacer from '../../../../components/helpers/Spacer';
 import { ChallengeNode } from '../../../../redux/propTypes';
 import { isSignedInSelector } from '../../../../redux';
 import Hotkeys from '../../components/Hotkeys';
 
-import { backend } from '../../../../../utils/challengeTypes';
-
 import '../../components/test-frame.css';
+import { backEndProject } from '../../../../../utils/challengeTypes';
 
 const propTypes = {
   challengeMounted: PropTypes.func.isRequired,
@@ -59,7 +56,7 @@ const propTypes = {
   title: PropTypes.string,
   updateBackendFormValues: PropTypes.func.isRequired,
   updateChallengeMeta: PropTypes.func.isRequired,
-  updateProjectFormValues: PropTypes.func.isRequired
+  updateSolutionFormValues: PropTypes.func.isRequired
 };
 
 const mapStateToProps = createSelector(
@@ -80,18 +77,7 @@ const mapDispatchToActions = {
   initTests,
   updateBackendFormValues,
   updateChallengeMeta,
-  updateProjectFormValues
+  updateSolutionFormValues
-};
-
-const formFields = ['solution'];
-const options = {
-  required: ['solution'],
-  types: {
-    solution: 'url'
-  },
-  placeholders: {
-    solution: 'Link to solution, ex: https://codepen.io/camperbot/full/oNvPqqo'
-  }
 };
 
 export class BackEnd extends Component {
@@ -99,7 +85,6 @@ export class BackEnd extends Component {
     super(props);
     this.state = {};
     this.updateDimensions = this.updateDimensions.bind(this);
-    this.handleSubmit = this.handleSubmit.bind(this);
   }
 
   componentDidMount() {
@@ -152,12 +137,6 @@ export class BackEnd extends Component {
     challengeMounted(challengeMeta.id);
   }
 
-  handleSubmit(values) {
-    const { updateBackendFormValues, executeChallenge } = this.props;
-    updateBackendFormValues(values);
-    executeChallenge();
-  }
-
   render() {
     const {
       data: {
@@ -175,15 +154,13 @@ export class BackEnd extends Component {
         challengeMeta: { introPath, nextChallengePath, prevChallengePath }
       },
       tests,
-      isSignedIn,
       executeChallenge,
-      updateProjectFormValues
+      updateSolutionFormValues,
+      updateBackendFormValues
     } = this.props;
 
-    const buttonCopy = isSignedIn
-      ? 'Submit and go to my next challenge'
-      : "I've completed this challenge";
     const blockNameTitle = `${blockName} - ${title}`;
+    const isBackEndProject = challengeType === backEndProject;
 
     return (
       <Hotkeys
@@ -203,21 +180,16 @@ export class BackEnd extends Component {
                   description={description}
                   instructions={instructions}
                 />
-                {challengeType === backend ? (
+                <SolutionForm
-                  <Form
-                    buttonText={`${buttonCopy}`}
-                    formFields={formFields}
-                    id={backendNS}
-                    options={options}
-                    submit={this.handleSubmit}
-                  />
-                ) : (
-                  <ProjectForm
                   isFrontEnd={false}
+                  isProject={isBackEndProject}
                   onSubmit={executeChallenge}
-                    updateProjectForm={updateProjectFormValues}
+                  updateSolutionForm={values =>
+                    isBackEndProject
+                      ? updateSolutionFormValues(values)
+                      : updateBackendFormValues(values)
+                  }
                 />
-                )}
                 <ProjectToolPanel
                   guideUrl={getGuideUrl({ forumTopicId, title })}
                 />

client/src/templates/Challenges/projects/frontend/Show.js

@@ -11,7 +11,7 @@ import {
   challengeMounted,
   updateChallengeMeta,
   openModal,
-  updateProjectFormValues
+  updateSolutionFormValues
 } from '../../redux';
 import { frontEndProject } from '../../../../../utils/challengeTypes';
 import { getGuideUrl } from '../../utils';
@@ -20,7 +20,7 @@ import LearnLayout from '../../../../components/layouts/Learn';
 import ChallengeTitle from '../../components/Challenge-Title';
 import ChallengeDescription from '../../components/Challenge-Description';
 import Spacer from '../../../../components/helpers/Spacer';
-import ProjectForm from '../ProjectForm';
+import SolutionForm from '../SolutionForm';
 import ProjectToolPanel from '../Tool-Panel';
 import CompletionModal from '../../components/CompletionModal';
 import HelpModal from '../../components/HelpModal';
@@ -32,7 +32,7 @@ const mapDispatchToProps = dispatch =>
     {
       updateChallengeMeta,
       challengeMounted,
-      updateProjectFormValues,
+      updateSolutionFormValues,
       openCompletionModal: () => openModal('completion')
     },
     dispatch
@@ -48,7 +48,7 @@ const propTypes = {
     challengeMeta: PropTypes.object
   }),
   updateChallengeMeta: PropTypes.func.isRequired,
-  updateProjectFormValues: PropTypes.func.isRequired
+  updateSolutionFormValues: PropTypes.func.isRequired
 };
 
 export class Project extends Component {
@@ -105,11 +105,12 @@ export class Project extends Component {
       pageContext: {
         challengeMeta: { introPath, nextChallengePath, prevChallengePath }
       },
-      updateProjectFormValues
+      updateSolutionFormValues
     } = this.props;
-    const isFrontEnd = challengeType === frontEndProject;
 
+    const isFrontEndProject = challengeType === frontEndProject;
     const blockNameTitle = `${blockName} - ${title}`;
+
     return (
       <Hotkeys
         innerRef={c => (this._container = c)}
@@ -125,10 +126,11 @@ export class Project extends Component {
                 <Spacer />
                 <ChallengeTitle>{blockNameTitle}</ChallengeTitle>
                 <ChallengeDescription description={description} />
-                <ProjectForm
+                <SolutionForm
-                  isFrontEnd={isFrontEnd}
+                  isFrontEnd={true}
+                  isProject={isFrontEndProject}
                   onSubmit={openCompletionModal}
-                  updateProjectForm={updateProjectFormValues}
+                  updateSolutionForm={updateSolutionFormValues}
                 />
                 <ProjectToolPanel
                   guideUrl={getGuideUrl({ forumTopicId, title })}

client/src/templates/Challenges/redux/completion-epic.js

@@ -18,7 +18,7 @@ import {
   challengeTestsSelector,
   closeModal,
   challengeFilesSelector,
-  updateProjectFormValues
+  updateSolutionFormValues
 } from './';
 import {
   userSelector,
@@ -92,7 +92,7 @@ function submitProject(type, state) {
     payload: challengeInfo
   };
   return postChallenge(update, username).pipe(
-    concat(of(updateProjectFormValues({})))
+    concat(of(updateSolutionFormValues({})))
   );
 }
 

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

@@ -57,7 +57,7 @@ export const types = createTypes(
     'updateChallengeMeta',
     'updateFile',
     'updateJSEnabled',
-    'updateProjectFormValues',
+    'updateSolutionFormValues',
     'updateSuccessMessage',
     'updateTests',
     'updateLogs',
@@ -136,8 +136,8 @@ export const updateFile = createAction(types.updateFile);
 export const updateConsole = createAction(types.updateConsole);
 export const updateLogs = createAction(types.updateLogs);
 export const updateJSEnabled = createAction(types.updateJSEnabled);
-export const updateProjectFormValues = createAction(
+export const updateSolutionFormValues = createAction(
-  types.updateProjectFormValues
+  types.updateSolutionFormValues
 );
 export const updateSuccessMessage = createAction(types.updateSuccessMessage);
 
@@ -330,7 +330,7 @@ export const reducer = handleActions(
       ...state,
       backendFormValues: payload
     }),
-    [types.updateProjectFormValues]: (state, { payload }) => ({
+    [types.updateSolutionFormValues]: (state, { payload }) => ({
       ...state,
       projectFormValues: payload
     }),