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

2020-05-07 17:19:06 +01:00
parent 65416fd351
commit 21ca4e3f67
5 changed files with 50 additions and 74 deletions
--- a/client/src/templates/Challenges/projects/SolutionForm.js
+++ b/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 backEndFields = ['solution', 'githubLink'];
+const challengeFields = ['solution'];
+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:
-              'Link to GitHub repo, ex: https://github.com/camperbot/hello'
+            githubLink: '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;
--- a/client/src/templates/Challenges/projects/backend/Show.js
+++ b/client/src/templates/Challenges/projects/backend/Show.js
@@ -15,8 +15,7 @@ import {
  initTests,
  updateBackendFormValues,
  updateChallengeMeta,
-  updateProjectFormValues,
-  backendNS
+  updateSolutionFormValues
 } 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 { Form } from '../../../../components/formHelpers';
+import SolutionForm from '../SolutionForm';
 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
-};
-
-const formFields = ['solution'];
-const options = {
-  required: ['solution'],
-  types: {
-    solution: 'url'
-  },
-  placeholders: {
-    solution: 'Link to solution, ex: https://codepen.io/camperbot/full/oNvPqqo'
-  }
+  updateSolutionFormValues
 };

 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 ? (
-                  <Form
-                    buttonText={`${buttonCopy}`}
-                    formFields={formFields}
-                    id={backendNS}
-                    options={options}
-                    submit={this.handleSubmit}
-                  />
-                ) : (
-                  <ProjectForm
+                <SolutionForm
                  isFrontEnd={false}
+                  isProject={isBackEndProject}
                  onSubmit={executeChallenge}
-                    updateProjectForm={updateProjectFormValues}
+                  updateSolutionForm={values =>
+                    isBackEndProject
+                      ? updateSolutionFormValues(values)
+                      : updateBackendFormValues(values)
+                  }
                />
-                )}
                <ProjectToolPanel
                  guideUrl={getGuideUrl({ forumTopicId, title })}
                />
--- a/client/src/templates/Challenges/projects/frontend/Show.js
+++ b/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
-                  isFrontEnd={isFrontEnd}
+                <SolutionForm
+                  isFrontEnd={true}
+                  isProject={isFrontEndProject}
                  onSubmit={openCompletionModal}
-                  updateProjectForm={updateProjectFormValues}
+                  updateSolutionForm={updateSolutionFormValues}
                />
                <ProjectToolPanel
                  guideUrl={getGuideUrl({ forumTopicId, title })}
--- a/client/src/templates/Challenges/redux/completion-epic.js
+++ b/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({})))
  );
 }

--- a/client/src/templates/Challenges/redux/index.js
+++ b/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(
-  types.updateProjectFormValues
+export const updateSolutionFormValues = createAction(
+  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
    }),