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 { Form } from '../../../components/formHelpers';
import {
backEndProject,
frontEndProject,
pythonProject
} from '../../../../utils/challengeTypes';
const propTypes = {
isFrontEnd: PropTypes.bool,
isProject: PropTypes.bool,
challengeType: PropTypes.number,
description: PropTypes.string,
isSubmitting: PropTypes.bool,
onSubmit: PropTypes.func.isRequired,
updateSolutionForm: PropTypes.func.isRequired
};
const challengeFields = ['solution'];
const frontEndProjectFields = ['solution'];
const backEndProjectFields = ['solution', 'githubLink'];
const options = {
@ -35,25 +40,52 @@ export class SolutionForm extends Component {
this.props.onSubmit();
}
render() {
const { isSubmitting, isFrontEnd, isProject } = this.props;
const { isSubmitting, challengeType, description } = this.props;
const buttonCopy = isSubmitting
? 'Submit and go to my next 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 (
<Form
buttonText={`${buttonCopy}`}
formFields={
isProject && !isFrontEnd ? backEndProjectFields : challengeFields
}
id={isFrontEnd ? 'front-end-form' : 'back-end-form'}
formFields={solutionFormFields}
id={solutionFormID}
options={{
...options,
placeholders: {
solution:
'Link, ex: ' +
(isFrontEnd
? 'https://codepen.io/camperbot/full/oNvPqqo'
: 'https://camperbot.glitch.me'),
solution: solutionLink,
githubLink: 'ex: https://github.com/camperbot/hello'
}
}}

View File

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

View File

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

View File

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

View File

@ -14,7 +14,11 @@ const superBlockNames = [
'Front End Libraries',
'Data Visualization',
'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'
];
@ -36,7 +40,7 @@ describe('Learn Landing page', function() {
const superBlocks = document.querySelectorAll(
`${selectors.challengeMap} > ul > li`
);
expect(superBlocks).to.have.length(7);
expect(superBlocks).to.have.length(11);
superBlocks.forEach((superBlock, idx) => {
expect(superBlock.innerText).to.have.string(superBlockNames[idx]);