fix: project views and icons for intros (#36811)

client/src/templates/Challenges/projects/ProjectForm.js

@@ -0,0 +1,72 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+import { Form } from '../../../components/formHelpers';
+
+const propTypes = {
+  isFrontEnd: PropTypes.bool,
+  isSubmitting: PropTypes.bool,
+  onSubmit: PropTypes.func.isRequired,
+  updateProjectForm: PropTypes.func.isRequired
+};
+
+const frontEndFields = ['solution'];
+const backEndFields = ['solution', 'githubLink'];
+
+const options = {
+  types: {
+    solution: 'url',
+    githubLink: 'url'
+  },
+  required: ['solution', 'githubLink']
+};
+
+export class ProjectForm extends Component {
+  constructor(props) {
+    super(props);
+    this.handleSubmit = this.handleSubmit.bind(this);
+  }
+  componentDidMount() {
+    this.props.updateProjectForm({});
+  }
+  componentDidUpdate() {
+    this.props.updateProjectForm({});
+  }
+  componentWillUnmount() {
+    this.props.updateProjectForm({});
+  }
+  handleSubmit(values) {
+    this.props.updateProjectForm(values);
+    this.props.onSubmit();
+  }
+  render() {
+    const { isSubmitting, isFrontEnd } = this.props;
+    const buttonCopy = isSubmitting
+      ? 'Submit and go to my next challenge'
+      : "I've completed this challenge";
+    return (
+      <Form
+        buttonText={`${buttonCopy}`}
+        formFields={isFrontEnd ? frontEndFields : backEndFields}
+        id={isFrontEnd ? 'front-end-form' : 'back-end-form'}
+        options={{
+          ...options,
+          placeholders: {
+            solution:
+              'Link to solution, ex: ' +
+              (isFrontEnd
+                ? 'https://codepen.io/camperbot/full/oNvPqqo'
+                : 'https://camperbot.glitch.me'),
+            githubLink:
+              'Link to GitHub repo, ex: https://github.com/camperbot/hello'
+          }
+        }}
+        submit={this.handleSubmit}
+      />
+    );
+  }
+}
+
+ProjectForm.propTypes = propTypes;
+
+export default ProjectForm;