fix(learn): update project views for python

pull/38526/head
Mrugesh Mohapatra 2020-05-22 03:24:17 +05:30
parent e21439d7e8
commit 9879d6e72b
5 changed files with 58 additions and 32 deletions

View File

@ -2,16 +2,21 @@ import React, { Component } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { Form } from '../../../components/formHelpers'; import { Form } from '../../../components/formHelpers';
import {
backEndProject,
frontEndProject,
pythonProject
} from '../../../../utils/challengeTypes';
const propTypes = { const propTypes = {
isFrontEnd: PropTypes.bool, challengeType: PropTypes.number,
isProject: PropTypes.bool, description: PropTypes.string,
isSubmitting: PropTypes.bool, isSubmitting: PropTypes.bool,
onSubmit: PropTypes.func.isRequired, onSubmit: PropTypes.func.isRequired,
updateSolutionForm: PropTypes.func.isRequired updateSolutionForm: PropTypes.func.isRequired
}; };
const challengeFields = ['solution']; const frontEndProjectFields = ['solution'];
const backEndProjectFields = ['solution', 'githubLink']; const backEndProjectFields = ['solution', 'githubLink'];
const options = { const options = {
@ -35,25 +40,52 @@ export class SolutionForm extends Component {
this.props.onSubmit(); this.props.onSubmit();
} }
render() { render() {
const { isSubmitting, isFrontEnd, isProject } = this.props; const { isSubmitting, challengeType, description } = this.props;
const buttonCopy = isSubmitting const buttonCopy = isSubmitting
? 'Submit and go to my next challenge' ? 'Submit and go to my next challenge'
: "I've completed this challenge"; : "I've completed this challenge";
let solutionFormFields = frontEndProjectFields;
let solutionLink = 'Link, ex: ';
let solutionFormID = 'front-end-form';
switch (challengeType) {
case frontEndProject:
solutionFormFields = frontEndProjectFields;
solutionLink =
solutionLink + 'https://codepen.io/camperbot/full/oNvPqqo';
break;
case backEndProject:
solutionFormFields = backEndProjectFields;
solutionLink = solutionLink + 'https://camperbot.glitch.me';
solutionFormID = 'back-end-form';
break;
case pythonProject:
solutionFormFields = frontEndProjectFields;
solutionLink =
solutionLink +
(description.includes('Colaboratory')
? 'https://colab.research.google.com/drive/1i5EmInTWi1RFvFr2_aRXky96YxY6sbWy'
: 'https://repl.it/@camperbot/hello');
break;
default:
solutionFormFields = frontEndProjectFields;
solutionLink =
solutionLink + 'https://codepen.io/camperbot/full/oNvPqqo';
}
return ( return (
<Form <Form
buttonText={`${buttonCopy}`} buttonText={`${buttonCopy}`}
formFields={ formFields={solutionFormFields}
isProject && !isFrontEnd ? backEndProjectFields : challengeFields id={solutionFormID}
}
id={isFrontEnd ? 'front-end-form' : 'back-end-form'}
options={{ options={{
...options, ...options,
placeholders: { placeholders: {
solution: solution: solutionLink,
'Link, ex: ' +
(isFrontEnd
? 'https://codepen.io/camperbot/full/oNvPqqo'
: 'https://camperbot.glitch.me'),
githubLink: 'ex: https://github.com/camperbot/hello' githubLink: 'ex: https://github.com/camperbot/hello'
} }
}} }}

View File

@ -34,7 +34,6 @@ import { isSignedInSelector } from '../../../../redux';
import Hotkeys from '../../components/Hotkeys'; import Hotkeys from '../../components/Hotkeys';
import '../../components/test-frame.css'; import '../../components/test-frame.css';
import { backEndProject } from '../../../../../utils/challengeTypes';
const propTypes = { const propTypes = {
challengeMounted: PropTypes.func.isRequired, challengeMounted: PropTypes.func.isRequired,
@ -156,12 +155,10 @@ export class BackEnd extends Component {
}, },
tests, tests,
executeChallenge, executeChallenge,
updateSolutionFormValues,
updateBackendFormValues updateBackendFormValues
} = this.props; } = this.props;
const blockNameTitle = `${blockName} - ${title}`; const blockNameTitle = `${blockName} - ${title}`;
const isBackEndProject = challengeType === backEndProject;
return ( return (
<Hotkeys <Hotkeys
@ -182,14 +179,9 @@ export class BackEnd extends Component {
instructions={instructions} instructions={instructions}
/> />
<SolutionForm <SolutionForm
isFrontEnd={false} challengeType={challengeType}
isProject={isBackEndProject}
onSubmit={executeChallenge} onSubmit={executeChallenge}
updateSolutionForm={values => updateSolutionForm={updateBackendFormValues}
isBackEndProject
? updateSolutionFormValues(values)
: updateBackendFormValues(values)
}
/> />
<ProjectToolPanel <ProjectToolPanel
guideUrl={getGuideUrl({ forumTopicId, title })} guideUrl={getGuideUrl({ forumTopicId, title })}

View File

@ -13,7 +13,6 @@ import {
openModal, openModal,
updateSolutionFormValues updateSolutionFormValues
} from '../../redux'; } from '../../redux';
import { frontEndProject } from '../../../../../utils/challengeTypes';
import { getGuideUrl } from '../../utils'; import { getGuideUrl } from '../../utils';
import LearnLayout from '../../../../components/layouts/Learn'; import LearnLayout from '../../../../components/layouts/Learn';
@ -108,7 +107,6 @@ export class Project extends Component {
updateSolutionFormValues updateSolutionFormValues
} = this.props; } = this.props;
const isFrontEndProject = challengeType === frontEndProject;
const blockNameTitle = `${blockName} - ${title}`; const blockNameTitle = `${blockName} - ${title}`;
return ( return (
@ -127,8 +125,8 @@ export class Project extends Component {
<ChallengeTitle>{blockNameTitle}</ChallengeTitle> <ChallengeTitle>{blockNameTitle}</ChallengeTitle>
<ChallengeDescription description={description} /> <ChallengeDescription description={description} />
<SolutionForm <SolutionForm
isFrontEnd={true} challengeType={challengeType}
isProject={isFrontEndProject} description={description}
onSubmit={openCompletionModal} onSubmit={openCompletionModal}
updateSolutionForm={updateSolutionFormValues} updateSolutionForm={updateSolutionFormValues}
/> />

View File

@ -24,7 +24,7 @@ import {
challengeMounted, challengeMounted,
updateChallengeMeta, updateChallengeMeta,
openModal, openModal,
updateProjectFormValues updateSolutionFormValues
} from '../redux'; } from '../redux';
// Styles // Styles
@ -42,7 +42,7 @@ const mapDispatchToProps = dispatch =>
{ {
updateChallengeMeta, updateChallengeMeta,
challengeMounted, challengeMounted,
updateProjectFormValues, updateSolutionFormValues,
openCompletionModal: () => openModal('completion') openCompletionModal: () => openModal('completion')
}, },
dispatch dispatch
@ -61,7 +61,7 @@ const propTypes = {
challengeMeta: PropTypes.object challengeMeta: PropTypes.object
}), }),
updateChallengeMeta: PropTypes.func.isRequired, updateChallengeMeta: PropTypes.func.isRequired,
updateProjectFormValues: PropTypes.func.isRequired updateSolutionFormValues: PropTypes.func.isRequired
}; };
// Component // Component

View File

@ -14,7 +14,11 @@ const superBlockNames = [
'Front End Libraries', 'Front End Libraries',
'Data Visualization', 'Data Visualization',
'APIs and Microservices', 'APIs and Microservices',
'Information Security and Quality Assurance', 'Quality Assurance',
'Scientific Computing with Python',
'Data Analysis with Python',
'Information Security',
'Machine Learning with Python',
'Coding Interview Prep' 'Coding Interview Prep'
]; ];
@ -36,7 +40,7 @@ describe('Learn Landing page', function() {
const superBlocks = document.querySelectorAll( const superBlocks = document.querySelectorAll(
`${selectors.challengeMap} > ul > li` `${selectors.challengeMap} > ul > li`
); );
expect(superBlocks).to.have.length(7); expect(superBlocks).to.have.length(11);
superBlocks.forEach((superBlock, idx) => { superBlocks.forEach((superBlock, idx) => {
expect(superBlock.innerText).to.have.string(superBlockNames[idx]); expect(superBlock.innerText).to.have.string(superBlockNames[idx]);