feat: convert solutionForm to ts (#42766)

* feat: convert solutionForm to ts

Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

client/src/components/formHelpers/Form.js

@@ -23,7 +23,11 @@ const propTypes = {
     ignored: PropTypes.arrayOf(PropTypes.string),
     isEditorLinkAllowed: PropTypes.bool,
     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
 };

client/src/templates/Challenges/projects/backend/Show.tsx

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

client/src/templates/Challenges/projects/frontend/Show.tsx

@@ -28,7 +28,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 SolutionForm from '../SolutionForm';
+import SolutionForm from '../solution-form';
 import ProjectToolPanel from '../tool-panel';
 import CompletionModal from '../../components/completion-modal';
 import HelpModal from '../../components/HelpModal';

client/src/templates/Challenges/projects/solution-form.tsx

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
+import type { WithTranslation } from 'react-i18next';
 
 import { Form } from '../../../components/formHelpers';
 import {
@@ -10,25 +10,34 @@ import {
   pythonProject
 } 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);
     this.handleSubmit = this.handleSubmit.bind(this);
   }
-  componentDidMount() {
+
+  componentDidMount(): void {
     this.props.updateSolutionForm({});
   }
 
-  handleSubmit(validatedValues) {
+  handleSubmit = (validatedValues: ValidatedValues): void => {
     // Do not execute challenge, if errors
     if (validatedValues.errors.length === 0) {
       // updates values on store
@@ -39,10 +48,10 @@ export class SolutionForm extends Component {
         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
     const solutionField = [
@@ -53,6 +62,8 @@ export class SolutionForm extends Component {
       { name: 'githubLink', label: t('learn.github-link') }
     ];
 
+    const buttonCopy = t('learn.i-completed');
+
     const options = {
       types: {
         solution: 'url',
@@ -63,10 +74,6 @@ export class SolutionForm extends Component {
       isLocalLinkAllowed: false
     };
 
-    const buttonCopy = isSubmitting
-      ? t('learn.submit-and-go')
-      : t('learn.i-completed');
-
     let formFields = solutionField;
     let solutionLink = 'ex: ';
     let solutionFormID = 'front-end-form';
@@ -95,7 +102,7 @@ export class SolutionForm extends Component {
         options.isEditorLinkAllowed = true;
         solutionLink =
           solutionLink +
-          (description.includes('Colaboratory')
+          (description?.includes('Colaboratory')
             ? 'https://colab.research.google.com/drive/1i5EmInTWi1RFvFr2_aRXky96YxY6sbWy'
             : 'https://replit.com/@camperbot/hello');
         break;
@@ -124,6 +131,4 @@ export class SolutionForm extends Component {
   }
 }
 
-SolutionForm.propTypes = propTypes;
-
 export default withTranslation()(SolutionForm);