feat: convert solutionForm to ts (#42766)

* feat: convert solutionForm to ts

Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>
This commit is contained in:
Sem Bauke
2021-07-07 10:38:58 +02:00
committed by GitHub
parent f7d4206d08
commit d23b86f77b
4 changed files with 35 additions and 26 deletions

View File

@ -23,7 +23,11 @@ const propTypes = {
ignored: PropTypes.arrayOf(PropTypes.string), ignored: PropTypes.arrayOf(PropTypes.string),
isEditorLinkAllowed: PropTypes.bool, isEditorLinkAllowed: PropTypes.bool,
required: PropTypes.arrayOf(PropTypes.string), required: PropTypes.arrayOf(PropTypes.string),
types: PropTypes.objectOf(PropTypes.string) types: PropTypes.objectOf(PropTypes.string),
placeholders: PropTypes.shape({
solution: PropTypes.string,
githubLink: PropTypes.string
})
}), }),
submit: PropTypes.func.isRequired submit: PropTypes.func.isRequired
}; };

View File

@ -31,7 +31,7 @@ import Output from '../../components/output';
import CompletionModal from '../../components/completion-modal'; import CompletionModal from '../../components/completion-modal';
import HelpModal from '../../components/HelpModal'; import HelpModal from '../../components/HelpModal';
import ProjectToolPanel from '../tool-panel'; import ProjectToolPanel from '../tool-panel';
import SolutionForm from '../SolutionForm'; import SolutionForm from '../solution-form';
import Spacer from '../../../../components/helpers/spacer'; import Spacer from '../../../../components/helpers/spacer';
import { import {
ChallengeNodeType, ChallengeNodeType,

View File

@ -28,7 +28,7 @@ import LearnLayout from '../../../../components/layouts/learn';
import ChallengeTitle from '../../components/challenge-title'; import ChallengeTitle from '../../components/challenge-title';
import ChallengeDescription from '../../components/Challenge-Description'; import ChallengeDescription from '../../components/Challenge-Description';
import Spacer from '../../../../components/helpers/spacer'; import Spacer from '../../../../components/helpers/spacer';
import SolutionForm from '../SolutionForm'; import SolutionForm from '../solution-form';
import ProjectToolPanel from '../tool-panel'; import ProjectToolPanel from '../tool-panel';
import CompletionModal from '../../components/completion-modal'; import CompletionModal from '../../components/completion-modal';
import HelpModal from '../../components/HelpModal'; import HelpModal from '../../components/HelpModal';

View File

@ -1,6 +1,6 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { withTranslation } from 'react-i18next'; import { withTranslation } from 'react-i18next';
import type { WithTranslation } from 'react-i18next';
import { Form } from '../../../components/formHelpers'; import { Form } from '../../../components/formHelpers';
import { import {
@ -10,25 +10,34 @@ import {
pythonProject pythonProject
} from '../../../../utils/challengeTypes'; } from '../../../../utils/challengeTypes';
const propTypes = { interface SubmitProps {
challengeType: PropTypes.number, isShouldCompletionModalOpen: boolean;
description: PropTypes.string, }
isSubmitting: PropTypes.bool,
onSubmit: PropTypes.func.isRequired,
t: PropTypes.func.isRequired,
updateSolutionForm: PropTypes.func.isRequired
};
export class SolutionForm extends Component { interface FormProps extends WithTranslation {
constructor(props) { challengeType: number;
description?: string;
onSubmit: (arg0: SubmitProps) => void;
updateSolutionForm: (arg0: Record<string, unknown>) => void;
}
interface ValidatedValues {
errors: string[];
invalidValues: string[];
values: Record<string, unknown>;
}
export class SolutionForm extends Component<FormProps> {
constructor(props: FormProps) {
super(props); super(props);
this.handleSubmit = this.handleSubmit.bind(this); this.handleSubmit = this.handleSubmit.bind(this);
} }
componentDidMount() {
componentDidMount(): void {
this.props.updateSolutionForm({}); this.props.updateSolutionForm({});
} }
handleSubmit(validatedValues) { handleSubmit = (validatedValues: ValidatedValues): void => {
// Do not execute challenge, if errors // Do not execute challenge, if errors
if (validatedValues.errors.length === 0) { if (validatedValues.errors.length === 0) {
// updates values on store // updates values on store
@ -39,10 +48,10 @@ export class SolutionForm extends Component {
this.props.onSubmit({ isShouldCompletionModalOpen: false }); this.props.onSubmit({ isShouldCompletionModalOpen: false });
} }
} }
} };
render() { render(): JSX.Element {
const { isSubmitting, challengeType, description, t } = this.props; const { challengeType, description, t } = this.props;
// back end challenges and front end projects use a single form field // back end challenges and front end projects use a single form field
const solutionField = [ const solutionField = [
@ -53,6 +62,8 @@ export class SolutionForm extends Component {
{ name: 'githubLink', label: t('learn.github-link') } { name: 'githubLink', label: t('learn.github-link') }
]; ];
const buttonCopy = t('learn.i-completed');
const options = { const options = {
types: { types: {
solution: 'url', solution: 'url',
@ -63,10 +74,6 @@ export class SolutionForm extends Component {
isLocalLinkAllowed: false isLocalLinkAllowed: false
}; };
const buttonCopy = isSubmitting
? t('learn.submit-and-go')
: t('learn.i-completed');
let formFields = solutionField; let formFields = solutionField;
let solutionLink = 'ex: '; let solutionLink = 'ex: ';
let solutionFormID = 'front-end-form'; let solutionFormID = 'front-end-form';
@ -95,7 +102,7 @@ export class SolutionForm extends Component {
options.isEditorLinkAllowed = true; options.isEditorLinkAllowed = true;
solutionLink = solutionLink =
solutionLink + solutionLink +
(description.includes('Colaboratory') (description?.includes('Colaboratory')
? 'https://colab.research.google.com/drive/1i5EmInTWi1RFvFr2_aRXky96YxY6sbWy' ? 'https://colab.research.google.com/drive/1i5EmInTWi1RFvFr2_aRXky96YxY6sbWy'
: 'https://replit.com/@camperbot/hello'); : 'https://replit.com/@camperbot/hello');
break; break;
@ -124,6 +131,4 @@ export class SolutionForm extends Component {
} }
} }
SolutionForm.propTypes = propTypes;
export default withTranslation()(SolutionForm); export default withTranslation()(SolutionForm);