fix(learn): update project views for python
parent
e21439d7e8
commit
9879d6e72b
|
@ -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'
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
|
|
|
@ -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 })}
|
||||||
|
|
|
@ -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}
|
||||||
/>
|
/>
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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]);
|
||||||
|
|
Loading…
Reference in New Issue